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 = makeAnimationLoop(AppAnimationLoopTemplate).start();

Types​

AnimationLoopTemplateProps​

The AnimationLoopTemplate constructor accepts the AnimationLoopProps type documented in the AnimationLoop page, with the following additional options:

  • adapters?: Adapter[] - list of adapters used to create the device (these are forwarded to )

AnimationProps​

The AnimationLoopTemplate onInitialize etc methods accept the AnimationProps types documented in the AnimationLoop page.

Global Functions​

makeAnimationLoop​

Use to instantiate an AnimationLoop from an AnimationLoopTemplate 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-available', using registered or supplied adaptors.

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`.