Skip to content
Angular Three

WebGPU Renderer

WebGPU

To use THREE.js WebGPURenderer, you can use the [gl] input on NgtCanvas component.

canvas.ts
import { NgtGLOptions } from 'angular-three';
import * as THREE from 'three/webgpu';


@Component({
    template: `
        <ngt-canvas [gl]="glFactory">
        </ngt-canvas>
    `
})
export class MyCmp {
    glFactory: NgtGLOptions = (canvas) => {
        return THREE.WebGPURenderer({
            canvas: canvas as HTMLCanvasElement,
            // other options
        });
    }
}

WebGPURenderer does not immediately render and it needs to finish initialization via init() method before it can render. If you need to delay rendering until WebGPURenderer finishes initialization, you can use a Signal<NgtFrameloop> to adjust the [frameloop] input accordingly.

canvas.ts
import { NgtGLOptions, NgtFrameloop } from 'angular-three';
import * as THREE from 'three/webgpu';


@Component({
    template: `
        <ngt-canvas [frameloop]="frameloop()" [gl]="glFactory">
        </ngt-canvas>
    `
})
export class MyCmp {
    frameloop = signal<NgtFrameloop>('never');
    glFactory: NgtGLOptions = (canvas) => {
        const renderer = THREE.WebGPURenderer({
            canvas: canvas as HTMLCanvasElement,
            // other options
        });


        renderer.init().then(() => {
            this.frameloop.set('always');
        });


        return renderer;
    }
}
import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import type { NgtFrameloop, NgtGLOptions } from "angular-three";
import { NgtCanvas } from "angular-three/dom";
import * as THREE from "three/webgpu";
import { SceneGraph } from "./scene-graph";


@Component({
    template: `
        <ngt-canvas [gl]="glFactory" [frameloop]="frameloop()">
            <app-scene-graph *canvasContent />
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtCanvas, SceneGraph],
})
export default class WebGPURendererDemo {
    protected frameloop = signal<NgtFrameloop>("never");
    protected glFactory: NgtGLOptions = (canvas) => {
        const renderer = new THREE.WebGPURenderer({
            canvas: canvas as HTMLCanvasElement,
            antialias: true,
            forceWebGL: false,
        });


        renderer.init().then(() => {
            this.frameloop.set("always");
        });


        return renderer;
    };
}
Credits: Threlte’s WebGPU Demo