ris-framework 0.1.0 → 0.2.0-dev.12

package/src/webgpu/buffers/WebGpuVertexBuffer.ts

@@ -0,0 +1,119 @@
+import {BufferUsage, type IFramework, type IVertexBuffer} from "../../api/index.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import {GpuBufferUsage, type GpuBuffer} from "../WebGpuTypes.ts";
+import {WebGpuConverter} from "../utilities/WebGpuConverter.ts";
+
+/**
+ * The WebGPU vertex buffer. Always created with COPY_DST so it can be updated.
+ * @internal
+ */
+export class WebGpuVertexBuffer implements IVertexBuffer {
+
+    private readonly _graphicsDevice: WebGpuGraphicsDevice;
+    private readonly _data: Float32Array;
+    private readonly _vertexCount: number;
+    private readonly _byteSize: number;
+    private _gpuBuffer: GpuBuffer | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param dataOrVertexCount The float vertex data, or the number of vertices to allocate.
+     * @param _byteStride The vertex stride in bytes.
+     * @param _bufferUsage The buffer usage.
+     * @param _label The label.
+     */
+    public constructor(framework: IFramework,
+                       dataOrVertexCount: ArrayLike<number> | number,
+                       private readonly _byteStride: number,
+                       private readonly _bufferUsage: BufferUsage,
+                       private readonly _label?: string) {
+        this._graphicsDevice = framework.renderer.graphicsDevice as WebGpuGraphicsDevice;
+        if (typeof dataOrVertexCount === "number") {
+            this._vertexCount = dataOrVertexCount;
+            this._byteSize = dataOrVertexCount * this._byteStride;
+            this._data = new Float32Array(this._byteSize / Float32Array.BYTES_PER_ELEMENT);
+        } else {
+            this._data = new Float32Array(dataOrVertexCount);
+            this._byteSize = this._data.byteLength;
+            this._vertexCount = this._byteSize / this._byteStride;
+        }
+    }
+
+    /** The WebGPU buffer. */
+    public get gpuBuffer(): GpuBuffer {
+        if (!this._gpuBuffer) {
+            throw new Error("WebGpuVertexBuffer: the buffer is not initialized or is disposed.");
+        }
+        return this._gpuBuffer;
+    }
+
+    /** @inheritDoc */
+    public get label(): string | undefined {
+        return this._label;
+    }
+
+    /** @inheritDoc */
+    public get vertexCount(): number {
+        return this._vertexCount;
+    }
+
+    /** @inheritDoc */
+    public get byteSize(): number {
+        return this._byteSize;
+    }
+
+    /** @inheritDoc */
+    public get byteStride(): number {
+        return this._byteStride;
+    }
+
+    /** @inheritDoc */
+    public get usage(): BufferUsage {
+        return this._bufferUsage;
+    }
+
+    /** @inheritDoc */
+    public initialize(): void {
+        const device = this._graphicsDevice.device;
+        // WebGPU buffer sizes must be a multiple of 4; float data always is.
+        this._gpuBuffer = device.createBuffer({
+            label: this._label,
+            size: Math.max(4, this._byteSize),
+            usage: WebGpuConverter.convertBufferUsage(this._bufferUsage) | GpuBufferUsage.VERTEX | GpuBufferUsage.COPY_DST,
+        });
+        if (this._data.length > 0) {
+            device.queue.writeBuffer(this._gpuBuffer, 0, this._data.buffer, this._data.byteOffset, this._data.byteLength);
+        }
+    }
+
+    /**
+     * Updates the buffer.
+     * @param data The float data.
+     * @param offset The first float to write (in floats, like WebGL).
+     * @param length The number of floats to write; 0 writes the whole data.
+     */
+    public update(data: number[], offset: number = 0, length: number = 0): void {
+        length = length > 0 ? length : data.length - offset;
+        length = Math.min(length, this._data.length - offset, data.length - offset);
+        if (length <= 0) {
+            return;
+        }
+        for (let i = 0; i < length; ++i) {
+            this._data[offset + i] = data[offset + i];
+        }
+        // Write only the changed range, not the whole buffer.
+        this._graphicsDevice.device.queue.writeBuffer(
+            this.gpuBuffer,
+            offset * Float32Array.BYTES_PER_ELEMENT,
+            this._data.buffer,
+            this._data.byteOffset + offset * Float32Array.BYTES_PER_ELEMENT,
+            length * Float32Array.BYTES_PER_ELEMENT);
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._gpuBuffer?.destroy();
+        this._gpuBuffer = null;
+    }
+}

