How To Reduce Babylonjs File Size?

[MarianG]

Hi guys. I'm back in bussiness :))

And I have a new nightmare. So let me explain....

I have a babylonjs file, around of 10mb, It has 5mb without animation, and with one animation it have 10mb. Now a have to add 4 more animations on it, so it's not too good:).

On Edge or Chrome it's loading fast, but using browsers like mozilla and safari, i'm asleeping.

So I tested all the exporters, and 3dsmax, without "Do not optimize animations" checked, and with "Try to optimize vertices" checked, export the smallest file. 

But what I can remove more, because, it is still too big, and it has only 65k vertices.

Thanks a lot. 

[JCPalmer]

65k vertices is quite a lot.  Can you see the entire mesh all at once in the scene?  If so, few would notice if you had less.

In Blender, limited dissolve does a good job.  I assume you have an armature.  Can you reduce your maximum # of influencers? 

If you are doing flat shading, then can you do it post import?

[gryff]

@bulisor : how many frames of animation and if using an armature how big?

My "Blue Lady" animated figure has 32 bones and 900 frames of animation and using @JCPalmer : BE v4.6.1 shrank the file size from 7Mb to 2.5Mb.

Mind you, the "Lady" was not 65k verts.

Quote

It has 5mb without animation

If you are using a rig for your animation - is a skeleton included in the 5Mb? Or does the rig/skeleton  come with the animation you are adding and only needs to be added once? 

cheers, gryff

 

[Pryme8]

65k verts is a nightmare...

Umm retopo the model and then once you have your Babylon file there are lossless compression you could pass it through that match key pairs in the data.  You could save on file size but then will have to decompress before usage which could effectively take just as long if not longer.

best bet is to get a 3d artist to re do the topo like lets put it this way my guy I made for my FPS once fully clothed is still only 5k verts.

Good 3d modeling will be your friend.  It is never the correct thing, to supply a 65k vert model, that is completely at the limits of GL and you are hogging all your resources for something that is completely unnecessary.

 

[MarianG]

Hi. That stats look promissing.

But the first problem is that I don't know how to use Blender :)) 

I try, simply to import fbx, and then export babylonjs, but I got 3 warnings, and one fatal error, so I think I have to see some tuts about it, and then use it :)).

[gryff]

@bulisor :If you want to post your file somewhere (.blend or .fbx), I will take a look at it.

cheers, gryff

[gryff]

@bulisor : Well I took a look at your model - a rigged, winged figure.

The length of the animation should not be a problem - it is only 70 frames of animation  - but:

1. The number of bones are 70 (with 34 bones in the hands). I try to work with around 34 or less bones total. @JCPalmer : I think likes to work with less than 30 bones. There seem to be key frames for all those bones

2. The wings are made up of 4 meshes - "feather small, medium, large and body" which account for 45.62k vertices. Almost 2/3 of the total vertices in your model. Just the  "feathers small" account for 35k verts - over half the total.

So to improve your file size, you are going to have to figure out 1) a way reduce the number of bones and 2) reduce the verts in the feathers.particularly "feathers small".

cheers, gryff

 

[dbawel]

@bulisor - I didn't see any link to a file, scene, or playground - so I assume @gryff is probably referencing a link messaged to him. Anyway, you don't need to know Blender necessarily, as you can always work in another package, and import your FBX file into Blender as a last step for exporting your scene to .babylon - which is what I typically do for my characters and often scenes as I prefer the FBX ascii file format - since it is intuitive to edit, and provides me additional options to easily customize scenes with little effort. In reading @gryff's response, I can only imagine the model you're working with and pushing the limits of WebGL. If there are any vertices beyond what might make up simple planer objects to map feathers using alpha channels in your textures, then you are most likely using resources unnecessarily.

And once you get close to reaching the limits of verts and bones, your performance decreases more dramatically than you might expect. So as everyone answering is eluding to in their responses, you definately want to stay far below the limits, as your performance is impacted greatly even working within the acceptable margins. So most users stay far below what might appear to be "safe" limits within the WebGL limitations on objects, textures, and memory - as everything is calculated as float64 in WebGL.

Also, keep in mind that many applications use z-axis up for their world space such as Unity and 3DS Max, so make certain you modify your files or adapt your object's axis' and animation to work within the y axis up world space of WebGL. Using the free FBX converter/viewer, you'll be able to convert between ascii and binary FBX, as well as to quickly view your FBX files and their scene and object orientation prior to importing into Blender and converting your scenes to the .babylon format. And I find that a limited understanding of Blender is useful, and have been doing more and more work in Blender lately - working between Autodesk applications and Blender - since the FBX file format is far more compatable for most all scene elements than any other file format I've worked with.

