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