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