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

package/dist/dist.dev.js

@@ -64,6 +64,7 @@ var __exports__ = (() => {
     DeviceFeatures: () => DeviceFeatures,
     DeviceLimits: () => DeviceLimits,
     ExternalTexture: () => ExternalTexture,
+    Fence: () => Fence,
     Framebuffer: () => Framebuffer,
     PipelineLayout: () => PipelineLayout,
     QuerySet: () => QuerySet,
@@ -82,20 +83,26 @@ var __exports__ = (() => {
     VertexArray: () => VertexArray,
     _getTextureFormatDefinition: () => getTextureFormatDefinition,
     _getTextureFormatTable: () => getTextureFormatTable,
+    assert: () => assert2,
+    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
   });
@@ -338,7 +345,139 @@ var __exports__ = (() => {
   }
 
   // ../../node_modules/@probe.gl/env/dist/index.js
-  var VERSION = true ? "4.1.0" : "untranspiled source";
+  var VERSION = true ? "4.1.1" : "untranspiled source";
+
+  // ../../node_modules/@probe.gl/log/dist/utils/assert.js
+  function assert(condition, message) {
+    if (!condition) {
+      throw new Error(message || "Assertion failed");
+    }
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/loggers/log-utils.js
+  function normalizeLogLevel(logLevel) {
+    if (!logLevel) {
+      return 0;
+    }
+    let resolvedLevel;
+    switch (typeof logLevel) {
+      case "number":
+        resolvedLevel = logLevel;
+        break;
+      case "object":
+        resolvedLevel = logLevel.logLevel || logLevel.priority || 0;
+        break;
+      default:
+        return 0;
+    }
+    assert(Number.isFinite(resolvedLevel) && resolvedLevel >= 0);
+    return resolvedLevel;
+  }
+  function normalizeArguments(opts) {
+    const { logLevel, message } = opts;
+    opts.logLevel = normalizeLogLevel(logLevel);
+    const args = opts.args ? Array.from(opts.args) : [];
+    while (args.length && args.shift() !== message) {
+    }
+    switch (typeof logLevel) {
+      case "string":
+      case "function":
+        if (message !== void 0) {
+          args.unshift(message);
+        }
+        opts.message = logLevel;
+        break;
+      case "object":
+        Object.assign(opts, logLevel);
+        break;
+      default:
+    }
+    if (typeof opts.message === "function") {
+      opts.message = opts.message();
+    }
+    const messageType = typeof opts.message;
+    assert(messageType === "string" || messageType === "object");
+    return Object.assign(opts, { args }, opts.opts);
+  }
+
+  // ../../node_modules/@probe.gl/log/dist/loggers/base-log.js
+  var noop = () => {
+  };
+  var BaseLog = class {
+    constructor({ level = 0 } = {}) {
+      this.userData = {};
+      this._onceCache = /* @__PURE__ */ new Set();
+      this._level = level;
+    }
+    set level(newLevel) {
+      this.setLevel(newLevel);
+    }
+    get level() {
+      return this.getLevel();
+    }
+    setLevel(level) {
+      this._level = level;
+      return this;
+    }
+    getLevel() {
+      return this._level;
+    }
+    // Unconditional logging
+    warn(message, ...args) {
+      return this._log("warn", 0, message, args, { once: true });
+    }
+    error(message, ...args) {
+      return this._log("error", 0, message, args);
+    }
+    // Conditional logging
+    log(logLevel, message, ...args) {
+      return this._log("log", logLevel, message, args);
+    }
+    info(logLevel, message, ...args) {
+      return this._log("info", logLevel, message, args);
+    }
+    once(logLevel, message, ...args) {
+      return this._log("once", logLevel, message, args, { once: true });
+    }
+    _log(type, logLevel, message, args, options = {}) {
+      const normalized = normalizeArguments({
+        logLevel,
+        message,
+        args: this._buildArgs(logLevel, message, args),
+        opts: options
+      });
+      return this._createLogFunction(type, normalized, options);
+    }
+    _buildArgs(logLevel, message, args) {
+      return [logLevel, message, ...args];
+    }
+    _createLogFunction(type, normalized, options) {
+      if (!this._shouldLog(normalized.logLevel)) {
+        return noop;
+      }
+      const tag = this._getOnceTag(options.tag ?? normalized.tag ?? normalized.message);
+      if ((options.once || normalized.once) && tag !== void 0) {
+        if (this._onceCache.has(tag)) {
+          return noop;
+        }
+        this._onceCache.add(tag);
+      }
+      return this._emit(type, normalized);
+    }
+    _shouldLog(logLevel) {
+      return this.getLevel() >= normalizeLogLevel(logLevel);
+    }
+    _getOnceTag(tag) {
+      if (tag === void 0) {
+        return void 0;
+      }
+      try {
+        return typeof tag === "string" ? tag : String(tag);
+      } catch {
+        return void 0;
+      }
+    }
+  };
 
   // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
   function getStorage(type) {
@@ -457,13 +596,6 @@ var __exports__ = (() => {
     }
   }
 
-  // ../../node_modules/@probe.gl/log/dist/utils/assert.js
-  function assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || "Assertion failed");
-    }
-  }
-
   // ../../node_modules/@probe.gl/log/dist/utils/hi-res-timestamp.js
   function getHiResTimestamp2() {
     let timestamp;
@@ -478,7 +610,7 @@ var __exports__ = (() => {
     return timestamp;
   }
 
-  // ../../node_modules/@probe.gl/log/dist/log.js
+  // ../../node_modules/@probe.gl/log/dist/loggers/probe-log.js
   var originalConsole = {
     debug: isBrowser() ? console.debug || console.log : console.log,
     log: console.log,
@@ -490,12 +622,9 @@ var __exports__ = (() => {
     enabled: true,
     level: 0
   };
-  function noop() {
-  }
-  var cache = {};
-  var ONCE = { once: true };
-  var Log = class {
+  var ProbeLog = class extends BaseLog {
     constructor({ id } = { id: "" }) {
+      super({ level: 0 });
       this.VERSION = VERSION;
       this._startTs = getHiResTimestamp2();
       this._deltaTs = getHiResTimestamp2();
@@ -503,22 +632,16 @@ var __exports__ = (() => {
       this.LOG_THROTTLE_TIMEOUT = 0;
       this.id = id;
       this.userData = {};
-      this._storage = new LocalStorage(`__probe-${this.id}__`, DEFAULT_LOG_CONFIGURATION);
+      this._storage = new LocalStorage(`__probe-${this.id}__`, { [this.id]: DEFAULT_LOG_CONFIGURATION });
       this.timeStamp(`${this.id} started`);
       autobind(this);
       Object.seal(this);
     }
-    set level(newLevel) {
-      this.setLevel(newLevel);
-    }
-    get level() {
-      return this.getLevel();
-    }
     isEnabled() {
-      return this._storage.config.enabled;
+      return this._getConfiguration().enabled;
     }
     getLevel() {
-      return this._storage.config.level;
+      return this._getConfiguration().level;
     }
     /** @return milliseconds, with fractions */
     getTotal() {
@@ -542,20 +665,20 @@ var __exports__ = (() => {
     }
     // Configure
     enable(enabled = true) {
-      this._storage.setConfiguration({ enabled });
+      this._updateConfiguration({ enabled });
       return this;
     }
     setLevel(level) {
-      this._storage.setConfiguration({ level });
+      this._updateConfiguration({ level });
       return this;
     }
     /** return the current status of the setting */
     get(setting) {
-      return this._storage.config[setting];
+      return this._getConfiguration()[setting];
     }
     // update the status of the setting
     set(setting, value) {
-      this._storage.setConfiguration({ [setting]: value });
+      this._updateConfiguration({ [setting]: value });
     }
     /** Logs the current settings as a table */
     settings() {
@@ -571,11 +694,16 @@ var __exports__ = (() => {
         throw new Error(message || "Assertion failed");
       }
     }
-    warn(message) {
-      return this._getLogFunction(0, message, originalConsole.warn, arguments, ONCE);
+    warn(message, ...args) {
+      return this._log("warn", 0, message, args, {
+        method: originalConsole.warn,
+        once: true
+      });
     }
-    error(message) {
-      return this._getLogFunction(0, message, originalConsole.error, arguments);
+    error(message, ...args) {
+      return this._log("error", 0, message, args, {
+        method: originalConsole.error
+      });
     }
     /** Print a deprecation warning */
     deprecated(oldUsage, newUsage) {
@@ -585,50 +713,63 @@ var __exports__ = (() => {
     removed(oldUsage, newUsage) {
       return this.error(`\`${oldUsage}\` has been removed. Use \`${newUsage}\` instead`);
     }
-    probe(logLevel, message) {
-      return this._getLogFunction(logLevel, message, originalConsole.log, arguments, {
+    probe(logLevel, message, ...args) {
+      return this._log("log", logLevel, message, args, {
+        method: originalConsole.log,
         time: true,
         once: true
       });
     }
-    log(logLevel, message) {
-      return this._getLogFunction(logLevel, message, originalConsole.debug, arguments);
+    log(logLevel, message, ...args) {
+      return this._log("log", logLevel, message, args, {
+        method: originalConsole.debug
+      });
     }
-    info(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.info, arguments);
+    info(logLevel, message, ...args) {
+      return this._log("info", logLevel, message, args, { method: console.info });
     }
-    once(logLevel, message) {
-      return this._getLogFunction(logLevel, message, originalConsole.debug || originalConsole.info, arguments, ONCE);
+    once(logLevel, message, ...args) {
+      return this._log("once", logLevel, message, args, {
+        method: originalConsole.debug || originalConsole.info,
+        once: true
+      });
     }
     /** Logs an object as a table */
     table(logLevel, table, columns) {
       if (table) {
-        return this._getLogFunction(logLevel, table, console.table || noop, columns && [columns], {
+        return this._log("table", logLevel, table, columns && [columns] || [], {
+          method: console.table || noop,
           tag: getTableHeader(table)
         });
       }
       return noop;
     }
     time(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.time ? console.time : console.info);
+      return this._log("time", logLevel, message, [], {
+        method: console.time ? console.time : console.info
+      });
     }
     timeEnd(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.timeEnd ? console.timeEnd : console.info);
+      return this._log("time", logLevel, message, [], {
+        method: console.timeEnd ? console.timeEnd : console.info
+      });
     }
     timeStamp(logLevel, message) {
-      return this._getLogFunction(logLevel, message, console.timeStamp || noop);
+      return this._log("time", logLevel, message, [], {
+        method: console.timeStamp || noop
+      });
     }
     group(logLevel, message, opts = { collapsed: false }) {
-      const options = normalizeArguments({ logLevel, message, opts });
-      const { collapsed } = opts;
-      options.method = (collapsed ? console.groupCollapsed : console.group) || console.info;
-      return this._getLogFunction(options);
+      const method = (opts.collapsed ? console.groupCollapsed : console.group) || console.info;
+      return this._log("group", logLevel, message, [], { method });
     }
     groupCollapsed(logLevel, message, opts = {}) {
       return this.group(logLevel, message, Object.assign({}, opts, { collapsed: true }));
     }
     groupEnd(logLevel) {
-      return this._getLogFunction(logLevel, "", console.groupEnd || noop);
+      return this._log("groupEnd", logLevel, "", [], {
+        method: console.groupEnd || noop
+      });
     }
     // EXPERIMENTAL
     withGroup(logLevel, message, func) {
@@ -644,78 +785,34 @@ var __exports__ = (() => {
         console.trace();
       }
     }
-    // PRIVATE METHODS
-    /** Deduces log level from a variety of arguments */
     _shouldLog(logLevel) {
-      return this.isEnabled() && this.getLevel() >= normalizeLogLevel(logLevel);
-    }
-    _getLogFunction(logLevel, message, method, args, opts) {
-      if (this._shouldLog(logLevel)) {
-        opts = normalizeArguments({ logLevel, message, args, opts });
-        method = method || opts.method;
-        assert(method);
-        opts.total = this.getTotal();
-        opts.delta = this.getDelta();
-        this._deltaTs = getHiResTimestamp2();
-        const tag = opts.tag || opts.message;
-        if (opts.once && tag) {
-          if (!cache[tag]) {
-            cache[tag] = getHiResTimestamp2();
-          } else {
-            return noop;
-          }
-        }
-        message = decorateMessage(this.id, opts.message, opts);
-        return method.bind(console, message, ...opts.args);
-      }
-      return noop;
-    }
-  };
-  Log.VERSION = VERSION;
-  function normalizeLogLevel(logLevel) {
-    if (!logLevel) {
-      return 0;
-    }
-    let resolvedLevel;
-    switch (typeof logLevel) {
-      case "number":
-        resolvedLevel = logLevel;
-        break;
-      case "object":
-        resolvedLevel = logLevel.logLevel || logLevel.priority || 0;
-        break;
-      default:
-        return 0;
+      return this.isEnabled() && super._shouldLog(logLevel);
     }
-    assert(Number.isFinite(resolvedLevel) && resolvedLevel >= 0);
-    return resolvedLevel;
-  }
-  function normalizeArguments(opts) {
-    const { logLevel, message } = opts;
-    opts.logLevel = normalizeLogLevel(logLevel);
-    const args = opts.args ? Array.from(opts.args) : [];
-    while (args.length && args.shift() !== message) {
+    _emit(_type, normalized) {
+      const method = normalized.method;
+      assert(method);
+      normalized.total = this.getTotal();
+      normalized.delta = this.getDelta();
+      this._deltaTs = getHiResTimestamp2();
+      const message = decorateMessage(this.id, normalized.message, normalized);
+      return method.bind(console, message, ...normalized.args);
     }
-    switch (typeof logLevel) {
-      case "string":
-      case "function":
-        if (message !== void 0) {
-          args.unshift(message);
-        }
-        opts.message = logLevel;
-        break;
-      case "object":
-        Object.assign(opts, logLevel);
-        break;
-      default:
+    _getConfiguration() {
+      if (!this._storage.config[this.id]) {
+        this._updateConfiguration(DEFAULT_LOG_CONFIGURATION);
+      }
+      return this._storage.config[this.id];
     }
-    if (typeof opts.message === "function") {
-      opts.message = opts.message();
+    _updateConfiguration(configuration) {
+      const currentConfiguration = this._storage.config[this.id] || {
+        ...DEFAULT_LOG_CONFIGURATION
+      };
+      this._storage.setConfiguration({
+        [this.id]: { ...currentConfiguration, ...configuration }
+      });
     }
-    const messageType = typeof opts.message;
-    assert(messageType === "string" || messageType === "object");
-    return Object.assign(opts, { args }, opts.opts);
-  }
+  };
+  ProbeLog.VERSION = VERSION;
   function decorateMessage(id, message, opts) {
     if (typeof message === "string") {
       const time = opts.time ? leftPad(formatTime(opts.total)) : "";
@@ -737,10 +834,10 @@ var __exports__ = (() => {
   globalThis.probe = {};
 
   // ../../node_modules/@probe.gl/log/dist/index.js
-  var dist_default = new Log({ id: "@probe.gl/log" });
+  var dist_default = new ProbeLog({ id: "@probe.gl/log" });
 
   // ../core/src/utils/log.ts
-  var log = new Log({ id: "luma.gl" });
+  var log = new ProbeLog({ id: "luma.gl" });
 
   // ../core/src/utils/uid.ts
   var uidCounters = {};
@@ -757,8 +854,11 @@ var __exports__ = (() => {
     }
     /** 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;
@@ -965,10 +1065,11 @@ var __exports__ = (() => {
 
   // ../core/src/shadertypes/data-types/decode-data-types.ts
   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,
@@ -1284,6 +1385,9 @@ var __exports__ = (() => {
   };
 
   // ../core/src/shadertypes/textures/texture-format-decoder.ts
+  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",
@@ -1299,49 +1403,73 @@ var __exports__ = (() => {
     "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?.signed;
-      const isInteger = formatInfo?.integer;
-      const isWebGLSpecific = 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?.signed;
+    const isInteger = formatInfo?.integer;
+    const isWebGLSpecific = formatInfo?.webgl;
+    formatCapabilities.render &&= !isSigned;
+    formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
+    return formatCapabilities;
+  }
   function getTextureFormatInfo(format) {
     let formatInfo = getTextureFormatInfoUsingTable(format);
     if (textureFormatDecoder.isCompressed(format)) {
@@ -1362,7 +1490,7 @@ var __exports__ = (() => {
       const dataType = `${type}${length}`;
       const decodedType = getDataTypeInfo(dataType);
       const bits = decodedType.byteLength * 8;
-      const components = channels.length;
+      const components = channels?.length ?? 1;
       const bitsPerChannel = [
         bits,
         components >= 2 ? bits : 0,
@@ -1379,7 +1507,7 @@ var __exports__ = (() => {
         signed: decodedType.signed,
         normalized: decodedType.normalized,
         bitsPerChannel,
-        bytesPerPixel: decodedType.byteLength * channels.length,
+        bytesPerPixel: decodedType.byteLength * components,
         packed: formatInfo.packed,
         srgb: formatInfo.srgb
       };
@@ -1495,7 +1623,7 @@ var __exports__ = (() => {
     /** 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 };
@@ -1592,7 +1720,13 @@ var __exports__ = (() => {
     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 () => {
       };
@@ -1614,6 +1748,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);
@@ -1657,6 +1795,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) {
@@ -1933,6 +2077,19 @@ or create a device with the 'debug: true' prop.`;
     return { promise, resolve, reject };
   }
 
+  // ../core/src/utils/assert.ts
+  function assert2(condition, message) {
+    if (!condition) {
+      const error = new Error(message ?? "luma.gl assertion failed.");
+      Error.captureStackTrace?.(error, assert2);
+      throw error;
+    }
+  }
+  function assertDefined(value, message) {
+    assert2(value, message);
+    return value;
+  }
+
   // ../core/src/adapter/canvas-context.ts
   var _CanvasContext = class {
     static isHTMLCanvas(canvas) {
@@ -1968,11 +2125,19 @@ or create a device with the 'debug: true' prop.`;
     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})`;
     }
@@ -2020,14 +2185,23 @@ or create a device with the 'debug: true' prop.`;
         } 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;
+      if (!this.destroyed) {
+        this.destroyed = true;
+        if (this._observeDevicePixelRatioTimeout) {
+          clearTimeout(this._observeDevicePixelRatioTimeout);
+          this._observeDevicePixelRatioTimeout = null;
+        }
+        this.device = null;
+        this._resizeObserver?.disconnect();
+        this._intersectionObserver?.disconnect();
+      }
     }
     setProps(props) {
       if ("useDevicePixels" in props) {
@@ -2036,6 +2210,11 @@ or create a device with the 'debug: true' prop.`;
       }
       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
@@ -2065,12 +2244,21 @@ or create a device with the 'debug: true' prop.`;
       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
@@ -2125,6 +2313,9 @@ or create a device with the 'debug: true' prop.`;
     }
     /** reacts to an observed intersection */
     _handleIntersection(entries) {
+      if (this.destroyed) {
+        return;
+      }
       const entry = entries.find((entry_) => entry_.target === this.canvas);
       if (!entry) {
         return;
@@ -2141,21 +2332,26 @@ or create a device with the 'debug: true' prop.`;
      * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
      */
     _handleResize(entries) {
+      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(entry.contentBoxSize?.[0]);
+      this.cssWidth = contentBoxSize.inlineSize;
+      this.cssHeight = contentBoxSize.blockSize;
       const oldPixelSize = this.getDevicePixelSize();
-      const devicePixelWidth = entry.devicePixelContentBoxSize?.[0].inlineSize || entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-      const devicePixelHeight = entry.devicePixelContentBoxSize?.[0].blockSize || entry.contentBoxSize[0].blockSize * devicePixelRatio;
+      const devicePixelWidth = entry.devicePixelContentBoxSize?.[0]?.inlineSize || contentBoxSize.inlineSize * devicePixelRatio;
+      const devicePixelHeight = entry.devicePixelContentBoxSize?.[0]?.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") {
@@ -2166,18 +2362,32 @@ or create a device with the 'debug: true' prop.`;
         } 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() {
+      if (this.destroyed) {
+        return;
+      }
       const oldRatio = this.devicePixelRatio;
       this.devicePixelRatio = window.devicePixelRatio;
       this.updatePosition();
-      this.device.props.onDevicePixelRatioChange(this, { oldRatio });
+      this.device.props.onDevicePixelRatioChange?.(this, { oldRatio });
       matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener(
         "change",
         () => this._observeDevicePixelRatio(),
@@ -2200,6 +2410,9 @@ or create a device with the 'debug: true' prop.`;
      * if called before browser has finished a reflow. Should not be the case here.
      */
     updatePosition() {
+      if (this.destroyed) {
+        return;
+      }
       const newRect = this.htmlCanvas?.getBoundingClientRect();
       if (newRect) {
         const position = [newRect.left, newRect.top];
@@ -2347,7 +2560,13 @@ or create a device with the 'debug: true' prop.`;
     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";
@@ -2356,7 +2575,7 @@ or create a device with the 'debug: true' prop.`;
       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;
@@ -2366,6 +2585,9 @@ or create a device with the 'debug: true' prop.`;
       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);
@@ -2376,17 +2598,14 @@ or create a device with the 'debug: true' prop.`;
           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.`
+              `${this} created with undefined width or height. This is deprecated. Use DynamicTexture instead.`
             )();
           }
         }
       }
+      this.byteAlignment = 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.
@@ -2395,6 +2614,79 @@ or create a device with the 'debug: true' prop.`;
     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 };
@@ -2407,7 +2699,6 @@ or create a device with the 'debug: true' prop.`;
       }
       return newProps;
     }
-    // HELPERS
     /** Initialize texture with supplied props */
     // eslint-disable-next-line max-statements
     _initializeData(data) {
@@ -2458,6 +2749,20 @@ or create a device with the 'debug: true' prop.`;
       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 */
@@ -2474,13 +2779,12 @@ or create a device with the 'debug: true' prop.`;
   __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,
@@ -2517,6 +2821,16 @@ or create a device with the 'debug: true' prop.`;
     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"
+  });
 
   // ../core/src/adapter/resources/texture-view.ts
   var _TextureView = class extends Resource {
@@ -2563,24 +2877,32 @@ or create a device with the 'debug: true' prop.`;
     const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
     switch (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":
@@ -2602,8 +2924,8 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
 
 `;
     }
-    const color = message.type === "error" ? "red" : "#8B4000";
-    return 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?.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 = "";
@@ -2689,29 +3011,34 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       }
       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");
-      errors[0]?.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?.scrollIntoView();
+      container.querySelector("button#close").onclick = () => {
+        container.remove();
+      };
+      container.querySelector("button#copy").onclick = () => {
+        navigator.clipboard.writeText(this.source);
       };
     }
   };
@@ -2731,7 +3058,7 @@ ${htmlLog}
   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?.[1] ?? defaultName;
   }
 
   // ../core/src/adapter/resources/framebuffer.ts
@@ -2757,7 +3084,12 @@ ${htmlLog}
         (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;
@@ -2832,17 +3164,15 @@ ${htmlLog}
      * 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,
@@ -3353,6 +3683,18 @@ ${htmlLog}
     count: void 0
   });
 
+  // ../core/src/adapter/resources/fence.ts
+  var _Fence = class extends Resource {
+    [Symbol.toStringTag] = "WEBGLFence";
+    constructor(device, props = {}) {
+      super(device, props, _Fence.defaultProps);
+    }
+  };
+  var Fence = _Fence;
+  __publicField(Fence, "defaultProps", {
+    ...Resource.defaultProps
+  });
+
   // ../core/src/adapter/resources/pipeline-layout.ts
   var _PipelineLayout = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -3384,17 +3726,6 @@ ${htmlLog}
     return new Type(scratchArrayBuffer, 0, length);
   }
 
-  // ../core/src/utils/is-array.ts
-  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);
-  }
-
   // ../core/src/portable/uniform-buffer-layout.ts
   var minBufferSize = 1024;
   var UniformBufferLayout = class {
@@ -3405,67 +3736,114 @@ ${htmlLog}
     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?.[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?.[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);
+      }
     }
   };
 
+  // ../core/src/utils/is-array.ts
+  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);
+  }
+
   // ../core/src/utils/array-equal.ts
   function arrayEqual(a, b, limit = 16) {
     if (a !== b) {
@@ -3657,6 +4035,44 @@ ${htmlLog}
     }
   };
 
+  // ../core/src/shadertypes/textures/texture-layout.ts
+  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);
+  }
+
   // ../core/src/shadertypes/textures/pixel-utils.ts
   function readPixel(pixelData, x, y, bitsPerChannel) {
     if (x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height) {
@@ -3667,7 +4083,7 @@ ${htmlLog}
     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 {
@@ -3676,14 +4092,14 @@ ${htmlLog}
         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;
     }