Hello everyone,
I need your help to understand an issue I’m having today with my render loop. Let me explain: I have a full particle system and several Node Materials that drastically speed up when using the engine’s built-in render loop via the runRenderLoop function.
My physics simulation stays mostly stable between both approaches, but the particles and Node Material animations go completely crazy. Let’s focus on the particles for now, I used the exact same settings as in the official documentation example: https://playground.babylonjs.com/#MRRGXL#2
Here are the two ways I’m launching my render loops and their respective results.
const loop = () => {
scene.render();
}
engine.runRenderLoop(loop)

const renderLoop = () => {
scene.render();
}
const start = () => {
const delay = 1000 / this.frameRate;
this.time = null;
this.frame = -1;
this.running = true;
this.step = 0;
const loop = (timestamp) => {
if (this.time === null) this.time = timestamp;
const seg = Math.floor((timestamp - this.time) / delay);
if (seg > this.frame) {
this.frame = seg;
this.renderLoop();
}
this.tref = requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}
start();

I also tried creating a hybrid version, I managed to globally slow down the framerate, but it has no effect on particles or Node Materials. What’s strange is that with the exact same configuration as in the docs, my particles are running way too fast.
Of course, I can tweak parameters like updateSpeed to something ridiculously low (e.g. 0.00005) to get the desired behavior, but that feels wrong, so I’d rather seek your expertise before doing something dumb.
Note: I’m currently forced to use runRenderLoop because I need multi-view / multi-canvas support. That’s why I’m a bit panicked, switching back would mean rewriting a big part of my application’s rendering system!
Thanks a lot for your help!