package/src/webgpu/primitive/WebGpuPrimitiveState.ts

@@ -0,0 +1,52 @@
+import {
+    type CullMode,
+    type FrontFace,
+    type IPrimitiveState,
+    type PrimitiveStateDescriptor,
+    type PrimitiveTopology,
+} from "../../api/index.ts";
+import type {GpuCullMode, GpuFrontFace, GpuPrimitiveTopology} from "../WebGpuTypes.ts";
+import {WebGpuConverter} from "../utilities/WebGpuConverter.ts";
+
+/**
+ * The WebGPU primitive state. WebGPU bakes it into the render pipeline, so this only holds the converted values.
+ * @internal
+ */
+export class WebGpuPrimitiveState implements IPrimitiveState {
+
+    /**
+     * The constructor.
+     * @param descriptor The primitive state descriptor.
+     */
+    public constructor(descriptor: PrimitiveStateDescriptor) {
+        this.topology = descriptor.topology;
+        this.cullFace = descriptor.cullFace;
+        this.frontFace = descriptor.frontFace;
+        this.gpuTopology = WebGpuConverter.convertTopology(this.topology);
+        this.gpuCullMode = WebGpuConverter.convertCullMode(this.cullFace);
+        this.gpuFrontFace = WebGpuConverter.convertFrontFace(this.frontFace);
+    }
+
+    /** @inheritDoc */
+    public readonly topology: PrimitiveTopology;
+
+    /** @inheritDoc */
+    public readonly cullFace: CullMode;
+
+    /** @inheritDoc */
+    public readonly frontFace: FrontFace;
+
+    /** The WebGPU topology. */
+    public readonly gpuTopology: GpuPrimitiveTopology;
+
+    /** The WebGPU cull mode. */
+    public readonly gpuCullMode: GpuCullMode;
+
+    /** The WebGPU front face. */
+    public readonly gpuFrontFace: GpuFrontFace;
+
+    /** The `GPUPrimitiveState` for a render pipeline. */
+    public get gpuPrimitiveState(): { topology: GpuPrimitiveTopology; cullMode: GpuCullMode; frontFace: GpuFrontFace } {
+        return {topology: this.gpuTopology, cullMode: this.gpuCullMode, frontFace: this.gpuFrontFace};
+    }
+}

package/src/webgpu/render-pass/WebGpuRenderPass.ts

