ris-framework 0.1.0 → 0.2.0-dev.12

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

package/src/webgpu/shader/WebGpuShaderModuleLoader.ts

@@ -0,0 +1,38 @@
+import type {IFramework, IShaderModule, IShaderModuleLoader} from "../../api/index.ts";
+import {shaderModuleCacheKey} from "../../webgl/shader/WebGlShaderModuleLoader.ts";
+import {WebGpuShaderModule} from "./WebGpuShaderModule.ts";
+
+/**
+ * Loads and caches WGSL shader modules by id.
+ * @internal
+ */
+export class WebGpuShaderModuleLoader implements IShaderModuleLoader {
+
+    private readonly _shaderModules = new Map<string, WebGpuShaderModule>();
+
+    /**
+     * The constructor.
+     * @param _framework The framework.
+     */
+    public constructor(private readonly _framework: IFramework) {
+    }
+
+    /** @inheritDoc */
+    public load(shaderModuleId: string, keyValueDictionary?: { [id: string]: number }): IShaderModule {
+        const key = shaderModuleCacheKey(shaderModuleId, keyValueDictionary);
+        let module = this._shaderModules.get(key);
+        if (!module) {
+            module = new WebGpuShaderModule(this._framework, shaderModuleId, keyValueDictionary);
+            this._shaderModules.set(key, module);
+        }
+        return module;
+    }
+
+    /** Disposes every cached module. */
+    public dispose(): void {
+        for (const module of this._shaderModules.values()) {
+            module.dispose();
+        }
+        this._shaderModules.clear();
+    }
+}

package/src/webgpu/shader/WgslShaderContent.ts

@@ -0,0 +1,20 @@
+import mainFrameBuffer from "../../../shaders/wgsl/main_frame_buffer.wgsl?raw";
+import mainRenderTargetFlipY from "../../../shaders/wgsl/main_render_target_flip_y.wgsl?raw";
+import unlitMaterial from "../../../shaders/wgsl/unlit_material.wgsl?raw";
+import forwardBlinnPhongMaterial from "../../../shaders/wgsl/forward_blinn_phong_material.wgsl?raw";
+import sprite from "../../../shaders/wgsl/sprite.wgsl?raw";
+import inspectTextureMips from "../../../shaders/wgsl/inspect_texture_mips.wgsl?raw";
+
+/**
+ * The framework's built-in WGSL shaders, keyed by the same ids the WebGL backend uses where one exists.
+ * Every shader has `main_vs` and `main_fs` entry points.
+ * @internal
+ */
+export const WgslShaderContent: { [id: string]: string } = {
+    "main_frame_buffer": mainFrameBuffer,
+    "main_render_target_flip_y": mainRenderTargetFlipY,
+    "unlit_material": unlitMaterial,
+    "forward_blinn_phong_material": forwardBlinnPhongMaterial,
+    "sprite": sprite,
+    "inspect_texture_mips": inspectTextureMips,
+};

package/src/webgpu/swap-chain/WebGpuSwapChain.ts

@@ -0,0 +1,93 @@
+import {vec2} from "gl-matrix";
+import {type ISwapChain, SwapChainDescriptor, TextureFormat} from "../../api/index.ts";
+import type {WebGpuGraphicsDevice} from "../WebGpuGraphicsDevice.ts";
+import {GpuTextureUsage, type GpuCanvasContext, type GpuTextureView} from "../WebGpuTypes.ts";
+
+/**
+ * The WebGPU swap chain, backed by the canvas' `webgpu` context.
+ *
+ * The canvas is configured as `rgba8unorm` instead of `navigator.gpu.getPreferredCanvasFormat()` (often `bgra8unorm`),
+ * because the framework's {@link TextureFormat} has no BGRA format and the main render target uses the swap chain format.
+ * @internal
+ */
+export class WebGpuSwapChain implements ISwapChain {
+
+    private readonly _canvas: HTMLCanvasElement;
+    private readonly _graphicsDevice: WebGpuGraphicsDevice;
+    private readonly _context: GpuCanvasContext;
+    private readonly _backBufferSize: vec2;
+    private _currentView: GpuTextureView | null = null;
+
+    /**
+     * The constructor.
+     * @param canvas The canvas.
+     * @param graphicsDevice The graphics device.
+     * @param _descriptor The swap chain descriptor. WebGPU canvases always present with FIFO.
+     */
+    public constructor(canvas: HTMLCanvasElement, graphicsDevice: WebGpuGraphicsDevice, _descriptor?: SwapChainDescriptor) {
+        this._canvas = canvas;
+        this._graphicsDevice = graphicsDevice;
+        const context = canvas.getContext("webgpu" as "webgl2") as unknown as GpuCanvasContext | null;
+        if (!context) {
+            throw new Error("WebGPU canvas context is not available.");
+        }
+        this._context = context;
+        this._backBufferSize = vec2.fromValues(canvas.width, canvas.height);
+        this._configure();
+    }
+
+    private _configure(): void {
+        this._context.configure({
+            device: this._graphicsDevice.device,
+            format: "rgba8unorm",
+            usage: GpuTextureUsage.RENDER_ATTACHMENT,
+            alphaMode: this._graphicsDevice.alpha ? "premultiplied" : "opaque",
+        });
+    }
+
+    /** @inheritDoc */
+    public get textureFormat(): TextureFormat {
+        return TextureFormat.RGBA_8_UNORM;
+    }
+
+    /** @inheritDoc */
+    public get backBufferSize(): vec2 {
+        return this._backBufferSize;
+    }
+
+    /**
+     * The view of the current canvas texture. Acquired once per frame and released on {@link present}.
+     */
+    public get currentTextureView(): GpuTextureView {
+        if (!this._currentView) {
+            this._currentView = this._context.getCurrentTexture().createView();
+        }
+        return this._currentView;
+    }
+
+    /** @inheritDoc */
+    public resize(width: number, height: number): void {
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        this._currentView = null;
+        this._canvas.width = width;
+        this._canvas.height = height;
+        this._backBufferSize[0] = width;
+        this._backBufferSize[1] = height;
+    }
+
+    /** @inheritDoc */
+    public present(): void {
+        // The browser presents the canvas texture after the task; the next frame needs a fresh texture.
+        this._currentView = null;
+        this._backBufferSize[0] = this._canvas.width;
+        this._backBufferSize[1] = this._canvas.height;
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._currentView = null;
+        this._context.unconfigure();
+    }
+}