mirror of
https://github.com/visgl/luma.gl.git
synced 2026-01-18 14:03:42 +00:00
84 lines
2.8 KiB
Markdown
84 lines
2.8 KiB
Markdown
# 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`](./animation-loop) 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
|
|
|
|
```typescript
|
|
import {AnimationLoopTemplate, makeAnimationLoop} from `@luma.gl/engine`;
|
|
```
|
|
|
|
Autocreates a canvas/context
|
|
|
|
```typescript
|
|
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`](./animation-loop) 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`](./animation-loop) page.
|
|
|
|
## Global Functions
|
|
|
|
### makeAnimationLoop
|
|
|
|
Use to instantiate an `AnimationLoop` from an `AnimationLoopTemplate` subclass.
|
|
|
|
```ts
|
|
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`.
|