Playground much more efficient than running code locally and in production?


I’ve built a pretty simple babylonjs app that imports a scenery mesh, and spawns people as boxes. I had some people join in and noticed on my laptop that it started going crazy with fan noise and on peoples phone they reported things getting too hot. I did some performance profiling and found that the CPU was getting maxed out with background processing and raster threads taking too long. This was in production and also when I ran it locally. I went to the babylon playground and found much more complex projects that ran at a fraction of CPU usage. I then tried copying my code into the playground with no changes and saw that the performance was worlds apart.

So the question is, how does the playground work so well and how can I get my site to be as optimized. I already implemented the SceneOptimizer and while it has made a difference, it’s still ages away from the playground.

I’ve attached some screenshots of CPU profiling.

Running in production:


Spent the last 10 hours pulling my hair out researching.
The basic problem is the difference in performance between the playground and my computer/production server. If it was just as slow on both things would make a lot more sense but the fact thats my CPU is hitting 100% on one and barely going past 10% on another doesn’t make sense.

I even looked through the Playground code to see if it was doing some crazy optimizations but saw nothing of the sort which is even more confusing.

Even when I copied the barebones scene from First Steps - Babylon.js Documentation and ran it locally I still hit 100% CPU but again when running on Babylonjs playground it was probably 3%. Either the playground is doing something or my readings are consistently wrong on the playground or on my computer and server.

Those articles are also pretty old so not sure they’ll be relevant now given how much WebGL and the browsers has grown and been integrated in the last 10 years.

A question - You say some people join in is this a multi player app?

Probably irrelevant because of

It looks like you are not using the GPU locally for some reasons ? and would fallback to software rendering ?

Seems like the GPU is being used as much as on the playground.

For reference i’m getting 1693 ms on GPU running the getting started scene on the playground vs 1884 ms when locally via copying the html file.

Only different from what I can see is the Rasterizer.

Playground Raster has 4 threads each less than 70 ms.

Local Raster has 1 thread taking an astonishing contiguous 23287 ms thread. You can see this in the photos I posted earlier too. Is there a reason why the raster paint is so slow when I run the same code?

nope. We need a repro to see what can go wrong on your side

Please visit this to see the site and see if you are able to reproduce.

Well this scene is SUPER fast here. like 4ms per frame

Yeah it’s pretty fast on my end too. How are your CPU usage stats? Is it maxing out on Rasterization Thread Painting like mine? I’m essentially looking for Sponzo like performance since it doesn’t really have much in the scene.