I’m working with a single model, and I noticed some differences with my local server and sandbox, both using the same version of BabylonJS. I’m consistently getting ~10fps (30%) less on local server.
.env files as below:
- Sandbox: drag and drop
- Local server:
- working canvas initialization
var canvas = document.createElement("canvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = ...
engine.registerView(outputCanvas, camera, true);
Comparing the inspector:
- Meshes selection is 10x higher in local server
- Frame total and GPU Frame time is way higher while Inter-frame is lower on local server
- it seems some workload is unevenly distributed between CPU and GPU
I looked into the sandbox source code, but didn’t notice any additional configuration. Any ideas?
NGL, I don’t have the precise answer however I believe there might be something extra running (live reload features) when on local dev. Maybe you could create a Performance snapshot in the Developer Console and compare them for both environments.
It looks like you are relying on engine views which involved extra copies you do not have in the sandbox and this would definitely add a performance penalty ?
UPDATE: Found the culprit - do not include the Babylon engine and scene objects to Vue reactive data like me (RTFM)
Both good points, thank you for your feedback.
@sebavan I was expecting some penalty, but wasn’t sure how much that would be. I don’t need engine views for this case so I’m removing that.
I’ve updated the app to use a DOM canvas instead of engine views, and created a production build to rule out dev server overhead to minimize differences. Both had a positive effect in FPS.
And @roland great tip, with performance snapshot I think I found the difference, there are a couple extra function calls on my local server (on the right) which I think is the culprit.
This gives me a good chance for debugging further, thank you!