Large scene performance

[tranlong021988]

hi everyone, I almost complete my first game with babylonjs(still missing collision): https://dl.dropboxusercontent.com/u/86585940/BabylonWave/index.html

But I facing some headache problems with performance on mobile, if you open my game in PC, fps look fine. But if you open it with mobile browser, you can notice that FPS not stable, it's usually around 20-40 and I can not firgure out how to make it 40-45. Already try some optimize solutions but no luck. 

This is what I have done for performance boosting, need your advice: 

- I 'm using 3ds Max as a editor to export 3D scene to Babylon format file, my scene have jet ski and lots of models (>700) but they just instances from 4 models (corner buoy, rope -buoy, island, tree), everyone say that using Instance will help reusing geomatrix but I'm not sure about limit numbers of instances. Many instances cause FPS drop or not ?

- I 'm not sure about Frustum Culling in BJS, so I use LOD as a trick to make Frustum-Culling-like, I want BJS render model nearby (with static distance). But I notice that some FPS drop moment happen when models appear in my fake Frustum Far Plane, so is there any way to make real Frustum Culling work ?  

- I read some document about Occlusion Culling with Octree. But document say that Octree only work with model that have submeshs and since my model is simple (low poly, no sub meshs), that mean Occlusion Culling will not work in my case ? 

- Anti alisas disabling do the trick, but not enough for me. 

- Any idea to make FPS much more stable, if FPS can not reach 40, I need it around 35-38. 

- I see a demo here with ThreeJS, they have much more complex scene but very smooth on mobile browser, how can they do this: http://helloracer.com/racer-s/ 

Thank you everyone.

Sorry for my poor English. 

[chicagobob123]

If the 4 models are simple you might try making each a solid particle system. 

This is only if they are simple models. (to be honest I am not sure where the cut off is)

Your English is fine.  

This is a thread to show what can be done with UV mapping and solid paritcles. 

 

This is a pretty nifty example. 

http://www.babylonjs-playground.com/#2FPT1A#91

I have ~15000 containers in the particle system and they are very light on the system. 

But the container is a SIMPLE box so your model may vary but 700 should be nothing. 

 

 

 

[tranlong021988]

@chicagobob123:  http://www.babylonjs-playground.com/#2FPT1A#91  , it seem amazing but PC only, in my Nexus 6, counter show 10 FPS.

But thank you pointing me, I'm finding some solutions to merge textures to single map, may be reducing draw calls will do new result. 

[GameMonetize]

hey

frustum culling is natively supported.

[dbawel]

THis is only my opinion, but I would seriously look at your textures. Many are optimized, but textures such as tini-island can be cut in half resolution and the scale set to -1 to invert the texture. If it were me, I would look at @chicagobob123 post, and try to integrate. However, I'm a big proponent of power of 2 textures in every way. Although WebGL doesn't appear to care, it does really matter in your memory and major garbage collection and certainly mapping onto meshes. 

[NasimiAsl]

9 hours ago, tranlong021988 said:

But if you open it with mobile browser, you can notice that FPS not stable, it's usually around 20-40 and I can not firgure out how to make it 40-45. Already try some optimize solutions but no luck. 

hi : modern mobiles all have x2 or x3 resolution it is good quality for one frame but when you render live need a powerful graphics but if you can resize your canvas to x1 and scale that to correct size you see fps is up to 60 and you have good quality too  test it it can be help

   canvas.style.width = x1.width;
   canvas.style.height =  x1.height; 

    renderer = new BABYLON.Engine( canvas, true);

    canvas.style.width = '100%';
    canvas.style.height = '100%';

[tranlong021988]

On 6/28/2016 at 4:51 AM, Deltakosh said:

hey

frustum culling is natively supported.

-> sorry, my mistake. I think "distance culling" is correct my mean. Yesterday I visit this http://helloracer.com/racer-s/ , I noticed that tree objects and road plane just display with static distance from camera. I don't know that trick affect performance or not, but it rendering really smooth on my mobile browser. 

On 6/29/2016 at 8:36 AM, dbawel said:

THis is only my opinion, but I would seriously look at your textures. Many are optimized, but textures such as tini-island can be cut in half resolution and the scale set to -1 to invert the texture. If it were me, I would look at @chicagobob123 post, and try to integrate. However, I'm a big proponent of power of 2 textures in every way. Although WebGL doesn't appear to care, it does really matter in your memory and major garbage collection and certainly mapping onto meshes. 

--> Thank you, I will take a look and optimize my design. 

On 6/29/2016 at 1:00 PM, NasimiAsl said:

hi : modern mobiles all have x2 or x3 resolution it is good quality for one frame but when you render live need a powerful graphics but if you can resize your canvas to x1 and scale that to correct size you see fps is up to 60 and you have good quality too  test it it can be help

   canvas.style.width = x1.width;
   canvas.style.height =  x1.height; 

    renderer = new BABYLON.Engine( canvas, true);

    canvas.style.width = '100%';
    canvas.style.height = '100%';

--> This is what I try:     

 var canvas = document.getElementById('canvas');
        canvas.style.width = "640px";
        canvas.style.height =  "480px"; 
        var engine = new BABYLON.Engine(canvas, false,null,false);
        canvas.style.width = '100%';
        canvas.style.height = '100%';

--> It seem huge performance increased though graphics quality look bad. 

https://dl.dropboxusercontent.com/u/86585940/BabylonWave/optimized/index.html

And I already try to merge textures of meshes to single texture (1024x1024), but I notice that draw calls not affect too much , it show 3-7 draw calls although every meshes using same material and texture. I used to do this trick with 2D game(Flash Starling), and it work well. May be something different between 2D and 3D. Or do I miss something ? 

[dbawel]

@tranlong021988 -

There is considerable additional calculations made when merging textures, and then parsing - even if they are power of 2 before parsing. I'm not suggesting that you don't consider merging textures into a single file, as this is certainly a method to optimize a scene, however, I see more CPU usage in doing this than in seperating all textures to power of two - however, I would personally do a test and simply seperate texture files to smaller individual files (not first considering power of 2), and you should notice an increase in CPU and memory performance - especially in major GC which will definately affect your fps rate. Once you have a baseline fps by simply seperating your textures using individual image files for textures (and not worrying yet about power of 2 image files) and also look at the differene in major GC from your initial scene in several different browsers (which I expect will be at least 15% difference in CPU latency for major GC); I would then modify your image files to as many power of 2 images as practical and look once again at CPU performance, major GC, and latency in general. 

And if you do take on this test and post the link to each step, then you will also have a community of users with many different hardware and browser versions providing data which will help you and the entire community - as these will be the only #s I'm aware of currently to provide how CPU latency based upon image properties and GC which right now is far from even a guess.

Doing all of this shouldn't take much time to test, but I would assume from my own experience, that you should expect to improve your fps by at least 4-5 fps on many mobile devices -  and perhaps more, as major GC (also minor GC but "mostly" major for image files) - and if you can improve by even a few fps, this is at least a start in improving your overall fps. This would also help the BJS community, as CPU latency due to CG and especially major GC is a topic that has frequently come up lately, and no one has yet to provide real statistics to show the differences in fps based upon how textures are created, applied, and adjusted to power of 2. Specific fps numbers from a test like this which you have the opportunity to do right now, would benefit everyone - and I may be incorrect, but I would be surprised as I've reviewed your scene if you didn't improve your mobile fps on average by at least 4-5 fps or possibly more. This is at least a start, and will tell you and many others what is currently happenning in browsers with how they handle image files which are not optimized - compared to optimized textures - and if you and other users test your scene and provide these following this method in as many popular browsers as possible at least (3 - 5), we should all learn valuable info as well.

I have more than 4 very different devices running on different platforms, and will certainly provide the data from both the scene with seperate textures (not power of 2), and the data from your scene using as many power of 2 textures as possible. And this will show us all allot for the first time in quite a while.

Cheers,

DB

EDIT - Also, 640 X 480 is far too low resolution to draw good anti-aliased lines - from looking at the textures and assets in your scene - as your scene was built for at least twice this resolution. I'd like to know what the difference in fps is from setting your canvas in 640 X 480, compared with a resolution such as 1200 X 780. This would provide us more info to perhaps give more and better advice on optimization. Also, if you provide the difference in fps between these two different resolutions on different devices and browsers, this would also allow us to have more info to possibly help you as well as help the community now and in the future.