ris-framework 0.2.0-dev.11 → 0.2.0-dev.12

package/src/webgpu/buffers/WebGpuIndexBuffer.ts

@@ -0,0 +1,118 @@
+import {BufferUsage, type IFramework, type IIndexBuffer, IndexBufferType} from "../../api/index.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import {GpuBufferUsage, type GpuBuffer, type GpuIndexFormat} from "../WebGpuTypes.ts";
+
+/**
+ * The WebGPU index buffer. Uses uint16 when every index fits, otherwise uint32.
+ * The allocation and the write are padded to 4 bytes, because WebGPU requires it (odd uint16 counts).
+ * @internal
+ */
+export class WebGpuIndexBuffer implements IIndexBuffer {
+
+    private readonly _graphicsDevice: WebGpuGraphicsDevice;
+    private readonly _label?: string;
+    private _type = IndexBufferType.UINT_16;
+    private _elementByteSize = 0;
+    private _indicesCount = 0;
+    private _byteSize = 0;
+    private _gpuBuffer: GpuBuffer | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param label The label.
+     */
+    public constructor(framework: IFramework, label?: string) {
+        this._graphicsDevice = framework.renderer.graphicsDevice as WebGpuGraphicsDevice;
+        this._label = label;
+    }
+
+    /** @inheritDoc */
+    public readonly usage: BufferUsage = BufferUsage.INDEX;
+
+    /** The WebGPU buffer. */
+    public get gpuBuffer(): GpuBuffer {
+        if (!this._gpuBuffer) {
+            throw new Error("WebGpuIndexBuffer: the buffer is not initialized or is disposed.");
+        }
+        return this._gpuBuffer;
+    }
+
+    /** The WebGPU index format. */
+    public get gpuIndexFormat(): GpuIndexFormat {
+        return this._type === IndexBufferType.UINT_16 ? "uint16" : "uint32";
+    }
+
+    /** The buffer size padded to 4 bytes, as used for `setIndexBuffer`. */
+    public get paddedByteSize(): number {
+        return (this._byteSize + 3) & ~3;
+    }
+
+    /** @inheritDoc */
+    public get type(): IndexBufferType {
+        return this._type;
+    }
+
+    /** @inheritDoc */
+    public get elementByteSize(): number {
+        return this._elementByteSize;
+    }
+
+    /** @inheritDoc */
+    public get label(): string {
+        return this._label ?? "";
+    }
+
+    /** @inheritDoc */
+    public get indicesCount(): number {
+        return this._indicesCount;
+    }
+
+    /** @inheritDoc */
+    public get byteSize(): number {
+        return this._byteSize;
+    }
+
+    private static _canUseUint16(values: ArrayLike<number>): boolean {
+        for (let i = 0; i < values.length; i++) {
+            const v = values[i];
+            if (v < 0 || v > 0xFFFF) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /** @inheritDoc */
+    public initialize(data: ArrayLike<number>): void {
+        this._gpuBuffer?.destroy();
+        const use16 = WebGpuIndexBuffer._canUseUint16(data);
+        this._type = use16 ? IndexBufferType.UINT_16 : IndexBufferType.UINT_32;
+        this._elementByteSize = use16 ? 2 : 4;
+        this._indicesCount = data.length;
+        this._byteSize = this._indicesCount * this._elementByteSize;
+
+        const padded = Math.max(4, this.paddedByteSize);
+        // Allocate the padded size so the write below can include the padding.
+        const bytes = new ArrayBuffer(padded);
+        if (use16) {
+            new Uint16Array(bytes, 0, data.length).set(data);
+        } else {
+            new Uint32Array(bytes, 0, data.length).set(data);
+        }
+
+        const device = this._graphicsDevice.device;
+        this._gpuBuffer = device.createBuffer({
+            label: this._label,
+            size: padded,
+            usage: GpuBufferUsage.INDEX | GpuBufferUsage.COPY_DST,
+        });
+        device.queue.writeBuffer(this._gpuBuffer, 0, bytes, 0, padded);
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._gpuBuffer?.destroy();
+        this._gpuBuffer = null;
+    }
+}

package/src/webgpu/buffers/WebGpuUniformBuffer.ts

@@ -0,0 +1,102 @@
+import {type BufferUsage, type IFramework, type IUniformBuffer} 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 uniform buffer. The size is aligned to 16 bytes and the buffer always has UNIFORM | COPY_DST.
+ * @internal
+ */
+export class WebGpuUniformBuffer implements IUniformBuffer {
+
+    private static _nextId = 1;
+
+    private readonly _graphicsDevice: WebGpuGraphicsDevice;
+    private readonly _data: Float32Array;
+    private readonly _byteSize: number;
+    private _gpuBuffer: GpuBuffer | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param dataOrFloatCount The initial float data, or the number of floats.
+     * @param bufferUsage The buffer usage.
+     * @param label The label.
+     */
+    public constructor(framework: IFramework, dataOrFloatCount: ArrayLike<number> | number, bufferUsage: BufferUsage, label?: string) {
+        this._graphicsDevice = framework.renderer.graphicsDevice as WebGpuGraphicsDevice;
+        this.usage = bufferUsage;
+        this.label = label;
+        this.id = WebGpuUniformBuffer._nextId++;
+        const floatCount = typeof dataOrFloatCount === "number" ? dataOrFloatCount : dataOrFloatCount.length;
+        // Uniform buffer bindings must be a multiple of 16 bytes.
+        const alignedFloats = Math.max(4, Math.ceil(floatCount / 4) * 4);
+        this._data = new Float32Array(alignedFloats);
+        if (typeof dataOrFloatCount !== "number") {
+            this._data.set(dataOrFloatCount);
+        }
+        this._byteSize = this._data.byteLength;
+    }
+
+    /** A unique id, used to cache bind groups. */
+    public readonly id: number;
+
+    /** @inheritDoc */
+    public readonly label?: string;
+
+    /** @inheritDoc */
+    public readonly usage: BufferUsage;
+
+    /** @inheritDoc */
+    public get byteSize(): number {
+        return this._byteSize;
+    }
+
+    /** The WebGPU buffer. */
+    public get gpuBuffer(): GpuBuffer {
+        if (!this._gpuBuffer) {
+            throw new Error("WebGpuUniformBuffer: the buffer is not initialized or is disposed.");
+        }
+        return this._gpuBuffer;
+    }
+
+    /** @inheritDoc */
+    public initialize(): void {
+        const device = this._graphicsDevice.device;
+        this._gpuBuffer = device.createBuffer({
+            label: this.label,
+            size: this._byteSize,
+            usage: WebGpuConverter.convertBufferUsage(this.usage) | GpuBufferUsage.UNIFORM | GpuBufferUsage.COPY_DST,
+        });
+        device.queue.writeBuffer(this._gpuBuffer, 0, this._data.buffer, this._data.byteOffset, this._data.byteLength);
+    }
+
+    /**
+     * Updates the buffer. Only the data's length is written.
+     * @param data The float data.
+     * @param offset The first float to write.
+     * @param length The number of floats to write; defaults to the data's length after the offset.
+     */
+    public update(data: ArrayLike<number>, offset: number = 0, length?: number): void {
+        let count = length ?? data.length - offset;
+        count = Math.min(count, this._data.length - offset, data.length - offset);
+        if (count <= 0) {
+            return;
+        }
+        for (let i = 0; i < count; i++) {
+            this._data[offset + i] = data[offset + i];
+        }
+        this._graphicsDevice.device.queue.writeBuffer(
+            this.gpuBuffer,
+            offset * Float32Array.BYTES_PER_ELEMENT,
+            this._data.buffer,
+            this._data.byteOffset + offset * Float32Array.BYTES_PER_ELEMENT,
+            count * Float32Array.BYTES_PER_ELEMENT);
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._gpuBuffer?.destroy();
+        this._gpuBuffer = null;
+    }
+}

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;
+    }
+}