Skip to main content

AnimationLoopTemplate

AnimationLoopTemplate is a helper class that creates and manages the application's render loop.

The motivation for this class (compared to directly using AnimationLoop class) is that the application can create GPU resources in the constructor so that resources can be unconditionally typed in the subclass. This can remove some code clutter in applications

Usage​

import {AnimationLoopTemplate, makeAnimationLoop} from `@luma.gl/engine`;

Autocreates a canvas/context

import {AnimationLoopTemplate, ClipSpace} from '@luma.gl/engine';

class AppAnimationLoopTemplate extends AnimationLoopTemplate {
  // This resource is always a valid instance since it is initialized in constructor
  // i.e. no need to type it as `clipSpaceQuad: ClipSpace | null = null;`` 
  clipSpaceQuad: ClipSpace; 

  constructor({device) {
    // Keys in the object returned here will be available in onRender
    this.clipSpaceQuad = new ClipSpace({gl, fs: FRAGMENT_SHADER});
  }

  onFinalize() {
    this.clipSpaceQuad.destroy();
  }

  onRender({tick}) {
    // Tick is auto updated by AnimationLoopTemplate
    this.clipSpaceQuad.setUniforms({uTime: tick * 0.01});
    this.clipSpaceQuad.draw();
  }
});

const animationLoop = makeAppAnimationLoop(AppAnimationLoopTemplate).start();

Types​

The AnimationLoopTemplate class uses the AnimationLoopProps and AnimationProps type docunented in the AnimationLoop page.

Global Functions​

makeAnimationLoop​

Use to instantiate an AnimateionLoopTemplate subclass

makeAnimationLoop(AnimationLoopTemplateCtor: typeof AnimationLoopTemplate, props?: MakeAnimationLoopProps) : AnimationLoop
  • props - forwarded to the AnimationLoop constructor. If no device is passed, makeAimationLoop() will create one using type: 'best-availble'.

Methods​

constructor​

The AnimationLoopTemplate class should not be constructed directly. Use the makeAnimationLoop() function to create an AnimationLoop from an AnimationLoop template

onFinalize​

The application overrides the onFinalize`` method to destroy any (GPU) resources created in he constructor. Parameters are identical to AnimationLoopProp.onFinalize`.

onRender​

The application overrides the onFinalize`` method to render each frame. Parameters are identical to AnimationLoopProp.onRender`.