Stop render loop and keep last frame rendered (multiview)

Questions
1

hi. i have many scenes which are rendered to many canvases. the problem: i have to switch between them but keep what is rendered. how to stop rendering completely but hold last frame? i’m handling it with snapshots like:

engine.unRegisterView(previewCanvas.current);
const lastFrame = previewCanvas.current.toDataURL();

just looking for a simple solution.
searched here Optimizing Your Scene | Babylon.js Documentation and here Requests about how to set max fps below 60

2

stopping the render loop (and not disposing) should keep the canvas as is. For example:

Babylon.js Playground (babylonjs.com)

So you still maintain the last frame rendered. Are you doing something else?

1 Like
3

Like in the playground above, this should stop correctly the render loop:

engine.stopRenderLoop();

For more details here’s a guide from this forum:
https://forum.babylonjs.com/t/power-saving-mode/23406

Check out last comment about multi loop.

1 Like
4

you’re right. engine canvas (which goes to constructor) keeps last rendered frame but registered canvases are not on engine.stopRenderLoop(). i took your website demo views: Babylon.js - Multi views demo and modified it with timeout and stop render loop:

 <script>
      // Create a working document
      var canvas = document.createElement("canvas");

      var engine = new BABYLON.Engine(canvas, true);

      // Set the default canvas to use for events
      engine.inputElement = document.getElementById("renderCanvas0");

      var scene = createScene();

      engine.runRenderLoop(function () {
        if (scene.activeCamera) {
          scene.render();
        }
      });

      setTimeout(() => {
        engine.stopRenderLoop();
      }, 3_000);
    </script>

all views were reset after 3s:

Screenshot 2023-07-31 at 15.30.19
Screenshot 2023-07-31 at 15.30.191920×1051 52.9 KB

can you suggest?

5

Hello! The multiview scenario should have worked as you’ve put here, but there was a bug with the engine, it will be fixed by: Cancel any pending animation frames on stopRenderLoop by carolhmj · Pull Request #14102 · BabylonJS/Babylon.js (github.com)

2 Likes
6

Workaround:
You can take a screenshot of the view(s) before ending the render loop and create img html elements with a z-index higher than the canvases. Position and size these imgs over the canvases. Display the screenshotted content in the imgs. Remove the imgs when engine loop/loops is/are resumes. Maybe you will need to wrap the imgs in a div.

1 Like