# How to change the rendering scene according to the camera

**URL:** <https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719>\
**Category:** Questions\
**Created:** [April 23, 2019, 2:57am UTC](https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719 "2019-04-23T02:57:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gldan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gldan/32/1905_2.png) [@gldan](https://forum.babylonjs.com/u/gldan)\
**Post date:** [April 23, 2019, 2:57am UTC](https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719/1 "2019-04-23T02:57:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gldan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gldan/32/1905_2.png) [@gldan](https://forum.babylonjs.com/u/gldan)\
**Post date:** [April 23, 2019, 5:28am UTC](https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719/2 "2019-04-23T05:28:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![timetocode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/timetocode/32/111_2.png) [@timetocode](https://forum.babylonjs.com/u/timetocode)\
**Post date:** [April 23, 2019, 7:04am UTC](https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719/3 "2019-04-23T07:04:41Z")

</div>

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

```auto
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:

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 23, 2019, 2:19pm UTC](https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719/4 "2019-04-23T14:19:38Z")

</div>

Hey @gldan and welcome!

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

```auto
camera.onViewMatrixChangedObservable.add(() => {
     shouldRender = true
})

```

---

<div class="post-metadata">

**Author:** ![Browork](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/browork/32/13350_2.png) [@Browork](https://forum.babylonjs.com/u/Browork)\
**Post date:** [February 18, 2021, 10:27am UTC](https://forum.babylonjs.com/t/how-to-change-the-rendering-scene-according-to-the-camera/2719/6 "2021-02-18T10:27:44Z")

</div>

Maybe I’m using it the wrong way, but the observable is only called, when the renderloop is running:

If I type into the console (after the scene has loaded) engine.stopRenderLoop() the callback of the observable is not called anymore.  
PG: [https://playground.babylonjs.com/#KHFLFM#1](https://playground.babylonjs.com/#KHFLFM#1)