@codexo/exojs 0.13.0 → 0.15.0

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

@@ -2,8 +2,9 @@ import { Color } from '../../core/Color.js';
 import { Signal } from '../../core/Signal.js';
 import { Matrix } from '../../math/Matrix.js';
 import { Vector } from '../../math/Vector.js';
+import { GpuResourceAccountant, dataTextureBytesPerPixel, estimateTextureBytes } from '../GpuResourceAccountant.js';
 import { resolveUploadTransform } from '../pixelSnap.js';
-import { drawCommandUsesSharedTransform } from '../plan/RenderCommand.js';
+import { RenderEntryKind, drawCommandUsesSharedTransform } from '../plan/RenderCommand.js';
 import { RenderBackendType } from '../RenderBackendType.js';
 import { RendererRegistry } from '../RendererRegistry.js';
 import { createRenderStats, resetRenderStats } from '../RenderStats.js';
@@ -11,13 +12,60 @@ import { RenderTarget } from '../RenderTarget.js';
 import { DataTexture } from '../texture/DataTexture.js';
 import { RenderTexture } from '../texture/RenderTexture.js';
 import { WrapModes, ScaleModes } from '../types.js';
+import { WebGpuBackdropBlendCompositor } from './WebGpuBackdropBlendCompositor.js';
 import { WebGpuMaskCompositor } from './WebGpuMaskCompositor.js';
+import { WebGpuMeshRenderer } from './WebGpuMeshRenderer.js';
 import { WebGpuPassCoordinator } from './WebGpuPassCoordinator.js';
 import { WebGpuTransformStorage } from './WebGpuTransformStorage.js';
 
 /* eslint-disable max-lines */
 /// <reference types="@webgpu/types" />
 const managedTextureFormat = 'rgba8unorm';