@@ -0,0 +1,131 @@
+import {
+    type IRenderPass,
+    LoadAction,
+    type RenderPassDescriptor,
+    StoreAction,
+} from "../../api/index.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import type {
+    GpuCommandEncoder,
+    GpuRenderPassColorAttachment,
+    GpuRenderPassDepthStencilAttachment,
+    GpuRenderPassDescriptor,
+} from "../WebGpuTypes.ts";
+import {WebGpuConverter} from "../utilities/WebGpuConverter.ts";
+import {WebGpuTexture2D} from "../texture/WebGpuTexture2D.ts";
+import {WebGpuTextureView} from "../texture/WebGpuTextureView.ts";
+import type {WebGpuSwapChain} from "../swap-chain/WebGpuSwapChain.ts";
+
+/**
+ * The WebGPU render pass. `beginPass` creates a command encoder and begins a render pass,
+ * `endPass` ends it and submits the command buffer, like the C# `WebGPURenderPass`.
+ * @internal
+ */
+export class WebGpuRenderPass implements IRenderPass {
+
+    private readonly _graphicsDevice: WebGpuGraphicsDevice;
+    private readonly _descriptor: RenderPassDescriptor;
+    private _commandEncoder: GpuCommandEncoder | null = null;
+
+    /**
+     * The constructor.
+     * @param graphicsDevice The graphics device.
+     * @param descriptor The render pass descriptor.
+     */
+    public constructor(graphicsDevice: WebGpuGraphicsDevice, descriptor: RenderPassDescriptor) {
+        this._graphicsDevice = graphicsDevice;
+        this._descriptor = descriptor;
+        if (!descriptor.colorAttachments || descriptor.colorAttachments.length === 0) {
+            throw new Error("WebGpuRenderPass: at least one color attachment is required.");
+        }
+    }
+
+    private _buildDescriptor(): GpuRenderPassDescriptor {
+        const colorAttachments: GpuRenderPassColorAttachment[] = this._descriptor.colorAttachments!.map(attachment => {
+            let view;
+            if (attachment.swapChain) {
+                view = (attachment.swapChain as WebGpuSwapChain).currentTextureView;
+            } else if (attachment.view) {
+                view = (attachment.view as WebGpuTextureView).gpuTextureView;
+            } else if (attachment.texture) {
+                view = (attachment.texture as WebGpuTexture2D).gpuDefaultView;
+            } else {
+                throw new Error("WebGpuRenderPass: a color attachment needs a swap chain, view or texture.");
+            }
+            const c = attachment.clearColor;
+            return {
+                view,
+                resolveTarget: attachment.resolveView
+                    ? (attachment.resolveView as WebGpuTextureView).gpuTextureView
+                    : attachment.resolveTexture ? (attachment.resolveTexture as WebGpuTexture2D).gpuDefaultView : undefined,
+                clearValue: {r: c.r, g: c.g, b: c.b, a: c.a},
+                loadOp: WebGpuConverter.convertLoadAction(attachment.loadAction),
+                storeOp: WebGpuConverter.convertStoreAction(attachment.storeAction),
+            };
+        });
+
+        const result: GpuRenderPassDescriptor = {
+            label: this._descriptor.label,
+            colorAttachments,
+        };
+
+        const depth = this._descriptor.depthStencilAttachment;
+        if (depth && (depth.texture || depth.view)) {
+            const texture = depth.texture as WebGpuTexture2D | undefined;
+            const format = depth.view?.textureFormat ?? texture!.textureFormat;
+            const attachment: GpuRenderPassDepthStencilAttachment = {
+                view: depth.view ? (depth.view as WebGpuTextureView).gpuTextureView : texture!.gpuDefaultView,
+                depthClearValue: depth.depthClearValue,
+                depthLoadOp: WebGpuConverter.convertLoadAction(depth.depthLoadAction),
+                depthStoreOp: WebGpuConverter.convertStoreAction(depth.depthStoreAction),
+            };
+            // Stencil ops are only valid when the format has a stencil aspect.
+            if (WebGpuConverter.hasStencil(format)) {
+                attachment.stencilClearValue = depth.stencilClearValue;
+                attachment.stencilLoadOp = depth.stencilLoadAction === LoadAction.LOAD ? "load" : "clear";
+                attachment.stencilStoreOp = depth.stencilStoreAction === StoreAction.DISCARD ? "discard" : "store";
+            }
+            result.depthStencilAttachment = attachment;
+        }
+        // A depth attachment without a texture would need an internal depth buffer (WebGL uses a renderbuffer).
+        // TODO: create an internal depth texture for that case.
+
+        return result;
+    }
+
+    /** Whether the pass has a depth attachment. */
+    public get hasDepthStencil(): boolean {
+        const depth = this._descriptor.depthStencilAttachment;
+        return !!depth && !!(depth.texture || depth.view);
+    }
+
+    /** @inheritDoc */
+    public beginPass(): void {
+        if (this._commandEncoder) {
+            throw new Error("WebGpuRenderPass: the pass is already open.");
+        }
+        const device = this._graphicsDevice.device;
+        this._commandEncoder = device.createCommandEncoder({label: this._descriptor.label});
+        this._graphicsDevice.currentRenderPassEncoder = this._commandEncoder.beginRenderPass(this._buildDescriptor());
+    }
+
+    /** @inheritDoc */
+    public endPass(): void {
+        if (!this._commandEncoder) {
+            return;
+        }
+        this._graphicsDevice.currentRenderPassEncoder?.end();
+        this._graphicsDevice.currentRenderPassEncoder = null;
+        this._graphicsDevice.device.queue.submit([this._commandEncoder.finish()]);
+        this._commandEncoder = null;
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        if (this._commandEncoder) {
+            this._graphicsDevice.currentRenderPassEncoder?.end();
+            this._graphicsDevice.currentRenderPassEncoder = null;
+            this._commandEncoder = null;
+        }
+    }
+}

