optimizing

[Flomotion]

I'm trying to make my scene lighter because it keeps crashing on some phones (not on my iPhone 6 but unfortunately it does crash on iPhone 6 of client). So I'm wondering how to optimise my scene. I have many objects in it. Many of those objects I have created instances of.

Would it be a good idea to merge all objects? Or only objects that use the same textures?

And is it good to merge a group of instances of the same object? Or doesn't that make a difference?

And what about textures.. what is most demanding for the renderer and memory? Many textures or many objects or large textures?

Many questions.. just would like to find out what's the most important.

[jerome]

not easy to answer without the scene ... :-p

Well, the browser profiler is your friend , like the debug layer.

Try to catch where the CPU and the RAM are the most requested in the profiler.  You will have some hints at the JS function level

The debug layer will help you to understand how many objects, textures, and draw calls are managed and where the time is spent. So it's a good lead to reduce what is the most consuming (reducing draw calls has a huge immediate impact for instance). Those ara hints at the BJS (and a little at the WebGL) level

[OMAR]

There's been a similar discussion on the forums here: 

There is probably no such thing as "most important", usually it's the combination of many things that can "de-optimize" your WebGL apps.

Take care!  

 

[meteoritool]

Do you have lights ? shadows ? on your scene ?

[Flomotion]

Thanks for the replies. Here's the scene: http://spark.amsterdam/experienceiframe/floor-low.html

There are no shadows. 1 hemispheric light. Also did mesh.freezeWorldMatrix(); on all meshes.

In the discussion mentioned by @OMAR I saw:

- In a general manner, try to reduce or completely avoid instancing new objects because it adds pressure to the garbage collector (which is fully CPU based)

Since I make a lot of instances of single objects in the scene. Would it be better to connect them all and not instance them? It will make the babylon file a lot bigger to load.

Or would merging the instances help? I tried many things but no real difference in the debugger.

[meteoritool]

In my opinion (but I'm not super expert) instances are indeed better ! Using instances for geometries that are the same is at the same time clever and and makes your scene lighter !
I think you should instantiate as much as you can !
So, I've looked at you scene, very nice looking   using the debuglayer, after unchecking all options, the scene still hardly reaches 60fps even with my somewhat powerful computer ...

So there is indeed optimizing needed IMHO here... 

1 hour ago, Flomotion said:

- In a general manner, try to reduce or completely avoid instancing new objects because it adds pressure to the garbage collector (which is fully CPU based)

Be careful ! This piece of advice misses an important element : you shouldn't instance new objects, yes, but only AFTER the run(renderLoop) !!! You can set up anything you want BEFORE you run the renderloop ! It changes the sense of this advice obvy ;-)

Also, try to check what your scene "registers before render" to check how much it computes at each frame, some js/babylon objects could maybe exist OUTSIDE (before) the renderloop

PointLIghts and Shadows use a lot of power ... so you scene does not contain any of them, good ! Have you tried using Directionnal Light maybe ? I guess that wouldn't change a lot anyways :/

Have you tried to use LOD meshes ? setting sometimes mesh.addLODLevel(50, null) to make invisible meshes disappear is good ...
Have you tried to decimate meshes with too much/unnecessary vertices ?

If you use renderLists for mirror/water, try to make the list dynamic so that only visible meshes would be in the renderList

also maybe you could "control" the resolution of the screen, full rendering on my retina computer might be unnecessary ... 
Maybe try to downgrade the resolution and apply antialiasing  postprocess ? is it better ?

I don't have any other comment so far ... I myself LOVE the possibilities of BABYLON.js but that goes along with a lot of side-knowledges, I'm also looking for ways to optimize / deal with memory / etc... finally with time this framework is always very satisfying  look at the sponza demo, it might have some good tricks also, if you know how to backward-read code ! Good luck !

[adam]

2 hours ago, Flomotion said:

try to reduce or completely avoid instancing new objects

In other words, try to avoid creating new objects on every frame.  Don't confuse this with using instance meshes in BJS.

[fenomas]

Top three rules for optimization:

1. Profile
2. PROFILE
3. PROFILE!!!!!

Until you profile any attempts at optimization are just shots in the dark. There are a million things you could speed up, and 97% of them won't help because they're not part of the bottleneck!

So: open your scene in Chrome, hit ctrl+shifti+J to open the dev tools, then go to the "Profiles" tab and make sure "Collect JS CPU profile" is selected. Once there, hit the little start button in the upper left, wander around your scene a bit, then stop the profile (same button as before) and interpret the results.

If the GC is the issue (I'll bet you $50 it's not!) then the JS profile will say so. If the JS profile shows most of the time spent as "Idle" then CPU isn't the issue and you'll need to look at how you're stressing the GPU. Otherwise, you'll see where the JS is spending all its time. If it's in your app code then you have bugs to fix; if it's in the babylon code then knowing what's slow will give you hints what to fix. E.g. if it's spending all its time selecting objects to render then try using octrees. If it's spending all its time in transform functions try freezing the world matrices of objects that don't move, etc. And of course, if it's not really spending its time anywhere in particular, just spread out everywhere, then it may be that your scene is just really heavy.