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

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.");
+    }
+}

package/src/webgpu/render-pipelines/material/AWebGpuMeshRenderPipeline.ts

@@ -0,0 +1,249 @@
+import {
+    type IFramework,
+    type IIndexBuffer,
+    type IPrimitiveState,
+    type ISampler,
+    type ITexture2D,
+    type IUniformBuffer,
+    type IVertexBuffer,
+    State,
+} from "../../../api/index.ts";
+import {AWebGpuRenderPipeline} from "../AWebGpuRenderPipeline.ts";
+import {WebGpuTexture2D} from "../../texture/WebGpuTexture2D.ts";
+import type {WebGpuSampler} from "../../sampler/WebGpuSampler.ts";
+import type {WebGpuUniformBuffer} from "../../buffers/WebGpuUniformBuffer.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,
+    type GpuBuffer,
+} from "../../WebGpuTypes.ts";
+
+/**
+ * One uniform buffer binding of a uniform bind group.
+ * @internal
+ */
+export interface IWebGpuUniformBinding {
+    /** The WGSL `@binding`. */
+    binding: number;
+    /** The shader stages that read it. */
+    visibility: number;
+    /** Returns the current buffer. */
+    buffer: () => IUniformBuffer;
+}
+
+/**
+ * A uniform-buffer-only bind group. The bind group is rebuilt when any of its buffers change (dirty check).
+ * @internal
+ */
+export interface IWebGpuUniformGroup {
+    /** The WGSL `@group`. */
+    group: number;
+    /** The bindings. */
+    bindings: IWebGpuUniformBinding[];
+}
+
+interface UniformGroupState {
+    descriptor: IWebGpuUniformGroup;
+    layout: GpuBindGroupLayout;
+    bindGroup: GpuBindGroup | null;
+    lastBuffers: GpuBuffer[];
+}
+
+/**
+ * The base of WebGPU mesh pipelines, like the C# `AWebGPUMeshRenderPipeline`:
+ * uniform groups with dirty checks, plus one texture + sampler group cached per texture and sampler id.
+ * A 1x1 white texture is used when no texture is set.
+ * @internal
+ */
+export abstract class AWebGpuMeshRenderPipeline extends AWebGpuRenderPipeline {
+
+    private _uniformGroups: UniformGroupState[] = [];
+    private _textureGroupIndex = 1;
+    private _textureGroupLayout: GpuBindGroupLayout = null!;
+    private readonly _textureBindGroups = new Map<string, GpuBindGroup>();
+    private readonly _watchedTextures = new Set<ITexture2D>();
+    private readonly _onTextureDisposed = (texture: ITexture2D) => this._forgetTexture(texture);
+
+    protected _texture: WebGpuTexture2D | null = null;
+    protected _sampler?: WebGpuSampler;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param primitiveState The optional primitive state.
+     */
+    protected constructor(framework: IFramework, primitiveState?: IPrimitiveState) {
+        super(framework, primitiveState);
+    }
+
+    /** The shader id to load. */
+    protected abstract readonly _shaderId: string;
+
+    /** The uniform groups. */
+    protected abstract _describeUniformGroups(): IWebGpuUniformGroup[];
+
+    /** The group index used for texture + sampler. */
+    protected get _textureGroup(): number {
+        return 1;
+    }
+
+    /** @inheritDoc */
+    public get diffuseTexture(): ITexture2D {
+        return this._texture ?? WebGpuTexture2D.getOrCreateDefault(this._framework);
+    }
+
+    /** @inheritDoc */
+    public set diffuseTexture(value: ITexture2D) {
+        this._texture = (value as WebGpuTexture2D) ?? null;
+    }
+
+    /** @inheritDoc */
+    public get diffuseTextureSampler(): ISampler | undefined {
+        return this._sampler;
+    }
+
+    /** @inheritDoc */
+    public set diffuseTextureSampler(value: ISampler | undefined) {
+        this._sampler = value as WebGpuSampler | undefined;
+    }
+
+    /** @inheritDoc */
+    public initialize(): void {
+        const device = this._graphicsDevice.device;
+        const module = this._framework.content.loadShaderModule(this._shaderId) as WebGpuShaderModule;
+
+        this._textureGroupIndex = this._textureGroup;
+        this._textureGroupLayout = device.createBindGroupLayout({
+            label: `${this._shaderId} texture group layout`,
+            entries: [
+                {binding: 0, visibility: GpuShaderStage.FRAGMENT, texture: {sampleType: "float"}},
+                {binding: 1, visibility: GpuShaderStage.FRAGMENT, sampler: {type: "filtering"}},
+            ],
+        });
+
+        this._uniformGroups = this._describeUniformGroups().map(descriptor => ({
+            descriptor,
+            layout: device.createBindGroupLayout({
+                label: `${this._shaderId} group ${descriptor.group} layout`,
+                entries: descriptor.bindings.map(b => ({binding: b.binding, visibility: b.visibility, buffer: {type: "uniform"}})),
+            }),
+            bindGroup: null,
+            lastBuffers: [],
+        }));
+
+        const groupCount = Math.max(this._textureGroupIndex, ...this._uniformGroups.map(g => g.descriptor.group)) + 1;
+        const layouts: GpuBindGroupLayout[] = [];
+        for (let i = 0; i < groupCount; i++) {
+            const layout = i === this._textureGroupIndex
+                ? this._textureGroupLayout
+                : this._uniformGroups.find(g => g.descriptor.group === i)?.layout;
+            if (!layout) {
+                throw new Error(`${this._shaderId}: bind group ${i} has no layout.`);
+            }
+            layouts.push(layout);
+        }
+
+        const renderer = this._framework.renderer;
+        this._createGpuPipeline(
+            `${this._shaderId} pipeline`,
+            module.gpuShaderModule,
+            layouts,
+            renderer.preferredTextureFormat,
+            renderer.preferredDepthStencilFormat);
+    }
+
+    private _getUniformBindGroup(state: UniformGroupState): GpuBindGroup {
+        const buffers = state.descriptor.bindings.map(b => (b.buffer() as WebGpuUniformBuffer).gpuBuffer);
+        const dirty = !state.bindGroup
+            || buffers.length !== state.lastBuffers.length
+            || buffers.some((buffer, i) => buffer !== state.lastBuffers[i]);
+        if (dirty) {
+            state.bindGroup = this._graphicsDevice.device.createBindGroup({
+                label: `${this._shaderId} group ${state.descriptor.group}`,
+                layout: state.layout,
+                entries: state.descriptor.bindings.map((b, i) => ({
+                    binding: b.binding,
+                    resource: {buffer: buffers[i], offset: 0, size: buffers[i].size},
+                })),
+            });
+            state.lastBuffers = buffers;
+        }
+        return state.bindGroup!;
+    }
+
+    private _getTextureBindGroup(): GpuBindGroup {
+        const texture = (this._texture && this._texture.textureState !== State.DISPOSED)
+            ? this._texture
+            : WebGpuTexture2D.getOrCreateDefault(this._framework);
+        const sampler = this._sampler ?? this._defaultTextureSampler;
+        const key = `${texture.id}:${sampler.id}`;
+        let bindGroup = this._textureBindGroups.get(key);
+        if (!bindGroup) {
+            bindGroup = this._graphicsDevice.device.createBindGroup({
+                label: `${this._shaderId} texture group ${key}`,
+                layout: this._textureGroupLayout,
+                entries: [
+                    {binding: 0, resource: texture.gpuDefaultView},
+                    {binding: 1, resource: sampler.gpuSampler},
+                ],
+            });
+            this._textureBindGroups.set(key, bindGroup);
+            if (!this._watchedTextures.has(texture)) {
+                this._watchedTextures.add(texture);
+                texture.addOnDisposedListener(this._onTextureDisposed);
+            }
+        }
+        return bindGroup;
+    }
+
+    private _forgetTexture(texture: ITexture2D): void {
+        const prefix = `${texture.id}:`;
+        for (const key of [...this._textureBindGroups.keys()]) {
+            if (key.startsWith(prefix)) {
+                this._textureBindGroups.delete(key);
+            }
+        }
+        this._watchedTextures.delete(texture);
+    }
+
+    /** @inheritDoc */
+    public render(vertexBuffer: IVertexBuffer, indexBuffer: IIndexBuffer, indicesCount: number = -1, indicesOffset: number = 0): void {
+        if (indicesCount == 0 || !this._gpuPipeline) {
+            return;
+        }
+        const vb = vertexBuffer as WebGpuVertexBuffer;
+        const ib = indexBuffer as WebGpuIndexBuffer;
+        const encoder = this._graphicsDevice.renderPassEncoder;
+
+        encoder.setPipeline(this._gpuPipeline);
+        encoder.setVertexBuffer(0, vb.gpuBuffer, 0, vb.byteSize);
+        // The index buffer was allocated padded to 4 bytes; bind the padded size.
+        encoder.setIndexBuffer(ib.gpuBuffer, ib.gpuIndexFormat, 0, ib.paddedByteSize);
+
+        for (const state of this._uniformGroups) {
+            encoder.setBindGroup(state.descriptor.group, this._getUniformBindGroup(state));
+        }
+        encoder.setBindGroup(this._textureGroupIndex, this._getTextureBindGroup());
+
+        // Range draws: firstIndex is the index offset, count defaults to the rest of the buffer.
+        const count = indicesCount < 0 ? ib.indicesCount - indicesOffset : indicesCount;
+        encoder.drawIndexed(count, 1, indicesOffset);
+    }
+
+    /** @inheritDoc */
+    public override dispose(): void {
+        for (const texture of this._watchedTextures) {
+            texture.removeOnDisposedListener(this._onTextureDisposed);
+        }
+        this._watchedTextures.clear();
+        this._textureBindGroups.clear();
+        for (const state of this._uniformGroups) {
+            state.bindGroup = null;
+        }
+        super.dispose();
+    }
+}

