Best Optimization for mobile.

[tranlong021988]

hi everyone, I'm planing to make a racing game, may be same concept with http://helloracer.com/racer-s/ 

You can take a look my work here: https://dl.dropboxusercontent.com/u/86585940/BabylonWave/optimized2/index.html

My target is mobile browser, with best performace as I can optimize. This is what I approach:

- Set screen resolution to 640x480

- Disable Anti Alisas.

- Merge all textures to single file (1024x1024)

- change maxZ to lower value (Frustum Culling)  

They all for rendering speed, so anyone have any idea/solution to make it better ? I notice that FPS on mobile browser not stable enough. And I see that everybody say about Octree for rendering optimization, I read a document, here: https://doc.babylonjs.com/tutorials/Optimizing_Your_Scene_with_Octrees but not really understand what-how that work, can someone give me some advises ?   

[GameMonetize]

Plenty of options are available:

- LOD

- Instances

- Limiting the number of differents materials

- Reducing the number of meshes to the barely minimum

[tranlong021988]

3 minutes ago, Deltakosh said:

Plenty of options are available:

- LOD

- Instances

- Limiting the number of differents materials

- Reducing the number of meshes to the barely minimum

-LOD -> already try but not sure how "cost" is it, let say I have hundred instance meshs, so "transformation" process from optimize mesh to original mesh will affect CPU or not ? How much it affect ?

- Reducing the number of meshes to the barely minimum -> If I use Instance, what is maximum number of Instance Meshs ? 

And can you tell me about Octree ? How it work for rendering optimiztion ? How its different with Frustum Culling ? Documents and tutorials not explain much. 

Sorry for my stupid questions but I 'm still learning.  

[dbawel]

DK finally mentions instances which I was too stupid and overlooked right from the start. This should help your scene specifically a great deal - perhaps not so very much in your current low res aliased scene, as this latest scene and conditions obviously would never be practically used. However, as I probably mentioned in the last post, I would try and set a baseline using power of 2 textures, something close to 1200 X 800 - 4:3 aspect ratio and resolution in your canvas size, and definately take advantage of instances. But if you do make another scene for the forum, then you must re-create this in the playground as you will find MANY people will work far more with your scene, and you will most likely find answers quickly - if there are any to be found, which I'm certain there must be. Create a PG scene, and you might then get answers.

A PG scene will get you the very best results here, and in using a large # of instances, there are very few limits and many benefits and considerable improvements in CPU performance as in most every rendering application. However, I find instances quite optimized in babylon.js, and these of course will also help you considerably in garbage collection - which I seem to mention allot lately - since GC is such a burden on CPU latency when it comes to memory management in WebGL.

So I hope we will see a PG scene next time I look at your post, as I expect you'll find many users providing better examples modifying your PG scene, as it's almost an addiction for some users on this forum, as we would all look at optimizing your scene almost like a puzzle challenge - where the competition would be high stakes since we all benefit from the results - simply because your scene is so very typical and everyone can learn from improving a scene such as yours. Otherwise, yu've probably taken this as far as you can unless you specify your questions much more precisely. So a PG scene would change everything.

OK, it's been a long day, and I'm doing my usual rambling now - so it;s time for a TALL glass of bourbon - preferably Wild Turkey.

Let's see some progress here - finally.

DB

[GameMonetize]

@dbawel is totally right: having a PG helps a lot.

- LOD has no cost (Unless you decide to use dynamic decimation but this does not seem to be the case here): it is a free optimization

- maximum number of instances: There is no magic number. it depends on your needs.

- Octree helps the system select the list of meshes to render: the active meshes. BUt it requires that meshes are static else you will be forced to rebuild the octree which could be expensive.

[tranlong021988]

@Deltakosh:

I used LOD and Instance. Actually, LOD for each Instance, and everything seem good but I noticed that FPS drop a little (laggy screen) when some instance appear in frustum(I used LOD as a Frustum Culling). But I stopped using this solution since you say Frustum Culling is native support, and my meshes are low-poly already.

There is no maximum number of instances, may be BJS dont have to recompute geometry and material, but hundred instances have their own position and rotation value(although they are static), and don't know how affect is it to FPS.  

