Skip to main content

Performance

Re-use Geometries and Materials​

Each Geometry and Material consumes the GPU's resources. If we know certain Geometries and/or Materials will repeat, we can reuse them

Imperative​

We can have static geometries and materials as Component's properties

@Component({
    standalone: true,
    template: `
        <ngt-mesh [geometry]="sphere" [material]="redMaterial" [position]="[1, 1, 1]" />
        <ngt-mesh [geometry]="sphere" [material]="redMaterial" [position]="[2, 2, 2]" />
    `,
})
export class SceneGraph {
    readonly sphere = new THREE.SphereGeometry(1, 32, 32);
    readonly redMaterial = new THREE.MeshBasicMaterial({ color: 'red' });
}

We can also store these static objects in a Service to reuse across the application

Declarative​

We can put the Geometries and Materials declaratively on the template so they can react to Input changes; and still can reuse them

@Component({
    standalone: true,
    template: `
        <ngt-sphere-geometry *args="sphereArgs" [ref]="sphereRef" />
        <ngt-mesh-basic-material #redMaterial [color]="color" />

        <ngt-mesh [geometry]="sphereRef.nativeElement" [material]="redMaterial" [position]="[1, 1, 1]" />
        <ngt-mesh [geometry]="sphereRef.nativeElement" [material]="redMaterial" [position]="[2, 2, 2]" />
    `,
    imports: [NgtArgs],
})
export class SceneGraph {
    readonly sphereRef = injectNgtRef<THREE.SphereGeometry>();

    sphereArgs = [1, 32, 32];
    color = 'red';
}

On-demand Rendering​

Credit: React Three Fiber

The SceneGraph is usually rendered at 60 frames per second. This makes sense if the SceneGraph ontains constantly moving parts (eg: game). Consequently, this drains the device's resources.

If the SceneGraph has static entities, or entities that are allowed to come to a rest, constantly rendering at 60fps would be wasteful. In those cases, we can opt into on-demand rendering, which will only render when necessary. All we have to do is to set frameloop="demand" on the <ngt-canvas>

<ngt-canvas frameloop="demand" />
info

Check out Color Grading example to see on-demand rendering in action.