package/src/webgpu/render-pipelines/material/WebGpuUnlitRenderPipeline.ts

@@ -0,0 +1,101 @@
+import {
+    GeometryFormat,
+    type IFramework,
+    type IPrimitiveState,
+    type IUniformBuffer,
+    type IUnlitRenderPipeline,
+} from "../../../api/index.ts";
+import {VertexBufferLayout} from "../../../core/rendering/vertex-buffer-layout.ts";
+import {AWebGpuMeshRenderPipeline, type IWebGpuUniformGroup} from "./AWebGpuMeshRenderPipeline.ts";
+import {GpuShaderStage} from "../../WebGpuTypes.ts";
+
+/**
+ * The WebGPU unlit pipeline (`unlit_material.wgsl`).
+ * Group 0: projection-view (0), model (1). Group 1: texture (0), sampler (1). Group 2: material (2).
+ * @internal
+ */
+export class WebGpuUnlitRenderPipeline extends AWebGpuMeshRenderPipeline implements IUnlitRenderPipeline {
+
+    private _projectionViewBuffer: IUniformBuffer;
+    private _modelBuffer: IUniformBuffer;
+    private _materialBuffer: IUniformBuffer;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param projectionViewBuffer The projection-view buffer.
+     * @param modelBuffer The model buffer.
+     * @param materialBuffer The material buffer.
+     * @param primitiveState The optional primitive state.
+     */
+    public constructor(framework: IFramework,
+                       projectionViewBuffer: IUniformBuffer,
+                       modelBuffer: IUniformBuffer,
+                       materialBuffer: IUniformBuffer,
+                       primitiveState?: IPrimitiveState) {
+        if (!modelBuffer) {
+            throw new Error("WebGpuUnlitRenderPipeline: modelBuffer is required (the mesh's model buffer, mat4).");
+        }
+        super(framework, primitiveState);
+        this._projectionViewBuffer = projectionViewBuffer;
+        this._modelBuffer = modelBuffer;
+        this._materialBuffer = materialBuffer;
+        this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float4Float2Layout()];
+    }
+
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
+
+    /** @inheritDoc */
+    protected readonly _shaderId = "unlit_material";
+
+    /** @inheritDoc */
+    protected _describeUniformGroups(): IWebGpuUniformGroup[] {
+        return [
+            {
+                group: 0, bindings: [
+                    {binding: 0, visibility: GpuShaderStage.VERTEX, buffer: () => this._projectionViewBuffer},
+                    {binding: 1, visibility: GpuShaderStage.VERTEX, buffer: () => this._modelBuffer},
+                ],
+            },
+            {
+                group: 2, bindings: [
+                    {binding: 2, visibility: GpuShaderStage.FRAGMENT, buffer: () => this._materialBuffer},
+                ],
+            },
+        ];
+    }
+
+    /** @inheritDoc */
+    public get projectionViewBuffer(): IUniformBuffer {
+        return this._projectionViewBuffer;
+    }
+
+    /** @inheritDoc */
+    public set projectionViewBuffer(value: IUniformBuffer) {
+        this._projectionViewBuffer = value;
+    }
+
+    /** @inheritDoc */
+    public get modelBuffer(): IUniformBuffer {
+        return this._modelBuffer;
+    }
+
+    /** @inheritDoc */
+    public set modelBuffer(value: IUniformBuffer) {
+        if (!value) {
+            throw new Error("WebGpuUnlitRenderPipeline: modelBuffer is required (the mesh's model buffer, mat4).");
+        }
+        this._modelBuffer = value;
+    }
+
+    /** @inheritDoc */
+    public get materialBuffer(): IUniformBuffer {
+        return this._materialBuffer;
+    }
+
+    /** @inheritDoc */
+    public set materialBuffer(value: IUniformBuffer) {
+        this._materialBuffer = value;
+    }
+}