DB

[gryff]

2 hours ago, dbawel said:

And I find that a limited understanding of Blender is useful, and have been doing more and more work in Blender lately

@dbawel : david a convert ? Well maybe not

Anyway you are right, I got the file through a PM. The image below is the "small feathers" . As @Pryme8 says above - with 35K verts (feather by feather)- a candidate for retopology..

cheers, gryff

[Pryme8]

Oh dude, there is no reason for a model like that.. here ill do you a favor, send me that model ill do a quick retopo for you.

bet I can get that down to under 200 polys

[aWeirdo]

@bulisor

Wow.. a model like that is not suiteable for any kind of game

The entire wing base could be made of a single mesh with a single texture.

if you have odd feathers, sticking out/up/down and stuff they can be produced with a single, flat plane mesh aswell with a feather texture.

To get an idea, see this fern. If you made this fern like you made your wings, it would easily reach 20k+ polys

[JCPalmer]

Perhaps, you could use the existing geometry to bake yourself textures: diffuse (Textures in Blender bake type) & bump(Normals in Blender bake type).  I cannot help with this too much.  I am currently finishing up a TOB utility operation (button) which allows you to downsize your textures.  Baking alpha into textures, at least from python, is very involved.  Here is UI:

Knowing how to do stuff like moving very detailed geometry into textures, is extremely valuable though.  As you can just walk through walls if you can.

[dbawel]

@bulisor - even though the wing models are not what you want to use for a real-time character - or necessary for a WebGL character at this point in time for WebGL - I have to compliment you on the quality of modelling as the poly count is used well to create nicely detailed feather models. If indeed you medelled these yourself. And since you already have the models built, I personally would use rendered images of these for some of the texture channels you will be using to create optimized low poly textured versions of the wings to replace the currently "high" poly wing models. So instead of buildig new textures with alpha channels from "scratch" using Photoshop or some other paint application, I would render the images in your orthographic viewports with shaders specific to create really nice bump and other texture maps to bring out the true detail you've already built into the wing models. Then in Photoshop or another app you can quicly modify the orthographic viewport renders to create highly detailed texture map channels which will then look the same or even better than rendering the wing models in the babylon.js renderer.

And @gryff - I can't say that I'm a "convert" to Blender, as the workflow is simply very different to the years spent working in other 3D applications. However, I'm a HUGE fan of Blender as it provides everyone with awesome tools which are as good as practically any other 3D application - and without having to dish out thousands of dollars to provide virtually the same or similar quality and tools as most any Autodesk or other 3D application. The only exception in my opinion is MotionBuilder, as it provides very unique tools which if you can afford it, will save any user working with character animation (as well as any proceedural animation) countless hours as well as dramatically improve the quality of most all character animation - including real-time facial animation without the need for using motion capture. Otherwise, I recommend Blender to anyone and everyone developing in WebGL and specifically babylon.js, and will personally pass almost every scene I creae through Blender in converting to the .babylon file format; especially with the exceptional work and support that @JCPalmer applys to the babylon.js pipeline which is used by probably more than 80% of the babylon.js community. And his new TOB utility and the functionality and control within the UI looks AWESOME!

The only issue I have with Blender (which is strictly a personal issue) is that the methodology they adopted and use as their workflow and pipeline - is unique to Blender - which is definately not a negative. However, aside from simply a few tools and features, Blender is as good as any 3D software application on the market, and provides the same level of quality as well as a complete set of features for 3D artists working in character animation and VFX, which no one could ever say is not just as good as any other software on the market costing "mucho dinero." So much respect needs to go to Ton Roosendaal and the now defunct Dutch animation production group "Neo Geo" for not only developing the Blender software, but following the sale of Neo Geo, releasing it to the public as well as all source code for anyone to use and further develop; and maintaining support through blender.org which often provides the only resource for creating quality 3D characters and high quality graphics to anyone with access to a computer. I've personally donated to blender.org on several occasions, and long before I ever used the software myself; and I hope others on this forum will do the same whenever they are able to give back financially in support of open source software; and specifically Blender which has been such an integral and unique tool within the open source community.

