On-demand rendering

Render only while the camera is moving.

klipp.update returns true while anything is still moving (a blend, damping catching up, a shake), or the shot changed this frame. Render only then, and skip frames while the camera has settled.

Keep calling update every frame, even while nothing renders. It notices on its own when a target moves or a setting changes. React Three Fiber's frameloop="demand" is different: it stops calling frames altogether, so it needs a nudge, see its tab.

Usage

function frame(dt: number) {
  if (klipp.update(dt) || sceneChanged) {
    engine.camera.setTransform(klipp.shot.position, klipp.shot.quaternion);
    engine.render();
  }
}

renderer.setAnimationLoop(() => {
  if (klipp.update(dt) || sceneChanged) renderer.render(scene, camera);
});

Klipp works with <Canvas frameloop="demand">. It keeps requesting frames on its own while anything is still moving.

Once the camera has settled, nothing renders until something asks for a frame. Mounting, changing or unmounting Klipp's components, <Klipp mode> and input read by <InputController> do that for you. For anything else, call invalidate() yourself, for example after:

moving a target imperatively, for example target.position.set(...) in a click handler,
firing an impulse with impulseField.generate(),
changing a component's fields through its ref.

const invalidate = useThree((state) => state.invalidate);

function onClick() {
  targetRef.current.position.set(0, 0, 5);
  invalidate();
}

Outside a component, import invalidate from @react-three/fiber directly.

Edit this page