On-demand Rendering

Like most THREE.js applications, Angular Three typically operates in a game loop that executes 60 times per second (60fps). This approach works well for scenes with constant animation or movement, like games.

However, continuous rendering cycle can be the primary cause of battery drain and increased CPU usage. For scenes where motion is occasional or elements eventually come to rest, continuous rendering becomes inefficient.

Angular Three allows you to opt-in to on-demand rendering, which triggers renders only when changes occur. This optimization significantly reduces battery consumption and minimizes system load.

1
import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, signal } from "@angular/core";
2
import { NgtCanvas, } from "angular-three/dom";
3
import { NgtsStats } from "angular-three-soba/stats";
4
import { SceneGraph } from "./scene-graph";
5

6
@Component({
7
    template: `
8
        <ngt-canvas [frameloop]="frameloop()" [camera]="{ position: [0, 0, 3], fov: 45 }">
9
            <app-scene-graph *canvasContent />
10
        </ngt-canvas>
11
        <button [(toggleButton)]="onDemand" class="absolute top-4 right-4">
12
            on-demand renderering
13
        </button>
14
    `,
15
    imports: [NgtCanvas, SceneGraph, ToggleButton],
16
})
17
export default class ColorGradingDemo {
18
    protected onDemand = signal(true);
19
    protected frameloop = computed(() => (this.onDemand() ? "demand" : "always"));
20
}

1
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
2
import { NgtsEnvironment } from "angular-three-soba/staging";
3
import { NgtsOrbitControls } from "angular-three-soba/controls";
4

5
@Component({
6
    selector: "app-scene-graph",
7
    template: `
8
        <ngt-ambient-light />
9
        <ngt-spot-light [intensity]="Math.PI * 0.5" [angle]="0.2" [decay]="0" [penumbra]="1" [position]="[5, 15, 10]" />
10

11
        <app-sphere />
12
        <app-grading />
13

14
        <ngts-environment [options]="{ preset: 'warehouse', background: true, blur: 0.6 }" />
15
        <ngts-orbit-controls />
16
    `,
17
    imports: [Sphere, Grading, NgtsEnvironment, NgtsOrbitControls],
18
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
19
    changeDetection: ChangeDetectionStrategy.OnPush,
20
})
21
export class SceneGraph {
22
    protected readonly Math = Math;
23
}

1
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
2
import { NgtArgs } from "angular-three";
3
import { injectTexture } from "angular-three-soba/loaders";
4

5
import terrazoUrl from "./terrazo.png" with { loader: "file" };
6

7
@Component({
8
    selector: "app-sphere",
9
    template: `
10
        <ngt-mesh>
11
            <ngt-sphere-geometry *args="[1, 64, 64]" />
12
            <ngt-mesh-physical-material [clearcoat]="1" [clearcoatRoughness]="0" [roughness]="0" [metalness]="0.5" [map]="texture()" />
13
        </ngt-mesh>
14
    `,
15
    imports: [NgtArgs],
16
    changeDetection: ChangeDetectionStrategy.OnPush,
17
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
18
})
19
export class Sphere {
20
    protected texture = injectTexture(() => terrazoUrl.src);
21
}

1
import { ChangeDetectionStrategy, Component } from "@angular/core";
2
import { NgtpEffectComposer, NgtpLUT } from "angular-three-postprocessing";
3
import { LUTCubeLoader } from "postprocessing";
4
import { injectLoader } from "angular-three";
5

6
import cubicleCube from "./cubicle-99.CUBE" with { loader: "file" };
7

8
@Component({
9
    selector: "app-grading",
10
    template: `
11
        <ngtp-effect-composer>
12
            @if (result(); as lut) {
13
                <ngtp-lut [options]="{ lut, tetrahedralInterpolation: true }" />
14
            }
15
        </ngtp-effect-composer>
16
    `,
17
    imports: [NgtpEffectComposer, NgtpLUT],
18
    changeDetection: ChangeDetectionStrategy.OnPush,
19
})
20
export class Grading {
21
    protected result = injectLoader(
22
        () => LUTCubeLoader,
23
        () => cubicleCube,
24
    );
25
}

Credits: R3F Drei’s Color Grading

In the above example, you can see that the performance monitor does not update continuously when on-demand rendering is enabled. Try toggling on-demand rendering, move the camera around, then look at the performance monitor to see the effect. The onDemand signal is controlling the frameloop input

1
protected onDemand = signal(true);
2
protected frameloop = computed(() => (this.onDemand() ? "demand" : "always"));

Manual Frames Invalidation

When using frameloop="demand", a key consideration is that Angular cannot automatically detect changes that occur through direct mutation of THREE.js objects. For example, camera controls directly modify the camera’s properties without going through Angular’s change detection system.

In these scenarios, you can use Angular Three’s invalidate() function, available through the store, to manually request new frames

1
import { OrbitControls } from 'three-stdlib;'
2
import { NgtArgs, injectStore } from 'angular-three';
3

4
@Component({
5
    template: `
6
        <ngt-orbit-controls *args="[store.camera(), store.gl.domElement()]" (change)="onChange()" />
7
    `,
8
    imports: [NgtArgs]
9
})
10
export class MyCmp {
11
    protected store = injectStore();
12

13
    constructor() {
14
        // if you were to implement OrbitControls without angular-three-soba
15
        extend({ OrbitControls })
16
    }
17

18
    onChange() {
19
        // manual invalidate frames on camera change
20
        this.store.snapshot.invalidate();
21
    }
22
}