package/src/webgpu/sampler/WebGpuSampler.ts

@@ -0,0 +1,84 @@
+import {SamplerDescriptor} from "../../core/rendering/sampler/sampler-descriptor.ts";
+import {type ISampler, MipMapSamplerFilter} from "../../api/index.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import type {GpuSampler} from "../WebGpuTypes.ts";
+import {WebGpuConverter} from "../utilities/WebGpuConverter.ts";
+
+/**
+ * The WebGPU sampler.
+ * @internal
+ */
+export class WebGpuSampler implements ISampler {
+
+    private static _nextId = 0;
+
+    private _gpuSampler: GpuSampler | null;
+
+    /**
+     * The constructor.
+     * @param graphicsDevice The graphics device.
+     * @param descriptor The sampler descriptor.
+     */
+    public constructor(graphicsDevice: WebGpuGraphicsDevice, descriptor?: SamplerDescriptor) {
+        descriptor = descriptor ?? new SamplerDescriptor();
+        this.id = WebGpuSampler._nextId++;
+        this.minFilter = descriptor.minFilter;
+        this.magFilter = descriptor.magFilter;
+        this.mipmapFilter = descriptor.mipMapFilter;
+        this.addressModeU = descriptor.addressModeU;
+        this.addressModeV = descriptor.addressModeV;
+        this.addressModeW = descriptor.addressModeW;
+
+        this._gpuSampler = graphicsDevice.device.createSampler({
+            label: `WebGpuSampler ${this.id}`,
+            minFilter: WebGpuConverter.convertFilter(this.minFilter),
+            magFilter: WebGpuConverter.convertFilter(this.magFilter),
+            mipmapFilter: WebGpuConverter.convertMipMapFilter(this.mipmapFilter),
+            addressModeU: WebGpuConverter.convertAddressMode(this.addressModeU),
+            addressModeV: WebGpuConverter.convertAddressMode(this.addressModeV),
+            addressModeW: WebGpuConverter.convertAddressMode(this.addressModeW),
+            // Without mip filtering only the base level is sampled.
+            lodMaxClamp: this.mipmapFilter === MipMapSamplerFilter.NONE ? 0 : 32,
+        });
+    }
+
+    /** @inheritDoc */
+    public readonly id: number;
+
+    /** @inheritDoc */
+    public readonly minFilter;
+
+    /** @inheritDoc */
+    public readonly magFilter;
+
+    /** @inheritDoc */
+    public readonly mipmapFilter;
+
+    /** @inheritDoc */
+    public readonly addressModeU;
+
+    /** @inheritDoc */
+    public readonly addressModeV;
+
+    /** @inheritDoc */
+    public readonly addressModeW;
+
+    /** The WebGPU sampler. */
+    public get gpuSampler(): GpuSampler {
+        if (!this._gpuSampler) {
+            throw new Error("WebGpuSampler: the sampler is disposed.");
+        }
+        return this._gpuSampler;
+    }
+
+    /** @inheritDoc */
+    public get handle(): any {
+        return this._gpuSampler;
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        // WebGPU samplers have no destroy(); dropping the reference lets the browser collect it.
+        this._gpuSampler = null;
+    }
+}