package/src/webgpu/render-pipelines/AWebGpuRenderPipeline.ts

@@ -0,0 +1,123 @@
+import {
+    GeometryFormat,
+    type IBlendState,
+    type IFramework,
+    type IIndexBuffer,
+    type IPrimitiveState,
+    type IRenderPipeline,
+    type IVertexBuffer,
+    TextureFormat,
+} from "../../api/index.ts";
+import type {VertexBufferLayout} from "../../core/rendering/vertex-buffer-layout.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import type {WebGpuBlendState} from "../blending/WebGpuBlendState.ts";
+import type {WebGpuPrimitiveState} from "../primitive/WebGpuPrimitiveState.ts";
+import type {WebGpuSampler} from "../sampler/WebGpuSampler.ts";
+import type {
+    GpuBindGroupLayout,
+    GpuPipelineLayout,
+    GpuRenderPipeline,
+    GpuShaderModule,
+} from "../WebGpuTypes.ts";
+import {WebGpuConverter} from "../utilities/WebGpuConverter.ts";
+
+/**
+ * The base WebGPU render pipeline. Holds the device, the states and the vertex layouts,
+ * and builds the `GPURenderPipeline` from them.
+ * @internal
+ */
+export abstract class AWebGpuRenderPipeline implements IRenderPipeline {
+
+    protected readonly _framework: IFramework;
+    protected readonly _graphicsDevice: WebGpuGraphicsDevice;
+    protected readonly _defaultTextureSampler: WebGpuSampler;
+    protected _blendState: WebGpuBlendState;
+    protected _gpuPipeline: GpuRenderPipeline | null = null;
+    protected _pipelineLayout: GpuPipelineLayout | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param primitiveState The optional primitive state; defaults to the device's.
+     */
+    protected constructor(framework: IFramework, primitiveState?: IPrimitiveState) {
+        this._framework = framework;
+        this._graphicsDevice = framework.renderer.graphicsDevice as WebGpuGraphicsDevice;
+        this._blendState = this._graphicsDevice.defaultBlendState as WebGpuBlendState;
+        this._defaultTextureSampler = this._graphicsDevice.defaultTextureSampler as WebGpuSampler;
+        this.primitiveState = (primitiveState ?? this._graphicsDevice.defaultPrimitiveState) as WebGpuPrimitiveState;
+    }
+
+    /** @inheritDoc */
+    public abstract readonly geometryFormat: GeometryFormat;
+
+    /** @inheritDoc */
+    public get blendState(): IBlendState {
+        return this._blendState;
+    }
+
+    /** @inheritDoc */
+    public readonly primitiveState: WebGpuPrimitiveState;
+
+    /** @inheritDoc */
+    public vertexBufferLayouts: VertexBufferLayout[] = null!;
+
+    /** @inheritDoc */
+    public abstract initialize(): void;
+
+    /** @inheritDoc */
+    public abstract render(vertexBuffer: IVertexBuffer, indexBuffer: IIndexBuffer, indicesCount?: number, indicesOffset?: number): void;
+
+    /**
+     * Creates the pipeline layout and the render pipeline.
+     * @param label The label.
+     * @param module The WGSL module with `main_vs` and `main_fs`.
+     * @param bindGroupLayouts The bind group layouts, in group order.
+     * @param colorFormat The color target format.
+     * @param depthStencilFormat The depth format, or undefined when the pass has no depth attachment.
+     */
+    protected _createGpuPipeline(
+        label: string,
+        module: GpuShaderModule,
+        bindGroupLayouts: GpuBindGroupLayout[],
+        colorFormat: TextureFormat,
+        depthStencilFormat?: TextureFormat): void {
+
+        if (!this.vertexBufferLayouts || this.vertexBufferLayouts.length === 0) {
+            throw new Error("At least one vertex buffer layout must be provided for the render pipeline.");
+        }
+        const device = this._graphicsDevice.device;
+        this._pipelineLayout = device.createPipelineLayout({label: `${label} layout`, bindGroupLayouts});
+        this._gpuPipeline = device.createRenderPipeline({
+            label,
+            layout: this._pipelineLayout,
+            vertex: {
+                module,
+                entryPoint: "main_vs",
+                buffers: this.vertexBufferLayouts.map(l => WebGpuConverter.convertVertexBufferLayout(l)),
+            },
+            fragment: {
+                module,
+                entryPoint: "main_fs",
+                targets: [{
+                    format: WebGpuConverter.convertTextureFormat(colorFormat),
+                    blend: this._blendState.gpuBlendState,
+                }],
+            },
+            primitive: this.primitiveState.gpuPrimitiveState,
+            depthStencil: depthStencilFormat !== undefined ? {
+                format: WebGpuConverter.convertTextureFormat(depthStencilFormat),
+                depthWriteEnabled: true,
+                // Matches the WebGL backend's LEQUAL.
+                depthCompare: "less-equal",
+            } : undefined,
+        });
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        // Pipelines and layouts have no destroy() in WebGPU.
+        this._gpuPipeline = null;
+        this._pipelineLayout = null;
+    }
+}