Anyway, I thought I'd put in my "two cents" on this as the question concerning the optimization of the winged character appears to be answered. Although, if there's anything I might be able to add or assist with, please let me know as I can generally provide some value to optimizing characters and the quality of animation since I must admit I've been around the block a few times now, and even wrote a few of the tools now standard in MotionBuilder (formally known as Filmbox by Kaydara.) And I'm sure I've mentioned this before, but I'm old enough to actually have been the very first person to purchase the very first Filmbox (MotionBuilder) license from Kaydara long before Autodesk ever heard the name "Filmbox." and Alias/Wavefront bought the software long before Autodesk thought it worthwhile. So as I've advocated before, I highly recommend downloading the fully functional trial version of MotionBuilder which is licensed for 30 days - just to perhaps understand why I and others wouldn't ever want to ever attempt developing a character based game without MB as a key tool in the pipeline - not only to save countless hours and even months of work, but to provide the highest quality possible in creating move trees as well as all other details of character animation. And not only for games, but ALL of the Matrix facial animation was produced in MB - which I can personal speak to as the Facial Animation Supervisor for the films and the 2 Shiny Games we produced simultaniously with the films. And most recently, the facial animation for the Hobbit films - using most all native tools which ship with MB - and which I mention this not to boast in ANY way at all - honestly - but simply to try to encourage and to offer help to anyone who is interested in upping their game (no pun intended) and the quality of their characters; which I would be very happy to provide ANY help with character body and facial animation using MotionBuilder and the tools which ship with the software. And I can certainly provide additional tools and methods which will set anyone's characters above what everyone else is doing in any other framework aside from babylon.js. 

So just ask, and I'll make the time if my help is of value in any way. OK enough on MB and Blender - however, I'll say it again: Blender is AWSOME. And if there's any more to discuss on the optimization of the winged character, we're all here to help make sure that @bulisor's game is an awesome experience. And already looking at the winged character, I expect great things to come. So @gryff - I hope my stance on Blender is clear. If not, then I just wasted 45 minutes typing a bunch of self-serving BS. But I certainly hope it's not taken that way, and as I mentioned already, I think we're going to see more great things come from @bulisor in the near future.

Cheers,

DB

[Nabroski]

log in a 3d modelling forum, pay a 15y old 20bucks leave him for one week alone. 

[MarianG]

Huh guys. Thank you very much for your support. I was in an unexpected holliday :))

The  feathers was bought from a specific website, and I export it in babylonjs, without modify, and have a fairly complex skeleton attach to it,

I will talk with one of my team mate, to help me to reduce it as much as possible.

Thanks you again, your advices was extremely useful.

 

[Pryme8]

also you could do this:
https://github.com/pace-noge/code-fights/blob/master/drop_bot_losslesscompression.txt

[MrVR]

On 8/17/2016 at 2:37 AM, dbawel said:

offer help to anyone who is interested in upping their game (no pun intended) and the quality of their characters; which I would be very happy to provide ANY help with character body and facial animation using MotionBuilder and the tools which ship with the software. And I can certainly provide additional tools and methods which will set anyone's characters above what everyone else is doing in any other framework aside from babylon.js. 

HI Mr @dbawel

 I have been trying to animate characters coming from Iclone-6  (for months already ),

I read your motion builder post last night and I got motion-builder to rig a G6 character here is the video I used for that, 

Once I process my FBX (scii or binary I use 3dExchange to convert  into FBX for MB or unity3d)

I'm currently installing 3D-smax-2016 because I try 3Ds-max-2017 but export plugin dos not work I get an error after I drop the files in the assemblies folder.

HERE is a LINK with the FBX files already rigged.

The first one is in motion builder with the animation.

The other 2 are ready to be imported into unity, blender, 3dsmax.

Can you please point me in the right direction to export and play the character animation,

I try with the new UNITY exporter and I have some errors already;  @MackeyK24 is the author of the new exportation toolkit, I want to find the way to export from unity and play the animations on an scene controller script

 

 

UPDATE QUESTION 

 

BLENDER EXPORT EXPERIMENT

On blender I export my BJS file with the animation here is a link for the export log and files;  this process took 1 hour approx to create the file.

The file I created is too big like 600000 lines of code, I will remove the head bones and some unused bones to lower the files size.

And here is an animation url that works exported from blender and the file is here at this link you can dump the file at http://www.jsoneditoronline.org/ to see on tree mode the structure.

 

---BLENDER UPDATE SMALLER BJS FILE NOW ANIMATING

I rigged a simpler one with babylon less bones and vertices, you can see the animation frames attached in the sharky.babylon file 

Im trying to use this code below to make the animation run but i dont find the bones when Im debugging but if you drop the file inside http://babylonjs.com/sandbox/ you will see the motion

  BABYLON.SceneLoader.ImportMesh("sharky", "Scenes/", "sharky.babylon", this.scene, function (newMeshes, particleSystems, skeletons) {
        var dude = newMeshes[0];
        skeletons[0].beginAnimation("Shark_01|Shark_FastSwim",true, .5);        
    });

 

UNITY EXPORT

For unity I created an non standard Please download the rigged character unity package---> (susan.unitypackage).

 I get errors after the export in the console here is the unity package.

BJS - [14:59:11]: Babylon.js engine (v2.5) launched

