@derschmale/tiny-helix 0.1.0 → 0.2.0

package/dist/tiny-helix.debug.js

@@ -80,7 +80,7 @@ class BindGroupBuilder {
     withTexture(fieldName, texture) {
         const index = this._layout._getBindingIndex(fieldName);
         this._entries[index] = {
-            binding: index, resource: texture._inner
+            binding: index, resource: texture._inner,
         };
         return this;
     }
@@ -163,7 +163,7 @@ class BindGroupLayoutBuilder {
     withUniformBuffer(index, field_name, layout, visibility) {
         this._entries[index] = {
             binding: index,
-            visibility: visibility ?? GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
+            visibility: visibility ?? _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Vertex | _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Fragment | _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Compute,
             buffer: { type: 'uniform' }
         };
         this._indices.set(field_name, index);
@@ -173,57 +173,65 @@ class BindGroupLayoutBuilder {
     /**
      * Add a storage buffer binding at the given index and record its layout.
      * @param index - binding index
-     * @param field_name - a name used to reference the layout later
-     * @param access_mode - Defines whether the storage buffer is read-only or not.
+     * @param fieldName - a name used to reference the layout later
+     * @param accessMode - Defines whether the storage buffer is read-only or not.
      * @param visibility - shader stage visibility flags (defaults to FRAGMENT|COMPUTE)
      */
-    withStorageBuffer(index, field_name, access_mode, visibility) {
+    withStorageBuffer(index, fieldName, accessMode, minBindingSize = 4, visibility) {
         let type = "storage";
-        if (access_mode === _enums__WEBPACK_IMPORTED_MODULE_2__.StorageAccess.Read) {
+        if (accessMode === _enums__WEBPACK_IMPORTED_MODULE_2__.StorageAccess.Read) {
             type = "read-only-storage";
         }
         this._entries[index] = {
             binding: index,
-            visibility: visibility ?? GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
-            buffer: { type, hasDynamicOffset: false, minBindingSize: 4 }
+            visibility: visibility ?? _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Fragment | _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Compute,
+            buffer: { type, hasDynamicOffset: false, minBindingSize }
         };
-        this._indices.set(field_name, index);
+        this._indices.set(fieldName, index);
         return this;
     }
     /**
      * Add a storage texture binding at the given index. The texture will be
      * write-only and use RGBA8Unorm format.
      * @param index
-     * @param field_name
+     * @param fieldName
      * @param format
-     * @param access_mode
+     * @param accessMode
      * @param visibility
+     * @param viewDimension
      */
-    withStorageTexture(index, field_name, format, access_mode, visibility) {
+    withStorageTexture(index, fieldName, format, accessMode, visibility, viewDimension) {
         this._entries[index] = {
             binding: index,
-            visibility: visibility ?? GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
-            storageTexture: { access: access_mode, format }
+            visibility: visibility ?? _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Fragment | _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Compute,
+            storageTexture: {
+                access: accessMode,
+                format,
+                viewDimension: viewDimension ?? "2d"
+            }
         };
-        this._indices.set(field_name, index);
+        this._indices.set(fieldName, index);
         return this;
     }
-    withTexture(index, field_name, visibility) {
+    withTexture(index, fieldName, visibility, viewDimension, sampleType = _enums__WEBPACK_IMPORTED_MODULE_2__.TextureSampleType.Float) {
         this._entries[index] = {
             binding: index,
-            visibility: visibility ?? GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
-            texture: { sampleType: 'float' }
+            visibility: visibility ?? _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Fragment | _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Compute,
+            texture: {
+                sampleType,
+                viewDimension: viewDimension ?? "2d"
+            }
         };
-        this._indices.set(field_name, index);
+        this._indices.set(fieldName, index);
         return this;
     }
-    withSampler(index, field_name, visibility) {
+    withSampler(index, fieldName, samplerType = _enums__WEBPACK_IMPORTED_MODULE_2__.SamplerType.Filtering, visibility) {
         this._entries[index] = {
             binding: index,
-            visibility: visibility ?? GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE,
-            sampler: { type: 'filtering' }
+            visibility: visibility ?? _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Fragment | _enums__WEBPACK_IMPORTED_MODULE_2__.ShaderStage.Compute,
+            sampler: { type: samplerType }
         };
-        this._indices.set(field_name, index);
+        this._indices.set(fieldName, index);
         return this;
     }
     /**
@@ -458,12 +466,17 @@ class ComputePipeline {
 }
 class ComputePipelineBuilder {
     constructor(ctx) {
+        this._overrideConstants = {};
         this._ctx = ctx;
     }
     withLabel(label) {
         this._label = label;
         return this;
     }
+    withOverrideConstant(id, value) {
+        this._overrideConstants[id] = value;
+        return this;
+    }
     /** Select the shader entry point for the fragment stage. */
     withShader(shader, entry) {
         this._shader = shader;
@@ -480,7 +493,8 @@ class ComputePipelineBuilder {
             label: this._label,
             compute: {
                 module: shader._inner,
-                entryPoint: this._entry
+                entryPoint: this._entry,
+                constants: this._overrideConstants
             },
             layout
         };
@@ -526,7 +540,7 @@ class IndexBuffer {
         this.format = bytesPerElement === 2 ? IndexFormat.Uint16 : IndexFormat.Uint32;
         this.count = data.length;
         this.buffer = new _buffers_Buffer__WEBPACK_IMPORTED_MODULE_0__.BufferBuilder(ctx)
-            .withData(data.buffer, keepData)
+            .withData(data.buffer, keepData, data.byteOffset, data.byteLength)
             .withUsage(_buffers_Buffer__WEBPACK_IMPORTED_MODULE_0__.BufferUsage.CopyDst | _buffers_Buffer__WEBPACK_IMPORTED_MODULE_0__.BufferUsage.Index)
             .build();
     }
@@ -744,9 +758,10 @@ class StreamBuilder {
      * Upload vertex data for this stream. `keepOnCPU` controls whether the
      * source ArrayBuffer is retained in memory for readback.
      */
-    withData(data, keepOnCPU = false) {
+    withData(data, byteOffset = 0, byteLength, keepOnCPU = false) {
+        byteLength = byteLength ?? (data.byteLength - byteOffset);
         this._stream.buffer = new _buffers_Buffer__WEBPACK_IMPORTED_MODULE_0__.BufferBuilder(this._ctx)
-            .withData(data, keepOnCPU)
+            .withData(data, keepOnCPU, byteOffset, byteLength)
             .withUsage(_buffers_Buffer__WEBPACK_IMPORTED_MODULE_0__.BufferUsage.Vertex | _buffers_Buffer__WEBPACK_IMPORTED_MODULE_0__.BufferUsage.CopyDst)
             .build();
     }
@@ -873,12 +888,26 @@ class RenderPass {
     /**
      * Issue a draw call using the currently set pipeline and mesh.
      */
-    draw() {
+    draw(numInstances = 1) {
+        if (this._numIndices) {
+            this._inner.drawIndexed(this._numIndices, numInstances, 0, 0, 0);
+        }
+        else {
+            this._inner.draw(this._numVertices, numInstances, 0, 0);
+        }
+        return this;
+    }
+    /**
+     * Issue an indirect draw call using the currently set pipeline and mesh.
+     * @param indirectBuffer A Buffer containing the draw parameters. The buffer must have been created with the `Indirect` usage flag.
+     * @param indirectOffset The offset in bytes into the indirectBuffer where the draw parameters are stored. Must be a multiple of 4.
+     */
+    drawIndirect(indirectBuffer, indirectOffset = 0) {
         if (this._numIndices) {
-            this._inner.drawIndexed(this._numIndices, 1, 0, 0, 0);
+            this._inner.drawIndexedIndirect(indirectBuffer._inner, indirectOffset);
         }
         else {
-            this._inner.draw(this._numVertices, 1, 0, 0);
+            this._inner.drawIndirect(indirectBuffer._inner, indirectOffset);
         }
         return this;
     }
@@ -905,6 +934,7 @@ class RenderPassBuilder {
     constructor(commandEncoder, globalBindGroups, defaultTarget, defaultDepthTarget) {
         this._colorTargets = [];
         this._clearColors = [];
+        this._storeOps = [];
         this._encoder = commandEncoder;
         this._defaultTarget = defaultTarget;
         this._defaultDepthTarget = defaultDepthTarget;
@@ -949,6 +979,19 @@ class RenderPassBuilder {
         }
         return this;
     }
+    /**
+     * Set the store operation for the most recently added color target. Defaults to 'store' if not specified.
+     * @param storeOp
+     */
+    withStoreOp(storeOp) {
+        if (this._colorTargets.length === 0) {
+            this._storeOps[0] = storeOp;
+        }
+        else {
+            this._storeOps[this._colorTargets.length - 1] = storeOp;
+        }
+        return this;
+    }
     /**
      * Set the clear stencil value
      */
@@ -990,7 +1033,7 @@ class RenderPassBuilder {
         const colorAttachments = targets.map((target, i) => ({
             view: target._inner,
             loadOp: this._clearColors[i] ? 'clear' : 'load',
-            storeOp: 'store',
+            storeOp: this._storeOps[i] ?? 'store',
             clearValue: this._clearColors[i]
         }));
         const desc = {
@@ -1134,6 +1177,24 @@ class RenderPipelineBuilder {
         }
         return this;
     }
+    /**
+     * Sets the depth bias for each triangle.
+     * @param depthBias Constant depth bias added to each triangle fragment.
+     * @param slopeScale Depth bias that scales with the triangle fragment’s slope.
+     * @param max The maximum depth bias of a triangle fragment.
+     */
+    withDepthBias(depthBias, slopeScale, max) {
+        const target = this._depthState ?? this._defaultDepthState;
+        if (!target) {
+            console.warn("No depth target set. Setting depth compare function has no effect.");
+        }
+        else {
+            target.depthBias = depthBias;
+            target.depthBiasSlopeScale = slopeScale;
+            target.depthBiasClamp = max;
+        }
+        return this;
+    }
     /**
      * Enable or disable depth writes. Default is `true`.
      * @param enabled
@@ -1148,9 +1209,19 @@ class RenderPipelineBuilder {
         }
         return this;
     }
-    /** Override a shader constant for specialization. */
-    withOverrideConstant(id, value) {
-        this._overrideConstants[id] = value;
+    /**
+     * Override a shader constant for specialization. We do NOT use `ShaderStage.Vertex | ShaderStage.Fragment` as
+     * default because some browser implementations (as of early 2026) have bugs when a non-existent constant is defined
+     */
+    withOverrideConstant(id, value, pipeline) {
+        if (pipeline & GPUShaderStage.VERTEX) {
+            this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Vertex] = this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Vertex] || {};
+            this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Vertex][id] = value;
+        }
+        if (pipeline & GPUShaderStage.FRAGMENT) {
+            this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Fragment] = this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Fragment] || {};
+            this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Fragment][id] = value;
+        }
         return this;
     }
     /** Set the blend mode for the last assigned (or default) color target. */
@@ -1158,6 +1229,18 @@ class RenderPipelineBuilder {
         this.lastColorTarget.blend = blendMode._inner;
         return this;
     }
+    /** Set the color write mask for the last assigned (or default) color target. */
+    withColorWrite(r, g, b, a) {
+        g ?? (g = r);
+        b ?? (b = g);
+        a ?? (a = b);
+        this.lastColorTarget.writeMask =
+            (r ? GPUColorWrite.RED : 0) |
+                (g ? GPUColorWrite.GREEN : 0) |
+                (b ? GPUColorWrite.BLUE : 0) |
+                (a ? GPUColorWrite.ALPHA : 0);
+        return this;
+    }
     /**
      * Build and create the `RenderPipeline`. Throws if required pieces (shader/vertices)
      * are missing.
@@ -1217,13 +1300,13 @@ class RenderPipelineBuilder {
                 buffers,
                 module: shader._inner,
                 entryPoint: this._vertexEntry,
-                constants: this._overrideConstants
+                constants: this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Vertex]
             },
             fragment: (0,_utils_mapUndefined__WEBPACK_IMPORTED_MODULE_0__.mapUndefined)(this._fragmentEntry, entry => ({
                 module: shader._inner,
                 entryPoint: entry,
                 targets: colorTargets,
-                constants: this._overrideConstants
+                constants: this._overrideConstants[_enums__WEBPACK_IMPORTED_MODULE_1__.ShaderStage.Fragment]
             }))
         };
         const inner = this._ctx.device.createRenderPipeline(desc);
@@ -1299,16 +1382,17 @@ class RenderTargetBuilder {
      */
     build() {
         const tex = this._texture._inner;
-        const desc = {
+        const view = this._texture._inner.createView({
             format: tex.format,
             dimension: tex.dimension,
             aspect: 'all',
             baseMipLevel: this._baseMipLevel,
             mipLevelCount: 1,
             baseArrayLayer: this._baseArrayLayer,
-            arrayLayerCount: 1
-        };
-        return new RenderTarget(this._texture._inner.createView(desc), this._texture.format);
+            arrayLayerCount: 1,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return new RenderTarget(view, this._texture.format);
     }
 }
 
@@ -1335,18 +1419,23 @@ class Sampler {
 }
 class SamplerBuilder {
     constructor(ctx) {
+        this._desc = {};
         this._ctx = ctx;
     }
+    withLabel(label) {
+        this._desc.label = label;
+        return this;
+    }
     withAddressMode(u, v, w) {
-        this._addressModeU = u;
-        this._addressModeV = v ?? u;
-        this._addressModeW = w ?? u;
+        this._desc.addressModeU = u;
+        this._desc.addressModeV = v ?? u;
+        this._desc.addressModeW = w ?? u;
         return this;
     }
     withFiltering(minFilter, magFilter, mipmapFilter) {
-        this._minFilter = minFilter;
-        this._magFilter = magFilter ?? minFilter;
-        this._mipmapFilter = mipmapFilter ?? minFilter;
+        this._desc.minFilter = minFilter;
+        this._desc.magFilter = magFilter ?? minFilter;
+        this._desc.mipmapFilter = mipmapFilter ?? minFilter;
         return this;
     }
     withTrilinearFiltering() {
@@ -1359,34 +1448,23 @@ class SamplerBuilder {
     }
     withAnisotropicFiltering(maxAnisotropy) {
         this.withFiltering(_enums__WEBPACK_IMPORTED_MODULE_0__.FilterMode.Linear);
-        this._maxAnisotropy = maxAnisotropy;
+        this._desc.maxAnisotropy = maxAnisotropy;
         return this;
     }
     withMinMipLevel(level) {
-        this._minMipLevel = level;
+        this._desc.lodMinClamp = level;
         return this;
     }
     withMaxMipLevel(level) {
-        this._maxMipLevel = level;
+        this._desc.lodMaxClamp = level;
         return this;
     }
     withCompareFunction(compare) {
-        this._compare = compare;
+        this._desc.compare = compare;
         return this;
     }
     build() {
-        return new Sampler(this._ctx.device.createSampler({
-            addressModeU: this._addressModeU,
-            addressModeV: this._addressModeV,
-            addressModeW: this._addressModeW,
-            magFilter: this._magFilter,
-            minFilter: this._minFilter,
-            mipmapFilter: this._mipmapFilter,
-            lodMinClamp: this._minMipLevel,
-            lodMaxClamp: this._maxMipLevel,
-            compare: this._compare,
-            maxAnisotropy: this._maxAnisotropy
-        }));
+        return new Sampler(this._ctx.device.createSampler(this._desc));
     }
 }
 
@@ -1420,6 +1498,9 @@ class Shader {
         this._vertexAttributes = vertexAttributes;
         this._bindGroupLayouts = bindGroupLayouts;
     }
+    getCompilationInfo() {
+        return this._inner.getCompilationInfo();
+    }
     /**
      * Get the shader location for a named vertex attribute. Returns undefined if the attribute
      * is not declared by the shader.
@@ -1480,7 +1561,7 @@ class ShaderBuilder {
         return this;
     }
     /** Declare a named vertex attribute and the location it maps to in the shader. */
-    withVertexAttribute(name, location) {
+    withVertexAttribute(location, name) {
         this._vertexAttributes.set(name, location);
         return this;
     }
@@ -1502,9 +1583,21 @@ class ShaderBuilder {
         if (!this._code) {
             throw new Error("Shader code not specified. Use withCode() to set the shader source.");
         }
-        let code = this._code;
+        const header = this._ctx.shaderF16Supported ?
+            `enable f16;
+            alias half = f16;
+            alias vec2h = vec2<f16>;
+            alias vec3h = vec3<f16>;
+            alias vec4h = vec4<f16>;
+            ` :
+            `alias half = f32;
+            alias vec2h = vec2<f32>; 
+            alias vec3h = vec3<f32>;
+            alias vec4h = vec4<f32>;
+            `;
+        let code = header + "\n\n" + this._code;
         for (const [name, inc] of this._includes) {
-            // Create a regex to match the include directive while allowing
+            // regex to match the include directive while allowing
             // optional whitespace between tokens, e.g.:
             //   #include<name>
             //   # include < name >
@@ -1534,10 +1627,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Texture: () => (/* binding */ Texture),
 /* harmony export */   TextureBuilder: () => (/* binding */ TextureBuilder),
+/* harmony export */   TextureUtils: () => (/* binding */ TextureUtils),
 /* harmony export */   TextureView: () => (/* binding */ TextureView),
 /* harmony export */   TextureViewBuilder: () => (/* binding */ TextureViewBuilder)
 /* harmony export */ });
 /* harmony import */ var _enums__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./enums */ "./src/enums.ts");
+/* harmony import */ var _utils_MipRenderer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/MipRenderer */ "./src/utils/MipRenderer.ts");
+/* harmony import */ var _utils_mapUndefined__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/mapUndefined */ "./src/utils/mapUndefined.ts");
+
+
 
 /**
  * Small wrapper around GPUTexture providing convenience constructors and
@@ -1545,15 +1643,16 @@ __webpack_require__.r(__webpack_exports__);
  */
 class Texture {
     /**
-     * Create a Texture wrapper from an existing GPUTexture.
-     * @param texture - The underlying GPUTexture
+     * @internal
      */
-    static from_webgpu(texture, format) {
-        return new Texture(texture, format);
+    static from_webgpu(texture, format, ctx, mipShader) {
+        return new Texture(texture, format, ctx, mipShader);
     }
-    constructor(inner, format) {
+    constructor(inner, format, ctx, mipShader) {
         this._inner = inner;
         this._format = format;
+        this._ctx = ctx;
+        this._mipper = (0,_utils_mapUndefined__WEBPACK_IMPORTED_MODULE_2__.mapUndefined)(mipShader, (mipShader) => new _utils_MipRenderer__WEBPACK_IMPORTED_MODULE_1__.MipRenderer(ctx, mipShader, this));
     }
     createView() {
         return new TextureViewBuilder(this);
@@ -1561,33 +1660,103 @@ class Texture {
     get format() {
         return this._format;
     }
+    get mipLevelCount() {
+        return this._inner.mipLevelCount;
+    }
+    get width() {
+        return this._inner.width;
+    }
+    get height() {
+        return this._inner.height;
+    }
+    get depthOrArrayLayers() {
+        return this._inner.depthOrArrayLayers;
+    }
     _getBufferResource() {
         return this._inner.createView();
     }
+    uploadImage(data, mipLevel = 0) {
+        this._ctx.device.queue.copyExternalImageToTexture({ source: data }, { texture: this._inner, mipLevel }, [data.width, data.height, 1]);
+    }
+    uploadData(data, mipLevel = 0) {
+        const width = Math.max(this._inner.width >> mipLevel, 1);
+        const height = Math.max(this._inner.height >> mipLevel, 1);
+        const depthOrArrayLayers = Math.max(this._inner.depthOrArrayLayers >> mipLevel, 1);
+        const blockWidth = TextureUtils.getBlockWidth(this._format);
+        const blocksPerRow = Math.ceil(width / blockWidth);
+        const bytesPerRow = blocksPerRow * TextureUtils.bytesPerBlock(this._format);
+        this._ctx.device.queue.writeTexture({ texture: this._inner, mipLevel }, data, {
+            bytesPerRow,
+            rowsPerImage: height // This is what Mario is asking for!
+        }, { width, height, depthOrArrayLayers });
+    }
+    generateMipmaps() {
+        if (this._inner.dimension !== _enums__WEBPACK_IMPORTED_MODULE_0__.TextureDimension.D2) {
+            throw new Error('generateMipmaps currently only supports 2D textures.');
+        }
+        this._mipper.render();
+    }
+    dimension() {
+        switch (this._inner.dimension) {
+            case "1d":
+                return _enums__WEBPACK_IMPORTED_MODULE_0__.TextureDimension.D1;
+            case "2d":
+                return _enums__WEBPACK_IMPORTED_MODULE_0__.TextureDimension.D2;
+            case "3d":
+                return _enums__WEBPACK_IMPORTED_MODULE_0__.TextureDimension.D3;
+            default:
+                throw new Error(`Unknown texture dimension: ${this._inner.dimension}`);
+        }
+    }
 }
 class TextureBuilder {
-    constructor(ctx) {
+    constructor(ctx, mipShader) {
         this._size = [1, 1, 1];
-        this._data = undefined;
         this._format = _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8UnormSrgb;
         this._usage = GPUTextureUsage.TEXTURE_BINDING;
+        this._dimension = _enums__WEBPACK_IMPORTED_MODULE_0__.TextureDimension.D2;
+        this._mipLevelCount = 1; // -1 will mean auto calculate based on size
+        this._generateMips = false;
+        this._mipShader = mipShader;
         this._ctx = ctx;
     }
     withSize(width, height, depthOrArrayLayers = 1) {
         this._size = [width, height, depthOrArrayLayers];
+        if (depthOrArrayLayers > 1) {
+            this._dimension = _enums__WEBPACK_IMPORTED_MODULE_0__.TextureDimension.D3;
+        }
         return this;
     }
-    withData(data) {
-        this._data = data;
+    withDimension(dim) {
+        this._dimension = dim;
+        return this;
+    }
+    withMipLevels(count) {
+        this._mipLevelCount = count ?? -1;
         return this;
     }
     withFormat(format) {
         this._format = format;
         return this;
     }
-    withImage(data) {
-        this._data = data;
-        this._size = [data.width, data.height, 1];
+    withData(data, mipLevel = 0) {
+        this._data = this._data ?? [];
+        this._data[mipLevel] = data;
+        this._mipLevelCount = Math.max(this._mipLevelCount, mipLevel + 1);
+        return this;
+    }
+    withImage(data, mipLevel = 0) {
+        this._data = this._data ?? [];
+        this._data[mipLevel] = data;
+        if (mipLevel === 0) {
+            this._size = [data.width, data.height, 1];
+        }
+        this._mipLevelCount = Math.max(this._mipLevelCount, mipLevel + 1);
+        return this;
+    }
+    withGeneratedMipmaps() {
+        this._mipLevelCount = -1;
+        this._generateMips = true;
         return this;
     }
     withUsage(usage) {
@@ -1598,20 +1767,38 @@ class TextureBuilder {
         if (this._data) {
             this._usage |= GPUTextureUsage.COPY_DST;
         }
+        if (this._generateMips) {
+            this._usage |= GPUTextureUsage.RENDER_ATTACHMENT;
+        }
+        if (this._mipLevelCount == -1) {
+            const maxDimension = Math.max(this._size[0], this._size[1], this._size[2]);
+            this._mipLevelCount = Math.floor(Math.log2(maxDimension)) + 1;
+        }
         const inner = this._ctx.device.createTexture({
-            format: this._format, size: this._size, usage: this._usage
+            format: this._format, size: this._size, usage: this._usage,
+            dimension: this._dimension,
+            mipLevelCount: this._mipLevelCount
         });
-        if (this._data instanceof ImageBitmap) {
-            this._ctx.device.queue.copyExternalImageToTexture({ source: this._data }, { texture: inner }, [this._size[0], this._size[1], 1]);
-        }
-        else if (this._data) {
-            const [width, height, depthOrArrayLayers] = this._size;
-            const blockWidth = getBlockWidth(this._format);
-            const blocksPerRow = Math.ceil(width / blockWidth);
-            const bytesPerRow = blocksPerRow * bytesPerBlock(this._format);
-            this._ctx.device.queue.writeTexture({ texture: inner }, this._data, { bytesPerRow }, { width, height, depthOrArrayLayers });
+        const tex = new Texture(inner, this._format, this._ctx, this._generateMips ? this._mipShader : undefined);
+        if (this._data) {
+            const mipCount = this._generateMips ? 1 : this._mipLevelCount;
+            for (let mipLevel = 0; mipLevel < mipCount; mipLevel++) {
+                const data = this._data[mipLevel];
+                if (!data)
+                    throw new Error(`TextureBuilder: Missing data for mip level ${mipLevel}`);
+                if (data instanceof ImageBitmap) {
+                    tex.uploadImage(data, mipLevel);
+                }
+                else {
+                    tex.uploadData(data, mipLevel);
+                }
+            }
+            if (this._generateMips) {
+                // Generate mipmaps using a simple render pass approach
+                tex.generateMipmaps();
+            }
         }
-        return new Texture(inner, this._format);
+        return tex;
     }
 }
 class TextureView {
@@ -1627,6 +1814,13 @@ class TextureViewBuilder {
         this._desc = {};
         this._texture = texture;
     }
+    withUsage(usage) {
+        if (this._desc.usage === undefined) {
+            this._desc.usage = 0;
+        }
+        this._desc.usage |= usage;
+        return this;
+    }
     withSingleMip(level) {
         this._desc.baseMipLevel = level;
         this._desc.mipLevelCount = 1;
@@ -1647,212 +1841,219 @@ class TextureViewBuilder {
         this._desc.arrayLayerCount = end;
         return this;
     }
+    withDimension(dim) {
+        this._desc.dimension = dim;
+        return this;
+    }
     build() {
         return new TextureView(this._texture._inner.createView(this._desc));
     }
 }
-function isBc(format) {
-    switch (format) {
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RSnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgSnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbUfloat:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbFloat:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnormSrgb:
-            return true;
-        default: return false;
+class TextureUtils {
+    static isBc(format) {
+        switch (format) {
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RSnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgSnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbUfloat:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbFloat:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnormSrgb:
+                return true;
+            default:
+                return false;
+        }
     }
-}
-function isEtc(format) {
-    switch (format) {
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Snorm:
-            return true;
-        default:
-            return false;
+    static isEtc(format) {
+        switch (format) {
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Snorm:
+                return true;
+            default:
+                return false;
+        }
     }
-}
-function getBlockWidth(format) {
-    if (isBc(format) || isEtc(format))
-        return 4;
-    switch (format) {
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4UnormSrgb:
+    static getBlockWidth(format) {
+        if (TextureUtils.isBc(format) || TextureUtils.isEtc(format))
             return 4;
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5UnormSrgb:
-            return 5;
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6UnormSrgb:
-            return 6;
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8UnormSrgb:
-            return 8;
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10UnormSrgb:
-            return 10;
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12UnormSrgb:
-            return 12;
-        default:
-            return 1;
+        switch (format) {
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4UnormSrgb:
+                return 4;
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5UnormSrgb:
+                return 5;
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6UnormSrgb:
+                return 6;
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8UnormSrgb:
+                return 8;
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10UnormSrgb:
+                return 10;
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12UnormSrgb:
+                return 12;
+            default:
+                return 1;
+        }
     }
-}
-/**
- * Returns the number of bytes in a compressed or uncompressed block for the
- * given texture format. Matches the mapping from the Rust implementation and
- * throws for unsupported formats.
- */
-function bytesPerBlock(format) {
-    switch (format) {
-        // 1-byte formats
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Stencil8:
-            return 1;
-        // 2-byte formats
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Float:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth16Unorm:
-            return 2;
-        // 4-byte formats
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R32Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R32Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R32Float:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Float:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bgra8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bgra8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgb9e5Ufloat:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgb10a2Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgb10a2Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth24Plus:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth24PlusStencil8:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth32Float:
-            return 4;
-        // 8-byte formats
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rg11b10Ufloat:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG32Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG32Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG32Float:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Float:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth32FloatStencil8:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RSnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Snorm:
-            return 8;
-        // 16-byte formats
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba32Uint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba32Sint:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba32Float:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgSnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbUfloat:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbFloat:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Snorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12Unorm:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12UnormSrgb:
-        case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnorm:
-            // NOTE: Bc2RgbaUnorm is already listed above; duplicate entries are
-            // harmless but kept out of caution when mapping from Rust.
-            return 16;
-        default:
-            throw new Error(`Unsupported texture format: ${format}`);
+    /**
+     * Returns the number of bytes in a compressed or uncompressed block for the
+     * given texture format. Matches the mapping from the Rust implementation and
+     * throws for unsupported formats.
+     */
+    static bytesPerBlock(format) {
+        switch (format) {
+            // 1-byte formats
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R8Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Stencil8:
+                return 1;
+            // 2-byte formats
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R16Float:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG8Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth16Unorm:
+                return 2;
+            // 4-byte formats
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R32Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R32Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.R32Float:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG16Float:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bgra8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bgra8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgb9e5Ufloat:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgb10a2Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgb10a2Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth24Plus:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth24PlusStencil8:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth32Float:
+                return 4;
+            // 8-byte formats
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rg11b10Ufloat:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG32Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG32Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.RG32Float:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba16Float:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Depth32FloatStencil8:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc1RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc4RSnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgb8A1UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacR11Snorm:
+                return 8;
+            // 16-byte formats
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba32Uint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba32Sint:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba32Float:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc3RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc5RgSnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbUfloat:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc6hRgbFloat:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc7RgbaUnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Etc2Rgba8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.EacRg11Snorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc4x4UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x4UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc5x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc6x6UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x6UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc8x8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x5UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x6UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x8UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc10x10UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x10UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12Unorm:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Astc12x12UnormSrgb:
+            case _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Bc2RgbaUnorm:
+                // NOTE: Bc2RgbaUnorm is already listed above; duplicate entries are
+                // harmless but kept out of caution when mapping from Rust.
+                return 16;
+            default:
+                throw new Error(`Unsupported texture format: ${format}`);
+        }
     }
 }
 
@@ -1882,6 +2083,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ComputePipeline__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ComputePipeline */ "./src/ComputePipeline.ts");
 /* harmony import */ var _utils_mapUndefined__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./utils/mapUndefined */ "./src/utils/mapUndefined.ts");
 /* harmony import */ var _buffers_Buffer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./buffers/Buffer */ "./src/buffers/Buffer.ts");
+/* harmony import */ var _wgsl_mip_2d_2x2_wgsl__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./wgsl/mip_2d_2x2.wgsl */ "./src/wgsl/mip_2d_2x2.wgsl");
+
 
 
 
@@ -1901,15 +2104,65 @@ __webpack_require__.r(__webpack_exports__);
  */
 class TinyHelix {
     /**
-     * Create a new TinyHelix instance. Call `initialize()` before rendering.
-     */
-    constructor(canvas) {
+      * Create a new TinyHelix instance from a HTMLCanvasElement or an existing TinyHelix instance.
+     *  When creating from a Canvas, call `initialize()` before rendering to initialize the WebGPU context. When
+     *  using an existing TinyHelix instance, the new instance will share the same WebGPU context and resources.
+      */
+    constructor(canvasOrHX) {
+        this._parent = null;
         this._options = {};
         this._shaderIncludes = new Map();
-        this._globalBindBufferLayouts = [];
-        this._globalBindBuffers = [];
-        this._context = new _WebGPUContext__WEBPACK_IMPORTED_MODULE_0__.WebGPUContext();
-        this._canvas = canvas;
+        this._globalBindGroupLayouts = [];
+        this._globalBindGroups = [];
+        if (canvasOrHX instanceof TinyHelix) {
+            this._context = canvasOrHX._context;
+            this._canvas = canvasOrHX._canvas;
+            this._mipShader = canvasOrHX._mipShader;
+            this._depthStencil = canvasOrHX._depthStencil;
+            this._depthStencilTarget = canvasOrHX._depthStencilTarget;
+        }
+        else {
+            this._context = new _WebGPUContext__WEBPACK_IMPORTED_MODULE_0__.WebGPUContext();
+            this._canvas = canvasOrHX;
+        }
+    }
+    get shaderF16Supported() {
+        return this._context.shaderF16Supported;
+    }
+    get floatFilteringSupported() {
+        return this._context.floatFilteringSupported;
+    }
+    get adapter() {
+        return this._context.adapter;
+    }
+    get device() {
+        return this._context.device;
+    }
+    get context() {
+        return this._context.context;
+    }
+    /**
+     * Copies all shader includes from another TinyHelix instance.
+     * @param hx - The TinyHelix instance to copy includes from.
+     */
+    copyIncludesFrom(hx) {
+        hx._shaderIncludes.forEach((v, k) => this._shaderIncludes.set(k, v));
+        return this;
+    }
+    /**
+     * Copies all global bind groups from another TinyHelix instance.
+     * @param hx - The TinyHelix instance to copy global bind groups from.
+     */
+    copyGlobalBindGroupsFrom(hx) {
+        if (this._context != hx._context) {
+            throw new Error("Cannot copy global bind groups from another TinyHelix instance with a different WebGPU context.");
+        }
+        if (this._globalBindGroups.length > 0 || this._globalBindGroupLayouts.length > 0) {
+            throw new Error("Cannot copy global bind groups from another TinyHelix instance if this instance already has global bind groups set.");
+        }
+        this._globalBindGroupLayouts = [...hx._globalBindGroupLayouts];
+        this._globalBindGroups = [...hx._globalBindGroups];
+        return this;
     }
     /**
      * Initializes the underlying WebGPU context and prepares resources.
@@ -1921,6 +2174,10 @@ class TinyHelix {
         this._options = options;
         await this._context.initialize(options);
         this._createDepthStencil();
+        this._mipShader = this._context.device.createShaderModule({
+            code: _wgsl_mip_2d_2x2_wgsl__WEBPACK_IMPORTED_MODULE_13__,
+            label: "MipRenderer Shader Module",
+        });
     }
     resize(width, height) {
         this._canvas.width = width;
@@ -1992,9 +2249,17 @@ class TinyHelix {
      * @example tiny.startFrame();
      */
     startFrame() {
-        this._backbuffer = _Texture__WEBPACK_IMPORTED_MODULE_2__.Texture.from_webgpu(this._context.getCurrentTexture(), this._context.format);
-        this._backbufferTarget = this.createRenderTarget(this._backbuffer)
-            .build();
+        if (this._parent) {
+            this._backbuffer = this._parent.backbuffer;
+            this._backbufferTarget = this._parent.backbufferTarget;
+            return;
+        }
+        else {
+            this._backbuffer = _Texture__WEBPACK_IMPORTED_MODULE_2__.Texture.from_webgpu(this._context.getCurrentTexture(), this._context.format, this._context);
+            this._backbufferTarget = this.createRenderTarget(this._backbuffer)
+                .withMipLevel(0)
+                .build();
+        }
     }
     /**
      * Create a RenderTargetBuilder for a given texture.
@@ -2008,7 +2273,7 @@ class TinyHelix {
     createShader() {
         let builder = new _Shader__WEBPACK_IMPORTED_MODULE_4__.ShaderBuilder(this._context);
         this._shaderIncludes.forEach((v, k) => builder = builder.withInclude(k, v));
-        this._globalBindBufferLayouts.forEach((layout, i) => builder.withBindGroup(i, layout));
+        this._globalBindGroupLayouts.forEach((layout, i) => builder.withBindGroup(i, layout));
         return builder;
     }
     /**
@@ -2051,14 +2316,14 @@ class TinyHelix {
      * Create a TextureBuilder for creating a Texture.
      */
     createTexture() {
-        return new _Texture__WEBPACK_IMPORTED_MODULE_2__.TextureBuilder(this._context);
+        return new _Texture__WEBPACK_IMPORTED_MODULE_2__.TextureBuilder(this._context, this._mipShader);
     }
     /**
      * Creates a command encoder for recording GPU commands for the current frame.
      * @param label - Optional debug label to assign to the encoder
      */
     createCommandEncoder(label) {
-        return new _CommandEncoder__WEBPACK_IMPORTED_MODULE_1__.CommandEncoder(this.backbufferTarget, this._globalBindBuffers, this._context, this._depthStencilTarget, label);
+        return new _CommandEncoder__WEBPACK_IMPORTED_MODULE_1__.CommandEncoder(this.backbufferTarget, this._globalBindGroups, this._context, this._depthStencilTarget, label);
     }
     /**
      * Create a UniformBufferLayoutBuilder for creating a UniformBufferLayout.
@@ -2086,8 +2351,8 @@ class TinyHelix {
      * @param buffer - The bind group to set.
      */
     setGlobalBindGroup(index, layout, buffer) {
-        this._globalBindBufferLayouts[index] = layout;
-        this._globalBindBuffers[index] = buffer;
+        this._globalBindGroupLayouts[index] = layout;
+        this._globalBindGroups[index] = buffer;
         return this;
     }
     /**
@@ -2145,6 +2410,8 @@ class WebGPUContext {
         this._format = _enums__WEBPACK_IMPORTED_MODULE_0__.TextureFormat.Rgba8UnormSrgb;
         this._canvas = null;
         this._colorSpace = _enums__WEBPACK_IMPORTED_MODULE_0__.ColorSpace.sRGB;
+        this._shaderF16Supported = false;
+        this._floatFilteringSupported = false;
     }
     /**
      * Gets the WebGPU adapter. Throws if not initialized.
@@ -2204,6 +2471,26 @@ class WebGPUContext {
         if (!this._adapter) {
             throw new Error('Failed to get WebGPU adapter');
         }
+        // By default, shader-f16 is enabled whenever available, while TinyHelix provides f32 fallback if it doesn't.
+        // The user can ask for explicit support through the features. At this point, it will NOT provide a fallback
+        // and fail to create the context.
+        this._shaderF16Supported = this._adapter.features.has("shader-f16");
+        this._floatFilteringSupported = this._adapter.features.has("float32-filterable");
+        const requiresF16 = options.requiredFeatures?.includes("shader-f16");
+        if (!this._shaderF16Supported) {
+            if (requiresF16)
+                throw new Error("shader-f16 feature requested but not available");
+            else
+                console.warn("WebGPU adapter does not support shader-f16 feature. Performance may be suboptimal for certain workloads.");
+        }
+        else if (!requiresF16) {
+            options.requiredFeatures = options.requiredFeatures ?? [];
+            options.requiredFeatures?.push("shader-f16");
+        }
+        if (this._floatFilteringSupported && !options.requiredFeatures?.includes("float32-filterable")) {
+            options.requiredFeatures = options.requiredFeatures ?? [];
+            options.requiredFeatures?.push("float32-filterable");
+        }
         // Request device
         this._device = await this._adapter.requestDevice({
             requiredFeatures: options.requiredFeatures,
@@ -2214,11 +2501,11 @@ class WebGPUContext {
         }
         // Setup error handling
         this._device.lost.then((info) => {
-            console.error('WebGPU device lost:', info.message);
-            if (info.reason !== 'destroyed') {
+            console.error("WebGPU device lost:", info.message, "\nReason:", info.reason);
+            if (info.reason !== "destroyed") {
                 // Attempt to reinitialize
                 this.initialize(options).catch((error) => {
-                    console.error('Failed to reinitialize WebGPU context:', error);
+                    console.error("Failed to reinitialize WebGPU context:", error);
                 });
             }
         });
@@ -2247,6 +2534,19 @@ class WebGPUContext {
             console.warn("No canvas provided!");
         }
     }
+    /**
+     * Indicates whether the shaders support the f16 format. Use the type `half`, `vec2h`, `vec3h`, `vec4h`, etc. to
+     * provide f32 fallbacks if f16 is not supported.
+     */
+    get shaderF16Supported() {
+        return this._shaderF16Supported;
+    }
+    /**
+     * Indicates whether the device supports filtering on float32 textures.
+     */
+    get floatFilteringSupported() {
+        return this._floatFilteringSupported;
+    }
     /**
      * Internal helper to fetch the current swapchain texture.
      * @internal
@@ -2327,6 +2627,7 @@ class BufferBuilder {
         this._size = 0;
         this._keepData = false;
         this._usage = 0;
+        this._dataOffset = 0;
         this._ctx = ctx;
     }
     /**
@@ -2341,11 +2642,12 @@ class BufferBuilder {
      * ArrayBuffer is stored in the resulting `Buffer.data` field for readback or
      * reuse.
      */
-    withData(data, keepOnCPU = false) {
+    withData(data, keepOnCPU = false, offset = 0, length = data.byteLength) {
         this._data = data;
         // round to the nearest multiple of 4 bytes, as required by GPUBuffer.writeBuffer()
-        this._size = data.byteLength;
+        this._size = length ?? (data.byteLength - offset);
         this._keepData = keepOnCPU;
+        this._dataOffset = offset;
         this._usage |= BufferUsage.CopyDst;
         return this;
     }
@@ -2360,9 +2662,13 @@ class BufferBuilder {
      * Create the GPU buffer and upload any provided data.
      */
     build() {
-        const data = (0,_utils_mapUndefined__WEBPACK_IMPORTED_MODULE_0__.mapUndefined)(this._data, data => (0,_utils_padArrayBuffer__WEBPACK_IMPORTED_MODULE_1__.padArrayBuffer)(data, 4));
+        const data = (0,_utils_mapUndefined__WEBPACK_IMPORTED_MODULE_0__.mapUndefined)(this._data, data => (0,_utils_padArrayBuffer__WEBPACK_IMPORTED_MODULE_1__.padArrayBuffer)(data, 4, this._dataOffset, this._size));
+        if (this._keepData && data) {
+            this._data = data;
+        }
+        this._size = data?.byteLength ?? this._size;
         const buffer = this._ctx.device.createBuffer({
-            size: data ? data.byteLength : this._size, // in case we don't have data, we need to specify the size explicitly'
+            size: this._size,
             usage: this._usage
         });
         if (data) {
@@ -2650,6 +2956,8 @@ function sizeForBaseType(type) {
         case BaseType.Float16:
             return 2;
         case BaseType.Float32:
+        case BaseType.Uint:
+        case BaseType.Sint:
             return 4;
         case BaseType.Boolean:
             return 1;
@@ -2832,6 +3140,9 @@ class UniformBuffer {
      */
     setVec(name, values) {
         const [member, target] = this._dataViews.get(name);
+        for (let i = 0; i < target.length; ++i) {
+            target[i] = 0;
+        }
         if (member.type.baseType == BaseType.Float16) {
             for (let i = 0; i < values.length; ++i) {
                 target[i] = (0,_utils_float32ToFloat16__WEBPACK_IMPORTED_MODULE_1__.float32ToFloat16)(values[i]);
@@ -2854,6 +3165,9 @@ class UniformBuffer {
         const numCols = member.type.numCols;
         const numRows = member.type.numRows;
         const skipW = numRows === 3;
+        for (let i = 0; i < target.length; ++i) {
+            target[i] = 0;
+        }
         // I know looping inside the cases looks ugly and the loops are tiny, but I just can't bring myself to put
         // a switch in a loop
         let i = 0;
@@ -2908,12 +3222,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   AddressMode: () => (/* binding */ AddressMode),
 /* harmony export */   BlendFactor: () => (/* binding */ BlendFactor),
+/* harmony export */   ColorChannel: () => (/* binding */ ColorChannel),
 /* harmony export */   ColorSpace: () => (/* binding */ ColorSpace),
 /* harmony export */   CompareFunction: () => (/* binding */ CompareFunction),
 /* harmony export */   CullMode: () => (/* binding */ CullMode),
 /* harmony export */   FilterMode: () => (/* binding */ FilterMode),
+/* harmony export */   SamplerType: () => (/* binding */ SamplerType),
+/* harmony export */   ShaderStage: () => (/* binding */ ShaderStage),
 /* harmony export */   StorageAccess: () => (/* binding */ StorageAccess),
-/* harmony export */   TextureFormat: () => (/* binding */ TextureFormat)
+/* harmony export */   StoreOp: () => (/* binding */ StoreOp),
+/* harmony export */   TextureDimension: () => (/* binding */ TextureDimension),
+/* harmony export */   TextureFormat: () => (/* binding */ TextureFormat),
+/* harmony export */   TextureSampleType: () => (/* binding */ TextureSampleType),
+/* harmony export */   TextureViewDimension: () => (/* binding */ TextureViewDimension)
 /* harmony export */ });
 var ColorSpace;
 (function (ColorSpace) {
@@ -3081,6 +3402,176 @@ var StorageAccess;
     StorageAccess["Read"] = "read-only";
     StorageAccess["Write"] = "write-only";
 })(StorageAccess || (StorageAccess = {}));
+var TextureSampleType;
+(function (TextureSampleType) {
+    TextureSampleType["Float"] = "float";
+    TextureSampleType["Sint"] = "sint";
+    TextureSampleType["Uint"] = "uint";
+    TextureSampleType["UnfilterableFloat"] = "unfilterable-float";
+    TextureSampleType["Depth"] = "depth";
+})(TextureSampleType || (TextureSampleType = {}));
+var SamplerType;
+(function (SamplerType) {
+    SamplerType["Filtering"] = "filtering";
+    SamplerType["NonFiltering"] = "non-filtering";
+    SamplerType["Comparison"] = "comparison";
+})(SamplerType || (SamplerType = {}));
+var ColorChannel;
+(function (ColorChannel) {
+    ColorChannel[ColorChannel["Red"] = GPUColorWrite.RED] = "Red";
+    ColorChannel[ColorChannel["Green"] = GPUColorWrite.GREEN] = "Green";
+    ColorChannel[ColorChannel["Blue"] = GPUColorWrite.BLUE] = "Blue";
+})(ColorChannel || (ColorChannel = {}));
+var TextureDimension;
+(function (TextureDimension) {
+    TextureDimension["D1"] = "1d";
+    TextureDimension["D2"] = "2d";
+    TextureDimension["D3"] = "3d";
+})(TextureDimension || (TextureDimension = {}));
+var TextureViewDimension;
+(function (TextureViewDimension) {
+    TextureViewDimension["D1"] = "1d";
+    TextureViewDimension["D2"] = "2d";
+    TextureViewDimension["D2Array"] = "2d-array";
+    TextureViewDimension["Cube"] = "cube";
+    TextureViewDimension["CubeArray"] = "cube-array";
+    TextureViewDimension["D3"] = "3d";
+})(TextureViewDimension || (TextureViewDimension = {}));
+var ShaderStage;
+(function (ShaderStage) {
+    ShaderStage[ShaderStage["Vertex"] = GPUShaderStage.VERTEX] = "Vertex";
+    ShaderStage[ShaderStage["Fragment"] = GPUShaderStage.FRAGMENT] = "Fragment";
+    ShaderStage[ShaderStage["Compute"] = GPUShaderStage.COMPUTE] = "Compute";
+})(ShaderStage || (ShaderStage = {}));
+var StoreOp;
+(function (StoreOp) {
+    StoreOp["Store"] = "store";
+    StoreOp["Discard"] = "discard";
+})(StoreOp || (StoreOp = {}));
+
+
+/***/ }),
+
+/***/ "./src/utils/MipRenderer.ts":
+/*!**********************************!*\
+  !*** ./src/utils/MipRenderer.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MipRenderer: () => (/* binding */ MipRenderer)
+/* harmony export */ });
+/* harmony import */ var _enums__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../enums */ "./src/enums.ts");
+/* harmony import */ var _buffers_Buffer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../buffers/Buffer */ "./src/buffers/Buffer.ts");
+
+
+class MipRenderer {
+    constructor(ctx, shader, texture) {
+        this._bindgroups = [];
+        this._views = [];
+        this._passDescs = [];
+        this._ctx = ctx;
+        const sampler = ctx.device.createSampler({
+            label: "MipRenderer Bilinear Sampler",
+            magFilter: _enums__WEBPACK_IMPORTED_MODULE_0__.FilterMode.Linear,
+            minFilter: _enums__WEBPACK_IMPORTED_MODULE_0__.FilterMode.Linear,
+            mipmapFilter: _enums__WEBPACK_IMPORTED_MODULE_0__.FilterMode.Nearest
+        });
+        this._bindgroupLayout = ctx.device.createBindGroupLayout({
+            label: "MipRenderer BindGroup Layout",
+            entries: [
+                {
+                    binding: 0,
+                    visibility: GPUShaderStage.FRAGMENT,
+                    texture: {
+                        sampleType: "float",
+                        viewDimension: texture.dimension(),
+                        multisampled: false
+                    }
+                },
+                {
+                    binding: 1,
+                    visibility: GPUShaderStage.FRAGMENT,
+                    sampler: {
+                        type: "filtering"
+                    }
+                }
+            ]
+        });
+        this._pipeline = ctx.device.createRenderPipeline({
+            label: "MipRenderer Pipeline",
+            layout: ctx.device.createPipelineLayout({
+                label: "MipRenderer Pipeline Layout",
+                bindGroupLayouts: [this._bindgroupLayout]
+            }),
+            vertex: {
+                module: shader,
+                entryPoint: "vs_main"
+            },
+            fragment: {
+                module: shader,
+                entryPoint: "fs_main",
+                targets: [
+                    {
+                        format: texture.format
+                    }
+                ]
+            },
+            primitive: {
+                topology: "triangle-list",
+                stripIndexFormat: undefined,
+                frontFace: "ccw",
+                cullMode: "none"
+            }
+        });
+        for (let level = 0; level < texture.mipLevelCount; ++level) {
+            this._views.push(texture.createView()
+                .withSingleMip(level)
+                .withUsage(_buffers_Buffer__WEBPACK_IMPORTED_MODULE_1__.TextureUsage.RenderAttachment)
+                .withUsage(_buffers_Buffer__WEBPACK_IMPORTED_MODULE_1__.TextureUsage.TextureBinding)
+                .build()._inner);
+            if (level === 0)
+                continue;
+            this._bindgroups.push(ctx.device.createBindGroup({
+                label: `MipRenderer BindGroup Mip ${level}`,
+                layout: this._bindgroupLayout,
+                entries: [
+                    {
+                        binding: 0,
+                        resource: this._views[level - 1]
+                    },
+                    {
+                        binding: 1,
+                        resource: sampler
+                    }
+                ]
+            }));
+            this._passDescs.push({
+                label: `MipRenderer Render Pass mip ${level}`,
+                colorAttachments: [{
+                        view: this._views[level],
+                        loadOp: 'clear',
+                        storeOp: 'store',
+                        clearValue: { r: 0, g: 0, b: 0, a: 0 }
+                    }]
+            });
+        }
+    }
+    render() {
+        const encoder = this._ctx.device.createCommandEncoder({
+            label: "MipRenderer Command Encoder"
+        });
+        this._passDescs.forEach((desc, level) => {
+            const pass = encoder.beginRenderPass(desc);
+            pass.setPipeline(this._pipeline);
+            pass.setBindGroup(0, this._bindgroups[level]);
+            pass.draw(3, 1, 0, 0);
+            pass.end();
+        });
+        this._ctx.device.queue.submit([encoder.finish()]);
+    }
+}
 
 
 /***/ }),
@@ -3166,20 +3657,33 @@ __webpack_require__.r(__webpack_exports__);
  *
  * @param input - The input ArrayBuffer or SharedArrayBuffer to pad
  * @param alignment - Desired byte alignment (e.g. 4 for 32-bit alignment)
+ * @param offset - The offset in bytes from the start of the input buffer to begin copying from
+ * @param size - The number of bytes to copy from the input buffer
  * @returns A buffer with byteLength rounded up to the nearest multiple of alignment
  */
-function padArrayBuffer(input, alignment) {
-    const targetSize = Math.ceil(input.byteLength / alignment) * alignment;
-    if (targetSize === input.byteLength)
+function padArrayBuffer(input, alignment, offset, size) {
+    const targetSize = Math.ceil(size / alignment) * alignment;
+    const needsSlice = offset !== 0 || size !== input.byteLength;
+    if (!needsSlice && targetSize === size)
         return input;
     const data = input instanceof ArrayBuffer ? new ArrayBuffer(targetSize) : new SharedArrayBuffer(targetSize);
-    const src = new Uint8Array(input);
+    const src = new Uint8Array(input, offset, size);
     const dst = new Uint8Array(data);
     dst.set(src);
     return data;
 }
 
 
+/***/ }),
+
+/***/ "./src/wgsl/mip_2d_2x2.wgsl":
+/*!**********************************!*\
+  !*** ./src/wgsl/mip_2d_2x2.wgsl ***!
+  \**********************************/
+/***/ ((module) => {
+
+module.exports = "@group(0) @binding(0) var source_tex: texture_2d<f32>;\n@group(0) @binding(1) var bilinear_sampler: sampler;\n\nstruct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n}\n\n@vertex\nfn vs_main(@builtin(vertex_index) i: u32) -> VertexOutput {\n    var output: VertexOutput;\n\n    // Full-screen triangle\n    let x = f32((i << 1u) & 2u);\n    let y = f32(i & 2u);\n\n    output.position = vec4f(x * 2.0 - 1.0, 1.0 - y * 2.0, 0.0, 1.0);\n    output.uv = vec2f(x, y);\n\n    return output;\n}\n\n@fragment\nfn fs_main(input: VertexOutput) -> @location(0) vec4f {\n    return textureSample(source_tex, bilinear_sampler, input.uv);\n}\n\n";
+
 /***/ })
 
 /******/ 	});
@@ -3257,6 +3761,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   BufferBuilder: () => (/* reexport safe */ _buffers_Buffer__WEBPACK_IMPORTED_MODULE_15__.BufferBuilder),
 /* harmony export */   BufferDataWriter: () => (/* reexport safe */ _buffers_BufferDataWriter__WEBPACK_IMPORTED_MODULE_17__.BufferDataWriter),
 /* harmony export */   BufferUsage: () => (/* reexport safe */ _buffers_Buffer__WEBPACK_IMPORTED_MODULE_15__.BufferUsage),
+/* harmony export */   ColorChannel: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.ColorChannel),
 /* harmony export */   ColorSpace: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.ColorSpace),
 /* harmony export */   CommandEncoder: () => (/* reexport safe */ _CommandEncoder__WEBPACK_IMPORTED_MODULE_4__.CommandEncoder),
 /* harmony export */   CompareFunction: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.CompareFunction),
@@ -3279,16 +3784,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   RenderTargetBuilder: () => (/* reexport safe */ _RenderTarget__WEBPACK_IMPORTED_MODULE_11__.RenderTargetBuilder),
 /* harmony export */   Sampler: () => (/* reexport safe */ _Sampler__WEBPACK_IMPORTED_MODULE_12__.Sampler),
 /* harmony export */   SamplerBuilder: () => (/* reexport safe */ _Sampler__WEBPACK_IMPORTED_MODULE_12__.SamplerBuilder),
+/* harmony export */   SamplerType: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.SamplerType),
 /* harmony export */   Shader: () => (/* reexport safe */ _Shader__WEBPACK_IMPORTED_MODULE_13__.Shader),
 /* harmony export */   ShaderBuilder: () => (/* reexport safe */ _Shader__WEBPACK_IMPORTED_MODULE_13__.ShaderBuilder),
+/* harmony export */   ShaderStage: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.ShaderStage),
 /* harmony export */   StorageAccess: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.StorageAccess),
+/* harmony export */   StoreOp: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.StoreOp),
 /* harmony export */   StreamBuilder: () => (/* reexport safe */ _Mesh__WEBPACK_IMPORTED_MODULE_8__.StreamBuilder),
 /* harmony export */   Texture: () => (/* reexport safe */ _Texture__WEBPACK_IMPORTED_MODULE_14__.Texture),
 /* harmony export */   TextureBuilder: () => (/* reexport safe */ _Texture__WEBPACK_IMPORTED_MODULE_14__.TextureBuilder),
+/* harmony export */   TextureDimension: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.TextureDimension),
 /* harmony export */   TextureFormat: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.TextureFormat),
+/* harmony export */   TextureSampleType: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.TextureSampleType),
 /* harmony export */   TextureUsage: () => (/* reexport safe */ _buffers_Buffer__WEBPACK_IMPORTED_MODULE_15__.TextureUsage),
+/* harmony export */   TextureUtils: () => (/* reexport safe */ _Texture__WEBPACK_IMPORTED_MODULE_14__.TextureUtils),
 /* harmony export */   TextureView: () => (/* reexport safe */ _Texture__WEBPACK_IMPORTED_MODULE_14__.TextureView),
 /* harmony export */   TextureViewBuilder: () => (/* reexport safe */ _Texture__WEBPACK_IMPORTED_MODULE_14__.TextureViewBuilder),
+/* harmony export */   TextureViewDimension: () => (/* reexport safe */ _enums__WEBPACK_IMPORTED_MODULE_7__.TextureViewDimension),
 /* harmony export */   TinyHelix: () => (/* reexport safe */ _TinyHelix__WEBPACK_IMPORTED_MODULE_0__.TinyHelix),
 /* harmony export */   UniformBuffer: () => (/* reexport safe */ _buffers_UniformBuffer__WEBPACK_IMPORTED_MODULE_16__.UniformBuffer),
 /* harmony export */   UniformBufferLayout: () => (/* reexport safe */ _buffers_UniformBuffer__WEBPACK_IMPORTED_MODULE_16__.UniformBufferLayout),