Performance Imporvements and test with BabylonJS

Demos and projects
1

Hi everybody,

I wrote an article about how we greatly improved the rendering performance of our viewer at naker

We used 3 main tricks: Reduce FPS, Render only when necessary and Separate threads
And it allowed us to divide by 10 the browser scripting and rendering time plus divide by 3 the CPU and GPU usage.

More details here:

https://www.naker.io/posts/3-tricks-on-how-we-improved-by-10-our-3d-web-viewer-performance

Have a great day everybody :raising_hand_man:

[EDIT] Article on medium: https://medium.com/naker/3-tricks-on-how-we-improved-by-10-our-3d-web-viewer-performance-98facf5837b9

6 Likes
2

Great article.

For those who want to know more about brain & FPS, here a nice explanation: How many frames per second can the human eye really see?

1 Like
3

Yes from what I had read before writing about it is that our eye can see at a great FPS as they are only receiver. But the limit comes from the capacity of our brain to process the images he receives from our eyes!

4

@PichouPichou How is that polygon on the very start of the naker page being made? It really looks beautiful! I’m a total noob when it comes to content creation, I’m just curious.

1 Like
5

Yes available here: https://www.babylonjs-playground.com/#VE6GP#56

Do you know you can even set your own polygon when you register to Naker?

We call it your “Pearl Avatar” !

Enjoy :slight_smile:

1 Like
6

same from an icosphere : https://www.babylonjs-playground.com/#VE6GP#68
:smiley:

1 Like
7

While I agree with the visual aspect of FPS, you would loose responsiveness if you forced 30 fps. Pages where the webgl context covers the entire window might not be good candidates for this.

Good VR hardware usually does 72 fps (Pixel phones are 90). When a person is moving / rotating their head, 30 is not going to cut it.

The other issue might be sync of animation with a Webaudio context. Webaudio is extremely accurate. The 30 might work better than higher for longer animations, because consistency would be better. In my recent work, I am generating 200-250 animations / minute. As each animation must end on a frame, I need to keep track of any lost time & start animations already in progress as needed. Higher makes this easier.

So, I guess your use might inform your area to optimize.

8

Hi @JCPalmer,

For now we don’t have any issue with our content on mobile even at 30FPS.
I agree this won’t work for VR but we do not offer VR compatibility with the content you create in Naker so this is not a problem for us!

From the test made on my phone, before these optimizations my batterie would dive so fast when today it is not moving much. And this is the important part for us as we want to publish cool content but we do not want to kill the batterie of everyone who sees that content.

So this is really great for our use case but it can not work for anyone of course :wink:

9

@PichouPichou @jerome
Thanks for the PG :smiley:
One more question: The polygon on the PG is missing this nice shimmer effect like on the naker page. what kind of lightning/material is needed to achieve this?

10

Hi holger,

Here it is: https://www.babylonjs-playground.com/#VE6GP#69

In our viewer we simply put an environment texture (line 101 in the PG) and use a PBRMaterial with roughness and metallic (line 19 in the PG)

We put a specific pearl today on our website that you might like: https://www.naker.io/

1 Like
11

Thanks a lot for the updated PG :smile: The PBRMaterial really makes the difference.

1 Like
12

Yes it also depends on your needs but to have the best realistic rendering. PBR is the key @sebavan :wink:

13

@PichouPichou Hi! Your link is 404 for now =(

14

Oh sorry!

Here is the medium version: https://medium.com/naker/3-tricks-on-how-we-improved-by-10-our-3d-web-viewer-performance-98facf5837b9

3 Likes
15

Very interesting and well explained article! :smiley:

1 Like