@codexo/exojs 0.4.0

package/dist/esm/rendering/webgpu/WebGpuRenderManager.js

@@ -0,0 +1,777 @@
+import { Color } from '../../core/Color.js';
+import { BlendModes, WrapModes, ScaleModes } from '../types.js';
+import { RenderBackendType } from '../RenderBackendType.js';
+import { RendererRegistry } from '../RendererRegistry.js';
+import { createRenderStats, resetRenderStats } from '../RenderStats.js';
+import { RenderTarget } from '../RenderTarget.js';
+import { WebGpuPrimitiveRenderer } from './WebGpuPrimitiveRenderer.js';
+import { WebGpuSpriteRenderer } from './WebGpuSpriteRenderer.js';
+import { WebGpuParticleRenderer } from './WebGpuParticleRenderer.js';
+import { RenderTexture } from '../texture/RenderTexture.js';
+import { Sprite } from '../sprite/Sprite.js';
+import { DrawableShape } from '../primitives/DrawableShape.js';
+import { ParticleSystem } from '../../particles/ParticleSystem.js';
+import { Vector } from '../../math/Vector.js';
+
+/// <reference types="@webgpu/types" />
+const managedTextureFormat = 'rgba8unorm';
+class WebGpuRenderManager {
+    backendType = RenderBackendType.WebGpu;
+    rendererRegistry = new RendererRegistry();
+    _canvas;
+    _rootRenderTarget;
+    _clearColor = new Color();
+    _textureStates = new Map();
+    _textureDestroyHandlers = new Map();
+    _renderTargetDestroyHandlers = new Map();
+    _temporaryRenderTextures = [];
+    _maskStack = [];
+    _maskPixelStack = [];
+    _maskPointA = new Vector();
+    _maskPointB = new Vector();
+    _mipmapShaderModule = null;
+    _mipmapBindGroupLayout = null;
+    _mipmapPipelineLayout = null;
+    _mipmapPipeline = null;
+    _mipmapSampler = null;
+    _context = null;
+    _device = null;
+    _format = null;
+    _initializePromise = null;
+    _renderTarget;
+    _renderer = null;
+    _blendMode = null;
+    _texture = null;
+    _clearRequested = false;
+    _hasPresentedFrame = false;
+    _stats = createRenderStats();
+    constructor(app) {
+        const { width, height, clearColor, } = app.options;
+        this._canvas = app.canvas;
+        this._rootRenderTarget = new RenderTarget(width, height, true);
+        this._renderTarget = this._rootRenderTarget;
+        if (clearColor) {
+            this._clearColor.copy(clearColor);
+        }
+        this.rendererRegistry.registerRenderer(DrawableShape, new WebGpuPrimitiveRenderer());
+        this.rendererRegistry.registerRenderer(Sprite, new WebGpuSpriteRenderer());
+        this.rendererRegistry.registerRenderer(ParticleSystem, new WebGpuParticleRenderer());
+        this.resize(width, height);
+    }
+    get view() {
+        return this._renderTarget.view;
+    }
+    get renderTarget() {
+        return this._renderTarget;
+    }
+    get device() {
+        if (this._device === null) {
+            throw new Error('WebGPU device is not initialized yet.');
+        }
+        return this._device;
+    }
+    get context() {
+        if (this._context === null) {
+            throw new Error('WebGPU canvas context is not initialized yet.');
+        }
+        return this._context;
+    }
+    get format() {
+        if (this._format === null) {
+            throw new Error('WebGPU canvas format is not initialized yet.');
+        }
+        return this._format;
+    }
+    get renderTargetFormat() {
+        return this._renderTarget === this._rootRenderTarget ? this.format : managedTextureFormat;
+    }
+    get clearRequested() {
+        return this._clearRequested;
+    }
+    get stats() {
+        return this._stats;
+    }
+    initialize() {
+        if (!this._initializePromise) {
+            this._initializePromise = this._initialize().catch((error) => {
+                this._initializePromise = null;
+                throw error;
+            });
+        }
+        return this._initializePromise;
+    }
+    resetStats() {
+        resetRenderStats(this._stats);
+        return this;
+    }
+    draw(drawable) {
+        const renderer = this.rendererRegistry.resolve(drawable);
+        this._setActiveRenderer(renderer);
+        renderer.render(drawable);
+        this._stats.submittedNodes++;
+        return this;
+    }
+    execute(pass) {
+        this._flushActiveRenderer();
+        this._stats.renderPasses++;
+        pass.execute(this);
+        return this;
+    }
+    setShader(shader) {
+        if (shader !== null) {
+            throw new Error('WebGPU shaders are not implemented yet.');
+        }
+        return this;
+    }
+    setTexture(texture, _unit) {
+        if (texture === null) {
+            this._texture = null;
+            return this;
+        }
+        if (texture instanceof RenderTarget && !(texture instanceof RenderTexture)) {
+            throw new Error('WebGPU render textures are not implemented yet.');
+        }
+        this._syncTexture(texture);
+        this._texture = texture;
+        return this;
+    }
+    setBlendMode(blendMode) {
+        if (blendMode === null) {
+            this._blendMode = null;
+            return this;
+        }
+        if (blendMode !== BlendModes.Normal
+            && blendMode !== BlendModes.Additive
+            && blendMode !== BlendModes.Subtract
+            && blendMode !== BlendModes.Multiply
+            && blendMode !== BlendModes.Screen) {
+            throw new Error(`WebGPU blend mode "${blendMode}" is not implemented yet.`);
+        }
+        this._blendMode = blendMode;
+        return this;
+    }
+    setVao(vao) {
+        if (vao !== null) {
+            throw new Error('WebGPU vertex array objects are not implemented yet.');
+        }
+        return this;
+    }
+    setRenderTarget(target) {
+        const nextRenderTarget = target ?? this._rootRenderTarget;
+        if (!nextRenderTarget.root && !(nextRenderTarget instanceof RenderTexture)) {
+            throw new Error('WebGPU currently supports only root targets and RenderTexture targets.');
+        }
+        if (this._renderTarget !== nextRenderTarget) {
+            this._flushActiveRenderer();
+            if (this._renderTarget !== this._rootRenderTarget) {
+                this._unsubscribeRenderTarget(this._renderTarget);
+            }
+            this._renderTarget = nextRenderTarget;
+            this._stats.renderTargetChanges++;
+            if (nextRenderTarget !== this._rootRenderTarget) {
+                this._subscribeRenderTarget(nextRenderTarget);
+            }
+        }
+        return this;
+    }
+    pushMask(maskBounds) {
+        this._flushActiveRenderer();
+        this._maskStack.push(maskBounds.clone());
+        const nextMask = this._toMaskPixels(maskBounds);
+        const previousMask = this._maskPixelStack.length > 0
+            ? this._maskPixelStack[this._maskPixelStack.length - 1]
+            : null;
+        const resolvedMask = previousMask ? this._intersectMasks(previousMask, nextMask) : nextMask;
+        this._maskPixelStack.push(resolvedMask);
+        return this;
+    }
+    popMask() {
+        if (this._maskStack.length === 0) {
+            return this;
+        }
+        this._flushActiveRenderer();
+        const removedMask = this._maskStack.pop();
+        if (removedMask) {
+            removedMask.destroy();
+        }
+        this._maskPixelStack.pop();
+        return this;
+    }
+    getScissorRect() {
+        if (this._maskPixelStack.length === 0) {
+            return null;
+        }
+        const mask = this._maskPixelStack[this._maskPixelStack.length - 1];
+        return {
+            x: mask.x,
+            y: mask.y,
+            width: mask.width,
+            height: mask.height,
+        };
+    }
+    acquireRenderTexture(width, height) {
+        for (let index = 0; index < this._temporaryRenderTextures.length; index++) {
+            const texture = this._temporaryRenderTextures[index];
+            if (texture.width === width && texture.height === height) {
+                this._temporaryRenderTextures.splice(index, 1);
+                return texture;
+            }
+        }
+        return new RenderTexture(width, height);
+    }
+    releaseRenderTexture(texture) {
+        if (this._temporaryRenderTextures.includes(texture)) {
+            return this;
+        }
+        texture.setView(null);
+        this._temporaryRenderTextures.push(texture);
+        return this;
+    }
+    setView(view) {
+        this._flushActiveRenderer();
+        this._renderTarget.setView(view);
+        return this;
+    }
+    clear(color) {
+        if (color) {
+            this._clearColor.copy(color);
+        }
+        this._clearRequested = true;
+        return this;
+    }
+    resize(width, height) {
+        this._canvas.width = width;
+        this._canvas.height = height;
+        this._rootRenderTarget.resize(width, height);
+        this._hasPresentedFrame = false;
+        return this;
+    }
+    flush() {
+        if (!this._device || !this._context) {
+            return this;
+        }
+        if (this._renderer) {
+            this._flushActiveRenderer();
+        }
+        else if (this._clearRequested) {
+            const encoder = this._device.createCommandEncoder();
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [this.createColorAttachment()],
+            });
+            pass.end();
+            this._stats.renderPasses++;
+            this.submit(encoder.finish());
+        }
+        return this;
+    }
+    destroy() {
+        this._setActiveRenderer(null);
+        this.rendererRegistry.destroy();
+        this._destroyManagedTextures();
+        this._destroyTemporaryRenderTextures();
+        for (const mask of this._maskStack) {
+            mask.destroy();
+        }
+        this._maskStack.length = 0;
+        this._maskPixelStack.length = 0;
+        this._maskPointA.destroy();
+        this._maskPointB.destroy();
+        for (const target of Array.from(this._renderTargetDestroyHandlers.keys())) {
+            this._unsubscribeRenderTarget(target);
+        }
+        this._context?.unconfigure();
+        this._context = null;
+        this._device = null;
+        this._format = null;
+        this._initializePromise = null;
+        this._clearRequested = false;
+        this._hasPresentedFrame = false;
+        this._texture = null;
+        this._mipmapShaderModule = null;
+        this._mipmapBindGroupLayout = null;
+        this._mipmapPipelineLayout = null;
+        this._mipmapPipeline = null;
+        this._mipmapSampler = null;
+        this._renderTarget = this._rootRenderTarget;
+        this._clearColor.destroy();
+        this._rootRenderTarget.destroy();
+    }
+    createColorAttachment() {
+        const renderTarget = this._renderTarget;
+        let attachmentState = null;
+        if (renderTarget === this._rootRenderTarget) {
+            attachmentState = {
+                view: this.context.getCurrentTexture().createView(),
+                shouldClear: this._clearRequested || !this._hasPresentedFrame,
+            };
+        }
+        else if (renderTarget instanceof RenderTexture) {
+            const state = this._syncTexture(renderTarget);
+            attachmentState = {
+                view: state.view,
+                shouldClear: this._clearRequested || !state.hasContent,
+            };
+        }
+        else {
+            throw new Error('WebGPU currently supports only root targets and RenderTexture targets.');
+        }
+        this._clearRequested = false;
+        return {
+            view: attachmentState.view,
+            clearValue: {
+                r: this._clearColor.r / 255,
+                g: this._clearColor.g / 255,
+                b: this._clearColor.b / 255,
+                a: this._clearColor.a,
+            },
+            loadOp: attachmentState.shouldClear ? 'clear' : 'load',
+            storeOp: 'store',
+        };
+    }
+    submit(commandBuffer) {
+        this.device.queue.submit([commandBuffer]);
+        if (this._renderTarget === this._rootRenderTarget) {
+            this._hasPresentedFrame = true;
+        }
+        else if (this._renderTarget instanceof RenderTexture) {
+            const state = this._syncTexture(this._renderTarget);
+            state.hasContent = true;
+            if (state.mipLevelCount > 1) {
+                this._generateMipmaps(state.texture, state.mipLevelCount);
+            }
+        }
+    }
+    getTextureBinding(texture) {
+        const state = this._syncTexture(texture);
+        return {
+            view: state.view,
+            sampler: state.sampler,
+        };
+    }
+    shouldPremultiplyTextureSample(texture) {
+        return !(texture instanceof RenderTexture) && texture.premultiplyAlpha;
+    }
+    _setActiveRenderer(renderer) {
+        if (this._renderer !== renderer) {
+            this._flushActiveRenderer();
+            this._renderer = renderer;
+        }
+    }
+    _flushActiveRenderer() {
+        this._renderer?.flush();
+    }
+    async _initialize() {
+        const gpuNavigator = this._getGpuNavigator();
+        if (gpuNavigator === null) {
+            throw new Error('This browser does not support WebGPU.');
+        }
+        if (typeof gpuNavigator.gpu.requestAdapter !== 'function') {
+            throw new Error('WebGPU is available, but navigator.gpu.requestAdapter is not implemented.');
+        }
+        if (typeof gpuNavigator.gpu.getPreferredCanvasFormat !== 'function') {
+            throw new Error('WebGPU is available, but navigator.gpu.getPreferredCanvasFormat is not implemented.');
+        }
+        // Request the adapter before acquiring a WebGPU canvas context.
+        // getContext('webgpu') is exclusive per canvas — once it succeeds, the
+        // same canvas can no longer produce a WebGL2 context. Doing it the
+        // other way round means an unavailable adapter still locks the canvas
+        // and breaks the automatic WebGL2 fallback in Application.
+        let adapter = null;
+        try {
+            adapter = await gpuNavigator.gpu.requestAdapter();
+        }
+        catch (error) {
+            throw this._createInitializationError('Failed to request a WebGPU adapter.', error);
+        }
+        if (adapter === null) {
+            throw new Error('Could not acquire a WebGPU adapter.');
+        }
+        const context = this._canvas.getContext('webgpu');
+        if (context === null) {
+            throw new Error('Could not create WebGPU canvas context.');
+        }
+        if (typeof adapter.requestDevice !== 'function') {
+            throw new Error('WebGPU adapter does not expose requestDevice().');
+        }
+        let device = null;
+        try {
+            device = await adapter.requestDevice();
+        }
+        catch (error) {
+            throw this._createInitializationError('Failed to request a WebGPU device.', error);
+        }
+        if (device === null) {
+            throw new Error('Could not acquire a WebGPU device.');
+        }
+        const format = gpuNavigator.gpu.getPreferredCanvasFormat();
+        try {
+            context.configure({
+                device,
+                format,
+                alphaMode: 'opaque',
+            });
+        }
+        catch (error) {
+            throw this._createInitializationError('Failed to configure the WebGPU canvas context.', error);
+        }
+        this._context = context;
+        this._device = device;
+        this._format = format;
+        this._blendMode = BlendModes.Normal;
+        this._hasPresentedFrame = false;
+        this.rendererRegistry.connect(this);
+        this.resize(this._canvas.width, this._canvas.height);
+        return this;
+    }
+    _getGpuNavigator() {
+        const gpuNavigator = navigator;
+        return gpuNavigator.gpu ? gpuNavigator : null;
+    }
+    _createInitializationError(message, error) {
+        if (error instanceof Error && error.message.length > 0) {
+            return new Error(`${message} ${error.message}`);
+        }
+        return new Error(message);
+    }
+    _destroyManagedTextures() {
+        for (const texture of Array.from(this._textureStates.keys())) {
+            this._evictTexture(texture);
+        }
+    }
+    _destroyTemporaryRenderTextures() {
+        for (const texture of this._temporaryRenderTextures) {
+            texture.destroy();
+        }
+        this._temporaryRenderTextures.length = 0;
+    }
+    _getTextureState(texture) {
+        let state = this._textureStates.get(texture);
+        if (!state) {
+            const gpuTexture = this.device.createTexture({
+                size: {
+                    width: Math.max(texture.width, 1),
+                    height: Math.max(texture.height, 1),
+                },
+                format: managedTextureFormat,
+                mipLevelCount: this._getMipLevelCount(texture),
+                usage: this._getTextureUsage(texture),
+            });
+            state = {
+                texture: gpuTexture,
+                view: gpuTexture.createView(),
+                sampler: this._createSampler(texture),
+                version: -1,
+                width: texture.width,
+                height: texture.height,
+                mipLevelCount: this._getMipLevelCount(texture),
+                hasContent: false,
+            };
+            const destroyHandler = () => {
+                this._evictTexture(texture);
+            };
+            texture.addDestroyListener(destroyHandler);
+            this._textureDestroyHandlers.set(texture, destroyHandler);
+            this._textureStates.set(texture, state);
+        }
+        return state;
+    }
+    _syncTexture(texture) {
+        if (!(texture instanceof RenderTexture) && (texture.source === null || texture.width === 0 || texture.height === 0)) {
+            throw new Error('WebGPU sprite rendering requires a texture with a valid source and non-zero dimensions.');
+        }
+        const state = this._getTextureState(texture);
+        const textureVersion = texture instanceof RenderTexture ? texture.textureVersion : texture.version;
+        const mipLevelCount = this._getMipLevelCount(texture);
+        if (state.version !== textureVersion) {
+            if (state.width !== texture.width || state.height !== texture.height || state.mipLevelCount !== mipLevelCount) {
+                state.texture.destroy();
+                const resizedTexture = this.device.createTexture({
+                    size: {
+                        width: texture.width,
+                        height: texture.height,
+                    },
+                    format: managedTextureFormat,
+                    mipLevelCount,
+                    usage: this._getTextureUsage(texture),
+                });
+                state.texture = resizedTexture;
+                state.view = resizedTexture.createView();
+                state.width = texture.width;
+                state.height = texture.height;
+                state.mipLevelCount = mipLevelCount;
+                state.hasContent = false;
+            }
+            state.sampler = this._createSampler(texture);
+            if (!(texture instanceof RenderTexture)) {
+                const source = texture.source;
+                this.device.queue.copyExternalImageToTexture({
+                    source,
+                    flipY: false,
+                }, {
+                    texture: state.texture,
+                }, {
+                    width: texture.width,
+                    height: texture.height,
+                });
+                if (state.mipLevelCount > 1) {
+                    this._generateMipmaps(state.texture, state.mipLevelCount);
+                }
+            }
+            state.version = textureVersion;
+        }
+        return state;
+    }
+    _evictTexture(texture) {
+        const state = this._textureStates.get(texture);
+        const destroyHandler = this._textureDestroyHandlers.get(texture);
+        if (destroyHandler) {
+            texture.removeDestroyListener(destroyHandler);
+            this._textureDestroyHandlers.delete(texture);
+        }
+        if (state) {
+            state.texture.destroy();
+            this._textureStates.delete(texture);
+        }
+        if (this._texture === texture) {
+            this._texture = null;
+        }
+    }
+    _subscribeRenderTarget(target) {
+        if (!this._renderTargetDestroyHandlers.has(target)) {
+            const destroyHandler = () => {
+                if (this._renderTarget === target) {
+                    this._renderTarget = this._rootRenderTarget;
+                }
+                this._renderTargetDestroyHandlers.delete(target);
+            };
+            target.addDestroyListener(destroyHandler);
+            this._renderTargetDestroyHandlers.set(target, destroyHandler);
+        }
+    }
+    _unsubscribeRenderTarget(target) {
+        const destroyHandler = this._renderTargetDestroyHandlers.get(target);
+        if (destroyHandler) {
+            target.removeDestroyListener(destroyHandler);
+            this._renderTargetDestroyHandlers.delete(target);
+        }
+    }
+    _toMaskPixels(maskBounds) {
+        const topLeft = this._renderTarget.mapCoordsToPixel(this._maskPointA.set(maskBounds.left, maskBounds.top));
+        const bottomRight = this._renderTarget.mapCoordsToPixel(this._maskPointB.set(maskBounds.right, maskBounds.bottom));
+        const minX = Math.min(topLeft.x, bottomRight.x);
+        const maxX = Math.max(topLeft.x, bottomRight.x);
+        const minY = Math.min(topLeft.y, bottomRight.y);
+        const maxY = Math.max(topLeft.y, bottomRight.y);
+        const targetWidth = this._renderTarget.width;
+        const targetHeight = this._renderTarget.height;
+        const x = Math.max(0, Math.min(targetWidth, Math.floor(minX)));
+        const right = Math.max(0, Math.min(targetWidth, Math.ceil(maxX)));
+        const y = Math.max(0, Math.min(targetHeight, Math.floor(minY)));
+        const bottom = Math.max(0, Math.min(targetHeight, Math.ceil(maxY)));
+        const width = Math.max(0, right - x);
+        const height = Math.max(0, bottom - y);
+        return { x, y, width, height };
+    }
+    _intersectMasks(first, second) {
+        const left = Math.max(first.x, second.x);
+        const top = Math.max(first.y, second.y);
+        const right = Math.min(first.x + first.width, second.x + second.width);
+        const bottom = Math.min(first.y + first.height, second.y + second.height);
+        return {
+            x: left,
+            y: top,
+            width: Math.max(0, right - left),
+            height: Math.max(0, bottom - top),
+        };
+    }
+    _createSampler(texture) {
+        return this.device.createSampler({
+            addressModeU: this._getAddressMode(texture.wrapMode),
+            addressModeV: this._getAddressMode(texture.wrapMode),
+            magFilter: this._getFilterMode(texture.scaleMode),
+            minFilter: this._getFilterMode(texture.scaleMode),
+            mipmapFilter: this._getMipmapFilterMode(texture.scaleMode),
+        });
+    }
+    _getTextureUsage(texture) {
+        const mipmapUsage = this._getMipLevelCount(texture) > 1 ? GPUTextureUsage.RENDER_ATTACHMENT : 0;
+        if (texture instanceof RenderTexture) {
+            return GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT | mipmapUsage;
+        }
+        return GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING | mipmapUsage;
+    }
+    _getAddressMode(wrapMode) {
+        switch (wrapMode) {
+            case WrapModes.Repeat:
+                return 'repeat';
+            case WrapModes.MirroredRepeat:
+                return 'mirror-repeat';
+            default:
+                return 'clamp-to-edge';
+        }
+    }
+    _getFilterMode(scaleMode) {
+        switch (scaleMode) {
+            case ScaleModes.Nearest:
+            case ScaleModes.NearestMipmapNearest:
+            case ScaleModes.NearestMipmapLinear:
+                return 'nearest';
+            default:
+                return 'linear';
+        }
+    }
+    _getMipmapFilterMode(scaleMode) {
+        switch (scaleMode) {
+            case ScaleModes.NearestMipmapLinear:
+            case ScaleModes.LinearMipmapLinear:
+                return 'linear';
+            default:
+                return 'nearest';
+        }
+    }
+    _getMipLevelCount(texture) {
+        if (!texture.generateMipMap) {
+            return 1;
+        }
+        const maxSize = Math.max(texture.width, texture.height);
+        if (maxSize <= 1) {
+            return 1;
+        }
+        return Math.floor(Math.log2(maxSize)) + 1;
+    }
+    _generateMipmaps(texture, mipLevelCount) {
+        if (mipLevelCount <= 1) {
+            return;
+        }
+        const resources = this._getMipmapResources();
+        const encoder = this.device.createCommandEncoder();
+        for (let mipLevel = 1; mipLevel < mipLevelCount; mipLevel++) {
+            const bindGroup = this.device.createBindGroup({
+                layout: resources.bindGroupLayout,
+                entries: [{
+                        binding: 0,
+                        resource: texture.createView({
+                            baseMipLevel: mipLevel - 1,
+                            mipLevelCount: 1,
+                        }),
+                    }, {
+                        binding: 1,
+                        resource: resources.sampler,
+                    }],
+            });
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [{
+                        view: texture.createView({
+                            baseMipLevel: mipLevel,
+                            mipLevelCount: 1,
+                        }),
+                        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                        loadOp: 'clear',
+                        storeOp: 'store',
+                    }],
+            });
+            pass.setPipeline(resources.pipeline);
+            pass.setBindGroup(0, bindGroup);
+            pass.draw(3);
+            pass.end();
+        }
+        this.device.queue.submit([encoder.finish()]);
+    }
+    _getMipmapResources() {
+        if (this._mipmapShaderModule === null || this._mipmapBindGroupLayout === null || this._mipmapPipelineLayout === null || this._mipmapPipeline === null || this._mipmapSampler === null) {
+            this._mipmapShaderModule = this.device.createShaderModule({
+                code: `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texcoord: vec2<f32>,
+};
+
+@group(0) @binding(0)
+var sourceTexture: texture_2d<f32>;
+@group(0) @binding(1)
+var sourceSampler: sampler;
+
+@vertex
+fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 3>(
+        vec2<f32>(-1.0, -1.0),
+        vec2<f32>(3.0, -1.0),
+        vec2<f32>(-1.0, 3.0)
+    );
+    // Y is flipped vs the position array: NDC Y points up, but texture UV
+    // Y points down (UV (0,0) is the top-left of the source). Matching the
+    // two ensures that the output texture's top-left pixel samples from the
+    // source's top-left, so every mip level has the same orientation as the
+    // level above it. Prior to this, odd mip levels were rendered upside
+    // down, producing visible texture flips at view-size doublings.
+    var texcoords = array<vec2<f32>, 3>(
+        vec2<f32>(0.0, 1.0),
+        vec2<f32>(2.0, 1.0),
+        vec2<f32>(0.0, -1.0)
+    );
+    var output: VertexOutput;
+
+    output.position = vec4<f32>(positions[vertexIndex], 0.0, 1.0);
+    output.texcoord = texcoords[vertexIndex];
+
+    return output;
+}
+
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
+    return textureSample(sourceTexture, sourceSampler, input.texcoord);
+}
+`,
+            });
+            this._mipmapBindGroupLayout = this.device.createBindGroupLayout({
+                entries: [{
+                        binding: 0,
+                        visibility: GPUShaderStage.FRAGMENT,
+                        texture: {
+                            sampleType: 'float',
+                        },
+                    }, {
+                        binding: 1,
+                        visibility: GPUShaderStage.FRAGMENT,
+                        sampler: {
+                            type: 'filtering',
+                        },
+                    }],
+            });
+            this._mipmapPipelineLayout = this.device.createPipelineLayout({
+                bindGroupLayouts: [this._mipmapBindGroupLayout],
+            });
+            this._mipmapPipeline = this.device.createRenderPipeline({
+                layout: this._mipmapPipelineLayout,
+                vertex: {
+                    module: this._mipmapShaderModule,
+                    entryPoint: 'vertexMain',
+                },
+                fragment: {
+                    module: this._mipmapShaderModule,
+                    entryPoint: 'fragmentMain',
+                    targets: [{
+                            format: managedTextureFormat,
+                            writeMask: GPUColorWrite.ALL,
+                        }],
+                },
+                primitive: {
+                    topology: 'triangle-list',
+                },
+            });
+            this._mipmapSampler = this.device.createSampler({
+                minFilter: 'linear',
+                magFilter: 'linear',
+                mipmapFilter: 'nearest',
+            });
+        }
+        return {
+            bindGroupLayout: this._mipmapBindGroupLayout,
+            pipeline: this._mipmapPipeline,
+            sampler: this._mipmapSampler,
+        };
+    }
+}
+
+export { WebGpuRenderManager };
+//# sourceMappingURL=WebGpuRenderManager.js.map