package/src/webgpu/render-pipelines/WebGpuMainRenderTargetRenderPipeline.ts

@@ -0,0 +1,119 @@
+import {vec2} from "gl-matrix";
+import {
+    BufferUsage,
+    GeometryFormat,
+    type IFramework,
+    type IMainRenderTargetRenderPipeline,
+    type ITexture2D,
+} from "../../api/index.ts";
+import {VertexBufferLayout} from "../../core/rendering/vertex-buffer-layout.ts";
+import {AWebGpuRenderPipeline} from "./AWebGpuRenderPipeline.ts";
+import type {WebGpuTexture2D} from "../texture/WebGpuTexture2D.ts";
+import type {WebGpuVertexBuffer} from "../buffers/WebGpuVertexBuffer.ts";
+import type {WebGpuIndexBuffer} from "../buffers/WebGpuIndexBuffer.ts";
+import type {WebGpuShaderModule} from "../shader/WebGpuShaderModule.ts";
+import {GpuShaderStage, type GpuBindGroup, type GpuBindGroupLayout} from "../WebGpuTypes.ts";
+
+/**
+ * Draws the main render target to the swap chain with `main_frame_buffer.wgsl`.
+ * No Y flip: in WebGPU texture (0,0) is the top-left, which matches the quad's UVs (same as the C# backend).
+ * @internal
+ */
+export class WebGpuMainRenderTargetRenderPipeline extends AWebGpuRenderPipeline implements IMainRenderTargetRenderPipeline {
+
+    private _vertexBuffer: WebGpuVertexBuffer = null!;
+    private _indexBuffer: WebGpuIndexBuffer = null!;
+    private _mainRenderTarget: WebGpuTexture2D;
+    private _bindGroupLayout: GpuBindGroupLayout = null!;
+    private _bindGroup: GpuBindGroup | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param mainRenderTarget The main render target.
+     */
+    public constructor(framework: IFramework, mainRenderTarget: ITexture2D) {
+        super(framework);
+        this._mainRenderTarget = mainRenderTarget as WebGpuTexture2D;
+    }
+
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_TEXTURECOORDS2;
+
+    /** @inheritDoc */
+    public get mainRenderTarget(): ITexture2D {
+        return this._mainRenderTarget;
+    }
+
+    /** Sets the main render target and rebuilds the bind group. */
+    public set mainRenderTarget(value: ITexture2D) {
+        this._mainRenderTarget = value as WebGpuTexture2D;
+        this._bindGroup = null;
+    }
+
+    /** @inheritDoc */
+    public initialize(): void {
+        const module = this._framework.content.loadShaderModule("main_frame_buffer") as WebGpuShaderModule;
+
+        const geometry = this._framework.geometryBuilder.quadGeometry(vec2.fromValues(2, 2));
+        const data = geometry.toInterleaved(GeometryFormat.POS3_TEXTURECOORDS2);
+        this._vertexBuffer = this._framework.bufferFactory.createVertexBuffer(
+            data, (3 + 2) * Float32Array.BYTES_PER_ELEMENT, BufferUsage.VERTEX,
+            "Main Frame Buffer Render Pipeline Vertex Buffer") as WebGpuVertexBuffer;
+        this._indexBuffer = this._framework.bufferFactory.createIndexBuffer(
+            geometry.indices!, "Main Frame Buffer Render Pipeline Index Buffer") as WebGpuIndexBuffer;
+
+        this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float2Layout()];
+
+        this._bindGroupLayout = this._graphicsDevice.device.createBindGroupLayout({
+            label: "Main Frame Buffer bind group layout",
+            entries: [
+                {binding: 0, visibility: GpuShaderStage.FRAGMENT, texture: {sampleType: "float"}},
+                {binding: 1, visibility: GpuShaderStage.FRAGMENT, sampler: {type: "filtering"}},
+            ],
+        });
+
+        // Drawn in the swap chain pass, which has no depth attachment.
+        this._createGpuPipeline(
+            "Main Frame Buffer Render Pipeline",
+            module.gpuShaderModule,
+            [this._bindGroupLayout],
+            this._graphicsDevice.swapChain?.textureFormat ?? this._framework.renderer.preferredTextureFormat);
+    }
+
+    private _getBindGroup(): GpuBindGroup {
+        if (!this._bindGroup) {
+            this._bindGroup = this._graphicsDevice.device.createBindGroup({
+                label: "Main Frame Buffer bind group",
+                layout: this._bindGroupLayout,
+                entries: [
+                    {binding: 0, resource: this._mainRenderTarget.gpuDefaultView},
+                    {binding: 1, resource: this._defaultTextureSampler.gpuSampler},
+                ],
+            });
+        }
+        return this._bindGroup;
+    }
+
+    /** @inheritDoc */
+    public render(): void {
+        if (!this._gpuPipeline) {
+            return;
+        }
+        const encoder = this._graphicsDevice.renderPassEncoder;
+        encoder.setPipeline(this._gpuPipeline);
+        encoder.setVertexBuffer(0, this._vertexBuffer.gpuBuffer, 0, this._vertexBuffer.byteSize);
+        encoder.setIndexBuffer(this._indexBuffer.gpuBuffer, this._indexBuffer.gpuIndexFormat, 0, this._indexBuffer.paddedByteSize);
+        encoder.setBindGroup(0, this._getBindGroup());
+        encoder.drawIndexed(this._indexBuffer.indicesCount, 1, 0);
+    }
+
+    /** @inheritDoc */
+    public override dispose(): void {
+        // ARenderer recreates this pipeline on every resize, so release the quad buffers too.
+        this._vertexBuffer?.dispose();
+        this._indexBuffer?.dispose();
+        this._bindGroup = null;
+        super.dispose();
+    }
+}

