beforeRender

beforeRender is a Custom Inject Function that allows you to execute logic before each frame render. This is useful for animations, updates, or any computations that need to happen on every frame.

Usage

beforeRender requires a before render callback. This callback is invoked on every frame with NgtRenderState

1
export interface NgtRenderState extends NgtState {
2
    delta: number;
3
    frame?: XRFrame;
4
}

Check out Store section for details on NgtState.

1
export class MyCmp {
2
    constructor() {
3
        beforeRender(({ camera, delta }) => {
4
            camera.position.x = Math.sin(Date.now() / 1000) * delta;
5
        });
6
    }
7
}

Optional `injector`

Since beforeRender is a CIF, it has to be invoked in an Injection Context. In order to invoke beforeRender outside of an Injection Context, you can provide an Injector to the injector property of the 2nd argument to beforeRender

1
export class MyCmp {
2
    constructor() {
3
        const injector = inject(Injector);
4
        afterNextRender(() => {
5
            // outside of Injection Context, provide Injector ✅
6
            beforeRender(() => {}, { injector })
7
        })
8
    }
9
}

Optional `priority`

The priority parameter determines the order of execution when multiple before render callbacks are registered:

1
// executes first
2
beforeRender(cb1, { priority: 1 });
3
// executes second
4
beforeRender(cb2, { priority: 2 });

priority can also be dynamic using a Signal<number>

1
export class MyCmp {
2
    priority = input(0);
3

4
    constructor() {
5
        beforeRender(
6
            ({ camera, delta }) => {
7
                camera.position.x = Math.sin(Date.now() / 1000) * delta;
8
            },
9
            {
10
                priority: this.priority
11
            }
12
        );
13
    }
14
}

How it works

beforeRender subscribes to the internal render loop of Angular Three.

When using a static priority number, it returns an unsubscribe function, but you typically don’t need to use it as it’s automatically handled by Angular’s DestroyRef

When using a dynamic priority, it sets up an internal effect and returns the EffectRef#destroy function. Again, cleanup is automatically handled through DestroyRef.