It's take me headache 3 days, and after reading this:https://blog.raananweber.com/2015/09/03/scene-optimization-in-babylon-js/

I already gone insane with this solution:

- Merging hundred of buoy meshs to single mesh, so they have only one position and rotation. And using octree for rendering optimization. So don't know if anyone try this yet, I will update a PG soon. 

And can you answer me one question about Octree Optimization ?

The document here: https://doc.babylonjs.com/tutorials/Optimizing_Your_Scene_with_Octrees

They say: 

If your scene has a lot of meshes, it can be useful to create an octree to speed visible meshes selection (e.g. finding meshes the camera can see). To do so, just call this function:

var octree = scene.createOrUpdateSelectionOctree(capacity, maxDepth)

You can call the function each time you want to update your octree. This function accepts two parameters:

• capacity: defines the maximum number of meshes you want on your octree's leaves. The default value is 64.
• maxDepth: defines the maximum depth (sub-levels) for your octree. Default value is 2, which means 8 8 8 = 512 blocks (This parameter takes precedence over capacity.)

 

Can you tell me more about two parameters (capacity and maxDepth), I just gues that octree for rendering optimization need many submeshes, it will calculate which one to be render in camera Frustum, so what different with Frustum Culling ?

Capacity default 64 , that mean total mesh number of my scene ? 

maxDepth default 2, but why it say 8 8 8 = 512 blocks ? And what connection between maxDept with Capacity , with scene meshs ? 

Please explain.

 

[dbawel]

Hi @tranlong021988 - 

I hope DK or someone else might be able to explain this to us both. So DK, does octree work in anyway as I might expect due to its name? As I began with RenderMan and Mental Ray SOOOO many years ago, I'm familiar with hierachical sub-trees which sub-divide 3D "space" into volumes to test for any # of polygons in which to fire rays at? I understand that the BJS renderer deosn't work in general like a ray tracer; but does it sub-divide space into volumes to test for polygons inside each volume? I reference Mental Ray as an example - in which if you use sub-trees as a rendering method, once a polygon is located in reference from the camera, the renderer sets up a volume around the polygon to search for additional polygons which might also exist inside this volume. Then once these "volumes" are identified, then the renderer can ignore other areas (volumes) inside the 3D space (scene), as it assumes there are no polygons inside these other "volumes" it has tested. If you ever get the chance to watch this occur dynamically in any renderer (there are debugging modes in Mental Ray where this is possible), it is a fantastic process to observe.

If my explanation is even remotely close to how the BJS renderer might sub-divide space to test and optimize endering, then this would help me a great deal in further understanding how the BJS renderer works - or at least one choice in setting up your render. Otherwise, a brief explanation or a link to how the BJS renderer works would prove very valuble to many of us out here in the "real" world - whatever "real" means.

As always, thank you for your help, and i hope both you and your family are having a fantastic 4th of July holiday this year. The week will come all too fast for us, but in the meantime, we all hope you have had a great time and a chance to relax and enjoy the time celebrating such a fantastic country and many of the amazing people who built it.

Cheers,

DB

 EDIT - I did a little research, and octrees do work in a similar method to what I described above from my experience working with Mental Ray. However, the BJS renderer sub-divides Cartesian space into volumes of 8 "thus the work octree", whereas in Mental Ray the user sets the level of sub-division manually. As the default is 2, in Menta Ray we generally set a default of 5, however this would increase your rendering time by some value certainly. So as I am finding good results using a value of 2, then that's what I will continue to use for now - until perhaps we begin using 4K and higher mobile displays. But it still shoudn't make a huge difference in increasing the # of test volumes - we'll simply have to see when we are using higher resolution displays.

[GameMonetize]

Yep octree subdivides the world into 3d spaces:http://doc.babylonjs.com/tutorials/Optimizing_Your_Scene_with_Octrees

The octree is used per frame when the engine needs the list of active meshes: the list of meshes to render.

Quote

 

Can you tell me more about two parameters (capacity and maxDepth), I just gues that octree for rendering optimization need many submeshes, it will calculate which one to be render in camera Frustum, so what different with Frustum Culling ?

