Performance

Reuse 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

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

We can also store these static objects in a Service to reuse across the application or turn them into Signals.

Declarative

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

1
<ngt-sphere-geometry #sphere *args="[1, 32, 32]" attach="none" />
2
<ngt-mesh-basic-material #redMaterial color="red" attach="none" />
3

4
<ngt-mesh [geometry]="sphere" [material]="redMaterial" [position]="[1, 1, 1]" />
5
<ngt-mesh [geometry]="sphere" [material]="redMaterial" [position]="[2, 2, 2]" />

On-demand Rendering

Credit: React Three Fiber

The SceneGraph is usually rendered at 60 frames per second. This makes sense if the SceneGraph contains 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>

1
<ngt-canvas [sceneGraph]="SceneGraph" frameloop="demand" />