Sandbox has different performance than my app, which is similar to sandbox

Questions
,
1

So I’m working on a pretty simply (in terms of functionality) app that just loads a model and places a UniversalCamera in it to move around. The user can switch between the universal camera and arc rotate camera to get different views of the model. I have collision detection and a height constraint that updates the universal camera each frame to make sure the camera stays at the same height when moving around. I disabled these functions for the purpose of comparison with the babylon sandbox. Otherwise, I have no post processes in my code, and only have a directional light and HDR image for lighting. I have the same exact setup in the sandbox (the default sandbox lighting and environment setup, plus an added directional light in the sandbox).

I added a freecamera into the sandbox and am moving around and noticed that the frame rate and performance seems to be SIGNIFICANTLY better in the sandbox than in my app. I can’t seem to find anything in my code that blatantly gets called each frame to otherwise hinder performance.

I’ve been trying to dig into the sandbox code to find out how its set up but it seems to be just a UI container for the Inspector. Where should I look to find the code that runs the sandbox? The Inspector? The engine functions called by the inspector?

Basically, does the sandbox perform any scene optimizations by default? I’m trying to figure out what settings I may be missing/that I might have set in a superfluous manner that would affect performance. Thanks!

FYI. I’m using the same device and same browser (chrome) and same model and lighting for comparison between my app and the sandbox.

2

You best course is probably to try the basic steps of optimizing.

I do not see it on the list, but if you have a lot of meshes, you might turn picking off on all the ones that you are not actually going to click on.

3

Hey @JCPalmer, thanks for the quick response.

So I took a look at the sandbox before I posted the question and was trying to find where the scene is set up in a default manner. I couldn’t seem to find that code specifically. Would you mind providing a hyperlink to those lines? I’m not sure if that’s in Inspector code or if its in Engine code that the Inspector references.

And that’s what has me confused. I have tried most of the applicate suggestions in that Optimizing your Scene document. But it’s still not up to par with the sandbox. I haven’t tried that suggestion of turning off picking yet though so I’ll try that and get back with an update.

4

The code for the sandbox that you are looking for is probably somewhere in this file: Babylon.js/renderingZone.tsx at master · BabylonJS/Babylon.js (github.com)

The sandbox uses filesInput, so this file maybe useful as well:
Babylon.js/filesInput.ts at master · BabylonJS/Babylon.js (github.com)

One notable thing we do in the sandbox that is not on by default is:

this._scene.skipFrustumClipping = true;

From Babylon.js/renderingZone.tsx at master · BabylonJS/Babylon.js (github.com), which can make a difference in perf depending on what is in the scene.

1 Like
5

Thanks, I’ll take a look and write any updates here.

1 Like