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

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(dist_exports, {
   DeviceFeatures: () => DeviceFeatures,
   DeviceLimits: () => DeviceLimits,
   ExternalTexture: () => ExternalTexture,
+  Fence: () => Fence,
   Framebuffer: () => Framebuffer,
   PipelineLayout: () => PipelineLayout,
   QuerySet: () => QuerySet,
@@ -54,20 +55,26 @@ __export(dist_exports, {
   VertexArray: () => VertexArray,
   _getTextureFormatDefinition: () => getTextureFormatDefinition,
   _getTextureFormatTable: () => getTextureFormatTable,
+  assert: () => assert,
+  assertDefined: () => assertDefined,
   getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
   getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
   getDataType: () => getDataType,
   getDataTypeInfo: () => getDataTypeInfo,
+  getExternalImageSize: () => getExternalImageSize,
   getNormalizedDataType: () => getNormalizedDataType,
   getScratchArray: () => getScratchArray,
+  getTextureImageView: () => getTextureImageView,
   getTypedArrayConstructor: () => getTypedArrayConstructor,
   getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
   getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
   getVertexFormatInfo: () => getVertexFormatInfo,
+  isExternalImage: () => isExternalImage,
   log: () => log,
   luma: () => luma,
   makeVertexFormat: () => makeVertexFormat,
   readPixel: () => readPixel,
+  setTextureImageData: () => setTextureImageData,
   textureFormatDecoder: () => textureFormatDecoder,
   writePixel: () => writePixel
 });
@@ -108,8 +115,11 @@ var Resource = class {
   }
   /** props.id, for debugging. */
   id;
+  /** The props that this resource was created with */
   props;
+  /** User data object, reserved for the application */
   userData = {};
+  /** The device that this resource is associated with - TODO can we remove this dup? */
   _device;
   /** Whether this resource has been destroyed */
   destroyed = false;
@@ -313,10 +323,11 @@ __publicField(Buffer2, "defaultProps", {
 
 // dist/shadertypes/data-types/decode-data-types.js
 function getDataTypeInfo(type) {
-  const [signedType, primitiveType, byteLength] = NORMALIZED_TYPE_MAP[type];
   const normalized = type.includes("norm");
   const integer = !normalized && !type.startsWith("float");
   const signed = type.startsWith("s");
+  const typeInfo = NORMALIZED_TYPE_MAP[type];
+  const [signedType, primitiveType, byteLength] = typeInfo || ["uint8 ", "i32", 1];
   return {
     signedType,
     primitiveType,
@@ -632,6 +643,9 @@ var TEXTURE_FORMAT_TABLE = {
 };
 
 // dist/shadertypes/textures/texture-format-decoder.js
+var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
+var COLOR_FORMAT_PREFIXES = ["rgb", "rgba", "bgra"];
+var DEPTH_FORMAT_PREFIXES = ["depth", "stencil"];
 var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
   "bc1",
   "bc2",
@@ -647,49 +661,67 @@ var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
   "astc",
   "pvrtc"
 ];
-var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
 var TextureFormatDecoder = class {
-  /** Returns information about a texture format, e.g. attatchment type, components, byte length and flags (integer, signed, normalized) */
-  getInfo(format) {
-    return getTextureFormatInfo(format);
-  }
   /** Checks if a texture format is color */
   isColor(format) {
-    return format.startsWith("rgba") || format.startsWith("bgra") || format.startsWith("rgb");
+    return COLOR_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
   }
   /** Checks if a texture format is depth or stencil */
   isDepthStencil(format) {
-    return format.startsWith("depth") || format.startsWith("stencil");
+    return DEPTH_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
   }
   /** Checks if a texture format is compressed */
   isCompressed(format) {
     return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
   }
-  /**
-   * Returns the "static" capabilities of a texture format.
-   * @note Needs to be checked against current device
-   */
+  /** Returns information about a texture format, e.g. attachment type, components, byte length and flags (integer, signed, normalized) */
+  getInfo(format) {
+    return getTextureFormatInfo(format);
+  }
+  /**  "static" capabilities of a texture format. @note Needs to be adjusted against current device */
   getCapabilities(format) {
-    const info = getTextureFormatDefinition(format);
-    const formatCapabilities = {
-      format,
-      create: info.f ?? true,
-      render: info.render ?? true,
-      filter: info.filter ?? true,
-      blend: info.blend ?? true,
-      store: info.store ?? true
-    };
-    const formatInfo = getTextureFormatInfo(format);
-    const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
-    const isSigned = formatInfo == null ? void 0 : formatInfo.signed;
-    const isInteger = formatInfo == null ? void 0 : formatInfo.integer;
-    const isWebGLSpecific = formatInfo == null ? void 0 : formatInfo.webgl;
-    formatCapabilities.render &&= !isSigned;
-    formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
-    return formatCapabilities;
+    return getTextureFormatCapabilities(format);
+  }
+  /** Computes the memory layout for a texture, in particular including row byte alignment */
+  computeMemoryLayout(opts) {
+    return computeTextureMemoryLayout(opts);
   }
 };
 var textureFormatDecoder = new TextureFormatDecoder();
+function computeTextureMemoryLayout({ format, width, height, depth, byteAlignment }) {
+  const { bytesPerPixel } = textureFormatDecoder.getInfo(format);
+  const unpaddedBytesPerRow = width * bytesPerPixel;
+  const bytesPerRow = Math.ceil(unpaddedBytesPerRow / byteAlignment) * byteAlignment;
+  const rowsPerImage = height;
+  const byteLength = bytesPerRow * rowsPerImage * depth;
+  return {
+    bytesPerPixel,
+    bytesPerRow,
+    rowsPerImage,
+    depthOrArrayLayers: depth,
+    bytesPerImage: bytesPerRow * rowsPerImage,
+    byteLength
+  };
+}
+function getTextureFormatCapabilities(format) {
+  const info = getTextureFormatDefinition(format);
+  const formatCapabilities = {
+    format,
+    create: info.f ?? true,
+    render: info.render ?? true,
+    filter: info.filter ?? true,
+    blend: info.blend ?? true,
+    store: info.store ?? true
+  };
+  const formatInfo = getTextureFormatInfo(format);
+  const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
+  const isSigned = formatInfo == null ? void 0 : formatInfo.signed;
+  const isInteger = formatInfo == null ? void 0 : formatInfo.integer;
+  const isWebGLSpecific = formatInfo == null ? void 0 : formatInfo.webgl;
+  formatCapabilities.render &&= !isSigned;
+  formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
+  return formatCapabilities;
+}
 function getTextureFormatInfo(format) {
   let formatInfo = getTextureFormatInfoUsingTable(format);
   if (textureFormatDecoder.isCompressed(format)) {
@@ -710,7 +742,7 @@ function getTextureFormatInfo(format) {
     const dataType = `${type}${length}`;
     const decodedType = getDataTypeInfo(dataType);
     const bits = decodedType.byteLength * 8;
-    const components = channels.length;
+    const components = (channels == null ? void 0 : channels.length) ?? 1;
     const bitsPerChannel = [
       bits,
       components >= 2 ? bits : 0,
@@ -727,7 +759,7 @@ function getTextureFormatInfo(format) {
       signed: decodedType.signed,
       normalized: decodedType.normalized,
       bitsPerChannel,
-      bytesPerPixel: decodedType.byteLength * channels.length,
+      bytesPerPixel: decodedType.byteLength * components,
       packed: formatInfo.packed,
       srgb: formatInfo.srgb
     };
@@ -845,7 +877,7 @@ var _Device = class {
   /** True if this device has been reused during device creation (app has multiple references) */
   _reused = false;
   /** Used by other luma.gl modules to store data on the device */
-  _lumaData = {};
+  _moduleData = {};
   _textureCaps = {};
   constructor(props) {
     this.props = { ..._Device.defaultProps, ...props };
@@ -944,7 +976,7 @@ var _Device = class {
   reportError(error, context, ...args) {
     const isHandled = this.props.onError(error, context);
     if (!isHandled) {
-      return log.error(error.message, context, ...args);
+      return log.error(this.type === "webgl" ? "%cWebGL" : "%cWebGPU", "color: white; background: red; padding: 2px 6px; border-radius: 3px;", error.message, context, ...args);
     }
     return () => {
     };
@@ -966,6 +998,10 @@ or create a device with the 'debug: true' prop.`;
     }
     return this.canvasContext;
   }
+  /** Create a fence sync object */
+  createFence() {
+    throw new Error("createFence() not implemented");
+  }
   /** Create a RenderPass using the default CommandEncoder */
   beginRenderPass(props) {
     return this.commandEncoder.beginRenderPass(props);
@@ -1009,6 +1045,12 @@ or create a device with the 'debug: true' prop.`;
   resetWebGL() {
     throw new Error("not implemented");
   }
+  // INTERNAL LUMA.GL METHODS
+  getModuleData(moduleName) {
+    this._moduleData[moduleName] ||= {};
+    return this._moduleData[moduleName];
+  }
+  // INTERNAL HELPERS
   // IMPLEMENTATION
   /** Helper to get the canvas context props */
   static _getCanvasContextProps(props) {
@@ -1116,7 +1158,7 @@ var _Luma = class {
   VERSION = (
     // Version detection using build plugin
     // @ts-expect-error no-undef
-    true ? "9.2.6" : "running from source"
+    true ? "9.3.0-alpha.4" : "running from source"
   );
   spector;
   preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -1295,6 +1337,20 @@ function withResolvers() {
   return { promise, resolve, reject };
 }
 
+// dist/utils/assert.js
+function assert(condition, message) {
+  var _a;
+  if (!condition) {
+    const error = new Error(message ?? "luma.gl assertion failed.");
+    (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, assert);
+    throw error;
+  }
+}
+function assertDefined(value, message) {
+  assert(value, message);
+  return value;
+}
+
 // dist/adapter/canvas-context.js
 var _CanvasContext = class {
   static isHTMLCanvas(canvas) {
@@ -1330,11 +1386,19 @@ var _CanvasContext = class {
   drawingBufferWidth;
   /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
   drawingBufferHeight;
+  /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
   _initializedResolvers = withResolvers();
+  /** ResizeObserver to track canvas size changes */
   _resizeObserver;
+  /** IntersectionObserver to track canvas visibility changes */
   _intersectionObserver;
-  _position;
+  _observeDevicePixelRatioTimeout = null;
+  /** Position of the canvas in the document, updated by a timer */
+  _position = [0, 0];
+  /** Whether this canvas context has been destroyed */
   destroyed = false;
+  /** Whether the drawing buffer size needs to be resized (deferred resizing to avoid flicker) */
+  _needsDrawingBufferResize = true;
   toString() {
     return `${this[Symbol.toStringTag]}(${this.id})`;
   }
@@ -1381,14 +1445,24 @@ var _CanvasContext = class {
       } catch {
         this._resizeObserver.observe(this.canvas, { box: "content-box" });
       }
-      setTimeout(() => this._observeDevicePixelRatio(), 0);
+      this._observeDevicePixelRatioTimeout = setTimeout(() => this._observeDevicePixelRatio(), 0);
       if (this.props.trackPosition) {
         this._trackPosition();
       }
     }
   }
   destroy() {
-    this.destroyed = true;
+    var _a, _b;
+    if (!this.destroyed) {
+      this.destroyed = true;
+      if (this._observeDevicePixelRatioTimeout) {
+        clearTimeout(this._observeDevicePixelRatioTimeout);
+        this._observeDevicePixelRatioTimeout = null;
+      }
+      this.device = null;
+      (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+      (_b = this._intersectionObserver) == null ? void 0 : _b.disconnect();
+    }
   }
   setProps(props) {
     if ("useDevicePixels" in props) {
@@ -1397,6 +1471,11 @@ var _CanvasContext = class {
     }
     return this;
   }
+  /** Returns a framebuffer with properly resized current 'swap chain' textures */
+  getCurrentFramebuffer(options) {
+    this._resizeDrawingBufferIfNeeded();
+    return this._getCurrentFramebuffer(options);
+  }
   // SIZE METHODS
   /**
    * Returns the size covered by the canvas in CSS pixels
@@ -1426,12 +1505,21 @@ var _CanvasContext = class {
     const maxTextureDimension = this.device.limits.maxTextureDimension2D;
     return [maxTextureDimension, maxTextureDimension];
   }
-  /** Update the canvas drawing buffer size. Called automatically if props.autoResize is true. */
+  /**
+   * Update the canvas drawing buffer size.
+   * @note - Called automatically if props.autoResize is true.
+   * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
+   * (resizing clears the drawing buffer)!
+   */
   setDrawingBufferSize(width, height) {
-    this.canvas.width = width;
-    this.canvas.height = height;
+    width = Math.floor(width);
+    height = Math.floor(height);
+    if (this.drawingBufferWidth === width && this.drawingBufferHeight === height) {
+      return;
+    }
     this.drawingBufferWidth = width;
     this.drawingBufferHeight = height;
+    this._needsDrawingBufferResize = true;
   }
   /**
    * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
@@ -1487,6 +1575,9 @@ var _CanvasContext = class {
   }
   /** reacts to an observed intersection */
   _handleIntersection(entries) {
+    if (this.destroyed) {
+      return;
+    }
     const entry = entries.find((entry_) => entry_.target === this.canvas);
     if (!entry) {
       return;
@@ -1503,22 +1594,27 @@ var _CanvasContext = class {
    * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
    */
   _handleResize(entries) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
+    if (this.destroyed) {
+      return;
+    }
     const entry = entries.find((entry_) => entry_.target === this.canvas);
     if (!entry) {
       return;
     }
-    this.cssWidth = entry.contentBoxSize[0].inlineSize;
-    this.cssHeight = entry.contentBoxSize[0].blockSize;
+    const contentBoxSize = assertDefined((_a = entry.contentBoxSize) == null ? void 0 : _a[0]);
+    this.cssWidth = contentBoxSize.inlineSize;
+    this.cssHeight = contentBoxSize.blockSize;
     const oldPixelSize = this.getDevicePixelSize();
-    const devicePixelWidth = ((_a = entry.devicePixelContentBoxSize) == null ? void 0 : _a[0].inlineSize) || entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-    const devicePixelHeight = ((_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0].blockSize) || entry.contentBoxSize[0].blockSize * devicePixelRatio;
+    const devicePixelWidth = ((_c = (_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0]) == null ? void 0 : _c.inlineSize) || contentBoxSize.inlineSize * devicePixelRatio;
+    const devicePixelHeight = ((_e = (_d = entry.devicePixelContentBoxSize) == null ? void 0 : _d[0]) == null ? void 0 : _e.blockSize) || contentBoxSize.blockSize * devicePixelRatio;
     const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
     this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
     this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
     this._updateDrawingBufferSize();
     this.device.props.onResize(this, { oldPixelSize });
   }
+  /** Initiate a deferred update for the canvas drawing buffer size */
   _updateDrawingBufferSize() {
     if (this.props.autoResize) {
       if (typeof this.props.useDevicePixels === "number") {
@@ -1529,18 +1625,33 @@ var _CanvasContext = class {
       } else {
         this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
       }
-      this._updateDevice();
     }
     this._initializedResolvers.resolve();
     this.isInitialized = true;
     this.updatePosition();
   }
+  /** Perform a deferred resize of the drawing buffer if needed */
+  _resizeDrawingBufferIfNeeded() {
+    if (this._needsDrawingBufferResize) {
+      this._needsDrawingBufferResize = false;
+      const sizeChanged = this.drawingBufferWidth !== this.canvas.width || this.drawingBufferHeight !== this.canvas.height;
+      if (sizeChanged) {
+        this.canvas.width = this.drawingBufferWidth;
+        this.canvas.height = this.drawingBufferHeight;
+        this._configureDevice();
+      }
+    }
+  }
   /** Monitor DPR changes */
   _observeDevicePixelRatio() {
+    var _a, _b;
+    if (this.destroyed) {
+      return;
+    }
     const oldRatio = this.devicePixelRatio;
     this.devicePixelRatio = window.devicePixelRatio;
     this.updatePosition();
-    this.device.props.onDevicePixelRatioChange(this, { oldRatio });
+    (_b = (_a = this.device.props).onDevicePixelRatioChange) == null ? void 0 : _b.call(_a, this, { oldRatio });
     matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener("change", () => this._observeDevicePixelRatio(), { once: true });
   }
   /** Start tracking positions with a timer */
@@ -1560,6 +1671,9 @@ var _CanvasContext = class {
    */
   updatePosition() {
     var _a, _b, _c;
+    if (this.destroyed) {
+      return;
+    }
     const newRect = (_a = this.htmlCanvas) == null ? void 0 : _a.getBoundingClientRect();
     if (newRect) {
       const position = [newRect.left, newRect.top];
@@ -1707,7 +1821,13 @@ var _Texture = class extends Resource {
   depth;
   /** mip levels in this texture */
   mipLevels;
-  /** "Time" of last update. Monotonically increasing timestamp. TODO move to AsyncTexture? */
+  /** Rows are multiples of this length, padded with extra bytes if needed */
+  byteAlignment;
+  /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */
+  ready = Promise.resolve(this);
+  /** isReady is always true. It is provided for type compatibility with DynamicTexture. */
+  isReady = true;
+  /** "Time" of last update. Monotonically increasing timestamp. TODO move to DynamicTexture? */
   updateTimestamp;
   get [Symbol.toStringTag]() {
     return "Texture";
@@ -1716,7 +1836,7 @@ var _Texture = class extends Resource {
     return `Texture(${this.id},${this.format},${this.width}x${this.height})`;
   }
   /** Do not use directly. Create with device.createTexture() */
-  constructor(device, props) {
+  constructor(device, props, backendProps) {
     props = _Texture.normalizeProps(device, props);
     super(device, props, _Texture.defaultProps);
     this.dimension = this.props.dimension;
@@ -1726,6 +1846,9 @@ var _Texture = class extends Resource {
     this.height = this.props.height;
     this.depth = this.props.depth;
     this.mipLevels = this.props.mipLevels;
+    if (this.dimension === "cube") {
+      this.depth = 6;
+    }
     if (this.props.width === void 0 || this.props.height === void 0) {
       if (device.isExternalImage(props.data)) {
         const size = device.getExternalImageSize(props.data);
@@ -1735,16 +1858,13 @@ var _Texture = class extends Resource {
         this.width = 1;
         this.height = 1;
         if (this.props.width === void 0 || this.props.height === void 0) {
-          log.warn(`${this} created with undefined width or height. This is deprecated. Use AsyncTexture instead.`)();
+          log.warn(`${this} created with undefined width or height. This is deprecated. Use DynamicTexture instead.`)();
         }
       }
     }
+    this.byteAlignment = (backendProps == null ? void 0 : backendProps.byteAlignment) || 1;
     this.updateTimestamp = device.incrementTimestamp();
   }
-  /** Set sampler props associated with this texture */
-  setSampler(sampler) {
-    this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
-  }
   /**
    * Create a new texture with the same parameters and optionally a different size
    * @note Textures are immutable and cannot be resized after creation, but we can create a similar texture with the same parameters but a new size.
@@ -1753,6 +1873,79 @@ var _Texture = class extends Resource {
   clone(size) {
     return this.device.createTexture({ ...this.props, ...size });
   }
+  /** Set sampler props associated with this texture */
+  setSampler(sampler) {
+    this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler);
+  }
+  /**
+   * Calculates the memory layout of the texture, required when reading and writing data.
+   * @return the memory layout of the texture, in particular bytesPerRow which includes required padding
+   */
+  computeMemoryLayout(options_ = {}) {
+    const options = this._normalizeTextureReadOptions(options_);
+    const { width = this.width, height = this.height, depthOrArrayLayers = this.depth } = options;
+    const { format, byteAlignment } = this;
+    return textureFormatDecoder.computeMemoryLayout({
+      format,
+      width,
+      height,
+      depth: depthOrArrayLayers,
+      byteAlignment
+    });
+  }
+  /**
+   * Read the contents of a texture into a GPU Buffer.
+   * @returns A Buffer containing the texture data.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   * @note The application can call Buffer.readAsync()
+   * @note If not supplied a buffer will be created and the application needs to call Buffer.destroy
+   */
+  readBuffer(options, buffer) {
+    throw new Error("readBuffer not implemented");
+  }
+  /**
+   * Reads data from a texture into an ArrayBuffer.
+   * @returns An ArrayBuffer containing the texture data.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   */
+  readDataAsync(options) {
+    throw new Error("readBuffer not implemented");
+  }
+  /**
+   * Writes an GPU Buffer into a texture.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   */
+  writeBuffer(buffer, options) {
+    throw new Error("readBuffer not implemented");
+  }
+  /**
+   * Writes an array buffer into a texture.
+   *
+   * @note The memory layout of the texture data is determined by the texture format and dimensions.
+   * @note The application can call Texture.computeMemoryLayout() to compute the layout.
+   */
+  writeData(data, options) {
+    throw new Error("readBuffer not implemented");
+  }
+  // IMPLEMENTATION SPECIFIC
+  /**
+   * WebGL can read data synchronously.
+   * @note While it is convenient, the performance penalty is very significant
+   */
+  readDataSyncWebGL(options) {
+    throw new Error("readDataSyncWebGL not available");
+  }
+  /** Generate mipmaps (WebGL only) */
+  generateMipmapsWebGL() {
+    throw new Error("generateMipmapsWebGL not available");
+  }
+  // HELPERS
   /** Ensure we have integer coordinates */
   static normalizeProps(device, props) {
     const newProps = { ...props };
@@ -1765,7 +1958,6 @@ var _Texture = class extends Resource {
     }
     return newProps;
   }
-  // HELPERS
   /** Initialize texture with supplied props */
   // eslint-disable-next-line max-statements
   _initializeData(data) {
@@ -1816,6 +2008,20 @@ var _Texture = class extends Resource {
     options.height = Math.min(options.height, this.height - options.y);
     return options;
   }
+  _normalizeTextureReadOptions(options_) {
+    const { width, height } = this;
+    const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
+    options.width = Math.min(options.width, this.width - options.x);
+    options.height = Math.min(options.height, this.height - options.y);
+    return options;
+  }
+  _normalizeTextureWriteOptions(options_) {
+    const { width, height } = this;
+    const options = { ..._Texture.defaultTextureReadOptions, width, height, ...options_ };
+    options.width = Math.min(options.width, this.width - options.x);
+    options.height = Math.min(options.height, this.height - options.y);
+    return options;
+  }
 };
 var Texture = _Texture;
 /** The texture can be bound for use as a sampled texture in a shader */
@@ -1832,13 +2038,12 @@ __publicField(Texture, "COPY_DST", 2);
 __publicField(Texture, "TEXTURE", 4);
 /** @deprecated Use Texture.RENDER */
 __publicField(Texture, "RENDER_ATTACHMENT", 16);
-/** Default options */
 __publicField(Texture, "defaultProps", {
   ...Resource.defaultProps,
   data: null,
   dimension: "2d",
   format: "rgba8unorm",
-  usage: _Texture.TEXTURE | _Texture.RENDER_ATTACHMENT | _Texture.COPY_DST,
+  usage: _Texture.SAMPLE | _Texture.RENDER | _Texture.COPY_DST,
   width: void 0,
   height: void 0,
   depth: 1,
@@ -1875,6 +2080,16 @@ __publicField(Texture, "defaultCopyExternalImageOptions", {
   premultipliedAlpha: false,
   flipY: false
 });
+__publicField(Texture, "defaultTextureReadOptions", {
+  x: 0,
+  y: 0,
+  z: 0,
+  width: void 0,
+  height: void 0,
+  depthOrArrayLayers: 1,
+  mipLevel: 0,
+  aspect: "all"
+});
 
 // dist/adapter/resources/texture-view.js
 var _TextureView = class extends Resource {
@@ -1921,24 +2136,32 @@ function formatCompilerLog(shaderLog, source, options) {
   const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
   switch ((options == null ? void 0 : options.showSourceCode) || "no") {
     case "all":
-      let currentMessage = 0;
+      let currentMessageIndex = 0;
       for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
-        formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
-        while (log2.length > currentMessage && log2[currentMessage].lineNum === lineNum) {
-          const message = log2[currentMessage++];
-          formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+        const line = lines[lineNum - 1];
+        const currentMessage = log2[currentMessageIndex];
+        if (line && currentMessage) {
+          formattedLog += getNumberedLine(line, lineNum, options);
+        }
+        while (log2.length > currentMessageIndex && currentMessage.lineNum === lineNum) {
+          const message = log2[currentMessageIndex++];
+          if (message) {
+            formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+              ...options,
+              inlineSource: false
+            });
+          }
+        }
+      }
+      while (log2.length > currentMessageIndex) {
+        const message = log2[currentMessageIndex++];
+        if (message) {
+          formattedLog += formatCompilerMessage(message, [], 0, {
             ...options,
             inlineSource: false
           });
         }
       }
-      while (log2.length > currentMessage) {
-        const message = log2[currentMessage++];
-        formattedLog += formatCompilerMessage(message, [], 0, {
-          ...options,
-          inlineSource: false
-        });
-      }
       return formattedLog;
     case "issues":
     case "no":
@@ -1960,8 +2183,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
 `;
   }
-  const color = message.type === "error" ? "red" : "#8B4000";
-  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-error' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
+  const color = message.type === "error" ? "red" : "orange";
+  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-${message.type}' style="color:${color};"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
 }
 function getNumberedLines(lines, lineNum, options) {
   let numberedLines = "";
@@ -2042,35 +2265,39 @@ var _Shader = class extends Resource {
    * TODO - this HTML formatting code should not be in Device, should be pluggable
    */
   _displayShaderLog(messages, shaderId) {
-    var _a;
     if (typeof document === "undefined" || !(document == null ? void 0 : document.createElement)) {
       return;
     }
     const shaderName = shaderId;
     const shaderTitle = `${this.stage} shader "${shaderName}"`;
-    let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+    const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
     const translatedSource = this.getTranslatedSource();
+    const container = document.createElement("div");
+    container.innerHTML = `<h1>Compilation error in ${shaderTitle}</h1>
+<div style="display:flex;position:fixed;top:10px;right:20px;gap:2px;">
+<button id="copy">Copy source</button><br/>
+<button id="close">Close</button>
+</div>
+<code><pre>${htmlLog}</pre></code>`;
     if (translatedSource) {
-      htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
-    }
-    const button = document.createElement("Button");
-    button.innerHTML = `
-<h1>Compilation error in ${shaderTitle}</h1><br /><br />
-<code style="user-select:text;"><pre>
-${htmlLog}
-</pre></code>`;
-    button.style.top = "10px";
-    button.style.left = "10px";
-    button.style.position = "absolute";
-    button.style.zIndex = "9999";
-    button.style.width = "100%";
-    button.style.textAlign = "left";
-    document.body.appendChild(button);
-    const errors = document.getElementsByClassName("luma-compiler-log-error");
-    (_a = errors[0]) == null ? void 0 : _a.scrollIntoView();
-    button.onclick = () => {
-      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
-      navigator.clipboard.writeText(dataURI);
+      container.innerHTML += `<br /><h1>Translated Source</h1><br /><br /><code><pre>${translatedSource}</pre></code>`;
+    }
+    container.style.top = "0";
+    container.style.left = "0";
+    container.style.background = "white";
+    container.style.position = "fixed";
+    container.style.zIndex = "9999";
+    container.style.maxWidth = "100vw";
+    container.style.maxHeight = "100vh";
+    container.style.overflowY = "auto";
+    document.body.appendChild(container);
+    const error = container.querySelector(".luma-compiler-log-error");
+    error == null ? void 0 : error.scrollIntoView();
+    container.querySelector("button#close").onclick = () => {
+      container.remove();
+    };
+    container.querySelector("button#copy").onclick = () => {
+      navigator.clipboard.writeText(this.source);
     };
   }
 };
@@ -2090,7 +2317,7 @@ function getShaderIdFromProps(props) {
 function getShaderName(shader, defaultName = "unnamed") {
   const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
   const match = SHADER_NAME_REGEXP.exec(shader);
-  return match ? match[1] : defaultName;
+  return (match == null ? void 0 : match[1]) ?? defaultName;
 }
 
 // dist/adapter/resources/framebuffer.js
@@ -2114,7 +2341,12 @@ var _Framebuffer = class extends Resource {
   clone(size) {
     const colorAttachments = this.colorAttachments.map((colorAttachment) => colorAttachment.texture.clone(size));
     const depthStencilAttachment = this.depthStencilAttachment && this.depthStencilAttachment.texture.clone(size);
-    return this.device.createFramebuffer({ ...this.props, colorAttachments, depthStencilAttachment });
+    return this.device.createFramebuffer({
+      ...this.props,
+      ...size,
+      colorAttachments,
+      depthStencilAttachment
+    });
   }
   resize(size) {
     let updateSize = !size;
@@ -2189,17 +2421,15 @@ var _Framebuffer = class extends Resource {
    * and destroys existing textures if owned
    */
   resizeAttachments(width, height) {
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      if (this.colorAttachments[i]) {
-        const resizedTexture = this.colorAttachments[i].texture.clone({
-          width,
-          height
-        });
-        this.destroyAttachedResource(this.colorAttachments[i]);
-        this.colorAttachments[i] = resizedTexture.view;
-        this.attachResource(resizedTexture.view);
-      }
-    }
+    this.colorAttachments.forEach((colorAttachment, i) => {
+      const resizedTexture = colorAttachment.texture.clone({
+        width,
+        height
+      });
+      this.destroyAttachedResource(colorAttachment);
+      this.colorAttachments[i] = resizedTexture.view;
+      this.attachResource(resizedTexture.view);
+    });
     if (this.depthStencilAttachment) {
       const resizedTexture = this.depthStencilAttachment.texture.clone({
         width,
@@ -2704,6 +2934,18 @@ __publicField(QuerySet, "defaultProps", {
   count: void 0
 });
 
+// dist/adapter/resources/fence.js
+var _Fence = class extends Resource {
+  [Symbol.toStringTag] = "WEBGLFence";
+  constructor(device, props = {}) {
+    super(device, props, _Fence.defaultProps);
+  }
+};
+var Fence = _Fence;
+__publicField(Fence, "defaultProps", {
+  ...Resource.defaultProps
+});
+
 // dist/adapter/resources/pipeline-layout.js
 var _PipelineLayout = class extends Resource {
   get [Symbol.toStringTag]() {
@@ -2735,17 +2977,6 @@ function getScratchArray(Type, length) {
   return new Type(scratchArrayBuffer, 0, length);
 }
 
-// dist/utils/is-array.js
-function isTypedArray(value) {
-  return ArrayBuffer.isView(value) && !(value instanceof DataView);
-}
-function isNumberArray(value) {
-  if (Array.isArray(value)) {
-    return value.length === 0 || typeof value[0] === "number";
-  }
-  return isTypedArray(value);
-}
-
 // dist/portable/uniform-buffer-layout.js
 var minBufferSize = 1024;
 var UniformBufferLayout = class {
@@ -2756,63 +2987,114 @@ var UniformBufferLayout = class {
   constructor(uniformTypes, uniformSizes = {}) {
     let size = 0;
     for (const [key, uniformType] of Object.entries(uniformTypes)) {
-      const typeAndComponents = getVariableShaderTypeInfo(uniformType);
-      const { type, components } = typeAndComponents;
-      const count = components * ((uniformSizes == null ? void 0 : uniformSizes[key]) ?? 1);
-      size = alignTo(size, count);
-      const offset = size;
-      size += count;
-      this.layout[key] = { type, size: count, offset };
+      size = this._addToLayout(key, uniformType, size, uniformSizes == null ? void 0 : uniformSizes[key]);
     }
     size += (4 - size % 4) % 4;
-    const actualByteLength = size * 4;
-    this.byteLength = Math.max(actualByteLength, minBufferSize);
+    this.byteLength = Math.max(size * 4, minBufferSize);
+  }
+  /** Does this layout have a field with specified name */
+  has(name2) {
+    return Boolean(this.layout[name2]);
+  }
+  /** Get offset and size for a field with specified name */
+  get(name2) {
+    const layout = this.layout[name2];
+    return layout;
   }
   /** Get the data for the complete buffer */
   getData(uniformValues) {
-    const arrayBuffer2 = getScratchArrayBuffer(this.byteLength);
+    const buffer = getScratchArrayBuffer(this.byteLength);
     const typedArrays = {
-      i32: new Int32Array(arrayBuffer2),
-      u32: new Uint32Array(arrayBuffer2),
-      f32: new Float32Array(arrayBuffer2),
-      // TODO not implemented
-      f16: new Uint16Array(arrayBuffer2)
+      i32: new Int32Array(buffer),
+      u32: new Uint32Array(buffer),
+      f32: new Float32Array(buffer),
+      f16: new Uint16Array(buffer)
     };
     for (const [name2, value] of Object.entries(uniformValues)) {
-      const uniformLayout = this.layout[name2];
-      if (!uniformLayout) {
-        log.warn(`Supplied uniform value ${name2} not present in uniform block layout`)();
-        continue;
+      this._writeCompositeValue(typedArrays, name2, value);
+    }
+    return new Uint8Array(buffer, 0, this.byteLength);
+  }
+  // Recursively add a uniform to the layout
+  _addToLayout(name2, type, offset, count = 1) {
+    if (typeof type === "string") {
+      const info = getVariableShaderTypeInfo(type);
+      const sizeInSlots = info.components * count;
+      const alignedOffset = alignTo(offset, info.components);
+      this.layout[name2] = {
+        offset: alignedOffset,
+        size: sizeInSlots,
+        type: info.type
+      };
+      return alignedOffset + sizeInSlots;
+    }
+    if (Array.isArray(type)) {
+      const elementType = type[0];
+      const length = count > 1 ? count : type.length > 1 ? type[1] : 1;
+      let arrayOffset = alignTo(offset, 4);
+      for (let i = 0; i < length; i++) {
+        arrayOffset = this._addToLayout(`${name2}[${i}]`, elementType, arrayOffset);
       }
-      const { type, size, offset } = uniformLayout;
-      const typedArray = typedArrays[type];
-      if (size === 1) {
-        if (typeof value !== "number" && typeof value !== "boolean") {
-          log.warn(`Supplied value for single component uniform ${name2} is not a number: ${value}`)();
-          continue;
-        }
-        typedArray[offset] = Number(value);
-      } else {
-        if (!isNumberArray(value)) {
-          log.warn(`Supplied value for multi component / array uniform ${name2} is not a numeric array: ${value}`)();
-          continue;
-        }
-        typedArray.set(value, offset);
+      return arrayOffset;
+    }
+    if (typeof type === "object") {
+      let structOffset = alignTo(offset, 4);
+      for (const [memberName, memberType] of Object.entries(type)) {
+        structOffset = this._addToLayout(`${name2}.${memberName}`, memberType, structOffset);
       }
+      return structOffset;
     }
-    return new Uint8Array(arrayBuffer2, 0, this.byteLength);
+    throw new Error(`Unsupported CompositeShaderType for ${name2}`);
   }
-  /** Does this layout have a field with specified name */
-  has(name2) {
-    return Boolean(this.layout[name2]);
+  _writeCompositeValue(typedArrays, baseName, value) {
+    if (this.layout[baseName]) {
+      this._writeToBuffer(typedArrays, baseName, value);
+      return;
+    }
+    if (Array.isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        const element = value[i];
+        const indexedName = `${baseName}[${i}]`;
+        this._writeCompositeValue(typedArrays, indexedName, element);
+      }
+      return;
+    }
+    if (typeof value === "object" && value !== null) {
+      for (const [key, subValue] of Object.entries(value)) {
+        const nestedName = `${baseName}.${key}`;
+        this._writeCompositeValue(typedArrays, nestedName, subValue);
+      }
+      return;
+    }
+    log.warn(`Unsupported uniform value for ${baseName}:`, value)();
   }
-  /** Get offset and size for a field with specified name */
-  get(name2) {
+  _writeToBuffer(typedArrays, name2, value) {
     const layout = this.layout[name2];
-    return layout;
+    if (!layout) {
+      log.warn(`Uniform ${name2} not found in layout`)();
+      return;
+    }
+    const { type, size, offset } = layout;
+    const array = typedArrays[type];
+    if (size === 1) {
+      array[offset] = Number(value);
+    } else {
+      array.set(value, offset);
+    }
   }
 };
 
+// dist/utils/is-array.js
+function isTypedArray(value) {
+  return ArrayBuffer.isView(value) && !(value instanceof DataView);
+}
+function isNumberArray(value) {
+  if (Array.isArray(value)) {
+    return value.length === 0 || typeof value[0] === "number";
+  }
+  return isTypedArray(value);
+}
+
 // dist/utils/array-equal.js
 function arrayEqual(a, b, limit = 16) {
   if (a !== b) {
@@ -2999,6 +3281,44 @@ var UniformStore = class {
   }
 };
 
+// dist/shadertypes/textures/texture-layout.js
+function getTextureImageView(arrayBuffer2, memoryLayout, format, image = 0) {
+  const formatInfo = textureFormatDecoder.getInfo(format);
+  const bytesPerComponent = formatInfo.bytesPerPixel / formatInfo.components;
+  const { bytesPerImage } = memoryLayout;
+  const offset = bytesPerImage * image;
+  const totalPixels = memoryLayout.bytesPerImage / bytesPerComponent;
+  switch (format) {
+    case "rgba8unorm":
+    case "bgra8unorm":
+    case "rgba8uint":
+      return new Uint8Array(arrayBuffer2, offset, totalPixels);
+    case "r8unorm":
+      return new Uint8Array(arrayBuffer2, offset, totalPixels);
+    case "r16uint":
+    case "rgba16uint":
+      return new Uint16Array(arrayBuffer2, offset, totalPixels);
+    case "r32uint":
+    case "rgba32uint":
+      return new Uint32Array(arrayBuffer2, offset, totalPixels);
+    case "r32float":
+      return new Float32Array(arrayBuffer2, offset, totalPixels);
+    case "rgba16float":
+      return new Uint16Array(arrayBuffer2, offset, totalPixels);
+    case "rgba32float":
+      return new Float32Array(arrayBuffer2, offset, totalPixels);
+    default:
+      throw new Error(`Unsupported format: ${format}`);
+  }
+}
+function setTextureImageData(arrayBuffer2, memoryLayout, format, data, image = 0) {
+  const offset = 0;
+  const totalPixels = memoryLayout.bytesPerImage / memoryLayout.bytesPerPixel;
+  const subArray = data.subarray(0, totalPixels);
+  const typedArray = getTextureImageView(arrayBuffer2, memoryLayout, format, image);
+  typedArray.set(subArray, offset);
+}
+
 // dist/shadertypes/textures/pixel-utils.js
 function readPixel(pixelData, x, y, bitsPerChannel) {
   if (x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height) {
@@ -3009,7 +3329,7 @@ function readPixel(pixelData, x, y, bitsPerChannel) {
   let bitOffsetWithinPixel = 0;
   const channels = [];
   for (let i = 0; i < 4; i++) {
-    const bits = bitsPerChannel[i];
+    const bits = bitsPerChannel[i] ?? 0;
     if (bits <= 0) {
       channels.push(0);
     } else {
@@ -3018,14 +3338,14 @@ function readPixel(pixelData, x, y, bitsPerChannel) {
       bitOffsetWithinPixel += bits;
     }
   }
-  return [channels[0], channels[1], channels[2], channels[3]];
+  return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0, channels[3] ?? 0];
 }
 function writePixel(dataView, bitOffset, bitsPerChannel, pixel) {
   let currentBitOffset = bitOffset;
   for (let channel = 0; channel < 4; channel++) {
-    const bits = bitsPerChannel[channel];
+    const bits = bitsPerChannel[channel] ?? 0;
     const maxValue = (1 << bits) - 1;
-    const channelValue = pixel[channel] & maxValue;
+    const channelValue = (pixel[channel] ?? 0) & maxValue;
     writeBitsToDataView(dataView, currentBitOffset, bits, channelValue);
     currentBitOffset += bits;
   }