babylon.js:3 BJS - [14:59:14]: Unable to compile effect: t._ErrorEnabled @ babylon.js:3

babylon.js:3 BJS - [14:59:14]: Defines: #define ALBEDO
#define REFLECTIVITY
#define BUMP
#define UV1
#define UV2
#define NUM_BONE_INFLUENCERS 4
#define BonesPerMesh 64
#define MICROSURFACEFROMREFLECTIVITYMAP
#define EMISSIVEASILLUMINATION
#define USEPHYSICALLIGHTFALLOFF
#define RADIANCEOVERALPHA

t._ErrorEnabled 
babylon.js:3 BJS - [14:59:14]: Error: ERROR: too many uniforms

BJS - [14:59:14]: Vertex shader:pbrt._ErrorEnabled 

BJS - [14:59:14]: Fragment shader:pbrt._ErrorEnabled  
 

BJS - [14:59:14]: Trying next fallback.

Please let me know what do you think

thank you

 

 

[dbawel]

@MrVR -

Unfortunately, it is not as straight forward as it should be using FBX. You need to import your FBX file into Blender, and then export a .babylon file to babyon.js. However, your materials and textures will not import correctly, so you will need to rebuild them in javascript for babylon.js. However, the most important and difficult element is the animation, which should import correctly into Blender. If you have any issues importing your animation into Blender, please post again, and there are many users including myself that can help to assure your animation exports correctly into babylon.js.

If you weren't trying to export animation, then .OBJ is currently the best way to go. But since you have animation, then FBX is currently the best solution. However, you might need to pass your FBX file through the free FBX export tool and viewer which can be downloaded from the Autodesk site. So if you don't see your animation in Blender, then pass it through the FBX converter, and you should be able to view your animation in Blender - but you MUST pass your FBX files through Blender as it is the best exporter to .babylon to date.

Cheers,

DB

EDIT - also please rmember tht you can bind no more than 4 bones to any vertex in your mesh. Also, avoid 3dsMax as this only introduces ditional problems into the export at this time. Go straight from MB into Blender, then export directly from Blender. You can do your texturing and shading in bBlender and it should export correctly, but there is a learning curve and specific rules to follow. So I choose do add my mterilas and textures in my script - as it is simple to modify once you have your scene set up. Otherwise, you will be bouncing back and forth between other applications. Once your animation is working, you're set.

[JCPalmer]

@dbawel, as of 2.2 (I think), 8 is the maximum # of influencers per vertex.  Both 3dMax an Blender exporters support this.  Blender allows you to reduce though (do not know about 3dMax).  Influence is sorted high to low, throwing out the lowest when you specify a max lower than a vertex has. 

Having a max of 5-8 doubles your file & gpu space required for matrix indexes / weights though.  If you have 3% of your vertices needing 5 (check your log file), I would definitely attempt 4 to see if it was noticeable.

[MrVR]

On 1/5/2017 at 1:35 AM, dbawel said:

@MrVR -

Unfortunately, it is not as straight forward as it should be using FBX. You need to import your FBX file into Blender, and then export a .babylon file to babyon.js. However, your materials and textures will not import correctly, so you will need to rebuild them in javascript for babylon.js. However, the most important and difficult element is the animation, which should import correctly into Blender. If you have any issues importing your animation into Blender, please post again, and there are many users including myself that can help to assure your animation exports correctly into babylon.js.

If you weren't trying to export animation, then .OBJ is currently the best way to go. But since you have animation, then FBX is currently the best solution. However, you might need to pass your FBX file through the free FBX export tool and viewer which can be downloaded from the Autodesk site. So if you don't see your animation in Blender, then pass it through the FBX converter, and you should be able to view your animation in Blender - but you MUST pass your FBX files through Blender as it is the best exporter to .babylon to date.

Cheers,

DB

EDIT - also please rmember tht you can bind no more than 4 bones to any vertex in your mesh. Also, avoid 3dsMax as this only introduces ditional problems into the export at this time. Go straight from MB into Blender, then export directly from Blender. You can do your texturing and shading in bBlender and it should export correctly, but there is a learning curve and specific rules to follow. So I choose do add my mterilas and textures in my script - as it is simple to modify once you have your scene set up. Otherwise, you will be bouncing back and forth between other applications. Once your animation is working, you're set.

Hi @dbawel, Thanks for the reply, I have issues getting the character directly from Motion Builder to Babylon. when I try to export this are my options

The in  BlenderI get this erros I will keep trying using a third software to convert my MoionBuilder rigged FBX to a version babylon acepts, or do you have any other suggestions?

 

[Pryme8]

Export your model to a different convention sounds like spmrthing happened in the process.