How to change the rendering scene according to the camera

In threejs like this, camera changes trigger rendering.

var controls = new THREE.OrbitControls( camera, element );
controls.addEventListener( {type:‘change’},function(){
renderer.render(scene,camera)
}) ;

In mobile devices, in some cases, this saves a lot of batteries.
Can it be implemented in babylonjs?

var up = false;
canvas.addEventListener(‘pointerdown’,function(){
up = true;
});

            canvas.addEventListener('pointerup',function(){
                up = false;
            });
            canvas.addEventListener('pointermove',function(){
                if(up) scene.render();
            });

I found a low-level way, which seems feasible, but I think there should be a better way.

But I’m not so familiar with babylonjs.

Could make a standard requestAnimationFrame loop, and then do something like this:

shouldRender = false
shouldRender = gameUpdate(delta) // returns true if we need to render
if (shouldRender) {
  scene.render()
}

Then game update returns true if the camera was moved this frame. This would only work if everything is created all at once at the start and the camera is the only object that could move. Moving, creating, or destroying other objects would need to trigger a render as well – or they would end up invisible until the camera moved again.

gameUpdate pseudocode:

shouldRender = false
const inputs = getQueuedInputsFromMouseEtc()
if (inputs) {
   moveCamera(inputs) 
   shouldRender = true // or compare camera.position + rotiation to cached
}
clearInputQueueBecauseWeConsumedItThisFrame()
return shouldRender
1 Like

Hey @gldan and welcome!

Other option is to render only when this observable is called:

camera.onViewMatrixChangedObservable.add(() => {
     shouldRender = true
})
1 Like