package/src/webgpu/render-pipelines/WebGpuRenderPipelineFactory.ts

@@ -0,0 +1,66 @@
+import type {
+    ForwardBlinnPhongRenderPipelineDescriptor,
+    IForwardBlinnPhongRenderPipeline,
+    IFramework,
+    IInspectTextureMipsRenderPipeline,
+    IMainRenderTargetRenderPipeline,
+    IPrimitiveState,
+    IRenderPipelineFactory,
+    ISpriteRenderPipeline,
+    ITexture2D,
+    IUniformBuffer,
+    IUnlitRenderPipeline,
+} from "../../api/index.ts";
+import {WebGpuMainRenderTargetRenderPipeline} from "./WebGpuMainRenderTargetRenderPipeline.ts";
+import {WebGpuUnlitRenderPipeline} from "./material/WebGpuUnlitRenderPipeline.ts";
+
+/**
+ * The WebGPU render pipeline factory. Slice 1 implements the main render target and unlit pipelines.
+ * @internal
+ */
+export class WebGpuRenderPipelineFactory implements IRenderPipelineFactory {
+
+    /**
+     * The constructor.
+     * @param _framework The framework.
+     */
+    public constructor(private readonly _framework: IFramework) {
+    }
+
+    /** @inheritDoc */
+    public createMainFrameBufferPipeline(mainFrameBuffer: ITexture2D): IMainRenderTargetRenderPipeline {
+        const pipeline = new WebGpuMainRenderTargetRenderPipeline(this._framework, mainFrameBuffer);
+        pipeline.initialize();
+        return pipeline;
+    }
+
+    /** Same as {@link createMainFrameBufferPipeline}, mirroring the WebGL factory. */
+    public createMainRenderTargetRenderPipeline(renderTarget: ITexture2D): IMainRenderTargetRenderPipeline {
+        return this.createMainFrameBufferPipeline(renderTarget);
+    }
+
+    /** @inheritDoc */
+    public createUnlitRenderPipeline(projectionViewBuffer: IUniformBuffer,
+                                     modelBuffer: IUniformBuffer,
+                                     materialBuffer: IUniformBuffer,
+                                     primitiveState?: IPrimitiveState): IUnlitRenderPipeline {
+        const pipeline = new WebGpuUnlitRenderPipeline(this._framework, projectionViewBuffer, modelBuffer, materialBuffer, primitiveState);
+        pipeline.initialize();
+        return pipeline;
+    }
+
+    /** @inheritDoc */
+    public createSpriteRenderPipeline(_projectionViewBuffer: IUniformBuffer): ISpriteRenderPipeline {
+        throw new Error("The sprite render pipeline is not implemented for WebGPU.");
+    }
+
+    /** @inheritDoc */
+    public createInspectTextureMipsRenderPipeline(_projectionViewBuffer: IUniformBuffer, _modelBuffer: IUniformBuffer, _textureConstantsBuffer: IUniformBuffer): IInspectTextureMipsRenderPipeline {
+        throw new Error("The inspect texture mips render pipeline is not implemented for WebGPU.");
+    }
+
+    /** @inheritDoc */
+    public createForwardBlinnPhongRenderPipeline(_descriptor: ForwardBlinnPhongRenderPipelineDescriptor): IForwardBlinnPhongRenderPipeline {
+        throw new Error("The forward Blinn-Phong render pipeline is not implemented for WebGPU.");
+    }
+}