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

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(dist_exports, {
   ConeGeometry: () => ConeGeometry,
   CubeGeometry: () => CubeGeometry,
   CylinderGeometry: () => CylinderGeometry,
+  DynamicTexture: () => DynamicTexture,
   GPUGeometry: () => GPUGeometry,
   Geometry: () => Geometry,
   GroupNode: () => GroupNode,
@@ -265,7 +266,7 @@ var _AnimationLoop = class {
   gpuTime;
   frameRate;
   display;
-  needsRedraw = "initialized";
+  _needsRedraw = "initialized";
   _initialized = false;
   _running = false;
   _animationFrameId = null;
@@ -307,9 +308,15 @@ var _AnimationLoop = class {
   }
   /** 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;
@@ -453,7 +460,7 @@ var _AnimationLoop = class {
     (_a = this.device) == null ? void 0 : _a.submit();
   }
   _clearNeedsRedraw() {
-    this.needsRedraw = false;
+    this._needsRedraw = false;
   }
   _setupFrame() {
     this._resizeViewport();
@@ -512,7 +519,7 @@ var _AnimationLoop = class {
     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);
@@ -670,8 +677,8 @@ function clearError(device) {
 }
 
 // dist/model/model.js
-var import_core9 = require("@luma.gl/core");
-var import_shadertools2 = require("@luma.gl/shadertools");
+var import_core12 = require("@luma.gl/core");
+var import_shadertools3 = require("@luma.gl/shadertools");
 
 // dist/geometry/gpu-geometry.js
 var import_core3 = require("@luma.gl/core");
@@ -786,8 +793,9 @@ var import_core4 = require("@luma.gl/core");
 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;
@@ -952,8 +960,9 @@ var import_core5 = require("@luma.gl/core");
 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;
@@ -1166,14 +1175,24 @@ var BufferLayoutHelper = class {
 };
 
 // dist/utils/buffer-layout-order.js
+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]));
   const sortedLayout = bufferLayout.slice();
   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;
@@ -1306,49 +1325,795 @@ var ShaderInputs = class {
   }
 };
 
-// dist/async-texture/async-texture.js
-var import_core8 = require("@luma.gl/core");
+// dist/dynamic-texture/dynamic-texture.js
+var import_core11 = require("@luma.gl/core");
 
-// dist/application-utils/load-file.js
-var pathPrefix = "";
-function setPathPrefix(prefix) {
-  pathPrefix = prefix;
+// dist/dynamic-texture/texture-data.js
+var import_core8 = require("@luma.gl/core");
+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 == null ? void 0 : 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;
+}
+
+// dist/dynamic-texture/mipmaps.js
+var import_core10 = require("@luma.gl/core");
+
+// dist/compute/computation.js
+var import_core9 = require("@luma.gl/core");
+var import_shadertools2 = require("@luma.gl/shadertools");
+var import_types2 = require("@math.gl/types");
+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) {
+    var _a, _b, _c;
+    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(((_a = this.props.modules) == null ? void 0 : _a.map((module2) => [module2.name, module2])) || []);
+    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 = (((_b = this.props.modules) == null ? void 0 : _b.length) > 0 ? this.props.modules : (_c = this.shaderInputs) == null ? void 0 : _c.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 == null ? void 0 : 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 !(0, import_types2.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
+  };
+}
+
+// dist/dynamic-texture/mipmaps.js
+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)
+  );
+}
+`;
 }
 
-// dist/async-texture/async-texture.js
-var TextureCubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
-var CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
-var _AsyncTexture = class {
+// dist/dynamic-texture/dynamic-texture.js
+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;
@@ -1356,272 +2121,283 @@ var _AsyncTexture = class {
   };
   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 == null ? void 0 : 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 == null ? void 0 : 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) {
-    var _a;
-    if (((_a = this.texture) == null ? void 0 : _a.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) {
-    var _a;
-    if (((_a = this.texture) == null ? void 0 : _a.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) {
-    var _a;
-    if (((_a = this.texture) == null ? void 0 : _a.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)) {
@@ -1641,19 +2417,27 @@ async function awaitAllPromises(x) {
 }
 
 // dist/model/model.js
-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 */
@@ -1716,7 +2500,7 @@ var _Model = class {
     const moduleMap = Object.fromEntries(((_a = this.props.modules) == null ? void 0 : _a.map((module2) => [module2.name, module2])) || []);
     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.
       (((_b = this.props.modules) == null ? void 0 : _b.length) > 0 ? this.props.modules : (_c = this.shaderInputs) == null ? void 0 : _c.getModules()) || []
@@ -1730,7 +2514,7 @@ var _Model = class {
       });
       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,
@@ -1783,7 +2567,6 @@ var _Model = class {
     if (props.transformFeedback) {
       this.transformFeedback = props.transformFeedback;
     }
-    Object.seal(this);
   }
   destroy() {
     var _a;
@@ -1812,14 +2595,20 @@ var _Model = class {
   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 {
@@ -1947,7 +2736,7 @@ var _Model = class {
   /** 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, module2] of Object.entries(this.shaderInputs.modules)) {
       if (shaderModuleHasUniforms(module2)) {
         const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
@@ -1991,7 +2780,7 @@ var _Model = class {
   setAttributes(buffers, options) {
     const disableWarnings = (options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings;
     if (buffers["indices"]) {
-      import_core9.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
+      import_core12.log.warn(`Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`)();
     }
     this.bufferLayout = sortedBufferLayoutByShaderSourceLocations(this.pipeline.shaderLayout, this.bufferLayout);
     const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
@@ -1999,7 +2788,7 @@ var _Model = class {
       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;
       }
@@ -2014,7 +2803,7 @@ var _Model = class {
         }
       }
       if (!set && !disableWarnings) {
-        import_core9.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
+        import_core12.log.warn(`Model(${this.id}): Ignoring buffer "${buffer.id}" for unknown attribute "${bufferName}"`)();
       }
     }
     this.setNeedsRedraw("attributes");
@@ -2033,7 +2822,7 @@ var _Model = class {
       if (attributeInfo) {
         this.vertexArray.setConstantWebGL(attributeInfo.location, value);
       } else if (!((options == null ? void 0 : options.disableWarnings) ?? this.props.disableWarnings)) {
-        import_core9.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
+        import_core12.log.warn(`Model "${this.id}: Ignoring constant supplied for unknown attribute "${attributeName}"`)();
       }
     }
     this.setNeedsRedraw("constants");
@@ -2042,7 +2831,7 @@ var _Model = class {
   /** 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;
       }
     }
@@ -2052,7 +2841,7 @@ var _Model = class {
   _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;
         }
@@ -2066,16 +2855,16 @@ var _Model = class {
   _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);
       }
     }
@@ -2110,7 +2899,7 @@ var _Model = class {
       let prevShaderVs = null;
       let prevShaderFs = null;
       if (this.pipeline) {
-        import_core9.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
+        import_core12.log.log(1, `Model ${this.id}: Recreating pipeline because "${this._pipelineNeedsUpdate}".`)();
         prevShaderVs = this.pipeline.vs;
         prevShaderFs = this.pipeline.fs;
       }
@@ -2143,7 +2932,7 @@ var _Model = class {
         vs: vs3,
         fs: fs3
       });
-      this._attributeInfos = (0, import_core9.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
+      this._attributeInfos = (0, import_core12.getAttributeInfosFromLayouts)(this.pipeline.shaderLayout, this.bufferLayout);
       if (prevShaderVs)
         this.shaderFactory.release(prevShaderVs);
       if (prevShaderFs)
@@ -2155,24 +2944,24 @@ var _Model = class {
   _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;
     }
   }
@@ -2211,14 +3000,14 @@ var _Model = class {
   }
   // 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,
@@ -2239,14 +3028,14 @@ __publicField(Model, "defaultProps", {
   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(module2) {
   return Boolean(module2.uniformTypes && !isObjectEmpty(module2.uniformTypes));
 }
-function getPlatformInfo(device) {
+function getPlatformInfo2(device) {
   return {
     type: device.type,
     shaderLanguage: device.info.shadingLanguage,
@@ -2264,8 +3053,8 @@ function isObjectEmpty(obj) {
 }
 
 // dist/compute/buffer-transform.js
-var import_core10 = require("@luma.gl/core");
-var import_shadertools3 = require("@luma.gl/shadertools");
+var import_core13 = require("@luma.gl/core");
+var import_shadertools4 = require("@luma.gl/shadertools");
 var _BufferTransform = class {
   device;
   model;
@@ -2281,7 +3070,7 @@ var _BufferTransform = class {
     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
@@ -2327,7 +3116,7 @@ var _BufferTransform = class {
     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;
@@ -2342,7 +3131,7 @@ __publicField(BufferTransform, "defaultProps", {
 });
 
 // dist/compute/texture-transform.js
-var import_shadertools4 = require("@luma.gl/shadertools");
+var import_shadertools5 = require("@luma.gl/shadertools");
 var FS_OUTPUT_VARIABLE = "transform_output";
 var TextureTransform = class {
   device;
@@ -2365,7 +3154,7 @@ var TextureTransform = class {
     });
     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
@@ -2604,22 +3393,31 @@ ${props.source}` };
 };
 
 // dist/models/billboard-texture-model.js
+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);
 }
 `
 );
@@ -2629,27 +3427,33 @@ var BACKGROUND_FS = (
 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 ? {
@@ -2666,28 +3470,58 @@ var BackgroundTextureModel = class extends ClipSpace {
     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] } });
+  }
 };
 
 // dist/scenegraph/scenegraph-node.js
-var import_core11 = require("@math.gl/core");
+var import_core14 = require("@math.gl/core");
 var ScenegraphNode = class {
   id;
-  matrix = new import_core11.Matrix4();
+  matrix = new import_core14.Matrix4();
   display = true;
-  position = new import_core11.Vector3();
-  rotation = new import_core11.Vector3();
-  scale = new import_core11.Vector3(1, 1, 1);
+  position = new import_core14.Vector3();
+  rotation = new import_core14.Vector3();
+  scale = new import_core14.Vector3(1, 1, 1);
   userData = {};
   props = {};
   constructor(props = {}) {
@@ -2772,7 +3606,7 @@ var ScenegraphNode = class {
   }
   getCoordinateUniforms(viewMatrix, modelMatrix) {
     modelMatrix = modelMatrix || this.matrix;
-    const worldMatrix = new import_core11.Matrix4(viewMatrix).multiplyRight(modelMatrix);
+    const worldMatrix = new import_core14.Matrix4(viewMatrix).multiplyRight(modelMatrix);
     const worldInverse = worldMatrix.invert();
     const worldInverseTranspose = worldInverse.transpose();
     return {
@@ -2824,14 +3658,14 @@ var ScenegraphNode = class {
 };
 
 // dist/scenegraph/group-node.js
-var import_core12 = require("@math.gl/core");
-var import_core13 = require("@luma.gl/core");
+var import_core15 = require("@math.gl/core");
+var import_core16 = require("@luma.gl/core");
 var GroupNode = class extends ScenegraphNode {
   children;
   constructor(props = {}) {
     props = Array.isArray(props) ? { children: props } : props;
     const { children = [] } = props;
-    import_core13.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
+    import_core16.log.assert(children.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
     super(props);
     this.children = children;
   }
@@ -2846,12 +3680,12 @@ var GroupNode = class extends ScenegraphNode {
         return;
       }
       const [min, max] = bounds;
-      const center = new import_core12.Vector3(min).add(max).divide([2, 2, 2]);
+      const center = new import_core15.Vector3(min).add(max).divide([2, 2, 2]);
       worldMatrix.transformAsPoint(center, center);
-      const halfSize = new import_core12.Vector3(max).subtract(min).divide([2, 2, 2]);
+      const halfSize = new import_core15.Vector3(max).subtract(min).divide([2, 2, 2]);
       worldMatrix.transformAsVector(halfSize, halfSize);
       for (let v = 0; v < 8; v++) {
-        const position = new import_core12.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
+        const position = new import_core15.Vector3(v & 1 ? -1 : 1, v & 2 ? -1 : 1, v & 4 ? -1 : 1).multiply(halfSize).add(center);
         for (let i = 0; i < 3; i++) {
           result[0][i] = Math.min(result[0][i], position[i]);
           result[1][i] = Math.max(result[1][i], position[i]);
@@ -2891,8 +3725,8 @@ var GroupNode = class extends ScenegraphNode {
     this.children = [];
     return this;
   }
-  traverse(visitor, { worldMatrix = new import_core12.Matrix4() } = {}) {
-    const modelMatrix = new import_core12.Matrix4(worldMatrix).multiplyRight(this.matrix);
+  traverse(visitor, { worldMatrix = new import_core15.Matrix4() } = {}) {
+    const modelMatrix = new import_core15.Matrix4(worldMatrix).multiplyRight(this.matrix);
     for (const child of this.children) {
       if (child instanceof GroupNode) {
         child.traverse(visitor, { worldMatrix: modelMatrix });
@@ -3674,7 +4508,7 @@ var CylinderGeometry = class extends TruncatedConeGeometry {
 };
 
 // dist/geometries/ico-sphere-geometry.js
-var import_core14 = require("@math.gl/core");
+var import_core17 = require("@math.gl/core");
 var ICO_POSITIONS = [-1, 0, 0, 0, 1, 0, 0, 0, -1, 0, 0, 1, 0, -1, 0, 1, 0, 0];
 var ICO_INDICES = [3, 4, 5, 3, 5, 1, 3, 1, 0, 3, 0, 4, 4, 0, 2, 4, 2, 5, 2, 0, 1, 5, 2, 1];
 var IcoSphereGeometry = class extends Geometry {
@@ -3772,7 +4606,7 @@ function tesselateIcosaHedron(props) {
     const u3 = 1 - phi3 / PI2;
     const vec1 = [x3 - x2, y3 - y2, z3 - z2];
     const vec2 = [x1 - x2, y1 - y2, z1 - z2];
-    const normal = new import_core14.Vector3(vec1).cross(vec2).normalize();
+    const normal = new import_core17.Vector3(vec1).cross(vec2).normalize();
     let newIndex;
     if ((u1 === 0 || u2 === 0 || u3 === 0) && (u1 === 0 || u1 > 0.5) && (u2 === 0 || u2 > 0.5) && (u3 === 0 || u3 > 0.5)) {
       positions.push(positions[in1 + 0], positions[in1 + 1], positions[in1 + 2]);
@@ -4032,17 +4866,45 @@ function fract(n) {
   return n - Math.floor(n);
 }
 
+// dist/application-utils/load-file.js
+var pathPrefix = "";
+function setPathPrefix(prefix) {
+  pathPrefix = prefix;
+}
+async function loadImageBitmap(url, opts) {
+  const image = new Image();
+  image.crossOrigin = (opts == null ? void 0 : 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 == null ? void 0 : opts.crossOrigin) || "anonymous";
+      image.src = url.startsWith("http") ? url : pathPrefix + url;
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+
 // dist/passes/shader-pass-renderer.js
-var import_shadertools5 = require("@luma.gl/shadertools");
+var import_shadertools6 = require("@luma.gl/shadertools");
 
 // dist/compute/swap.js
-var import_core15 = require("@luma.gl/core");
+var import_core18 = require("@luma.gl/core");
 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;
   }
@@ -4063,18 +4925,21 @@ var SwapFramebuffers = class extends Swap {
   constructor(device, props) {
     var _a, _b;
     props = { ...props };
+    const { width = 1, height = 1 } = props;
     let colorAttachments = (_a = props.colorAttachments) == null ? void 0 : _a.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 = (_b = props.colorAttachments) == null ? void 0 : _b.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 });
     super({ current, next });
@@ -4138,19 +5003,23 @@ function getFilterShaderWGSL(func) {
     `// 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;
 }
 `
@@ -4172,9 +5041,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;
 }
 `
@@ -4239,7 +5108,7 @@ var ShaderPassRenderer = class {
   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 }), {});
     this.shaderInputs = props.shaderInputs || new ShaderInputs(modules);
     const size = device.getCanvasContext().getDrawingBufferSize();
@@ -4270,12 +5139,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);
 }
 `
       )
@@ -4289,9 +5156,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);
@@ -4302,7 +5171,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 });
@@ -4318,14 +5187,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();
@@ -4411,218 +5280,6 @@ var SubPassRenderer = class {
   }
 };
 
-// dist/compute/computation.js
-var import_core16 = require("@luma.gl/core");
-var import_shadertools6 = require("@luma.gl/shadertools");
-var import_types2 = require("@math.gl/types");
-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) {
-    var _a, _b, _c;
-    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(((_a = this.props.modules) == null ? void 0 : _a.map((module2) => [module2.name, module2])) || []);
-    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 = (((_b = this.props.modules) == null ? void 0 : _b.length) > 0 ? this.props.modules : (_c = this.shaderInputs) == null ? void 0 : _c.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 !(0, import_types2.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
-  };
-}
-
 // dist/modules/picking/picking-uniforms.js
 var DEFAULT_HIGHLIGHT_COLOR = [0, 1, 1, 1];
 var INVALID_INDEX = -1;
@@ -5161,4 +5818,7 @@ var LegacyPickingManager = class {
     return [pickX, pickY];
   }
 };
+
+// dist/index.js
+var AsyncTexture = DynamicTexture;
 //# sourceMappingURL=index.cjs.map