injectBeforeRender

injectBeforeRender 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

injectBeforeRender 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
        injectBeforeRender(({ camera, delta }) => {
4
            camera.position.x = Math.sin(Date.now() / 1000) * delta;
5
        });
6
    }
7
}

Optional `injector`

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

1
export class MyCmp {
2
    constructor() {
3
        const injector = inject(Injector);
4
        afterNextRender(() => {
5
            // outside of Injection Context, provide Injector ✅
6
            injectBeforeRender(() => {}, { 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
injectBeforeRender(cb1, { priority: 1 });
3
// executes second
4
injectBeforeRender(cb2, { priority: 2 });

priority can also be dynamic using a Signal<number>

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

4
    constructor() {
5
        injectBeforeRender(
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

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