package/src/webgpu/shader/WebGpuShaderModule.ts

@@ -0,0 +1,65 @@
+import {type IFramework, type IShaderModule, ShaderStage} from "../../api/index.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import type {GpuShaderModule} from "../WebGpuTypes.ts";
+import {WgslShaderContent} from "./WgslShaderContent.ts";
+
+/**
+ * A WGSL shader module. One module holds both stages (`main_vs` and `main_fs`).
+ * @internal
+ */
+export class WebGpuShaderModule implements IShaderModule {
+
+    private _gpuShaderModule: GpuShaderModule | null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param id The built-in shader id, for example `unlit_material`.
+     * @param keyValueDictionary Optional `##KEY##` replacements, like the WebGL loader.
+     */
+    public constructor(framework: IFramework, id: string, keyValueDictionary?: { [id: string]: number }) {
+        let code = WgslShaderContent[id];
+        if (code === undefined) {
+            throw new Error(`WGSL shader '${id}' is not implemented for WebGPU.`);
+        }
+        if (keyValueDictionary) {
+            for (const key in keyValueDictionary) {
+                code = code.split(`##${key}##`).join(String(keyValueDictionary[key]));
+            }
+        }
+        const device = (framework.renderer.graphicsDevice as WebGpuGraphicsDevice).device;
+        this._gpuShaderModule = device.createShaderModule({label: id, code});
+        this.label = id;
+        this._gpuShaderModule.getCompilationInfo?.().then(info => {
+            for (const message of info.messages) {
+                if (message.type === "error") {
+                    console.error(`WGSL ${id}:${message.lineNum}:${message.linePos} ${message.message}`);
+                }
+            }
+        }).catch(() => { /* ignore */ });
+    }
+
+    /** The shader id. */
+    public readonly label: string;
+
+    /** @inheritDoc */
+    public readonly stages: ShaderStage[] = [ShaderStage.VERTEX, ShaderStage.FRAGMENT];
+
+    /** The WebGPU shader module. */
+    public get gpuShaderModule(): GpuShaderModule {
+        if (!this._gpuShaderModule) {
+            throw new Error("WebGpuShaderModule: the module is disposed.");
+        }
+        return this._gpuShaderModule;
+    }
+
+    /** @inheritDoc */
+    public get nativeHandle(): any {
+        return this._gpuShaderModule;
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._gpuShaderModule = null;
+    }
+}