@luma.gl/engine 9.2.6 → 9.3.0-alpha.4

package/dist/dist.dev.js

@@ -70,6 +70,7 @@ var __exports__ = (() => {
     ConeGeometry: () => ConeGeometry,
     CubeGeometry: () => CubeGeometry,
     CylinderGeometry: () => CylinderGeometry,
+    DynamicTexture: () => DynamicTexture,
     GPUGeometry: () => GPUGeometry,
     Geometry: () => Geometry,
     GroupNode: () => GroupNode,
@@ -492,7 +493,7 @@ var __exports__ = (() => {
     gpuTime;
     frameRate;
     display;
-    needsRedraw = "initialized";
+    _needsRedraw = "initialized";
     _initialized = false;
     _running = false;
     _animationFrameId = null;
@@ -534,9 +535,15 @@ var __exports__ = (() => {
     }
     /** Flags this animation loop as needing redraw */
     setNeedsRedraw(reason) {
-      this.needsRedraw = this.needsRedraw || reason;
+      this._needsRedraw = this._needsRedraw || reason;
       return this;
     }
+    /** Query redraw status. Clears the flag. */
+    needsRedraw() {
+      const reason = this._needsRedraw;
+      this._needsRedraw = false;
+      return reason;
+    }
     setProps(props) {
       if ("autoResizeViewport" in props) {
         this.props.autoResizeViewport = props.autoResizeViewport || false;
@@ -678,7 +685,7 @@ var __exports__ = (() => {
       this.device?.submit();
     }
     _clearNeedsRedraw() {
-      this.needsRedraw = false;
+      this._needsRedraw = false;
     }
     _setupFrame() {
       this._resizeViewport();
@@ -736,7 +743,7 @@ var __exports__ = (() => {
       this.animationProps.width = width;
       this.animationProps.height = height;
       this.animationProps.aspect = aspect;
-      this.animationProps.needsRedraw = this.needsRedraw;
+      this.animationProps.needsRedraw = this._needsRedraw;
       this.animationProps.engineTime = Date.now() - this.animationProps.startTime;
       if (this.timeline) {
         this.timeline.update(this.animationProps.engineTime);
@@ -892,8 +899,8 @@ var __exports__ = (() => {
   }
 
   // src/model/model.ts
-  var import_core9 = __toESM(require_core(), 1);
-  var import_shadertools2 = __toESM(require_shadertools(), 1);
+  var import_core12 = __toESM(require_core(), 1);
+  var import_shadertools3 = __toESM(require_shadertools(), 1);
 
   // src/geometry/gpu-geometry.ts
   var import_core3 = __toESM(require_core(), 1);
@@ -1007,8 +1014,9 @@ var __exports__ = (() => {
   var _PipelineFactory = class {
     /** Get the singleton default pipeline factory for the specified device */
     static getDefaultPipelineFactory(device) {
-      device._lumaData["defaultPipelineFactory"] = device._lumaData["defaultPipelineFactory"] || new _PipelineFactory(device);
-      return device._lumaData["defaultPipelineFactory"];
+      const moduleData = device.getModuleData("@luma.gl/engine");
+      moduleData.defaultPipelineFactory ||= new _PipelineFactory(device);
+      return moduleData.defaultPipelineFactory;
     }
     device;
     cachingEnabled;
@@ -1177,8 +1185,9 @@ var __exports__ = (() => {
   var _ShaderFactory = class {
     /** Returns the default ShaderFactory for the given {@link Device}, creating one if necessary. */
     static getDefaultShaderFactory(device) {
-      device._lumaData["defaultShaderFactory"] ||= new _ShaderFactory(device);
-      return device._lumaData["defaultShaderFactory"];
+      const moduleData = device.getModuleData("@luma.gl/engine");
+      moduleData.defaultShaderFactory ||= new _ShaderFactory(device);
+      return moduleData.defaultShaderFactory;
     }
     device;
     cachingEnabled;
@@ -1399,6 +1408,16 @@ var __exports__ = (() => {
   };
 
   // src/utils/buffer-layout-order.ts
+  function getMinLocation(attributeNames, shaderLayoutMap) {
+    let minLocation = Infinity;
+    for (const name of attributeNames) {
+      const location = shaderLayoutMap[name];
+      if (location !== void 0) {
+        minLocation = Math.min(minLocation, location);
+      }
+    }
+    return minLocation;
+  }
   function sortedBufferLayoutByShaderSourceLocations(shaderLayout, bufferLayout) {
     const shaderLayoutMap = Object.fromEntries(
       shaderLayout.attributes.map((attr) => [attr.name, attr.location])
@@ -1407,8 +1426,8 @@ var __exports__ = (() => {
     sortedLayout.sort((a, b) => {
       const attributeNamesA = a.attributes ? a.attributes.map((attr) => attr.attribute) : [a.name];
       const attributeNamesB = b.attributes ? b.attributes.map((attr) => attr.attribute) : [b.name];
-      const minLocationA = Math.min(...attributeNamesA.map((name) => shaderLayoutMap[name]));
-      const minLocationB = Math.min(...attributeNamesB.map((name) => shaderLayoutMap[name]));
+      const minLocationA = getMinLocation(attributeNamesA, shaderLayoutMap);
+      const minLocationB = getMinLocation(attributeNamesB, shaderLayoutMap);
       return minLocationA - minLocationB;
     });
     return sortedLayout;
@@ -1554,49 +1573,810 @@ var __exports__ = (() => {
     }
   };
 
-  // src/async-texture/async-texture.ts
-  var import_core8 = __toESM(require_core(), 1);
+  // src/dynamic-texture/dynamic-texture.ts
+  var import_core11 = __toESM(require_core(), 1);
 
-  // src/application-utils/load-file.ts
-  var pathPrefix = "";
-  function setPathPrefix(prefix) {
-    pathPrefix = prefix;
+  // src/dynamic-texture/texture-data.ts
+  var import_core8 = __toESM(require_core(), 1);
+  var TEXTURE_CUBE_FACE_MAP = { "+X": 0, "-X": 1, "+Y": 2, "-Y": 3, "+Z": 4, "-Z": 5 };
+  function getFirstMipLevel(layer) {
+    if (!layer)
+      return null;
+    return Array.isArray(layer) ? layer[0] ?? null : layer;
   }
-  async function loadImageBitmap(url, opts) {
-    const image = new Image();
-    image.crossOrigin = opts?.crossOrigin || "anonymous";
-    image.src = url.startsWith("http") ? url : pathPrefix + url;
-    await image.decode();
-    return opts ? await createImageBitmap(image, opts) : await createImageBitmap(image);
+  function getTextureSizeFromData(props) {
+    const { dimension, data } = props;
+    if (!data) {
+      return null;
+    }
+    switch (dimension) {
+      case "1d": {
+        const mipLevel = getFirstMipLevel(data);
+        if (!mipLevel)
+          return null;
+        const { width } = getTextureMipLevelSize(mipLevel);
+        return { width, height: 1 };
+      }
+      case "2d": {
+        const mipLevel = getFirstMipLevel(data);
+        return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+      }
+      case "3d":
+      case "2d-array": {
+        if (!Array.isArray(data) || data.length === 0)
+          return null;
+        const mipLevel = getFirstMipLevel(data[0]);
+        return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+      }
+      case "cube": {
+        const face = Object.keys(data)[0] ?? null;
+        if (!face)
+          return null;
+        const faceData = data[face];
+        const mipLevel = getFirstMipLevel(faceData);
+        return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+      }
+      case "cube-array": {
+        if (!Array.isArray(data) || data.length === 0)
+          return null;
+        const firstCube = data[0];
+        const face = Object.keys(firstCube)[0] ?? null;
+        if (!face)
+          return null;
+        const mipLevel = getFirstMipLevel(firstCube[face]);
+        return mipLevel ? getTextureMipLevelSize(mipLevel) : null;
+      }
+      default:
+        return null;
+    }
   }
-  async function loadImage(url, opts) {
-    return await new Promise((resolve, reject) => {
+  function getTextureMipLevelSize(data) {
+    if ((0, import_core8.isExternalImage)(data)) {
+      return (0, import_core8.getExternalImageSize)(data);
+    }
+    if (typeof data === "object" && "width" in data && "height" in data) {
+      return { width: data.width, height: data.height };
+    }
+    throw new Error("Unsupported mip-level data");
+  }
+  function isTextureImageData(data) {
+    return typeof data === "object" && data !== null && "data" in data && "width" in data && "height" in data;
+  }
+  function getCubeFaceIndex(face) {
+    const idx = TEXTURE_CUBE_FACE_MAP[face];
+    if (idx === void 0)
+      throw new Error(`Invalid cube face: ${face}`);
+    return idx;
+  }
+  function getCubeArrayFaceIndex(cubeIndex, face) {
+    return 6 * cubeIndex + getCubeFaceIndex(face);
+  }
+  function getTexture1DSubresources(data) {
+    throw new Error("setTexture1DData not supported in WebGL.");
+  }
+  function _normalizeTexture2DData(data) {
+    return Array.isArray(data) ? data : [data];
+  }
+  function getTexture2DSubresources(slice, lodData) {
+    const lodArray = _normalizeTexture2DData(lodData);
+    const z = slice;
+    const subresources = [];
+    for (let mipLevel = 0; mipLevel < lodArray.length; mipLevel++) {
+      const imageData = lodArray[mipLevel];
+      if ((0, import_core8.isExternalImage)(imageData)) {
+        subresources.push({
+          type: "external-image",
+          image: imageData,
+          z,
+          mipLevel
+        });
+      } else if (isTextureImageData(imageData)) {
+        subresources.push({
+          type: "texture-data",
+          data: imageData,
+          z,
+          mipLevel
+        });
+      } else {
+        throw new Error("Unsupported 2D mip-level payload");
+      }
+    }
+    return subresources;
+  }
+  function getTexture3DSubresources(data) {
+    const subresources = [];
+    for (let depth = 0; depth < data.length; depth++) {
+      subresources.push(...getTexture2DSubresources(depth, data[depth]));
+    }
+    return subresources;
+  }
+  function getTextureArraySubresources(data) {
+    const subresources = [];
+    for (let layer = 0; layer < data.length; layer++) {
+      subresources.push(...getTexture2DSubresources(layer, data[layer]));
+    }
+    return subresources;
+  }
+  function getTextureCubeSubresources(data) {
+    const subresources = [];
+    for (const [face, faceData] of Object.entries(data)) {
+      const faceDepth = getCubeFaceIndex(face);
+      subresources.push(...getTexture2DSubresources(faceDepth, faceData));
+    }
+    return subresources;
+  }
+  function getTextureCubeArraySubresources(data) {
+    const subresources = [];
+    data.forEach((cubeData, cubeIndex) => {
+      for (const [face, faceData] of Object.entries(cubeData)) {
+        const faceDepth = getCubeArrayFaceIndex(cubeIndex, face);
+        subresources.push(...getTexture2DSubresources(faceDepth, faceData));
+      }
+    });
+    return subresources;
+  }
+
+  // src/dynamic-texture/mipmaps.ts
+  var import_core10 = __toESM(require_core(), 1);
+
+  // src/compute/computation.ts
+  var import_core9 = __toESM(require_core(), 1);
+  var import_shadertools2 = __toESM(require_shadertools(), 1);
+  var LOG_DRAW_PRIORITY = 2;
+  var LOG_DRAW_TIMEOUT = 1e4;
+  var _Computation = class {
+    device;
+    id;
+    pipelineFactory;
+    shaderFactory;
+    userData = {};
+    /** Bindings (textures, samplers, uniform buffers) */
+    bindings = {};
+    /** The underlying GPU pipeline. */
+    pipeline;
+    /** Assembled compute shader source */
+    source;
+    /** the underlying compiled compute shader */
+    // @ts-ignore Set in function called from constructor
+    shader;
+    /** ShaderInputs instance */
+    shaderInputs;
+    // @ts-ignore Set in function called from constructor
+    _uniformStore;
+    _pipelineNeedsUpdate = "newly created";
+    _getModuleUniforms;
+    props;
+    _destroyed = false;
+    constructor(device, props) {
+      if (device.type !== "webgpu") {
+        throw new Error("Computation is only supported in WebGPU");
+      }
+      this.props = { ..._Computation.defaultProps, ...props };
+      props = this.props;
+      this.id = props.id || uid("model");
+      this.device = device;
+      Object.assign(this.userData, props.userData);
+      const moduleMap = Object.fromEntries(
+        this.props.modules?.map((module) => [module.name, module]) || []
+      );
+      this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
+      this.setShaderInputs(this.shaderInputs);
+      this.props.shaderLayout ||= device.getShaderLayout(this.props.source);
+      const platformInfo = getPlatformInfo(device);
+      const modules = (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.getModules()) || [];
+      this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
+      this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
+      const { source: source3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleWGSLShader({
+        platformInfo,
+        ...this.props,
+        modules
+      });
+      this.source = source3;
+      this._getModuleUniforms = getUniforms2;
+      this.pipeline = this._updatePipeline();
+      if (props.bindings) {
+        this.setBindings(props.bindings);
+      }
+      Object.seal(this);
+    }
+    destroy() {
+      if (this._destroyed)
+        return;
+      this.pipelineFactory.release(this.pipeline);
+      this.shaderFactory.release(this.shader);
+      this._uniformStore.destroy();
+      this._destroyed = true;
+    }
+    // Draw call
+    predraw() {
+      this.updateShaderInputs();
+    }
+    dispatch(computePass, x, y, z) {
       try {
-        const image = new Image();
-        image.onload = () => resolve(image);
-        image.onerror = () => reject(new Error(`Could not load image ${url}.`));
-        image.crossOrigin = opts?.crossOrigin || "anonymous";
-        image.src = url.startsWith("http") ? url : pathPrefix + url;
-      } catch (error) {
-        reject(error);
+        this._logDrawCallStart();
+        this.pipeline = this._updatePipeline();
+        this.pipeline.setBindings(this.bindings);
+        computePass.setPipeline(this.pipeline);
+        computePass.setBindings([]);
+        computePass.dispatch(x, y, z);
+      } finally {
+        this._logDrawCallEnd();
+      }
+    }
+    // Update fixed fields (can trigger pipeline rebuild)
+    // Update dynamic fields
+    /**
+     * Updates the vertex count (used in draw calls)
+     * @note Any attributes with stepMode=vertex need to be at least this big
+     */
+    setVertexCount(vertexCount) {
+    }
+    /**
+     * Updates the instance count (used in draw calls)
+     * @note Any attributes with stepMode=instance need to be at least this big
+     */
+    setInstanceCount(instanceCount) {
+    }
+    setShaderInputs(shaderInputs) {
+      this.shaderInputs = shaderInputs;
+      this._uniformStore = new import_core9.UniformStore(this.shaderInputs.modules);
+      for (const moduleName of Object.keys(this.shaderInputs.modules)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
+    }
+    /**
+     * Updates shader module settings (which results in uniforms being set)
+     */
+    setShaderModuleProps(props) {
+      const uniforms = this._getModuleUniforms(props);
+      const keys = Object.keys(uniforms).filter((k) => {
+        const uniform = uniforms[k];
+        return !isNumericArray(uniform) && typeof uniform !== "number" && typeof uniform !== "boolean";
+      });
+      const bindings = {};
+      for (const k of keys) {
+        bindings[k] = uniforms[k];
+        delete uniforms[k];
+      }
+    }
+    updateShaderInputs() {
+      this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
+    }
+    /**
+     * Sets bindings (textures, samplers, uniform buffers)
+     */
+    setBindings(bindings) {
+      Object.assign(this.bindings, bindings);
+    }
+    _setPipelineNeedsUpdate(reason) {
+      this._pipelineNeedsUpdate = this._pipelineNeedsUpdate || reason;
+    }
+    _updatePipeline() {
+      if (this._pipelineNeedsUpdate) {
+        let prevShader = null;
+        if (this.pipeline) {
+          import_core9.log.log(
+            1,
+            `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
+          )();
+          prevShader = this.shader;
+        }
+        this._pipelineNeedsUpdate = false;
+        this.shader = this.shaderFactory.createShader({
+          id: `${this.id}-fragment`,
+          stage: "compute",
+          source: this.source,
+          debugShaders: this.props.debugShaders
+        });
+        this.pipeline = this.pipelineFactory.createComputePipeline({
+          ...this.props,
+          shader: this.shader
+        });
+        if (prevShader) {
+          this.shaderFactory.release(prevShader);
+        }
+      }
+      return this.pipeline;
+    }
+    /** Throttle draw call logging */
+    _lastLogTime = 0;
+    _logOpen = false;
+    _logDrawCallStart() {
+      const logDrawTimeout = import_core9.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
+      if (import_core9.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+        return;
+      }
+      this._lastLogTime = Date.now();
+      this._logOpen = true;
+      import_core9.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core9.log.level <= 2 })();
+    }
+    _logDrawCallEnd() {
+      if (this._logOpen) {
+        const uniformTable = this.shaderInputs.getDebugTable();
+        import_core9.log.table(LOG_DRAW_PRIORITY, uniformTable)();
+        import_core9.log.groupEnd(LOG_DRAW_PRIORITY)();
+        this._logOpen = false;
+      }
+    }
+    _drawCount = 0;
+    // TODO - fix typing of luma data types
+    _getBufferOrConstantValues(attribute, dataType) {
+      const TypedArrayConstructor = (0, import_core9.getTypedArrayConstructor)(dataType);
+      const typedArray = attribute instanceof import_core9.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+      return typedArray.toString();
+    }
+  };
+  var Computation = _Computation;
+  __publicField(Computation, "defaultProps", {
+    ...import_core9.ComputePipeline.defaultProps,
+    id: "unnamed",
+    handle: void 0,
+    userData: {},
+    source: "",
+    modules: [],
+    defines: {},
+    bindings: void 0,
+    shaderInputs: void 0,
+    pipelineFactory: void 0,
+    shaderFactory: void 0,
+    shaderAssembler: import_shadertools2.ShaderAssembler.getDefaultShaderAssembler(),
+    debugShaders: void 0
+  });
+  function getPlatformInfo(device) {
+    return {
+      type: device.type,
+      shaderLanguage: device.info.shadingLanguage,
+      shaderLanguageVersion: device.info.shadingLanguageVersion,
+      gpu: device.info.gpu,
+      // HACK - we pretend that the DeviceFeatures is a Set, it has a similar API
+      features: device.features
+    };
+  }
+
+  // src/dynamic-texture/mipmaps.ts
+  var RENDER_DIMENSIONS = [
+    "2d",
+    "2d-array",
+    "cube",
+    "cube-array"
+  ];
+  var WORKGROUP_SIZE = {
+    x: 4,
+    y: 4,
+    z: 4
+  };
+  function generateMipmap(device, texture) {
+    if (texture.mipLevels <= 1) {
+      return;
+    }
+    if (device.type !== "webgpu") {
+      throw new Error(
+        `Cannot generate mipmaps on device type "${device.type}". Use generateMipmapsWebGL for WebGL devices.`
+      );
+    }
+    if (texture.dimension === "3d") {
+      generateMipmaps3D(device, texture);
+      return;
+    }
+    if (RENDER_DIMENSIONS.includes(texture.dimension)) {
+      generateMipmapsRender(device, texture);
+      return;
+    }
+    throw new Error(
+      `Cannot generate mipmaps for texture dimension "${texture.dimension}" with WebGPU.`
+    );
+  }
+  function generateMipmapsRender(device, texture) {
+    validateFormatCapabilities(device, texture, ["render", "filter"], "render");
+    const colorAttachmentFormat = getColorAttachmentFormat(
+      texture.format,
+      "render",
+      texture.dimension
+    );
+    const viewDimension = texture.dimension;
+    const shader = getRenderMipmapWGSL(viewDimension);
+    const sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
+    const uniformValues = new Uint32Array(1);
+    const uniformsBuffer = device.createBuffer({
+      byteLength: 16,
+      usage: import_core10.Buffer.UNIFORM | import_core10.Buffer.COPY_DST
+    });
+    const model = new Model(device, {
+      source: shader,
+      colorAttachmentFormats: [colorAttachmentFormat],
+      topology: "triangle-list",
+      vertexCount: 3,
+      shaderLayout: {
+        attributes: [],
+        bindings: [
+          { type: "sampler", name: "sourceSampler", group: 0, location: 0 },
+          {
+            type: "texture",
+            name: "sourceTexture",
+            group: 0,
+            location: 1,
+            viewDimension,
+            sampleType: "float"
+          },
+          { type: "uniform", name: "uniforms", group: 0, location: 2 }
+        ]
+      },
+      bindings: {
+        sourceSampler: sampler,
+        sourceTexture: texture,
+        uniforms: uniformsBuffer
       }
     });
+    let sourceWidth = texture.width;
+    let sourceHeight = texture.height;
+    const layerCount = texture.dimension === "2d" ? 1 : texture.depth;
+    try {
+      for (let baseMipLevel = 1; baseMipLevel < texture.mipLevels; ++baseMipLevel) {
+        validateFormatCapabilities(device, texture, ["render", "filter"], "render");
+        const sourceMipLevel = baseMipLevel - 1;
+        const destinationWidth = Math.max(1, sourceWidth >> 1);
+        const destinationHeight = Math.max(1, sourceHeight >> 1);
+        const sourceView = texture.createView({
+          dimension: viewDimension,
+          baseMipLevel: sourceMipLevel,
+          mipLevelCount: 1,
+          baseArrayLayer: 0,
+          arrayLayerCount: texture.depth
+        });
+        model.setBindings({ sourceTexture: sourceView });
+        for (let baseArrayLayer = 0; baseArrayLayer < layerCount; ++baseArrayLayer) {
+          uniformValues[0] = baseArrayLayer;
+          uniformsBuffer.write(uniformValues);
+          const destinationView = texture.createView({
+            dimension: "2d",
+            baseMipLevel,
+            mipLevelCount: 1,
+            baseArrayLayer,
+            arrayLayerCount: 1
+          });
+          const framebuffer = device.createFramebuffer({
+            colorAttachments: [destinationView]
+          });
+          const renderPass = device.beginRenderPass({
+            id: `mipmap-generation:${texture.format}:${baseMipLevel}:${baseArrayLayer}`,
+            framebuffer
+          });
+          renderPass.setParameters({
+            viewport: [0, 0, destinationWidth, destinationHeight, 0, 1],
+            scissorRect: [0, 0, destinationWidth, destinationHeight]
+          });
+          model.draw(renderPass);
+          renderPass.end();
+          device.submit();
+          destinationView.destroy();
+          framebuffer.destroy();
+        }
+        sourceView.destroy();
+        sourceWidth = destinationWidth;
+        sourceHeight = destinationHeight;
+      }
+    } finally {
+      model.destroy();
+      sampler.destroy();
+      uniformsBuffer.destroy();
+    }
+  }
+  function getColorAttachmentFormat(format, path, dimension) {
+    if (import_core10.textureFormatDecoder.isColor(format)) {
+      return format;
+    }
+    throw new Error(
+      `Cannot run ${path} mipmap generation for ${dimension} texture with format "${format}". Only color textures can be used for this operation. Required capabilities: color. Actual capabilities: color=false.`
+    );
+  }
+  function generateMipmaps3D(device, texture) {
+    validateFormatCapabilities(device, texture, ["filter", "store"], "compute");
+    const format = getColorAttachmentFormat(texture.format, "compute", texture.dimension);
+    const shaderSource = get3DComputeMipmapWGSL(format);
+    const uniformsBuffer = device.createBuffer({
+      byteLength: 32,
+      usage: import_core10.Buffer.UNIFORM | import_core10.Buffer.COPY_DST
+    });
+    const uniformValues = new Uint32Array(8);
+    let sourceWidth = texture.width;
+    let sourceHeight = texture.height;
+    let sourceDepth = texture.depth;
+    try {
+      for (let destinationMipLevel = 1; destinationMipLevel < texture.mipLevels; ++destinationMipLevel) {
+        validateFormatCapabilities(device, texture, ["filter", "store"], "compute");
+        const destinationWidth = Math.max(1, sourceWidth >> 1);
+        const destinationHeight = Math.max(1, sourceHeight >> 1);
+        const destinationDepth = Math.max(1, sourceDepth >> 1);
+        uniformValues[0] = sourceWidth;
+        uniformValues[1] = sourceHeight;
+        uniformValues[2] = sourceDepth;
+        uniformValues[3] = destinationWidth;
+        uniformValues[4] = destinationHeight;
+        uniformValues[5] = destinationDepth;
+        uniformValues[6] = 0;
+        uniformsBuffer.write(uniformValues);
+        const sourceView = texture.createView({
+          dimension: "3d",
+          baseMipLevel: destinationMipLevel - 1,
+          mipLevelCount: 1,
+          baseArrayLayer: 0,
+          arrayLayerCount: 1
+        });
+        const destinationView = texture.createView({
+          dimension: "3d",
+          baseMipLevel: destinationMipLevel,
+          mipLevelCount: 1,
+          baseArrayLayer: 0,
+          arrayLayerCount: 1
+        });
+        const computation = new Computation(device, {
+          source: shaderSource,
+          shaderLayout: {
+            bindings: [
+              {
+                type: "texture",
+                name: "sourceTexture",
+                group: 0,
+                location: 0,
+                viewDimension: "3d",
+                sampleType: "float"
+              },
+              {
+                type: "storage",
+                name: "destinationTexture",
+                group: 0,
+                location: 1,
+                format,
+                viewDimension: "3d",
+                access: "write-only"
+              },
+              { type: "uniform", name: "uniforms", group: 0, location: 2 }
+            ]
+          },
+          bindings: {
+            sourceTexture: sourceView,
+            destinationTexture: destinationView,
+            uniforms: uniformsBuffer
+          }
+        });
+        const workgroupsX = Math.ceil(destinationWidth / WORKGROUP_SIZE.x);
+        const workgroupsY = Math.ceil(destinationHeight / WORKGROUP_SIZE.y);
+        const workgroupsZ = Math.ceil(destinationDepth / WORKGROUP_SIZE.z);
+        const computePass = device.beginComputePass({});
+        computation.dispatch(computePass, workgroupsX, workgroupsY, workgroupsZ);
+        computePass.end();
+        device.submit();
+        computation.destroy();
+        sourceView.destroy();
+        destinationView.destroy();
+        sourceWidth = destinationWidth;
+        sourceHeight = destinationHeight;
+        sourceDepth = destinationDepth;
+      }
+    } finally {
+      uniformsBuffer.destroy();
+    }
+  }
+  function validateFormatCapabilities(device, texture, requiredCapabilities, path) {
+    const { format, dimension } = texture;
+    const capabilities = device.getTextureFormatCapabilities(format);
+    const missingCapabilities = requiredCapabilities.filter((capability) => !capabilities[capability]);
+    if (missingCapabilities.length > 0) {
+      const required = requiredCapabilities.join(" + ");
+      const actual = requiredCapabilities.map((capability) => `${capability}=${capabilities[capability]}`).join(", ");
+      throw new Error(
+        `Cannot run ${path} mipmap generation for ${dimension} texture with format "${format}". Required capabilities: ${required}. Actual capabilities: ${actual}.`
+      );
+    }
+  }
+  function getSourceTextureType(dimension) {
+    switch (dimension) {
+      case "2d":
+        return "texture_2d<f32>";
+      case "2d-array":
+        return "texture_2d_array<f32>";
+      case "cube":
+        return "texture_cube<f32>";
+      case "cube-array":
+        return "texture_cube_array<f32>";
+      default:
+        throw new Error(`Unsupported render dimension "${dimension}" for mipmap generation.`);
+    }
+  }
+  function getRenderMipmapWGSL(dimension) {
+    const sourceSnippet = getRenderMipmapSampleSnippet(dimension);
+    return `
+struct MipmapUniforms {
+  sourceLayer: u32,
+};
+
+fn _touchUniform(uniforms: MipmapUniforms) {
+  let unusedSourceLayer = uniforms.sourceLayer;
+}
+
+const faceMat = array(
+  mat3x3f(
+    0.0,  0.0,  -2.0,
+    0.0, -2.0,   0.0,
+    1.0,  1.0,   1.0
+  ),  // pos-x
+  mat3x3f(
+    0.0,  0.0,   2.0,
+    0.0, -2.0,   0.0,
+    -1.0,  1.0,  -1.0
+  ),  // neg-x
+  mat3x3f(
+    2.0,  0.0,   0.0,
+    0.0,  0.0,   2.0,
+    -1.0,  1.0,  -1.0
+  ),  // pos-y
+  mat3x3f(
+    2.0,  0.0,   0.0,
+    0.0,  0.0,  -2.0,
+    -1.0, -1.0,   1.0
+  ),  // neg-y
+  mat3x3f(
+    2.0,  0.0,   0.0,
+    0.0, -2.0,   0.0,
+    -1.0,  1.0,   1.0
+  ),  // pos-z
+  mat3x3f(
+    -2.0, 0.0,   0.0,
+    0.0, -2.0,   0.0,
+    1.0,   1.0,  -1.0
+  )   // neg-z
+);
+
+struct FragmentInputs {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f
+};
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) texcoord: vec2f
+};
+
+@group(0) @binding(0) var sourceSampler: sampler;
+@group(0) @binding(1) var sourceTexture: ${getSourceTextureType(dimension)};
+@group(0) @binding(2) var<uniform> uniforms: MipmapUniforms;
+
+@vertex
+fn vertexMain(
+  @builtin(vertex_index) vertexIndex: u32
+) -> VertexOutput {
+  const positions = array(
+    vec2f(-1.0, -1.0),
+    vec2f(-1.0,  3.0),
+    vec2f( 3.0, -1.0)
+  );
+
+  let xy = positions[vertexIndex];
+  return VertexOutput(
+    vec4f(xy, 0.0, 1.0),
+    xy * vec2f(0.5, -0.5) + vec2f(0.5)
+  );
+}
+
+@fragment
+fn fragmentMain(fsInput: VertexOutput) -> @location(0) vec4f {
+  _touchUniform(uniforms);
+  return ${sourceSnippet};
+}
+`;
+  }
+  function getRenderMipmapSampleSnippet(dimension) {
+    const layer = "uniforms.sourceLayer";
+    switch (dimension) {
+      case "2d":
+        return "textureSampleLevel(sourceTexture, sourceSampler, fsInput.texcoord, 0.0)";
+      case "2d-array":
+        return `textureSampleLevel(sourceTexture, sourceSampler, fsInput.texcoord, i32(${layer}), 0.0)`;
+      case "cube":
+        return `textureSampleLevel(sourceTexture, sourceSampler, faceMat[i32(${layer})] * vec3f(fract(fsInput.texcoord), 1.0), 0.0)`;
+      case "cube-array":
+        return `textureSampleLevel(sourceTexture, sourceSampler, faceMat[i32(${layer} % 6u)] * vec3f(fract(fsInput.texcoord), 1.0), i32(${layer} / 6u), 0.0)`;
+      default:
+        throw new Error(`Unsupported render dimension "${dimension}" for mipmap generation.`);
+    }
+  }
+  function get3DComputeMipmapWGSL(format) {
+    return `
+struct MipmapUniforms {
+  sourceWidth: u32,
+  sourceHeight: u32,
+  sourceDepth: u32,
+  destinationWidth: u32,
+  destinationHeight: u32,
+  destinationDepth: u32,
+  padding: u32,
+};
+
+@group(0) @binding(0) var sourceTexture: texture_3d<f32>;
+@group(0) @binding(1) var destinationTexture: texture_storage_3d<${format}, write>;
+@group(0) @binding(2) var<uniform> uniforms: MipmapUniforms;
+
+@compute @workgroup_size(${WORKGROUP_SIZE.x}, ${WORKGROUP_SIZE.y}, ${WORKGROUP_SIZE.z})
+fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+  if (
+    id.x >= uniforms.destinationWidth ||
+    id.y >= uniforms.destinationHeight ||
+    id.z >= uniforms.destinationDepth
+  ) {
+    return;
+  }
+
+  let sourceBase = id * 2u;
+  let sourceX0 = min(sourceBase.x, uniforms.sourceWidth - 1u);
+  let sourceY0 = min(sourceBase.y, uniforms.sourceHeight - 1u);
+  let sourceZ0 = min(sourceBase.z, uniforms.sourceDepth - 1u);
+
+  let sourceX1 = min(sourceBase.x + 1u, uniforms.sourceWidth - 1u);
+  let sourceY1 = min(sourceBase.y + 1u, uniforms.sourceHeight - 1u);
+  let sourceZ1 = min(sourceBase.z + 1u, uniforms.sourceDepth - 1u);
+
+  var sum = textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY0), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY0), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY1), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY1), i32(sourceZ0)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY0), i32(sourceZ1)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY0), i32(sourceZ1)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX0), i32(sourceY1), i32(sourceZ1)),
+    0
+  );
+  sum += textureLoad(
+    sourceTexture,
+    vec3<i32>(i32(sourceX1), i32(sourceY1), i32(sourceZ1)),
+    0
+  );
+
+  textureStore(
+    destinationTexture,
+    vec3<i32>(i32(id.x), i32(id.y), i32(id.z)),
+    vec4<f32>(sum.xyz / 8.0, sum.w / 8.0)
+  );
+}
+`;
   }
 
-  // src/async-texture/async-texture.ts
-  var TextureCubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
-  var CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
-  var _AsyncTexture = class {
+  // src/dynamic-texture/dynamic-texture.ts
+  var _DynamicTexture = class {
     device;
     id;
+    /** Props with defaults resolved (except `data` which is processed separately) */
     props;
-    // TODO - should we type these as possibly `null`? It will make usage harder?
-    // @ts-expect-error
-    texture;
-    // @ts-expect-error
-    sampler;
-    // @ts-expect-error
-    view;
+    /** Created resources */
+    _texture = null;
+    _sampler = null;
+    _view = null;
+    /** Ready when GPU texture has been created and data (if any) uploaded */
     ready;
     isReady = false;
     destroyed = false;
@@ -1604,274 +2384,290 @@ var __exports__ = (() => {
     };
     rejectReady = () => {
     };
+    get texture() {
+      if (!this._texture)
+        throw new Error("Texture not initialized yet");
+      return this._texture;
+    }
+    get sampler() {
+      if (!this._sampler)
+        throw new Error("Sampler not initialized yet");
+      return this._sampler;
+    }
+    get view() {
+      if (!this._view)
+        throw new Error("View not initialized yet");
+      return this._view;
+    }
     get [Symbol.toStringTag]() {
-      return "AsyncTexture";
+      return "DynamicTexture";
     }
     toString() {
-      return `AsyncTexture:"${this.id}"(${this.isReady ? "ready" : "loading"})`;
+      return `DynamicTexture:"${this.id}":${this.texture.width}x${this.texture.height}px:(${this.isReady ? "ready" : "loading..."})`;
     }
     constructor(device, props) {
       this.device = device;
-      const id = uid("async-texture");
-      this.props = { ..._AsyncTexture.defaultProps, id, ...props };
+      const id = uid("dynamic-texture");
+      const originalPropsWithAsyncData = props;
+      this.props = { ..._DynamicTexture.defaultProps, id, ...props, data: null };
       this.id = this.props.id;
-      props = { ...props };
-      if (typeof props?.data === "string" && props.dimension === "2d") {
-        props.data = loadImageBitmap(props.data);
-      }
-      if (props.mipmaps) {
-        props.mipLevels = "auto";
-      }
       this.ready = new Promise((resolve, reject) => {
-        this.resolveReady = () => {
-          this.isReady = true;
-          resolve();
-        };
+        this.resolveReady = resolve;
         this.rejectReady = reject;
       });
-      this.initAsync(props);
+      this.initAsync(originalPropsWithAsyncData);
     }
-    async initAsync(props) {
-      const asyncData = props.data;
-      const data = await awaitAllPromises(asyncData).then(
-        void 0,
-        this.rejectReady
-      );
-      if (this.destroyed) {
-        return;
-      }
-      const size = this.props.width && this.props.height ? { width: this.props.width, height: this.props.height } : this.getTextureDataSize(data);
-      if (!size) {
-        throw new Error("Texture size could not be determined");
-      }
-      const syncProps = { ...size, ...props, data: void 0, mipLevels: 1 };
-      const maxMips = this.device.getMipLevelCount(syncProps.width, syncProps.height);
-      syncProps.mipLevels = this.props.mipLevels === "auto" ? maxMips : Math.min(maxMips, this.props.mipLevels);
-      this.texture = this.device.createTexture(syncProps);
-      this.sampler = this.texture.sampler;
-      this.view = this.texture.view;
-      if (props.data) {
-        switch (this.props.dimension) {
-          case "1d":
-            this._setTexture1DData(this.texture, data);
-            break;
-          case "2d":
-            this._setTexture2DData(data);
-            break;
-          case "3d":
-            this._setTexture3DData(this.texture, data);
-            break;
-          case "2d-array":
-            this._setTextureArrayData(this.texture, data);
-            break;
-          case "cube":
-            this._setTextureCubeData(this.texture, data);
-            break;
-          case "cube-array":
-            this._setTextureCubeArrayData(this.texture, data);
-            break;
+    /** @note Fire and forget; caller can await `ready` */
+    async initAsync(originalPropsWithAsyncData) {
+      try {
+        const propsWithSyncData = await this._loadAllData(originalPropsWithAsyncData);
+        this._checkNotDestroyed();
+        const deduceSize = () => {
+          if (this.props.width && this.props.height) {
+            return { width: this.props.width, height: this.props.height };
+          }
+          const size2 = getTextureSizeFromData(propsWithSyncData);
+          if (size2) {
+            return size2;
+          }
+          return { width: this.props.width || 1, height: this.props.height || 1 };
+        };
+        const size = deduceSize();
+        if (!size || size.width <= 0 || size.height <= 0) {
+          throw new Error(`${this} size could not be determined or was zero`);
         }
+        const baseTextureProps = {
+          ...this.props,
+          ...size,
+          mipLevels: 1,
+          // temporary; updated below
+          data: void 0
+        };
+        if (this.device.type === "webgpu" && this.props.mipmaps) {
+          const requiredUsage = this.props.dimension === "3d" ? import_core11.Texture.SAMPLE | import_core11.Texture.STORAGE | import_core11.Texture.COPY_DST | import_core11.Texture.COPY_SRC : import_core11.Texture.SAMPLE | import_core11.Texture.RENDER | import_core11.Texture.COPY_DST | import_core11.Texture.COPY_SRC;
+          baseTextureProps.usage |= requiredUsage;
+        }
+        const maxMips = this.device.getMipLevelCount(baseTextureProps.width, baseTextureProps.height);
+        const desired = this.props.mipLevels === "auto" ? maxMips : Math.max(1, Math.min(maxMips, this.props.mipLevels ?? 1));
+        const finalTextureProps = { ...baseTextureProps, mipLevels: desired };
+        this._texture = this.device.createTexture(finalTextureProps);
+        this._sampler = this.texture.sampler;
+        this._view = this.texture.view;
+        if (propsWithSyncData.data) {
+          switch (propsWithSyncData.dimension) {
+            case "1d":
+              this.setTexture1DData(propsWithSyncData.data);
+              break;
+            case "2d":
+              this.setTexture2DData(propsWithSyncData.data);
+              break;
+            case "3d":
+              this.setTexture3DData(propsWithSyncData.data);
+              break;
+            case "2d-array":
+              this.setTextureArrayData(propsWithSyncData.data);
+              break;
+            case "cube":
+              this.setTextureCubeData(propsWithSyncData.data);
+              break;
+            case "cube-array":
+              this.setTextureCubeArrayData(propsWithSyncData.data);
+              break;
+            default: {
+              throw new Error(`Unhandled dimension ${propsWithSyncData.dimension}`);
+            }
+          }
+        }
+        if (this.props.mipmaps) {
+          this.generateMipmaps();
+        }
+        this.isReady = true;
+        this.resolveReady(this.texture);
+        import_core11.log.info(0, `${this} created`)();
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        this.rejectReady(err);
+        throw err;
       }
-      if (this.props.mipmaps) {
-        this.generateMipmaps();
-      }
-      import_core8.log.info(1, `${this} loaded`);
-      this.resolveReady();
     }
     destroy() {
-      if (this.texture) {
-        this.texture.destroy();
-        this.texture = null;
+      if (this._texture) {
+        this._texture.destroy();
+        this._texture = null;
+        this._sampler = null;
+        this._view = null;
       }
       this.destroyed = true;
     }
     generateMipmaps() {
-      this.texture.generateMipmapsWebGL();
+      if (this.device.type === "webgl") {
+        this.texture.generateMipmapsWebGL();
+      } else if (this.device.type === "webgpu") {
+        generateMipmap(this.device, this.texture);
+      } else {
+        import_core11.log.warn(`${this} mipmaps not supported on ${this.device.type}`);
+      }
     }
-    /** Set sampler or create and set new Sampler from SamplerProps */
+    /** Set sampler or create one from props */
     setSampler(sampler = {}) {
-      this.texture.setSampler(
-        sampler instanceof import_core8.Sampler ? sampler : this.device.createSampler(sampler)
-      );
+      this._checkReady();
+      const s = sampler instanceof import_core11.Sampler ? sampler : this.device.createSampler(sampler);
+      this.texture.setSampler(s);
+      this._sampler = s;
     }
     /**
-     * Textures are immutable and cannot be resized after creation,
-     * but we can create a similar texture with the same parameters but a new size.
-     * @note Does not copy contents of the texture
-     * @note Mipmaps may need to be regenerated after resizing / setting new data
-     * @todo Abort pending promise and create a texture with the new size?
+     * Resize by cloning the underlying immutable texture.
+     * Does not copy contents; caller may need to re-upload and/or regenerate mips.
      */
     resize(size) {
-      if (!this.isReady) {
-        throw new Error("Cannot resize texture before it is ready");
-      }
+      this._checkReady();
       if (size.width === this.texture.width && size.height === this.texture.height) {
         return false;
       }
-      if (this.texture) {
-        const texture = this.texture;
-        this.texture = texture.clone(size);
-        texture.destroy();
-      }
+      const prev = this.texture;
+      this._texture = prev.clone(size);
+      this._sampler = this.texture.sampler;
+      this._view = this.texture.view;
+      prev.destroy();
+      import_core11.log.info(`${this} resized`);
       return true;
     }
-    /** Check if texture data is a typed array */
-    isTextureLevelData(data) {
-      const typedArray = data?.data;
-      return ArrayBuffer.isView(typedArray);
-    }
-    /** Get the size of the texture described by the provided TextureData */
-    getTextureDataSize(data) {
-      if (!data) {
-        return null;
-      }
-      if (ArrayBuffer.isView(data)) {
-        return null;
-      }
-      if (Array.isArray(data)) {
-        return this.getTextureDataSize(data[0]);
-      }
-      if (this.device.isExternalImage(data)) {
-        return this.device.getExternalImageSize(data);
-      }
-      if (data && typeof data === "object" && data.constructor === Object) {
-        const textureDataArray = Object.values(data);
-        const untypedData = textureDataArray[0];
-        return { width: untypedData.width, height: untypedData.height };
-      }
-      throw new Error("texture size deduction failed");
-    }
-    /** Convert luma.gl cubemap face constants to depth index */
-    getCubeFaceDepth(face) {
-      switch (face) {
-        case "+X":
-          return 0;
-        case "-X":
-          return 1;
-        case "+Y":
-          return 2;
-        case "-Y":
-          return 3;
-        case "+Z":
-          return 4;
-        case "-Z":
-          return 5;
-        default:
-          throw new Error(face);
-      }
-    }
-    // EXPERIMENTAL
-    setTextureData(data) {
-    }
-    /** Experimental: Set multiple mip levels */
-    _setTexture1DData(texture, data) {
-      throw new Error("setTexture1DData not supported in WebGL.");
-    }
-    /** Experimental: Set multiple mip levels */
-    _setTexture2DData(lodData, depth = 0) {
-      if (!this.texture) {
-        throw new Error("Texture not initialized");
-      }
-      const lodArray = this._normalizeTextureData(lodData);
-      if (lodArray.length > 1 && this.props.mipmaps !== false) {
-        import_core8.log.warn(`Texture ${this.id} mipmap and multiple LODs.`)();
-      }
-      for (let mipLevel = 0; mipLevel < lodArray.length; mipLevel++) {
-        const imageData = lodArray[mipLevel];
-        if (this.device.isExternalImage(imageData)) {
-          this.texture.copyExternalImage({ image: imageData, depth, mipLevel, flipY: true });
-        } else {
-          this.texture.copyImageData({ data: imageData.data, mipLevel });
+    /** Convert cube face label to texture slice index. Index can be used with `setTexture2DData()`. */
+    getCubeFaceIndex(face) {
+      const index = TEXTURE_CUBE_FACE_MAP[face];
+      if (index === void 0)
+        throw new Error(`Invalid cube face: ${face}`);
+      return index;
+    }
+    /** Convert cube face label to texture slice index. Index can be used with `setTexture2DData()`. */
+    getCubeArrayFaceIndex(cubeIndex, face) {
+      return 6 * cubeIndex + this.getCubeFaceIndex(face);
+    }
+    /** @note experimental: Set multiple mip levels (1D) */
+    setTexture1DData(data) {
+      this._checkReady();
+      if (this.texture.props.dimension !== "1d") {
+        throw new Error(`${this} is not 1d`);
+      }
+      const subresources = getTexture1DSubresources(data);
+      this._setTextureSubresources(subresources);
+    }
+    /** @note experimental: Set multiple mip levels (2D), optionally at `z`, slice (depth/array level) index */
+    setTexture2DData(lodData, z = 0) {
+      this._checkReady();
+      if (this.texture.props.dimension !== "2d") {
+        throw new Error(`${this} is not 2d`);
+      }
+      const subresources = getTexture2DSubresources(z, lodData);
+      this._setTextureSubresources(subresources);
+    }
+    /** 3D: multiple depth slices, each may carry multiple mip levels */
+    setTexture3DData(data) {
+      if (this.texture.props.dimension !== "3d") {
+        throw new Error(`${this} is not 3d`);
+      }
+      const subresources = getTexture3DSubresources(data);
+      this._setTextureSubresources(subresources);
+    }
+    /** 2D array: multiple layers, each may carry multiple mip levels */
+    setTextureArrayData(data) {
+      if (this.texture.props.dimension !== "2d-array") {
+        throw new Error(`${this} is not 2d-array`);
+      }
+      const subresources = getTextureArraySubresources(data);
+      this._setTextureSubresources(subresources);
+    }
+    /** Cube: 6 faces, each may carry multiple mip levels */
+    setTextureCubeData(data) {
+      if (this.texture.props.dimension !== "cube") {
+        throw new Error(`${this} is not cube`);
+      }
+      const subresources = getTextureCubeSubresources(data);
+      this._setTextureSubresources(subresources);
+    }
+    /** Cube array: multiple cubes (faces×layers), each face may carry multiple mips */
+    setTextureCubeArrayData(data) {
+      if (this.texture.props.dimension !== "cube-array") {
+        throw new Error(`${this} is not cube-array`);
+      }
+      const subresources = getTextureCubeArraySubresources(data);
+      this._setTextureSubresources(subresources);
+    }
+    /** Sets multiple mip levels on different `z` slices (depth/array index) */
+    _setTextureSubresources(subresources) {
+      for (const subresource of subresources) {
+        const { z, mipLevel } = subresource;
+        switch (subresource.type) {
+          case "external-image":
+            const { image, flipY } = subresource;
+            this.texture.copyExternalImage({ image, z, mipLevel, flipY });
+            break;
+          case "texture-data":
+            const { data } = subresource;
+            this.texture.writeData(getAlignedUploadData(this.texture, data), {
+              x: 0,
+              y: 0,
+              z,
+              width: data.width,
+              height: data.height,
+              depthOrArrayLayers: 1,
+              mipLevel
+            });
+            break;
+          default:
+            throw new Error("Unsupported 2D mip-level payload");
         }
       }
     }
-    /**
-     * Experimental: Sets 3D texture data: multiple depth slices, multiple mip levels
-     * @param data
-     */
-    _setTexture3DData(texture, data) {
-      if (this.texture?.props.dimension !== "3d") {
-        throw new Error(this.id);
-      }
-      for (let depth = 0; depth < data.length; depth++) {
-        this._setTexture2DData(data[depth], depth);
-      }
+    // ------------------ helpers ------------------
+    /** Recursively resolve all promises in data structures */
+    async _loadAllData(props) {
+      const syncData = await awaitAllPromises(props.data);
+      const dimension = props.dimension ?? "2d";
+      return { dimension, data: syncData ?? null };
     }
-    /**
-     * Experimental: Set Cube texture data, multiple faces, multiple mip levels
-     * @todo - could support TextureCubeArray with depth
-     * @param data
-     * @param index
-     */
-    _setTextureCubeData(texture, data) {
-      if (this.texture?.props.dimension !== "cube") {
-        throw new Error(this.id);
-      }
-      for (const [face, faceData] of Object.entries(data)) {
-        const faceDepth = CubeFaces.indexOf(face);
-        this._setTexture2DData(faceData, faceDepth);
-      }
-    }
-    /**
-     * Experimental: Sets texture array data, multiple levels, multiple depth slices
-     * @param data
-     */
-    _setTextureArrayData(texture, data) {
-      if (this.texture?.props.dimension !== "2d-array") {
-        throw new Error(this.id);
-      }
-      for (let depth = 0; depth < data.length; depth++) {
-        this._setTexture2DData(data[depth], depth);
-      }
-    }
-    /**
-     * Experimental: Sets texture cube array, multiple faces, multiple levels, multiple mip levels
-     * @param data
-     */
-    _setTextureCubeArrayData(texture, data) {
-      throw new Error("setTextureCubeArrayData not supported in WebGL2.");
-    }
-    /** Experimental */
-    _setTextureCubeFaceData(texture, lodData, face, depth = 0) {
-      if (Array.isArray(lodData) && lodData.length > 1 && this.props.mipmaps !== false) {
-        import_core8.log.warn(`${this.id} has mipmap and multiple LODs.`)();
+    _checkNotDestroyed() {
+      if (this.destroyed) {
+        import_core11.log.warn(`${this} already destroyed`);
       }
-      const faceDepth = TextureCubeFaces.indexOf(face);
-      this._setTexture2DData(lodData, faceDepth);
     }
-    /**
-     * Normalize TextureData to an array of TextureImageData / ExternalImages
-     * @param data
-     * @param options
-     * @returns array of TextureImageData / ExternalImages
-     */
-    _normalizeTextureData(data) {
-      const options = this.texture;
-      let mipLevelArray;
-      if (ArrayBuffer.isView(data)) {
-        mipLevelArray = [
-          {
-            // ts-expect-error does data really need to be Uint8ClampedArray?
-            data,
-            width: options.width,
-            height: options.height
-            // depth: options.depth
-          }
-        ];
-      } else if (!Array.isArray(data)) {
-        mipLevelArray = [data];
-      } else {
-        mipLevelArray = data;
+    _checkReady() {
+      if (!this.isReady) {
+        import_core11.log.warn(`${this} Cannot perform this operation before ready`);
       }
-      return mipLevelArray;
     }
   };
-  var AsyncTexture = _AsyncTexture;
-  __publicField(AsyncTexture, "defaultProps", {
-    ...import_core8.Texture.defaultProps,
+  var DynamicTexture = _DynamicTexture;
+  __publicField(DynamicTexture, "defaultProps", {
+    ...import_core11.Texture.defaultProps,
+    dimension: "2d",
     data: null,
     mipmaps: false
   });
+  function getAlignedUploadData(texture, data) {
+    const { width, height, data: uploadData } = data;
+    const { bytesPerPixel } = texture.device.getTextureFormatInfo(texture.format);
+    const bytesPerRow = width * bytesPerPixel;
+    const alignedBytesPerRow = Math.ceil(bytesPerRow / texture.byteAlignment) * texture.byteAlignment;
+    if (alignedBytesPerRow === bytesPerRow) {
+      return uploadData;
+    }
+    const sourceBytes = new Uint8Array(
+      uploadData.buffer,
+      uploadData.byteOffset,
+      uploadData.byteLength
+    );
+    const paddedBytes = new Uint8Array(alignedBytesPerRow * height);
+    for (let row = 0; row < height; row++) {
+      const sourceOffset = row * bytesPerRow;
+      const destinationOffset = row * alignedBytesPerRow;
+      paddedBytes.set(
+        sourceBytes.subarray(sourceOffset, sourceOffset + bytesPerRow),
+        destinationOffset
+      );
+    }
+    return paddedBytes;
+  }
   async function awaitAllPromises(x) {
     x = await x;
     if (Array.isArray(x)) {
@@ -1891,19 +2687,27 @@ var __exports__ = (() => {
   }
 
   // src/model/model.ts
-  var LOG_DRAW_PRIORITY = 2;
-  var LOG_DRAW_TIMEOUT = 1e4;
+  var LOG_DRAW_PRIORITY2 = 2;
+  var LOG_DRAW_TIMEOUT2 = 1e4;
   var _Model = class {
+    /** Device that created this model */
     device;
+    /** Application provided identifier */
     id;
+    /** WGSL shader source when using unified shader */
     // @ts-expect-error assigned in function called from constructor
     source;
+    /** GLSL vertex shader source */
     // @ts-expect-error assigned in function called from constructor
     vs;
+    /** GLSL fragment shader source */
     // @ts-expect-error assigned in function called from constructor
     fs;
+    /** Factory used to create render pipelines */
     pipelineFactory;
+    /** Factory used to create shaders */
     shaderFactory;
+    /** User-supplied per-model data */
     userData = {};
     // Fixed properties (change can trigger pipeline rebuild)
     /** The render pipeline GPU parameters, depth testing etc */
@@ -1967,7 +2771,7 @@ var __exports__ = (() => {
       );
       const shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap, { disableWarnings: this.props.disableWarnings });
       this.setShaderInputs(shaderInputs);
-      const platformInfo = getPlatformInfo(device);
+      const platformInfo = getPlatformInfo2(device);
       const modules = (
         // @ts-ignore shaderInputs is assigned in setShaderInputs above.
         (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.getModules()) || []
@@ -1981,7 +2785,7 @@ var __exports__ = (() => {
         });
         this.source = source3;
         this._getModuleUniforms = getUniforms2;
-        this.props.shaderLayout ||= (0, import_shadertools2.getShaderLayoutFromWGSL)(this.source);
+        this.props.shaderLayout ||= device.getShaderLayout(this.source);
       } else {
         const { vs: vs3, fs: fs3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleGLSLShaderPair({
           platformInfo,
@@ -2034,7 +2838,6 @@ var __exports__ = (() => {
       if (props.transformFeedback) {
         this.transformFeedback = props.transformFeedback;
       }
-      Object.seal(this);
     }
     destroy() {
       if (!this._destroyed) {
@@ -2062,14 +2865,20 @@ var __exports__ = (() => {
     setNeedsRedraw(reason) {
       this._needsRedraw ||= reason;
     }
+    /** Update uniforms and pipeline state prior to drawing. */
     predraw() {
       this.updateShaderInputs();
       this.pipeline = this._updatePipeline();
     }
+    /**
+     * Issue one draw call.
+     * @param renderPass - render pass to draw into
+     * @returns `true` if the draw call was executed, `false` if resources were not ready.
+     */
     draw(renderPass) {
       const loadingBinding = this._areBindingsLoading();
       if (loadingBinding) {
-        import_core9.log.info(LOG_DRAW_PRIORITY, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
+        import_core12.log.info(LOG_DRAW_PRIORITY2, `>>> DRAWING ABORTED ${this.id}: ${loadingBinding} not loaded`)();
         return false;
       }
       try {
@@ -2199,7 +3008,7 @@ var __exports__ = (() => {
     /** Set the shader inputs */
     setShaderInputs(shaderInputs) {
       this.shaderInputs = shaderInputs;
-      this._uniformStore = new import_core9.UniformStore(this.shaderInputs.modules);
+      this._uniformStore = new import_core12.UniformStore(this.shaderInputs.modules);
       for (const [moduleName, module] of Object.entries(this.shaderInputs.modules)) {
         if (shaderModuleHasUniforms(module)) {
           const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
@@ -2243,7 +3052,7 @@ var __exports__ = (() => {
     setAttributes(buffers, options) {
       const disableWarnings = options?.disableWarnings ?? this.props.disableWarnings;
       if (buffers["indices"]) {
-        import_core9.log.warn(
+        import_core12.log.warn(
           `Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`
         )();
       }
@@ -2256,7 +3065,7 @@ var __exports__ = (() => {
         const bufferLayout = bufferLayoutHelper.getBufferLayout(bufferName);
         if (!bufferLayout) {
           if (!disableWarnings) {
-            import_core9.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
+            import_core12.log.warn(`Model(${this.id}): Missing layout for buffer "${bufferName}".`)();
           }
           continue;
         }
@@ -2271,7 +3080,7 @@ var __exports__ = (() => {
           }
         }
         if (!set && !disableWarnings) {
-          import_core9.log.warn(
+          import_core12.log.warn(
             `Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`
           )();
         }
@@ -2292,7 +3101,7 @@ var __exports__ = (() => {
         if (attributeInfo) {
           this.vertexArray.setConstantWebGL(attributeInfo.location, value);
         } else if (!(options?.disableWarnings ?? this.props.disableWarnings)) {
-          import_core9.log.warn(
+          import_core12.log.warn(
             `Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`
           )();
         }
@@ -2303,7 +3112,7 @@ var __exports__ = (() => {
     /** Check that bindings are loaded. Returns id of first binding that is still loading. */
     _areBindingsLoading() {
       for (const binding of Object.values(this.bindings)) {
-        if (binding instanceof AsyncTexture && !binding.isReady) {
+        if (binding instanceof DynamicTexture && !binding.isReady) {
           return binding.id;
         }
       }
@@ -2313,7 +3122,7 @@ var __exports__ = (() => {
     _getBindings() {
       const validBindings = {};
       for (const [name, binding] of Object.entries(this.bindings)) {
-        if (binding instanceof AsyncTexture) {
+        if (binding instanceof DynamicTexture) {
           if (binding.isReady) {
             validBindings[name] = binding.texture;
           }
@@ -2327,16 +3136,16 @@ var __exports__ = (() => {
     _getBindingsUpdateTimestamp() {
       let timestamp = 0;
       for (const binding of Object.values(this.bindings)) {
-        if (binding instanceof import_core9.TextureView) {
+        if (binding instanceof import_core12.TextureView) {
           timestamp = Math.max(timestamp, binding.texture.updateTimestamp);
-        } else if (binding instanceof import_core9.Buffer || binding instanceof import_core9.Texture) {
+        } else if (binding instanceof import_core12.Buffer || binding instanceof import_core12.Texture) {
           timestamp = Math.max(timestamp, binding.updateTimestamp);
-        } else if (binding instanceof AsyncTexture) {
+        } else if (binding instanceof DynamicTexture) {
           timestamp = binding.texture ? Math.max(timestamp, binding.texture.updateTimestamp) : (
             // The texture will become available in the future
             Infinity
           );
-        } else if (!(binding instanceof import_core9.Sampler)) {
+        } else if (!(binding instanceof import_core12.Sampler)) {
           timestamp = Math.max(timestamp, binding.buffer.updateTimestamp);
         }
       }
@@ -2371,7 +3180,7 @@ var __exports__ = (() => {
         let prevShaderVs = null;
         let prevShaderFs = null;
         if (this.pipeline) {
-          import_core9.log.log(
+          import_core12.log.log(
             1,
             `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
           )();
@@ -2407,7 +3216,7 @@ var __exports__ = (() => {
           vs: vs3,
           fs: fs3
         });
-        this._attributeInfos = (0, import_core9.getAttributeInfosFromLayouts)(
+        this._attributeInfos = (0, import_core12.getAttributeInfosFromLayouts)(
           this.pipeline.shaderLayout,
           this.bufferLayout
         );
@@ -2422,24 +3231,24 @@ var __exports__ = (() => {
     _lastLogTime = 0;
     _logOpen = false;
     _logDrawCallStart() {
-      const logDrawTimeout = import_core9.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT;
-      if (import_core9.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
+      const logDrawTimeout = import_core12.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
+      if (import_core12.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
         return;
       }
       this._lastLogTime = Date.now();
       this._logOpen = true;
-      import_core9.log.group(LOG_DRAW_PRIORITY, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core9.log.level <= 2 })();
+      import_core12.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core12.log.level <= 2 })();
     }
     _logDrawCallEnd() {
       if (this._logOpen) {
         const shaderLayoutTable = getDebugTableForShaderLayout(this.pipeline.shaderLayout, this.id);
-        import_core9.log.table(LOG_DRAW_PRIORITY, shaderLayoutTable)();
+        import_core12.log.table(LOG_DRAW_PRIORITY2, shaderLayoutTable)();
         const uniformTable = this.shaderInputs.getDebugTable();
-        import_core9.log.table(LOG_DRAW_PRIORITY, uniformTable)();
+        import_core12.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
         const attributeTable = this._getAttributeDebugTable();
-        import_core9.log.table(LOG_DRAW_PRIORITY, this._attributeInfos)();
-        import_core9.log.table(LOG_DRAW_PRIORITY, attributeTable)();
-        import_core9.log.groupEnd(LOG_DRAW_PRIORITY)();
+        import_core12.log.table(LOG_DRAW_PRIORITY2, this._attributeInfos)();
+        import_core12.log.table(LOG_DRAW_PRIORITY2, attributeTable)();
+        import_core12.log.groupEnd(LOG_DRAW_PRIORITY2)();
         this._logOpen = false;
       }
     }
@@ -2478,14 +3287,14 @@ var __exports__ = (() => {
     }
     // TODO - fix typing of luma data types
     _getBufferOrConstantValues(attribute, dataType) {
-      const TypedArrayConstructor = (0, import_core9.getTypedArrayConstructor)(dataType);
-      const typedArray = attribute instanceof import_core9.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
+      const TypedArrayConstructor = (0, import_core12.getTypedArrayConstructor)(dataType);
+      const typedArray = attribute instanceof import_core12.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
       return typedArray.toString();
     }
   };
   var Model = _Model;
   __publicField(Model, "defaultProps", {
-    ...import_core9.RenderPipeline.defaultProps,
+    ...import_core12.RenderPipeline.defaultProps,
     source: void 0,
     vs: null,
     fs: null,
@@ -2506,14 +3315,14 @@ var __exports__ = (() => {
     pipelineFactory: void 0,
     shaderFactory: void 0,
     transformFeedback: void 0,
-    shaderAssembler: import_shadertools2.ShaderAssembler.getDefaultShaderAssembler(),
+    shaderAssembler: import_shadertools3.ShaderAssembler.getDefaultShaderAssembler(),
     debugShaders: void 0,
     disableWarnings: void 0
   });
   function shaderModuleHasUniforms(module) {
     return Boolean(module.uniformTypes && !isObjectEmpty(module.uniformTypes));
   }
-  function getPlatformInfo(device) {
+  function getPlatformInfo2(device) {
     return {
       type: device.type,
       shaderLanguage: device.info.shadingLanguage,
@@ -2531,8 +3340,8 @@ var __exports__ = (() => {
   }
 
   // src/compute/buffer-transform.ts
-  var import_core10 = __toESM(require_core(), 1);
-  var import_shadertools3 = __toESM(require_shadertools(), 1);
+  var import_core13 = __toESM(require_core(), 1);
+  var import_shadertools4 = __toESM(require_shadertools(), 1);
   var _BufferTransform = class {
     device;
     model;
@@ -2547,7 +3356,7 @@ var __exports__ = (() => {
       this.device = device;
       this.model = new Model(this.device, {
         id: props.id || "buffer-transform-model",
-        fs: props.fs || (0, import_shadertools3.getPassthroughFS)(),
+        fs: props.fs || (0, import_shadertools4.getPassthroughFS)(),
         topology: props.topology || "point-list",
         varyings: props.outputs || props.varyings,
         ...props
@@ -2593,7 +3402,7 @@ var __exports__ = (() => {
       if (!result) {
         throw new Error("BufferTransform#getBuffer");
       }
-      if (result instanceof import_core10.Buffer) {
+      if (result instanceof import_core13.Buffer) {
         return result.readAsync();
       }
       const { buffer, byteOffset = 0, byteLength = buffer.byteLength } = result;
@@ -2608,7 +3417,7 @@ var __exports__ = (() => {
   });
 
   // src/compute/texture-transform.ts
-  var import_shadertools4 = __toESM(require_shadertools(), 1);
+  var import_shadertools5 = __toESM(require_shadertools(), 1);
   var FS_OUTPUT_VARIABLE = "transform_output";
   var TextureTransform = class {
     device;
@@ -2631,7 +3440,7 @@ var __exports__ = (() => {
       });
       this.model = new Model(this.device, {
         id: props.id || uid("texture-transform-model"),
-        fs: props.fs || (0, import_shadertools4.getPassthroughFS)({
+        fs: props.fs || (0, import_shadertools5.getPassthroughFS)({
           input: props.targetTextureVarying,
           inputChannels: props.targetTextureChannels,
           output: FS_OUTPUT_VARIABLE
@@ -2871,22 +3680,31 @@ ${props.source}` };
   };
 
   // src/models/billboard-texture-model.ts
+  var backgroundModule = {
+    name: "background",
+    uniformTypes: {
+      scale: "vec2<f32>"
+    }
+  };
   var BACKGROUND_FS_WGSL = (
     /* wgsl */
     `@group(0) @binding(0) var backgroundTexture: texture_2d<f32>;
 @group(0) @binding(1) var backgroundTextureSampler: sampler;
+struct backgroundUniforms {
+  scale: vec2<f32>,
+};
+@group(0) @binding(2) var<uniform> background: backgroundUniforms;
 
 fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
-	let iTexSize: vec2<u32> = textureDimensions(backgroundTexture, 0);
-	let texSize: vec2<f32> = vec2<f32>(f32(iTexSize.x), f32(iTexSize.y));
-	var position: vec2<f32> = coordinates.xy / texSize;
-	return position;
-} 
+        let scale: vec2<f32> = background.scale;
+        var position: vec2<f32> = (coordinates - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
+        return position;
+}
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-	let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
-	return textureSample(backgroundTexture, backgroundTextureSampler, position);
+        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
+        return textureSample(backgroundTexture, backgroundTextureSampler, position);
 }
 `
   );
@@ -2896,27 +3714,33 @@ fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
 precision highp float;
 
 uniform sampler2D backgroundTexture;
+
+uniform backgroundUniforms {
+  vec2 scale;
+} background;
+
+in vec2 coordinate;
 out vec4 fragColor;
 
-vec2 billboardTexture_getTextureUV() {
-  ivec2 iTexSize = textureSize(backgroundTexture, 0);
-  vec2 texSize = vec2(float(iTexSize.x), float(iTexSize.y));
-  vec2 position = gl_FragCoord.xy / texSize;
+vec2 billboardTexture_getTextureUV(vec2 coord) {
+  vec2 position = (coord - 0.5) / background.scale + 0.5;
   return position;
 }
 
 void main(void) {
-  vec2 position = billboardTexture_getTextureUV();
+  vec2 position = billboardTexture_getTextureUV(coordinate);
   fragColor = texture(backgroundTexture, position);
 }
 `
   );
   var BackgroundTextureModel = class extends ClipSpace {
+    backgroundTexture = null;
     constructor(device, props) {
       super(device, {
         id: props.id || "background-texture-model",
         source: BACKGROUND_FS_WGSL,
         fs: BACKGROUND_FS,
+        modules: [backgroundModule],
         parameters: {
           depthWriteEnabled: false,
           ...props.blend ? {
@@ -2933,17 +3757,47 @@ void main(void) {
       if (!props.backgroundTexture) {
         throw new Error("BackgroundTextureModel requires a backgroundTexture prop");
       }
-      this.setTexture(props.backgroundTexture);
+      this.setProps(props);
     }
-    setTexture(backgroundTexture) {
-      this.setBindings({
-        backgroundTexture
-      });
+    /** Update the background texture */
+    setProps(props) {
+      const { backgroundTexture } = props;
+      if (backgroundTexture) {
+        this.setBindings({ backgroundTexture });
+        if (backgroundTexture.isReady) {
+          const texture = backgroundTexture instanceof DynamicTexture ? backgroundTexture.texture : backgroundTexture;
+          this.backgroundTexture = texture;
+          this.updateScale(texture);
+        } else {
+          backgroundTexture.ready.then((texture) => {
+            this.backgroundTexture = texture;
+            this.updateScale(texture);
+          });
+        }
+      }
     }
     predraw() {
-      this.shaderInputs.setProps({});
       super.predraw();
     }
+    updateScale(texture) {
+      if (!texture) {
+        this.shaderInputs.setProps({ background: { scale: [1, 1] } });
+        return;
+      }
+      const [screenWidth, screenHeight] = this.device.getCanvasContext().getDrawingBufferSize();
+      const textureWidth = texture.width;
+      const textureHeight = texture.height;
+      const screenAspect = screenWidth / screenHeight;
+      const textureAspect = textureWidth / textureHeight;
+      let scaleX = 1;
+      let scaleY = 1;
+      if (screenAspect > textureAspect) {
+        scaleY = screenAspect / textureAspect;
+      } else {
+        scaleX = textureAspect / screenAspect;
+      }
+      this.shaderInputs.setProps({ background: { scale: [scaleX, scaleY] } });
+    }
   };
 
   // ../../node_modules/@math.gl/core/dist/lib/common.js
@@ -5125,13 +5979,13 @@ void main(void) {
   };
 
   // src/scenegraph/group-node.ts
-  var import_core13 = __toESM(require_core(), 1);
+  var import_core16 = __toESM(require_core(), 1);
   var GroupNode = class extends ScenegraphNode {
     children;
     constructor(props = {}) {
       props = Array.isArray(props) ? { children: props } : props;
       const { children = [] } = props;
-      import_core13.log.assert(
+      import_core16.log.assert(
         children.every((child) => child instanceof ScenegraphNode),
         "every child must an instance of ScenegraphNode"
       );
@@ -6345,17 +7199,45 @@ void main(void) {
     return n - Math.floor(n);
   }
 
+  // src/application-utils/load-file.ts
+  var pathPrefix = "";
+  function setPathPrefix(prefix) {
+    pathPrefix = prefix;
+  }
+  async function loadImageBitmap(url, opts) {
+    const image = new Image();
+    image.crossOrigin = opts?.crossOrigin || "anonymous";
+    image.src = url.startsWith("http") ? url : pathPrefix + url;
+    await image.decode();
+    return opts ? await createImageBitmap(image, opts) : await createImageBitmap(image);
+  }
+  async function loadImage(url, opts) {
+    return await new Promise((resolve, reject) => {
+      try {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error(`Could not load image ${url}.`));
+        image.crossOrigin = opts?.crossOrigin || "anonymous";
+        image.src = url.startsWith("http") ? url : pathPrefix + url;
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
   // src/passes/shader-pass-renderer.ts
-  var import_shadertools5 = __toESM(require_shadertools(), 1);
+  var import_shadertools6 = __toESM(require_shadertools(), 1);
 
   // src/compute/swap.ts
-  var import_core15 = __toESM(require_core(), 1);
+  var import_core18 = __toESM(require_core(), 1);
   var Swap = class {
+    id;
     /** The current resource - usually the source for renders or computations */
     current;
     /** The next resource - usually the target/destination for transforms / computations */
     next;
     constructor(props) {
+      this.id = props.id || "swap";
       this.current = props.current;
       this.next = props.next;
     }
@@ -6374,21 +7256,24 @@ void main(void) {
   var SwapFramebuffers = class extends Swap {
     constructor(device, props) {
       props = { ...props };
+      const { width = 1, height = 1 } = props;
       let colorAttachments = props.colorAttachments?.map(
         (colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
+          id: `${props.id}-texture-0`,
           format: colorAttachment,
-          usage: import_core15.Texture.SAMPLE | import_core15.Texture.RENDER | import_core15.Texture.COPY_SRC | import_core15.Texture.COPY_DST,
-          width: 1,
-          height: 1
+          usage: import_core18.Texture.SAMPLE | import_core18.Texture.RENDER | import_core18.Texture.COPY_SRC | import_core18.Texture.COPY_DST,
+          width,
+          height
         })
       );
       const current = device.createFramebuffer({ ...props, colorAttachments });
       colorAttachments = props.colorAttachments?.map(
         (colorAttachment) => typeof colorAttachment !== "string" ? colorAttachment : device.createTexture({
+          id: `${props.id}-texture-1`,
           format: colorAttachment,
-          usage: import_core15.Texture.TEXTURE | import_core15.Texture.COPY_SRC | import_core15.Texture.COPY_DST | import_core15.Texture.RENDER_ATTACHMENT,
-          width: 1,
-          height: 1
+          usage: import_core18.Texture.SAMPLE | import_core18.Texture.RENDER | import_core18.Texture.COPY_SRC | import_core18.Texture.COPY_DST,
+          width,
+          height
         })
       );
       const next = device.createFramebuffer({ ...props, colorAttachments });
@@ -6453,19 +7338,23 @@ void main(void) {
       `// Binding 0:1 is reserved for shader passes
 // @group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
 @group(0) @binding(1) var texture: texture_2d<f32>;
-@group(0) @binding(2) var sampler: sampler;
+@group(0) @binding(2) var textureSampler: sampler;
 
-struct FragmentInputs {
-  @location(0) fragUV: vec2f,
-  @location(1) fragPosition: vec4f,
-  @location(2) fragCoordinate: vec4f
-};
+// This needs to be aligned with
+// struct FragmentInputs {
+//   @location(0) fragUV: vec2f,
+//   @location(1) fragPosition: vec4f,
+//   @location(2) fragCoordinate: vec4f
+// };
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let texSize = textureDimensions(texture, 0);
-  var fragColor = textureSample(texture, sampler, fragUV);
-  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  let fragUV = inputs.uv;
+  let fragCoordinate = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(texture, 0));
+
+  var fragColor = textureSample(texture, textureSampler, fragUV);
+  fragColor = ${func}(fragColor, texSize, fragCoordinate);
   return fragColor;
 }
 `
@@ -6487,9 +7376,9 @@ struct FragmentInputs = {
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let texSize = textureDimensions(texture, 0);
+  let texSize = vec2f(textureDimensions(texture, 0));
   var fragColor = textureSample(texture, sampler, fragUV);
-  fragColor = ${func}(gl_FragColor, texSize, texCoord);
+  fragColor = ${func}(fragColor, texSize, texCoord);
   return fragColor;
 }
 `
@@ -6554,7 +7443,7 @@ void main() {
     textureModel;
     constructor(device, props) {
       this.device = device;
-      props.shaderPasses.map((shaderPass) => (0, import_shadertools5.initializeShaderModule)(shaderPass));
+      props.shaderPasses.map((shaderPass) => (0, import_shadertools6.initializeShaderModule)(shaderPass));
       const modules = props.shaderPasses.reduce(
         (object, shaderPass) => ({ ...object, [shaderPass.name]: shaderPass }),
         {}
@@ -6588,12 +7477,10 @@ fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
 
 uniform sampler2D sourceTexture;
 in vec2 uv;
-in vec2 coordinate;
 out vec4 fragColor;
 
 void main() {
-  vec2 texCoord = coordinate;
-  fragColor = texture(sourceTexture, coordinate);
+  fragColor = texture(sourceTexture, uv);
 }
 `
         )
@@ -6607,9 +7494,11 @@ void main() {
       }
       this.swapFramebuffers.destroy();
       this.clipSpace.destroy();
+      this.textureModel.destroy();
     }
-    resize(width, height) {
-      this.swapFramebuffers.resize({ width, height });
+    resize(size) {
+      size ||= this.device.getCanvasContext().getDrawingBufferSize();
+      this.swapFramebuffers.resize({ width: size[0], height: size[1] });
     }
     renderToScreen(options) {
       const outputTexture = this.renderToTexture(options);
@@ -6620,7 +7509,7 @@ void main() {
       const renderPass = this.device.beginRenderPass({
         id: "shader-pass-renderer-to-screen",
         framebuffer,
-        clearColor: [0, 0, 0, 1],
+        // clearColor: [1, 1, 0, 1],
         clearDepth: 1
       });
       this.clipSpace.setBindings({ sourceTexture: outputTexture });
@@ -6636,14 +7525,14 @@ void main() {
       if (!sourceTexture.isReady) {
         return null;
       }
-      this.textureModel.destroy();
-      this.textureModel = new BackgroundTextureModel(this.device, {
-        backgroundTexture: sourceTexture
-      });
+      if (this.passRenderers.length === 0) {
+        return sourceTexture.texture;
+      }
+      this.textureModel.setProps({ backgroundTexture: sourceTexture });
       const clearTexturePass = this.device.beginRenderPass({
         id: "shader-pass-renderer-clear-texture",
         framebuffer: this.swapFramebuffers.current,
-        clearColor: [0, 0, 0, 1]
+        clearColor: [1, 0, 0, 1]
       });
       this.textureModel.draw(clearTexturePass);
       clearTexturePass.end();
@@ -6729,221 +7618,6 @@ void main() {
     }
   };
 
-  // src/compute/computation.ts
-  var import_core16 = __toESM(require_core(), 1);
-  var import_shadertools6 = __toESM(require_shadertools(), 1);
-  var LOG_DRAW_PRIORITY2 = 2;
-  var LOG_DRAW_TIMEOUT2 = 1e4;
-  var _Computation = class {
-    device;
-    id;
-    pipelineFactory;
-    shaderFactory;
-    userData = {};
-    /** Bindings (textures, samplers, uniform buffers) */
-    bindings = {};
-    /** The underlying GPU pipeline. */
-    pipeline;
-    /** Assembled compute shader source */
-    source;
-    /** the underlying compiled compute shader */
-    // @ts-ignore Set in function called from constructor
-    shader;
-    /** ShaderInputs instance */
-    shaderInputs;
-    // @ts-ignore Set in function called from constructor
-    _uniformStore;
-    _pipelineNeedsUpdate = "newly created";
-    _getModuleUniforms;
-    props;
-    _destroyed = false;
-    constructor(device, props) {
-      if (device.type !== "webgpu") {
-        throw new Error("Computation is only supported in WebGPU");
-      }
-      this.props = { ..._Computation.defaultProps, ...props };
-      props = this.props;
-      this.id = props.id || uid("model");
-      this.device = device;
-      Object.assign(this.userData, props.userData);
-      const moduleMap = Object.fromEntries(
-        this.props.modules?.map((module) => [module.name, module]) || []
-      );
-      this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
-      this.setShaderInputs(this.shaderInputs);
-      this.props.shaderLayout ||= (0, import_shadertools6.getShaderLayoutFromWGSL)(this.props.source);
-      const platformInfo = getPlatformInfo2(device);
-      const modules = (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.getModules()) || [];
-      this.pipelineFactory = props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
-      this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
-      const { source: source3, getUniforms: getUniforms2 } = this.props.shaderAssembler.assembleWGSLShader({
-        platformInfo,
-        ...this.props,
-        modules
-      });
-      this.source = source3;
-      this._getModuleUniforms = getUniforms2;
-      this.pipeline = this._updatePipeline();
-      if (props.bindings) {
-        this.setBindings(props.bindings);
-      }
-      Object.seal(this);
-    }
-    destroy() {
-      if (this._destroyed)
-        return;
-      this.pipelineFactory.release(this.pipeline);
-      this.shaderFactory.release(this.shader);
-      this._uniformStore.destroy();
-      this._destroyed = true;
-    }
-    // Draw call
-    predraw() {
-      this.updateShaderInputs();
-    }
-    dispatch(computePass, x, y, z) {
-      try {
-        this._logDrawCallStart();
-        this.pipeline = this._updatePipeline();
-        this.pipeline.setBindings(this.bindings);
-        computePass.setPipeline(this.pipeline);
-        computePass.setBindings([]);
-        computePass.dispatch(x, y, z);
-      } finally {
-        this._logDrawCallEnd();
-      }
-    }
-    // Update fixed fields (can trigger pipeline rebuild)
-    // Update dynamic fields
-    /**
-     * Updates the vertex count (used in draw calls)
-     * @note Any attributes with stepMode=vertex need to be at least this big
-     */
-    setVertexCount(vertexCount) {
-    }
-    /**
-     * Updates the instance count (used in draw calls)
-     * @note Any attributes with stepMode=instance need to be at least this big
-     */
-    setInstanceCount(instanceCount) {
-    }
-    setShaderInputs(shaderInputs) {
-      this.shaderInputs = shaderInputs;
-      this._uniformStore = new import_core16.UniformStore(this.shaderInputs.modules);
-      for (const moduleName of Object.keys(this.shaderInputs.modules)) {
-        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
-        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
-      }
-    }
-    /**
-     * Updates shader module settings (which results in uniforms being set)
-     */
-    setShaderModuleProps(props) {
-      const uniforms = this._getModuleUniforms(props);
-      const keys = Object.keys(uniforms).filter((k) => {
-        const uniform = uniforms[k];
-        return !isNumericArray(uniform) && typeof uniform !== "number" && typeof uniform !== "boolean";
-      });
-      const bindings = {};
-      for (const k of keys) {
-        bindings[k] = uniforms[k];
-        delete uniforms[k];
-      }
-    }
-    updateShaderInputs() {
-      this._uniformStore.setUniforms(this.shaderInputs.getUniformValues());
-    }
-    /**
-     * Sets bindings (textures, samplers, uniform buffers)
-     */
-    setBindings(bindings) {
-      Object.assign(this.bindings, bindings);
-    }
-    _setPipelineNeedsUpdate(reason) {
-      this._pipelineNeedsUpdate = this._pipelineNeedsUpdate || reason;
-    }
-    _updatePipeline() {
-      if (this._pipelineNeedsUpdate) {
-        let prevShader = null;
-        if (this.pipeline) {
-          import_core16.log.log(
-            1,
-            `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`
-          )();
-          prevShader = this.shader;
-        }
-        this._pipelineNeedsUpdate = false;
-        this.shader = this.shaderFactory.createShader({
-          id: `${this.id}-fragment`,
-          stage: "compute",
-          source: this.source,
-          debugShaders: this.props.debugShaders
-        });
-        this.pipeline = this.pipelineFactory.createComputePipeline({
-          ...this.props,
-          shader: this.shader
-        });
-        if (prevShader) {
-          this.shaderFactory.release(prevShader);
-        }
-      }
-      return this.pipeline;
-    }
-    /** Throttle draw call logging */
-    _lastLogTime = 0;
-    _logOpen = false;
-    _logDrawCallStart() {
-      const logDrawTimeout = import_core16.log.level > 3 ? 0 : LOG_DRAW_TIMEOUT2;
-      if (import_core16.log.level < 2 || Date.now() - this._lastLogTime < logDrawTimeout) {
-        return;
-      }
-      this._lastLogTime = Date.now();
-      this._logOpen = true;
-      import_core16.log.group(LOG_DRAW_PRIORITY2, `>>> DRAWING MODEL ${this.id}`, { collapsed: import_core16.log.level <= 2 })();
-    }
-    _logDrawCallEnd() {
-      if (this._logOpen) {
-        const uniformTable = this.shaderInputs.getDebugTable();
-        import_core16.log.table(LOG_DRAW_PRIORITY2, uniformTable)();
-        import_core16.log.groupEnd(LOG_DRAW_PRIORITY2)();
-        this._logOpen = false;
-      }
-    }
-    _drawCount = 0;
-    // TODO - fix typing of luma data types
-    _getBufferOrConstantValues(attribute, dataType) {
-      const TypedArrayConstructor = (0, import_core16.getTypedArrayConstructor)(dataType);
-      const typedArray = attribute instanceof import_core16.Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
-      return typedArray.toString();
-    }
-  };
-  var Computation = _Computation;
-  __publicField(Computation, "defaultProps", {
-    ...import_core16.ComputePipeline.defaultProps,
-    id: "unnamed",
-    handle: void 0,
-    userData: {},
-    source: "",
-    modules: [],
-    defines: {},
-    bindings: void 0,
-    shaderInputs: void 0,
-    pipelineFactory: void 0,
-    shaderFactory: void 0,
-    shaderAssembler: import_shadertools6.ShaderAssembler.getDefaultShaderAssembler(),
-    debugShaders: void 0
-  });
-  function getPlatformInfo2(device) {
-    return {
-      type: device.type,
-      shaderLanguage: device.info.shadingLanguage,
-      shaderLanguageVersion: device.info.shadingLanguageVersion,
-      gpu: device.info.gpu,
-      // HACK - we pretend that the DeviceFeatures is a Set, it has a similar API
-      features: device.features
-    };
-  }
-
   // src/modules/picking/picking-uniforms.ts
   var DEFAULT_HIGHLIGHT_COLOR = [0, 1, 1, 1];
   var INVALID_INDEX = -1;
@@ -7480,6 +8154,9 @@ vec4 picking_filterColor(vec4 color) {
       return [pickX, pickY];
     }
   };
+
+  // src/index.ts
+  var AsyncTexture = DynamicTexture;
   return __toCommonJS(bundle_exports);
 })();
       return __exports__;