Render without FPS cap

Hello everybody!

I’m working on a video export at the moment. I create a canvas that is not in the dom attach a new babylon.js instance on it, render the scene and capture the video. That works quite well, however it renders in realtime, which is at 60 FPS on my setup.

Is there anyway to get babylon to just render all out as fast as posible?

I tried setting engine.customAnimationFrameRequester that just returns immediatly, but that breaks the rendering.

I would appreciate any pointers.

Greets,

Niko

you don’t have to be bound to the engine’s render loop. You can call your render function (for example scene.render() as many times as you want. your frame rate will depend on how fast this function will be executed. I assume something is produced on each frame that you require

1 Like

Thanks!

I tried it, however it does not work with MediaRecorder. Unless i wrap the whole thing with a requestAnimationFrame, which again results in limited framerate.

const canvas: HTMLCanvasElement = document.create('canvas');
canvas.width = 1024;
canvas.height = 768;
const engine: Engine = new Engine(canvas, true, { antialias: true }, false);
// ...
const stream = canvas.captureStream(0);
const recorder = new MediaRecorder(stream);
let framesToRender = 300;
while (framesToRender-- > 0) {
    clock.tick(); // this updates the scene
    scene.render();
    stream.getVideoTracks()[0].requestFrame();
}
recorder.stop();

Am I missing something?

I don’t know the media recorder that well to know if it dependent on the animation frame. If you are rendering in the browser you are bound to the animation frame. You can render to some sort of a buffer and use this buffer to store a stream, but that won’t use the browser’s capabilities

1 Like