+// Managed content + render textures use rgba8unorm = 4 bytes/px.
+const MANAGED_TEXTURE_BYTES_PER_PIXEL = 4;
+/** WGSL source for the box-filter mipmap-generation pipeline. @internal */
+const mipmapWgsl = `
+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);
+}
+`;
 /**
  * WebGPU implementation of {@link RenderBackend}. Manages the GPU device,
  * canvas context configuration, format selection, managed-texture cache
@@ -62,6 +110,8 @@ class WebGpuBackend {
     _clipPointB = new Vector();
     _maskCompositor = new WebGpuMaskCompositor();
     _maskCompositorConnected = false;
+    _backdropBlendCompositor = new WebGpuBackdropBlendCompositor();
+    _backdropBlendCompositorConnected = false;
     _mipmapShaderModule = null;
     _mipmapBindGroupLayout = null;
     _mipmapPipelineLayout = null;
@@ -78,10 +128,13 @@ class WebGpuBackend {
     _clearRequested = false;
     _hasPresentedFrame = false;
     _stats = createRenderStats();
+    _accountant = new GpuResourceAccountant(this._stats);
     _transformStorage = new WebGpuTransformStorage();
     _activeDrawCommand = null;
     _passCoordinatorInstance = null;
     _drawPlanDepth = 0;
+    _planBaseStack = [];
+    _planHashStack = [];
     constructor(app) {
         const canvasOptions = app.options.canvas ?? {};
         const width = canvasOptions.width ?? 800;
@@ -129,6 +182,16 @@ class WebGpuBackend {
     get stats() {
         return this._stats;
     }
+    /**
+     * Per-backend GPU resource accountant (VRAM / upload / download bookkeeping).
+     * Shared with this backend's transform storage and compute readback paths so
+     * they can book their own allocations and uploads. Not part of any public
+     * surface.
+     * @internal
+     */
+    get accountant() {
+        return this._accountant;
+    }
     /** @internal */
     get activeDrawCommand() {
         return this._activeDrawCommand;
@@ -163,36 +226,57 @@ class WebGpuBackend {
     }
     resetStats() {
         resetRenderStats(this._stats);
+        // The transform buffer is frame-scoped: reset it once per frame here (was
+        // previously reset per render() call in _beginDrawPlan).
+        this._getTransformStorage().buffer.begin();
         return this;
     }
+    /** Frame-global slot base the plan builder indexes from. @internal */
+    get transformBufferCount() {
+        return this._getTransformStorage().buffer.count;
+    }
     /** @internal */
     _beginDrawPlan(nodeCount) {
         const storage = this._getTransformStorage();
-        storage.begin(nodeCount);
+        // Do NOT reset the transform buffer here — it is frame-scoped (reset in
+        // resetStats). The builder already based this plan's node indices at the
+        // current buffer count, so writes land in fresh frame-global slots and
+        // batches survive across render() calls. Remember this plan's base so a
+        // nested plan can free its rows on end.
+        this._planBaseStack.push(storage.buffer.count);
+        this._planHashStack.push(storage.buffer.frameHash);
         // Pre-allocate the GPU storage buffer for the full plan before any group
-        // flush runs. Without this, a later flush with a higher maxNodeIndex would
-        // destroy and replace the buffer mid-frame while earlier command buffers
-        // may still reference the old allocation.
-        if (nodeCount > 0 && this._device !== null && !this._deviceLost) {
-            storage.reserve(this._device, nodeCount);
+        // flush runs. Base the reservation on the frame-global count + this plan's
+        // nodes so the buffer grows to cover both pre-existing frame rows and new rows.
+        const reserveCount = storage.buffer.count + nodeCount;
+        if (reserveCount > 0 && this._device !== null && !this._deviceLost) {
+            storage.reserve(this._device, reserveCount, this._accountant);
         }
         this._activeDrawCommand = null;
         this._drawPlanDepth++;
     }
     /** @internal */
-    _prepareRenderGroupUpload(group) {
+    _prepareRenderGroupUpload(entries, startIndex, count) {
         // Pack the whole render group's world transforms (+ tint) into the shared
         // transform storage at the group's upload boundary, keyed by each draw
         // command's stable nodeIndex. Every draw the player will submit for this
         // group is covered here, before the group's first draw.
         //
+        // The group is the entries range `[startIndex, startIndex + count)`; every
+        // entry in it is a draw, so the player no longer materializes a group array.
+        //
         // Renderers that pack their own per-node data (Text, Particle) never read
         // the shared storage, so their commands are skipped — no consuming draw
         // ever references their slots (nodeIndex is unique per command).
         const storage = this._getTransformStorage();
-        const instructions = group.instructions;
-        for (let i = 0; i < instructions.length; i++) {
-            const command = instructions[i];
+        const end = startIndex + count;
+        for (let i = startIndex; i < end; i++) {
+            const entry = entries[i];
+            // Every entry in a group run is a draw; narrow to read its command.
+            if (entry.kind !== RenderEntryKind.Draw) {
+                continue;
+            }
+            const command = entry.command;
             if (drawCommandUsesSharedTransform(command, this)) {
                 storage.writeCommand(command, this._resolveSnapTransform(command.drawable));
             }
@@ -211,9 +295,19 @@ class WebGpuBackend {
     /** @internal */
     _endDrawPlan() {
         this._activeDrawCommand = null;
+        const planBase = this._planBaseStack.pop() ?? 0;
+        const planHash = this._planHashStack.pop() ?? 0;
         if (this._drawPlanDepth > 0) {
             this._drawPlanDepth--;
         }
+        // A nested plan (filter / cacheAsBitmap) just ended: flush its draws, then
+        // free its transform rows so the frame-scoped buffer only grows with
+        // top-level render() calls. Top-level plans (depth back to 0) keep their rows
+        // so cross-call batching survives to the frame-end flush.
+        if (this._drawPlanDepth > 0) {
+            this._flushActiveRenderer();
+            this._getTransformStorage().buffer.rewindTo(planBase, planHash);
+        }
         // Only assert balance at the outermost plan: a nested render() (e.g.
         // cacheAsBitmap drawing its cache sprite) sees the still-open outer clips,
         // which are not leaks.
@@ -237,6 +331,31 @@ class WebGpuBackend {
         this._stats.submittedNodes++;
         return this;
     }
+    drawInstanced(mesh, transforms, tints, count) {
+        if (count <= 0 || mesh.vertexCount === 0 || this._deviceLost || this._device === null) {
+            this._activeDrawCommand = null;
+            return this;
+        }
+        const renderer = this.rendererRegistry.resolve(mesh);
+        if (!(renderer instanceof WebGpuMeshRenderer)) {
+            throw new Error('drawInstanced requires a mesh handled by the WebGPU mesh renderer.');
+        }
+        this._setActiveRenderer(renderer);
+        // Write each instance's (transform, tint) into a fresh, contiguous transform
+        // slot before the renderer's draw uploads the storage buffer, then draw the
+        // geometry once over [startNodeIndex, startNodeIndex + count).
+        // Contract: transforms/tints are parallel arrays of length >= count
+        // (count > 0 is guaranteed by the early return above).
+        const storage = this._getTransformStorage();
+        const startNodeIndex = storage.pushValues(transforms[0], tints[0]);
+        for (let i = 1; i < count; i++) {
+            storage.pushValues(transforms[i], tints[i]);
+        }
+        renderer.drawInstancedBatch(mesh, startNodeIndex, count);
+        this._activeDrawCommand = null;
+        this._stats.submittedNodes += count;
+        return this;
+    }
     execute(pass) {
         if (this._deviceLost || this._device === null) {
             return this;
@@ -292,6 +411,39 @@ class WebGpuBackend {
         this._maskCompositor.compose(this, content, mask, x, y, width, height, blendMode);
         return this;
     }
+    composeWithBackdropBlend(source, x, y, width, height, mode) {
+        if (width <= 0 || height <= 0) {
+            return this;
+        }
+        if (this._deviceLost || this._device === null) {
+            return this;
+        }
+        this._flushActiveRenderer();
+        this._setActiveRenderer(null);
+        if (!this._backdropBlendCompositorConnected) {
+            this._backdropBlendCompositor.connect(this.device);
+            this._backdropBlendCompositorConnected = true;
+        }
+        this._backdropBlendCompositor.compose(this, source, x, y, width, height, mode);
+        return this;
+    }
+    /**
+     * Return the GPU texture backing `target`. For the root canvas target this is
+     * `context.getCurrentTexture()` (requires `COPY_SRC` usage configured on the
+     * canvas context). For a {@link RenderTexture} target it is the managed GPU
+     * texture. Used internally by {@link WebGpuBackdropBlendCompositor} for
+     * `copyTextureToTexture` backdrop capture.
+     * @internal
+     */
+    _renderTargetTexture(target) {
+        if (target === this._rootRenderTarget) {
+            return this.context.getCurrentTexture();
+        }
+        if (target instanceof RenderTexture) {
+            return this._getTextureState(target).texture;
+        }
+        throw new Error('WebGpuBackend._renderTargetTexture: unsupported render target type.');
+    }
     popScissorRect() {
         if (this._clipBoundsStack.length === 0) {
             return this;
@@ -330,6 +482,7 @@ class WebGpuBackend {
         if (this._clipPixelStack.length === 0) {
             return null;
         }
+        // Non-empty checked above, so the top-of-stack element exists.
         const clip = this._clipPixelStack[this._clipPixelStack.length - 1];
         const scaleX = this._renderTarget.root && this._renderTarget.width > 0 ? this._canvas.width / this._renderTarget.width : 1;
         const scaleY = this._renderTarget.root && this._renderTarget.height > 0 ? this._canvas.height / this._renderTarget.height : 1;
@@ -342,6 +495,7 @@ class WebGpuBackend {
     }
     acquireRenderTexture(width, height) {
         for (let index = 0; index < this._temporaryRenderTextures.length; index++) {
+            // index is bounded by the array length via the for-loop guard.
             const texture = this._temporaryRenderTextures[index];
             if (texture.width === width && texture.height === height) {
                 this._temporaryRenderTextures.splice(index, 1);
@@ -359,7 +513,12 @@ class WebGpuBackend {
         return this;
     }
     setView(view) {
-        this._flushActiveRenderer();
+        // Only flush the open batch when the view actually changes. The unconditional
+        // flush forced one draw call per render() call (each render() re-applies the
+        // same camera view), defeating cross-call batching.
+        if (this._renderTarget.view !== view) {
+            this._flushActiveRenderer();
+        }
         this._renderTarget.setView(view);
         return this;
     }
@@ -409,6 +568,10 @@ class WebGpuBackend {
             this._maskCompositor.disconnect();
             this._maskCompositorConnected = false;
         }
+        if (this._backdropBlendCompositorConnected) {
+            this._backdropBlendCompositor.disconnect();
+            this._backdropBlendCompositorConnected = false;
+        }
         this._transformStorage?.destroy();
         this._transformStorage = null;
         this._activeDrawCommand = null;
@@ -512,12 +675,23 @@ class WebGpuBackend {
             sampler: state.sampler,
         };
     }
+    /**
+     * The `GPUTextureFormat` a given `Texture`/`RenderTexture` is (or will be)
+     * backed by. Unlike {@link renderTargetFormat} (which reflects whatever
+     * target is *currently bound*), this is keyed off the texture itself, so
+     * callers that build a pipeline for a specific offscreen target — before
+     * that target is bound as the active render target — can match its format
+     * exactly instead of reading unrelated, possibly-stale backend state.
+     */
+    getTextureFormat(texture) {
+        return this._getGpuTextureFormat(texture);
+    }
     shouldPremultiplyTextureSample(texture) {
         return !(texture instanceof RenderTexture) && texture.premultiplyAlpha;
     }
     /** @internal */
     getTransformStorageBuffer(minCount) {
-        return this._getTransformStorage().getBuffer(this.device, minCount);
+        return this._getTransformStorage().getBuffer(this.device, minCount, this._accountant);
     }
     /**
      * Append a drawable's world transform (+ tint) to the shared transform storage
@@ -581,11 +755,9 @@ class WebGpuBackend {
         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.
+        // Request the adapter AND the device before acquiring a WebGPU canvas
+        // context — see the getContext('webgpu') call below for why the order
+        // matters.
         let adapter;
         try {
             adapter = await gpuNavigator.gpu.requestAdapter();
@@ -596,10 +768,6 @@ class WebGpuBackend {
         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().');
         }
@@ -613,12 +781,26 @@ class WebGpuBackend {
         if (device === null) {
             throw new Error('Could not acquire a WebGPU device.');
         }
+        // Acquire the WebGPU canvas context only after BOTH the adapter and the
+        // device are secured. getContext('webgpu') is exclusive per canvas — once
+        // it succeeds, the same canvas can no longer produce a WebGL2 context.
+        // Acquiring it earlier would lock the canvas even when WebGPU ultimately
+        // fails (a usable adapter but a failing requestDevice — e.g. a missing
+        // backend library), which breaks the automatic WebGL2 fallback in
+        // Application.
+        const context = this._canvas.getContext('webgpu');
+        if (context === null) {
+            throw new Error('Could not create WebGPU canvas context.');
+        }
         const format = gpuNavigator.gpu.getPreferredCanvasFormat();
         try {
             context.configure({
                 device,
                 format,
                 alphaMode: 'opaque',
+                // COPY_SRC is required by WebGpuBackdropBlendCompositor to capture
+                // the root-canvas backdrop via copyTextureToTexture.
+                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
             });
         }
         catch (error) {
@@ -731,6 +913,10 @@ class WebGpuBackend {
             this._maskCompositor.disconnect();
             this._maskCompositorConnected = false;
         }
+        if (this._backdropBlendCompositorConnected) {
+            this._backdropBlendCompositor.disconnect();
+            this._backdropBlendCompositorConnected = false;
+        }
         // Mipmap pipeline cache is keyed to the dead device — drop it.
         this._mipmapShaderModule = null;
         this._mipmapBindGroupLayout = null;
@@ -793,6 +979,7 @@ class WebGpuBackend {
                 mipLevelCount: this._getMipLevelCount(texture),
                 usage: this._getTextureUsage(texture),
             });
+            const mipLevelCount = this._getMipLevelCount(texture);
             state = {
                 texture: gpuTexture,
                 view: gpuTexture.createView(),
@@ -800,9 +987,11 @@ class WebGpuBackend {
                 version: -1,
                 width: texture.width,
                 height: texture.height,
-                mipLevelCount: this._getMipLevelCount(texture),
+                mipLevelCount,
                 hasContent: false,
+                accountedBytes: 0,
             };
+            state.accountedBytes = this._accountant.reallocate(0, this._estimateTextureBytes(texture, mipLevelCount));
             const destroyHandler = () => {
                 this._evictTexture(texture);
             };
@@ -837,10 +1026,16 @@ class WebGpuBackend {
                 state.height = texture.height;
                 state.mipLevelCount = mipLevelCount;
                 state.hasContent = false;
+                // Free the previous storage before booking the new size (no transient spike).
+                state.accountedBytes = this._accountant.reallocate(state.accountedBytes, this._estimateTextureBytes(texture, mipLevelCount));
             }
             state.sampler = this._createSampler(texture);
             if (texture instanceof DataTexture) {
-                const formatInfo = webgpuDataTextureFormat(texture.format);
+                // `instanceof DataTexture` narrows to `DataTexture<any>` (the generic is
+                // erased), so `texture.format` widens to `any`; the class invariant
+                // guarantees it is a `DataTextureFormat`, so restore that type here.
+                const format = texture.format;
+                const formatInfo = webgpuDataTextureFormat(format);
                 const region = texture._consumeDirtyRegion();
                 const isFullUpload = region === null || region.full || !state.hasContent;
                 if (isFullUpload) {
@@ -848,6 +1043,7 @@ class WebGpuBackend {
                         bytesPerRow: texture.width * formatInfo.bytesPerPixel,
                         rowsPerImage: texture.height,
                     }, { width: texture.width, height: texture.height });
+                    this._accountant.recordTextureUpload(texture.width * texture.height * formatInfo.bytesPerPixel);
                 }
                 else {
                     // Partial upload: pack the dirty region into a contiguous buffer.
@@ -863,6 +1059,7 @@ class WebGpuBackend {
                         subBuffer.set(texture.buffer.subarray(sourceStart, sourceStart + subRowChannels), targetStart);
                     }
                     this.device.queue.writeTexture({ texture: state.texture, origin: { x: region.x, y: region.y } }, subBuffer, { bytesPerRow: region.width * bytesPerPixel, rowsPerImage: region.height }, { width: region.width, height: region.height });
+                    this._accountant.recordTextureUpload(region.width * region.height * bytesPerPixel);
                 }
                 state.hasContent = true;
             }
@@ -877,6 +1074,7 @@ class WebGpuBackend {
                     width: texture.width,
                     height: texture.height,
                 });
+                this._accountant.recordTextureUpload(texture.width * texture.height * MANAGED_TEXTURE_BYTES_PER_PIXEL);
                 if (state.mipLevelCount > 1) {
                     this._generateMipmaps(state.texture, state.mipLevelCount);
                 }
@@ -894,6 +1092,8 @@ class WebGpuBackend {
         }
         if (state) {
             state.texture.destroy();
+            this._accountant.free(state.accountedBytes);
+            state.accountedBytes = 0;
             this._textureStates.delete(texture);
         }
         if (this._texture === texture) {
@@ -967,14 +1167,19 @@ class WebGpuBackend {
     }
     _getGpuTextureFormat(texture) {
         if (texture instanceof DataTexture) {
-            return webgpuDataTextureFormat(texture.format).gpuFormat;
+            // `instanceof DataTexture` erases the generic, widening `format` to `any`;
+            // the class invariant guarantees it is a `DataTextureFormat`.
+            const format = texture.format;
+            return webgpuDataTextureFormat(format).gpuFormat;
         }
         return managedTextureFormat;
     }
     _getTextureUsage(texture) {
         const mipmapUsage = this._getMipLevelCount(texture) > 1 ? GPUTextureUsage.RENDER_ATTACHMENT : 0;
         if (texture instanceof RenderTexture) {
-            return GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT | mipmapUsage;
+            // COPY_SRC is required by WebGpuBackdropBlendCompositor to capture the
+            // backdrop from an offscreen RenderTexture target via copyTextureToTexture.
+            return GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT | mipmapUsage;
         }
         return GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING | mipmapUsage;
     }
@@ -1007,6 +1212,20 @@ class WebGpuBackend {
                 return 'nearest';
         }
     }
+    /** Bytes per pixel for a texture's GPU format (DataTexture formats, else managed `rgba8unorm`). */
+    _textureBytesPerPixel(texture) {
+        if (texture instanceof DataTexture) {
+            // `instanceof DataTexture` erases the generic, widening `format` to `any`;
+            // the class invariant guarantees it is a `DataTextureFormat`.
+            const format = texture.format;
+            return dataTextureBytesPerPixel(format);
+        }
+        return MANAGED_TEXTURE_BYTES_PER_PIXEL;
+    }
+    /** Estimated VRAM bytes for a texture's storage (base level + mip chain). */
+    _estimateTextureBytes(texture, mipLevelCount) {
+        return estimateTextureBytes(texture.width, texture.height, this._textureBytesPerPixel(texture), mipLevelCount);
+    }
     _getMipLevelCount(texture) {
         if (!texture.generateMipMap) {
             return 1;
@@ -1067,48 +1286,7 @@ class WebGpuBackend {
             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);
-}
-`,
+                code: mipmapWgsl,
             });
             this._mipmapBindGroupLayout = this.device.createBindGroupLayout({
                 entries: [
@@ -1177,5 +1355,5 @@ function webgpuDataTextureFormat(format) {
     }
 }
 
-export { WebGpuBackend };
+export { WebGpuBackend, mipmapWgsl };
 //# sourceMappingURL=WebGpuBackend.js.map