Capacity default 64 , that mean total mesh number of my scene ? 

maxDepth default 2, but why it say 8 8 8 = 512 blocks ? And what connection between maxDept with Capacity , with scene meshs ?

 

so what different with Frustum Culling ? It is a culling tool as well but fare more performant as it deals with areas before dealing with submeshes

Capacity is the maximum number of submeshes per leaf. If there is more than the specified number, then the current leaf is subdivided into one new sub-octree

MaxDepth is the number of depth you do not want to go further. With 1, this means that there is a first level (8 nodes) with a sublevel (8 new nodes) per root node. so a total of 64 leaves. Each leaves will have no limit as we already reached the maxDepth value.

 

Let's take an example. Capacity = 10 and MaxDepth = 1;

By default, the octree will have only 8 leaves (subdividng the space into 8 areas). THen we go trhough all meshes and submeshes and based on their location they are dispatched to at least one node (sometimes more depending on their size and position),

After this first round, if a leaf has more than 10 submeshes in it (capactiy= 10) then we redo the same thing because we are not yet at maxDepth (first level = depth value of 0)

 

Does it make sense?

[tranlong021988]

@Deltakosh : wow .Thank for detail explain.

Quote

After this first round, if a leaf has more than 10 submeshes in it (capactiy= 10) then we redo the same thing because we are not yet at maxDepth (first level = depth value of 0)

so if leaf's submeshes number has no more than capacity, octree will stop sub dividing and not care maxDepth value ?

if I have a large scene with many meshes so divide to more pieces meaning more performance ?   

I noticed that BJS has  mesh.createOrUpdateSubmeshesOctree(capacity, maxDepth)

so this is Mesh-Level of Octree Render Optimization ? And can I use it manually for specific mesh, not my whole scene ? 

Thank you again. 

[GameMonetize]

Quote

so if leaf's submeshes number has no more than capacity, octree will stop sub dividing and not care maxDepth value ?

Yep:)

Quote

if I have a large scene with many meshes so divide to more pieces meaning more performance ?

Yep

* mesh.createOrUpdateSubmeshesOctree(capacity, maxDepth) is used to optimize picking

[tranlong021988]

thank you so much. 

[ozRocker]

I'm wondering, what is it physically with mobile devices that could provide a better frame rate?  Is it CPU speed or RAM that is affecting it?  I could run a scene on desktop PC that goes at 60FPS but on iPhone 6 its under 30FPS.  Would more RAM or greater clock speed bring that FPS back up to 60?  Also, is a webGL scene in a browser slower than a native 3D app or is it the same because they both use openGLES?

[tranlong021988]

@ozRocker

 Not sure too much. But I think mobile CPU not fast enough to calculate complex process at 60FPS, and Javascript Application do everything in single main thread and can not compare with native. But I have two good news:
- Mobile RAM/CPU is improving day by day , modern browser have much more powerful few years recently. Mobile experience is new trend and manufactures wanna take your money by making you happy, so if your performance mobile make you unhappy, they will take care. May be not right now.

- For now, if you wanna try best performance with BJS, may be you should try Haxe version for native target, already try Physics Demo(look amazing). For web target, you should try Web Worker solution (multithread but not sure about BJS compatible) and for none-accurate Collision process (simple racing game), you should try collision map. You can visit here: http://www.slideshare.net/thibautfb/html5-game-dev-with-threejs-hexgl

I'm building my new game base on his solution: Web Worker + Collision Map .

Sorry for my poor English. 

     

[JCPalmer]

Native may have better optimization tools for iPhone.  Since frame rate tops out, performance testing on a PC should not use 60 fps as a standard for as good as it gets.  Just because you peg at 60, does not mean you are done.

Things to do that may yield better results on lesser hardware:

• Use a shitty desktop for performance testing
• test with an under-performing browser, Firefox
• profile for bottle necks.  Even though improving them on desktop does not get a higher fps.
• use debug layer's, potential FPS metric.  It goes above 60, so you know when your draw time is improving.

Getting the biggest / baddest development machine has its draw backs sometimes.