What is the correct way to render on demand

Thanks for your help, but your demo (https://www.babylonjs-playground.com/#UNB24W#3) still render every frame:

You can insert a console to the camera.onViewMatrixChangedObservable, it will continuously print.

Luckily, thanks to your hint, I found a perfect way to do this, just replace camera.getViewMatrix(true) with camera.update(), see: https://www.babylonjs-playground.com/#UNB24W#5

That works perfectly! thanks for your hint!

1 Like

How about this: https://www.babylonjs-playground.com/#UNB24W#5, it works perfectly for me.

1 Like

And in my real case (with many meshes), I found it can improve perfomance dramatically to replace scene.render() with scene.render(false) for avoiding duplicated camera updating (because camera has been updated by render loop). See: https://www.babylonjs-playground.com/#UNB24W#6

Although camera’s calculation is needed in render loop, but quite a big step. :+1:

Is there any way to keep the smooth camera movement while rendering on demand?

You can do something like that:


1 Like

Thanks, @Evgeni_Popov!

That‘s better. Do you have an idea why it slows down faster than with normal render loop?



Setting the parameters for scene.render() seems to fix that problem: scene.render(false, true): https://www.babylonjs-playground.com/#UNB24W#10

I think you can remove the manual call to camera.update() and pass true as the first parameter to render:



nice thread! The example by @Evgeni_Popov is done with the ArcRotateCamera. Any chance to do it with other cameras such as FreeCamera, too? FreeCamera does not seem to expose an inertia value.

It seems you can test cameraDirection and cameraRotation:


nice, thanks a lot! :slight_smile:

Small improvement - Hardware Scaling on Movement. Interesting would be PostProcessing like SSAO that appears only on first render, too.


But that will cause some input doesn’t work, such as the moving by the keyboard in FreeCamera, having a look https://www.babylonjs-playground.com/#UNB24W#13, moving by the keyboard (arrow keys) doesn’t work, after uncommenting the camera.update(), anything works well.

After searching the source code, I found keyboard inputs checking (camera._checkInputs()) only called by camera.update():

So I think camera.update() is needed.

We can use camera.onViewMatrixChangedObservable to do this so that you don’t need special logic for different cameras:


This is also a bit lighter on the CPU when nothing is happening since it only calls camera.update().


It works well, thanks a lot!

1 Like

Most of the solutions shown here do no longer work since version 5.29 (see On-demand rendering solution broken since 5.29)

cc @PolygonalSun

I don’t see why camera.onViewMatrixChangedObservable solution won’t work. @7om Do you have a repro?

Depending on what’s going on in your scene, you may want to tie into other events like animations or pointer events (ie: hover events, pointer click) where a scene changes without the View Matrix notifications.
react-babylonjs/RenderOnDemand at master · brianzinn/react-babylonjs (github.com)

Also, in the engine component there is an opt-in mechanism to not render if the canvas is not visible (ie: scrolled off screen):
react-babylonjs/Engine.tsx at master · brianzinn/react-babylonjs (github.com)

maybe those snippets will be of use. cheers.

Sure, just test your own PG: https://www.babylonjs-playground.com/#UNB24W#15

It is broken for me. Sometimes - when I click and drag - the view does not change. When I release the mouse button, the view jumps to the new position. @PolygonalSun gives some explanations on what has changed in the thread I mentioned above.

Bug filed: onViewMatrixChangedObservable not firing with non-standard render loops · Issue #13551 · BabylonJS/Babylon.js (github.com)

We will fix it soon. Sorry for the troubles.

1 Like