# 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 = makeAppAnimationLoop(AppAnimationLoopTemplate).start();
```

## Types

The `AnimationLoopTemplate` class uses the `AnimationLoopProps` and `AnimationProps` type docunented in the [`AnimationLoop`](./animation-loop) page.

## Global Functions

### makeAnimationLoop

Use to instantiate an `AnimateionLoopTemplate` 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-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`.