@luma.gl/effects 9.1.9 → 9.2.0-alpha.2

package/dist/dist.dev.js

@@ -73,62 +73,33 @@ var __exports__ = (() => {
     Sampler: () => Sampler,
     Shader: () => Shader,
     Texture: () => Texture,
+    TextureFormatDecoder: () => TextureFormatDecoder,
     TextureView: () => TextureView,
     TransformFeedback: () => TransformFeedback,
     UniformBlock: () => UniformBlock,
     UniformBufferLayout: () => UniformBufferLayout,
     UniformStore: () => UniformStore,
     VertexArray: () => VertexArray,
-    _BufferLayoutHelper: () => BufferLayoutHelper,
     _getTextureFormatDefinition: () => getTextureFormatDefinition,
     _getTextureFormatTable: () => getTextureFormatTable,
-    decodeShaderAttributeType: () => decodeShaderAttributeType,
-    decodeShaderUniformType: () => decodeShaderUniformType,
-    decodeTextureFormat: () => decodeTextureFormat,
-    decodeVertexFormat: () => decodeVertexFormat,
     getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
-    getDataTypeFromTypedArray: () => getDataTypeFromTypedArray,
+    getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
+    getDataType: () => getDataType,
+    getDataTypeInfo: () => getDataTypeInfo,
+    getNormalizedDataType: () => getNormalizedDataType,
     getScratchArray: () => getScratchArray,
-    getTextureFormatCapabilities: () => getTextureFormatCapabilities,
-    getTypedArrayFromDataType: () => getTypedArrayFromDataType,
+    getTypedArrayConstructor: () => getTypedArrayConstructor,
+    getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
     getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
+    getVertexFormatInfo: () => getVertexFormatInfo,
     log: () => log,
     luma: () => luma,
-    sortedBufferLayoutByShaderSourceLocations: () => sortedBufferLayoutByShaderSourceLocations
+    makeVertexFormat: () => makeVertexFormat,
+    readPixel: () => readPixel,
+    textureFormatDecoder: () => textureFormatDecoder,
+    writePixel: () => writePixel
   });
 
-  // ../../node_modules/@probe.gl/env/dist/lib/globals.js
-  var window_ = globalThis;
-  var document_ = globalThis.document || {};
-  var process_ = globalThis.process || {};
-  var console_ = globalThis.console;
-  var navigator_ = globalThis.navigator || {};
-
-  // ../../node_modules/@probe.gl/env/dist/lib/is-electron.js
-  function isElectron(mockUserAgent) {
-    if (typeof window !== "undefined" && window.process?.type === "renderer") {
-      return true;
-    }
-    if (typeof process !== "undefined" && Boolean(process.versions?.["electron"])) {
-      return true;
-    }
-    const realUserAgent = typeof navigator !== "undefined" && navigator.userAgent;
-    const userAgent = mockUserAgent || realUserAgent;
-    return Boolean(userAgent && userAgent.indexOf("Electron") >= 0);
-  }
-
-  // ../../node_modules/@probe.gl/env/dist/lib/is-browser.js
-  function isBrowser() {
-    const isNode = (
-      // @ts-expect-error
-      typeof process === "object" && String(process) === "[object process]" && !process?.browser
-    );
-    return !isNode || isElectron();
-  }
-
-  // ../../node_modules/@probe.gl/env/dist/index.js
-  var VERSION = true ? "4.0.7" : "untranspiled source";
-
   // ../../node_modules/@probe.gl/stats/dist/utils/hi-res-timestamp.js
   function getHiResTimestamp() {
     let timestamp;
@@ -337,6 +308,38 @@ var __exports__ = (() => {
   };
   var lumaStats = new StatsManager();
 
+  // ../../node_modules/@probe.gl/env/dist/lib/globals.js
+  var window_ = globalThis;
+  var document_ = globalThis.document || {};
+  var process_ = globalThis.process || {};
+  var console_ = globalThis.console;
+  var navigator_ = globalThis.navigator || {};
+
+  // ../../node_modules/@probe.gl/env/dist/lib/is-electron.js
+  function isElectron(mockUserAgent) {
+    if (typeof window !== "undefined" && window.process?.type === "renderer") {
+      return true;
+    }
+    if (typeof process !== "undefined" && Boolean(process.versions?.["electron"])) {
+      return true;
+    }
+    const realUserAgent = typeof navigator !== "undefined" && navigator.userAgent;
+    const userAgent = mockUserAgent || realUserAgent;
+    return Boolean(userAgent && userAgent.indexOf("Electron") >= 0);
+  }
+
+  // ../../node_modules/@probe.gl/env/dist/lib/is-browser.js
+  function isBrowser() {
+    const isNode = (
+      // @ts-expect-error
+      typeof process === "object" && String(process) === "[object process]" && !process?.browser
+    );
+    return !isNode || isElectron();
+  }
+
+  // ../../node_modules/@probe.gl/env/dist/index.js
+  var VERSION = true ? "4.1.0" : "untranspiled source";
+
   // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
   function getStorage(type) {
     try {
@@ -910,10 +913,6 @@ var __exports__ = (() => {
     clone(props) {
       return this.device.createBuffer({ ...this.props, ...props });
     }
-    /** Read data synchronously. @note WebGL2 only */
-    readSyncWebGL(byteOffset, byteLength) {
-      throw new Error("not implemented");
-    }
     /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
     debugData = new ArrayBuffer(0);
     /** This doesn't handle partial non-zero offset updates correctly */
@@ -933,21 +932,6 @@ var __exports__ = (() => {
     }
   };
   var Buffer2 = _Buffer;
-  __publicField(Buffer2, "defaultProps", {
-    ...Resource.defaultProps,
-    usage: 0,
-    // Buffer.COPY_DST | Buffer.COPY_SRC
-    byteLength: 0,
-    byteOffset: 0,
-    data: null,
-    indexType: "uint16",
-    mappedAtCreation: false
-  });
-  // Usage Flags
-  __publicField(Buffer2, "MAP_READ", 1);
-  __publicField(Buffer2, "MAP_WRITE", 2);
-  __publicField(Buffer2, "COPY_SRC", 4);
-  __publicField(Buffer2, "COPY_DST", 8);
   /** Index buffer */
   __publicField(Buffer2, "INDEX", 16);
   /** Vertex buffer */
@@ -958,55 +942,176 @@ var __exports__ = (() => {
   __publicField(Buffer2, "STORAGE", 128);
   __publicField(Buffer2, "INDIRECT", 256);
   __publicField(Buffer2, "QUERY_RESOLVE", 512);
+  // Usage Flags
+  __publicField(Buffer2, "MAP_READ", 1);
+  __publicField(Buffer2, "MAP_WRITE", 2);
+  __publicField(Buffer2, "COPY_SRC", 4);
+  __publicField(Buffer2, "COPY_DST", 8);
   // PROTECTED METHODS (INTENDED FOR USE BY OTHER FRAMEWORK CODE ONLY)
   /** Max amount of debug data saved. Two vec4's */
   __publicField(Buffer2, "DEBUG_DATA_MAX_LENGTH", 32);
+  __publicField(Buffer2, "defaultProps", {
+    ...Resource.defaultProps,
+    usage: 0,
+    // Buffer.COPY_DST | Buffer.COPY_SRC
+    byteLength: 0,
+    byteOffset: 0,
+    data: null,
+    indexType: "uint16",
+    onMapped: void 0
+  });
 
-  // ../core/src/gpu-type-utils/decode-data-type.ts
-  function decodeVertexType(type) {
-    const dataType = TYPE_MAP[type];
-    const bytes = getDataTypeBytes(dataType);
+  // ../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");
     return {
-      dataType: TYPE_MAP[type],
-      byteLength: bytes,
+      signedType,
+      primitiveType,
+      byteLength,
+      normalized,
       integer,
-      signed,
-      normalized
+      signed
     };
   }
-  function getDataTypeBytes(type) {
-    const bytes = TYPE_SIZES[type];
-    return bytes;
-  }
-  var TYPE_MAP = {
-    uint8: "uint8",
-    sint8: "sint8",
-    unorm8: "uint8",
-    snorm8: "sint8",
-    uint16: "uint16",
-    sint16: "sint16",
-    unorm16: "uint16",
-    snorm16: "sint16",
-    float16: "float16",
-    float32: "float32",
-    uint32: "uint32",
-    sint32: "sint32"
-  };
-  var TYPE_SIZES = {
-    uint8: 1,
-    sint8: 1,
-    uint16: 2,
-    sint16: 2,
-    float16: 2,
-    float32: 4,
-    uint32: 4,
-    sint32: 4
+  function getNormalizedDataType(signedDataType) {
+    const dataType = signedDataType;
+    switch (dataType) {
+      case "uint8":
+        return "unorm8";
+      case "sint8":
+        return "snorm8";
+      case "uint16":
+        return "unorm16";
+      case "sint16":
+        return "snorm16";
+      default:
+        return dataType;
+    }
+  }
+  function alignTo(size, count) {
+    switch (count) {
+      case 1:
+        return size;
+      case 2:
+        return size + size % 2;
+      default:
+        return size + (4 - size % 4) % 4;
+    }
+  }
+  function getDataType(arrayOrType) {
+    const Constructor = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+    if (Constructor === Uint8ClampedArray) {
+      return "uint8";
+    }
+    const info = Object.values(NORMALIZED_TYPE_MAP).find((entry) => Constructor === entry[4]);
+    if (!info) {
+      throw new Error(Constructor.name);
+    }
+    return info[0];
+  }
+  function getTypedArrayConstructor(type) {
+    const [, , , , Constructor] = NORMALIZED_TYPE_MAP[type];
+    return Constructor;
+  }
+  var NORMALIZED_TYPE_MAP = {
+    uint8: ["uint8", "u32", 1, false, Uint8Array],
+    sint8: ["sint8", "i32", 1, false, Int8Array],
+    unorm8: ["uint8", "f32", 1, true, Uint8Array],
+    snorm8: ["sint8", "f32", 1, true, Int8Array],
+    uint16: ["uint16", "u32", 2, false, Uint16Array],
+    sint16: ["sint16", "i32", 2, false, Int16Array],
+    unorm16: ["uint16", "u32", 2, true, Uint16Array],
+    snorm16: ["sint16", "i32", 2, true, Int16Array],
+    float16: ["float16", "f16", 2, false, Uint16Array],
+    float32: ["float32", "f32", 4, false, Float32Array],
+    uint32: ["uint32", "u32", 4, false, Uint32Array],
+    sint32: ["sint32", "i32", 4, false, Int32Array]
   };
 
-  // ../core/src/gpu-type-utils/texture-format-table.ts
+  // ../core/src/shadertypes/vertex-arrays/decode-vertex-format.ts
+  function getVertexFormatInfo(format) {
+    let webglOnly;
+    if (format.endsWith("-webgl")) {
+      format.replace("-webgl", "");
+      webglOnly = true;
+    }
+    const [type_, count] = format.split("x");
+    const type = type_;
+    const components = count ? parseInt(count) : 1;
+    const decodedType = getDataTypeInfo(type);
+    const result = {
+      type,
+      components,
+      byteLength: decodedType.byteLength * components,
+      integer: decodedType.integer,
+      signed: decodedType.signed,
+      normalized: decodedType.normalized
+    };
+    if (webglOnly) {
+      result.webglOnly = true;
+    }
+    return result;
+  }
+  function makeVertexFormat(signedDataType, components, normalized) {
+    const dataType = normalized ? getNormalizedDataType(signedDataType) : signedDataType;
+    switch (dataType) {
+      case "unorm8":
+        if (components === 1) {
+          return "unorm8";
+        }
+        if (components === 3) {
+          return "unorm8x3-webgl";
+        }
+        return `${dataType}x${components}`;
+      case "snorm8":
+      case "uint8":
+      case "sint8":
+      case "uint16":
+      case "sint16":
+      case "unorm16":
+      case "snorm16":
+      case "float16":
+        if (components === 1 || components === 3) {
+          throw new Error(`size: ${components}`);
+        }
+        return `${dataType}x${components}`;
+      default:
+        return components === 1 ? dataType : `${dataType}x${components}`;
+    }
+  }
+  function getVertexFormatFromAttribute(typedArray, size, normalized) {
+    if (!size || size > 4) {
+      throw new Error(`size ${size}`);
+    }
+    const components = size;
+    const signedDataType = getDataType(typedArray);
+    return makeVertexFormat(signedDataType, components, normalized);
+  }
+  function getCompatibleVertexFormat(opts) {
+    let vertexType;
+    switch (opts.primitiveType) {
+      case "f32":
+        vertexType = "float32";
+        break;
+      case "i32":
+        vertexType = "sint32";
+        break;
+      case "u32":
+        vertexType = "uint32";
+        break;
+      case "f16":
+        return opts.components <= 2 ? "float16x2" : "float16x4";
+    }
+    if (opts.components === 1) {
+      return vertexType;
+    }
+    return `${vertexType}x${opts.components}`;
+  }
+
+  // ../core/src/shadertypes/textures/texture-format-table.ts
   var texture_compression_bc = "texture-compression-bc";
   var texture_compression_astc = "texture-compression-astc";
   var texture_compression_etc2 = "texture-compression-etc2";
@@ -1031,73 +1136,65 @@ var __exports__ = (() => {
   function getTextureFormatTable() {
     return TEXTURE_FORMAT_TABLE;
   }
-  var TEXTURE_FORMAT_TABLE = {
+  var TEXTURE_FORMAT_COLOR_DEPTH_TABLE = {
     // 8-bit formats
     "r8unorm": {},
-    "r8snorm": { render: snorm8_renderable },
-    "r8uint": {},
-    "r8sint": {},
-    // 16-bit formats
     "rg8unorm": {},
-    "rg8snorm": { render: snorm8_renderable },
-    "rg8uint": {},
-    "rg8sint": {},
-    "r16uint": {},
-    "r16sint": {},
-    "r16float": { render: float16_renderable, filter: "float16-filterable-webgl" },
-    "r16unorm-webgl": { f: norm16_renderable },
-    "r16snorm-webgl": { f: snorm16_renderable },
-    // Packed 16-bit formats
-    "rgba4unorm-webgl": { channels: "rgba", bitsPerChannel: [4, 4, 4, 4], packed: true },
-    "rgb565unorm-webgl": { channels: "rgb", bitsPerChannel: [5, 6, 5, 0], packed: true },
-    "rgb5a1unorm-webgl": { channels: "rgba", bitsPerChannel: [5, 5, 5, 1], packed: true },
-    // 24-bit formats
     "rgb8unorm-webgl": {},
-    "rgb8snorm-webgl": {},
-    // 32-bit formats  
     "rgba8unorm": {},
     "rgba8unorm-srgb": {},
+    "r8snorm": { render: snorm8_renderable },
+    "rg8snorm": { render: snorm8_renderable },
+    "rgb8snorm-webgl": {},
     "rgba8snorm": { render: snorm8_renderable },
+    "r8uint": {},
+    "rg8uint": {},
     "rgba8uint": {},
+    "r8sint": {},
+    "rg8sint": {},
     "rgba8sint": {},
-    // 32-bit, reverse colors, webgpu only
     "bgra8unorm": {},
     "bgra8unorm-srgb": {},
+    "r16unorm": { f: norm16_renderable },
+    "rg16unorm": { render: norm16_renderable },
+    "rgb16unorm-webgl": { f: norm16_renderable },
+    // rgb not renderable
+    "rgba16unorm": { render: norm16_renderable },
+    "r16snorm": { f: snorm16_renderable },
+    "rg16snorm": { render: snorm16_renderable },
+    "rgb16snorm-webgl": { f: norm16_renderable },
+    // rgb not renderable
+    "rgba16snorm": { render: snorm16_renderable },
+    "r16uint": {},
     "rg16uint": {},
+    "rgba16uint": {},
+    "r16sint": {},
     "rg16sint": {},
+    "rgba16sint": {},
+    "r16float": { render: float16_renderable, filter: "float16-filterable-webgl" },
     "rg16float": { render: float16_renderable, filter: float16_filterable },
-    "rg16unorm-webgl": { render: norm16_renderable },
-    "rg16snorm-webgl": { render: snorm16_renderable },
+    "rgba16float": { render: float16_renderable, filter: float16_filterable },
     "r32uint": {},
+    "rg32uint": {},
+    "rgba32uint": {},
     "r32sint": {},
+    "rg32sint": {},
+    "rgba32sint": {},
     "r32float": { render: float32_renderable, filter: float32_filterable },
+    "rg32float": { render: false, filter: float32_filterable },
+    "rgb32float-webgl": { render: float32_renderable, filter: float32_filterable },
+    "rgba32float": { render: float32_renderable, filter: float32_filterable },
+    // Packed 16-bit formats
+    "rgba4unorm-webgl": { channels: "rgba", bitsPerChannel: [4, 4, 4, 4], packed: true },
+    "rgb565unorm-webgl": { channels: "rgb", bitsPerChannel: [5, 6, 5, 0], packed: true },
+    "rgb5a1unorm-webgl": { channels: "rgba", bitsPerChannel: [5, 5, 5, 1], packed: true },
     // Packed 32 bit formats
     "rgb9e5ufloat": { channels: "rgb", packed: true, render: rgb9e5ufloat_renderable },
     // , filter: true},
     "rg11b10ufloat": { channels: "rgb", bitsPerChannel: [11, 11, 10, 0], packed: true, p: 1, render: float32_renderable },
     "rgb10a2unorm": { channels: "rgba", bitsPerChannel: [10, 10, 10, 2], packed: true, p: 1 },
-    "rgb10a2uint-webgl": { channels: "rgba", bitsPerChannel: [10, 10, 10, 2], packed: true, p: 1, wgpu: false },
-    // 48-bit formats
-    "rgb16unorm-webgl": { f: norm16_renderable },
-    // rgb not renderable
-    "rgb16snorm-webgl": { f: norm16_renderable },
-    // rgb not renderable
-    // 64-bit formats
-    "rg32uint": {},
-    "rg32sint": {},
-    "rg32float": { render: false, filter: float32_filterable },
-    "rgba16uint": {},
-    "rgba16sint": {},
-    "rgba16float": { render: float16_renderable, filter: float16_filterable },
-    "rgba16unorm-webgl": { render: norm16_renderable },
-    "rgba16snorm-webgl": { render: snorm16_renderable },
-    // 96-bit formats (deprecated!)
-    "rgb32float-webgl": { render: float32_renderable, filter: float32_filterable },
-    // 128-bit formats
-    "rgba32uint": {},
-    "rgba32sint": {},
-    "rgba32float": { render: float32_renderable, filter: float32_filterable },
-    // Depth/stencil
+    "rgb10a2uint": { channels: "rgba", bitsPerChannel: [10, 10, 10, 2], packed: true, p: 1 },
+    // Depth/stencil Formats
     // Depth and stencil formats
     stencil8: { attachment: "stencil", bitsPerChannel: [8, 0, 0, 0], dataType: "uint8" },
     "depth16unorm": { attachment: "depth", bitsPerChannel: [16, 0, 0, 0], dataType: "uint16" },
@@ -1106,7 +1203,9 @@ var __exports__ = (() => {
     // The depth component of the "depth24plus" and "depth24plus-stencil8" formats may be implemented as either a 24-bit depth value or a "depth32float" value.
     "depth24plus-stencil8": { attachment: "depth-stencil", bitsPerChannel: [24, 8, 0, 0], packed: true },
     // "depth32float-stencil8" feature
-    "depth32float-stencil8": { attachment: "depth-stencil", bitsPerChannel: [32, 8, 0, 0], packed: true },
+    "depth32float-stencil8": { attachment: "depth-stencil", bitsPerChannel: [32, 8, 0, 0], packed: true }
+  };
+  var TEXTURE_FORMAT_COMPRESSED_TABLE = {
     // BC compressed formats: check device.features.has("texture-compression-bc");
     "bc1-rgb-unorm-webgl": { f: texture_compression_bc },
     "bc1-rgb-unorm-srgb-webgl": { f: texture_compression_bc },
@@ -1177,8 +1276,12 @@ var __exports__ = (() => {
     "atc-rgba-unorm-webgl": { f: texture_compression_atc_webgl },
     "atc-rgbai-unorm-webgl": { f: texture_compression_atc_webgl }
   };
+  var TEXTURE_FORMAT_TABLE = {
+    ...TEXTURE_FORMAT_COLOR_DEPTH_TABLE,
+    ...TEXTURE_FORMAT_COMPRESSED_TABLE
+  };
 
-  // ../core/src/gpu-type-utils/decode-texture-format.ts
+  // ../core/src/shadertypes/textures/texture-format-decoder.ts
   var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
     "bc1",
     "bc2",
@@ -1195,12 +1298,51 @@ var __exports__ = (() => {
     "pvrtc"
   ];
   var RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
-  function isTextureFormatCompressed(format) {
-    return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some((prefix) => format.startsWith(prefix));
-  }
-  function decodeTextureFormat(format) {
-    let formatInfo = decodeTextureFormatUsingTable(format);
-    if (isTextureFormatCompressed(format)) {
+  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");
+    }
+    /** Checks if a texture format is depth or stencil */
+    isDepthStencil(format) {
+      return format.startsWith("depth") || format.startsWith("stencil");
+    }
+    /** 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
+     */
+    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;
+    }
+  };
+  var textureFormatDecoder = new TextureFormatDecoder();
+  function getTextureFormatInfo(format) {
+    let formatInfo = getTextureFormatInfoUsingTable(format);
+    if (textureFormatDecoder.isCompressed(format)) {
       formatInfo.channels = "rgb";
       formatInfo.components = 3;
       formatInfo.bytesPerPixel = 1;
@@ -1216,7 +1358,7 @@ var __exports__ = (() => {
     if (matches) {
       const [, channels, length, type, srgb, suffix] = matches;
       const dataType = `${type}${length}`;
-      const decodedType = decodeVertexType(dataType);
+      const decodedType = getDataTypeInfo(dataType);
       const bits = decodedType.byteLength * 8;
       const components = channels.length;
       const bitsPerChannel = [
@@ -1228,7 +1370,7 @@ var __exports__ = (() => {
       formatInfo = {
         format,
         attachment: formatInfo.attachment,
-        dataType: decodedType.dataType,
+        dataType: decodedType.signedType,
         components,
         channels,
         integer: decodedType.integer,
@@ -1254,7 +1396,7 @@ var __exports__ = (() => {
     }
     return formatInfo;
   }
-  function decodeTextureFormatUsingTable(format) {
+  function getTextureFormatInfoUsingTable(format) {
     const info = getTextureFormatDefinition(format);
     const bytesPerPixel = info.bytesPerPixel || 1;
     const bitsPerChannel = info.bitsPerChannel || [8, 8, 8, 8];
@@ -1294,25 +1436,24 @@ var __exports__ = (() => {
     return null;
   }
 
-  // ../core/src/gpu-type-utils/texture-format-capabilities.ts
-  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 = decodeTextureFormat(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;
+  // ../core/src/image-utils/image-types.ts
+  function isExternalImage(data) {
+    return typeof ImageData !== "undefined" && data instanceof ImageData || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement || typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement || typeof VideoFrame !== "undefined" && data instanceof VideoFrame || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas;
+  }
+  function getExternalImageSize(data) {
+    if (typeof ImageData !== "undefined" && data instanceof ImageData || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas) {
+      return { width: data.width, height: data.height };
+    }
+    if (typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement) {
+      return { width: data.naturalWidth, height: data.naturalHeight };
+    }
+    if (typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement) {
+      return { width: data.videoWidth, height: data.videoHeight };
+    }
+    if (typeof VideoFrame !== "undefined" && data instanceof VideoFrame) {
+      return { width: data.displayWidth, height: data.displayHeight };
+    }
+    throw new Error("Unknown image type");
   }
 
   // ../core/src/adapter/device.ts
@@ -1336,9 +1477,8 @@ var __exports__ = (() => {
     get [Symbol.toStringTag]() {
       return "Device";
     }
-    constructor(props) {
-      this.props = { ..._Device.defaultProps, ...props };
-      this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
+    toString() {
+      return `Device(${this.id})`;
     }
     /** id of this device, primarily for debugging */
     id;
@@ -1354,23 +1494,46 @@ var __exports__ = (() => {
     _reused = false;
     /** Used by other luma.gl modules to store data on the device */
     _lumaData = {};
-    /** Determines what operations are supported on a texture format, checking against supported device features */
+    _textureCaps = {};
+    constructor(props) {
+      this.props = { ..._Device.defaultProps, ...props };
+      this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
+    }
+    getVertexFormatInfo(format) {
+      return getVertexFormatInfo(format);
+    }
+    isVertexFormatSupported(format) {
+      return true;
+    }
+    /** Returns information about a texture format, such as data type, channels, bits per channel, compression etc */
+    getTextureFormatInfo(format) {
+      return textureFormatDecoder.getInfo(format);
+    }
+    /** Determines what operations are supported on a texture format on this particular device (checks against supported device features) */
     getTextureFormatCapabilities(format) {
-      const genericCapabilities = getTextureFormatCapabilities(format);
-      const checkFeature = (featureOrBoolean) => (typeof featureOrBoolean === "string" ? this.features.has(featureOrBoolean) : featureOrBoolean) ?? true;
-      const supported = checkFeature(genericCapabilities.create);
-      const deviceCapabilities = {
-        format,
-        create: supported,
-        render: supported && checkFeature(genericCapabilities.render),
-        filter: supported && checkFeature(genericCapabilities.filter),
-        blend: supported && checkFeature(genericCapabilities.blend),
-        store: supported && checkFeature(genericCapabilities.store)
-      };
-      return this._getDeviceSpecificTextureFormatCapabilities(deviceCapabilities);
+      let textureCaps = this._textureCaps[format];
+      if (!textureCaps) {
+        const capabilities = this._getDeviceTextureFormatCapabilities(format);
+        textureCaps = this._getDeviceSpecificTextureFormatCapabilities(capabilities);
+        this._textureCaps[format] = textureCaps;
+      }
+      return textureCaps;
+    }
+    /** Calculates the number of mip levels for a texture of width, height and in case of 3d textures only, depth */
+    getMipLevelCount(width, height, depth3d = 1) {
+      const maxSize = Math.max(width, height, depth3d);
+      return 1 + Math.floor(Math.log2(maxSize));
+    }
+    /** Check if data is an external image */
+    isExternalImage(data) {
+      return isExternalImage(data);
+    }
+    /** Get the size of an external image */
+    getExternalImageSize(data) {
+      return getExternalImageSize(data);
     }
     /** Check if device supports a specific texture format (creation and `nearest` sampling) */
-    isTextureFormatSupported(format, capabilities) {
+    isTextureFormatSupported(format) {
       return this.getTextureFormatCapabilities(format).create;
     }
     /** Check if linear filtering (sampler interpolation) is supported for a specific texture format */
@@ -1383,7 +1546,17 @@ var __exports__ = (() => {
     }
     /** Check if a specific texture format is GPU compressed */
     isTextureFormatCompressed(format) {
-      return isTextureFormatCompressed(format);
+      return textureFormatDecoder.isCompressed(format);
+    }
+    // DEBUG METHODS
+    pushDebugGroup(groupLabel) {
+      this.commandEncoder.pushDebugGroup(groupLabel);
+    }
+    popDebugGroup() {
+      this.commandEncoder?.popDebugGroup();
+    }
+    insertDebugMarker(markerLabel) {
+      this.commandEncoder?.insertDebugMarker(markerLabel);
     }
     /**
      * Trigger device loss.
@@ -1393,9 +1566,44 @@ var __exports__ = (() => {
     loseDevice() {
       return false;
     }
-    /** Report error (normally called for unhandled device errors) */
-    reportError(error) {
-      this.props.onError(error);
+    /** A monotonic counter for tracking buffer and texture updates */
+    incrementTimestamp() {
+      return this.timestamp++;
+    }
+    /**
+     * Reports Device errors in a way that optimizes for developer experience / debugging.
+     * - Logs so that the console error links directly to the source code that generated the error.
+     * - Includes the object that reported the error in the log message, even if the error is asynchronous.
+     *
+     * Conventions when calling reportError():
+     * - Always call the returned function - to ensure error is logged, at the error site
+     * - Follow with a call to device.debug() - to ensure that the debugger breaks at the error site
+     *
+     * @param error - the error to report. If needed, just create a new Error object with the appropriate message.
+     * @param context - pass `this` as context, otherwise it may not be available in the debugger for async errors.
+     * @returns the logger function returned by device.props.onError() so that it can be called from the error site.
+     *
+     * @example
+     *   device.reportError(new Error(...), this)();
+     *   device.debug();
+     */
+    reportError(error, context, ...args) {
+      const isHandled = this.props.onError(error, context);
+      if (!isHandled) {
+        return log.error(error.message, context, ...args);
+      }
+      return () => {
+      };
+    }
+    /** Break in the debugger - if device.props.debug is true */
+    debug() {
+      if (this.props.debug) {
+        debugger;
+      } else {
+        const message = `'Type luma.log.set({debug: true}) in console to enable debug breakpoints',
+or create a device with the 'debug: true' prop.`;
+        log.once(0, message)();
+      }
     }
     /** Returns the default / primary canvas context. Throws an error if no canvas context is available (a WebGPU compute device) */
     getDefaultCanvasContext() {
@@ -1404,17 +1612,13 @@ var __exports__ = (() => {
       }
       return this.canvasContext;
     }
-    createCommandEncoder(props = {}) {
-      throw new Error("not implemented");
-    }
-    /** A monotonic counter for tracking buffer and texture updates */
-    incrementTimestamp() {
-      return this.timestamp++;
+    /** Create a RenderPass using the default CommandEncoder */
+    beginRenderPass(props) {
+      return this.commandEncoder.beginRenderPass(props);
     }
-    // Error Handling
-    /** Report unhandled device errors */
-    onError(error) {
-      this.props.onError(error);
+    /** Create a ComputePass using the default CommandEncoder*/
+    beginComputePass(props) {
+      return this.commandEncoder.beginComputePass(props);
     }
     // DEPRECATED METHODS
     /** @deprecated Use getDefaultCanvasContext() */
@@ -1456,19 +1660,36 @@ var __exports__ = (() => {
     static _getCanvasContextProps(props) {
       return props.createCanvasContext === true ? {} : props.createCanvasContext;
     }
+    _getDeviceTextureFormatCapabilities(format) {
+      const genericCapabilities = textureFormatDecoder.getCapabilities(format);
+      const checkFeature = (feature) => (typeof feature === "string" ? this.features.has(feature) : feature) ?? true;
+      const supported = checkFeature(genericCapabilities.create);
+      return {
+        format,
+        create: supported,
+        render: supported && checkFeature(genericCapabilities.render),
+        filter: supported && checkFeature(genericCapabilities.filter),
+        blend: supported && checkFeature(genericCapabilities.blend),
+        store: supported && checkFeature(genericCapabilities.store)
+      };
+    }
     /** Subclasses use this to support .createBuffer() overloads */
     _normalizeBufferProps(props) {
       if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
         props = { data: props };
       }
       const newProps = { ...props };
-      if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
-        if (props.data instanceof Uint32Array) {
-          newProps.indexType = "uint32";
-        } else if (props.data instanceof Uint16Array) {
-          newProps.indexType = "uint16";
-        } else {
-          log.warn("indices buffer content must be of integer type")();
+      const usage = props.usage || 0;
+      if (usage & Buffer2.INDEX) {
+        if (!props.indexType) {
+          if (props.data instanceof Uint32Array) {
+            newProps.indexType = "uint32";
+          } else if (props.data instanceof Uint16Array) {
+            newProps.indexType = "uint16";
+          }
+        }
+        if (!newProps.indexType) {
+          throw new Error("indices buffer content must be of type uint16 or uint32");
         }
       }
       return newProps;
@@ -1480,34 +1701,47 @@ var __exports__ = (() => {
     powerPreference: "high-performance",
     failIfMajorPerformanceCaveat: false,
     createCanvasContext: void 0,
-    // Callbacks
-    onError: (error) => log.error(error.message)(),
-    // Experimental
-    _reuseDevices: false,
-    _requestMaxLimits: true,
-    _factoryDestroyPolicy: "unused",
-    // TODO - Change these after confirming things work as expected
-    _initializeFeatures: true,
-    _disabledFeatures: {
-      "compilation-status-async-webgl": true
-    },
-    _resourceDefaults: {},
     // WebGL specific
     webgl: {},
+    // Callbacks
+    // eslint-disable-next-line handle-callback-err
+    onError: (error, context) => {
+    },
+    onResize: (context, info) => {
+      const [width, height] = context.getDevicePixelSize();
+      log.log(1, `${context} resized => ${width}x${height}px`)();
+    },
+    onPositionChange: (context, info) => {
+      const [left, top] = context.getPosition();
+      log.log(1, `${context} repositioned => ${left},${top}`)();
+    },
+    onVisibilityChange: (context) => log.log(1, `${context} Visibility changed ${context.isVisible}`)(),
+    onDevicePixelRatioChange: (context, info) => log.log(1, `${context} DPR changed ${info.oldRatio} => ${context.devicePixelRatio}`)(),
+    // Debug flags
     debug: log.get("debug") || void 0,
     debugShaders: log.get("debug-shaders") || void 0,
     debugFramebuffers: Boolean(log.get("debug-framebuffers")),
+    debugFactories: Boolean(log.get("debug-factories")),
     debugWebGL: Boolean(log.get("debug-webgl")),
     debugSpectorJS: void 0,
     // Note: log setting is queried by the spector.js code
     debugSpectorJSUrl: void 0,
+    // Experimental
+    _reuseDevices: false,
+    _requestMaxLimits: true,
+    _cacheShaders: false,
+    _cachePipelines: false,
+    _cacheDestroyPolicy: "unused",
+    // TODO - Change these after confirming things work as expected
+    _initializeFeatures: true,
+    _disabledFeatures: {
+      "compilation-status-async-webgl": true
+    },
     // INTERNAL
     _handle: void 0
   });
 
   // ../core/src/adapter/luma.ts
-  var isPage = isBrowser() && typeof document !== "undefined";
-  var isPageLoaded = () => isPage && document.readyState === "complete";
   var STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
   var ERROR_MESSAGE = "No matching device found. Ensure `@luma.gl/webgl` and/or `@luma.gl/webgpu` modules are imported.";
   var _Luma = class {
@@ -1541,6 +1775,34 @@ var __exports__ = (() => {
       log.log(1, `${this.VERSION} - ${STARTUP_MESSAGE}`)();
       globalThis.luma = this;
     }
+    /** Creates a device. Asynchronously. */
+    async createDevice(props_ = {}) {
+      const props = { ..._Luma.defaultProps, ...props_ };
+      const adapter = this.selectAdapter(props.type, props.adapters);
+      if (!adapter) {
+        throw new Error(ERROR_MESSAGE);
+      }
+      if (props.waitForPageLoad) {
+        await adapter.pageLoaded;
+      }
+      return await adapter.create(props);
+    }
+    /**
+     * Attach to an existing GPU API handle (WebGL2RenderingContext or GPUDevice).
+     * @param handle Externally created WebGL context or WebGPU device
+     */
+    async attachDevice(handle, props) {
+      const type = this._getTypeFromHandle(handle, props.adapters);
+      const adapter = type && this.selectAdapter(type, props.adapters);
+      if (!adapter) {
+        throw new Error(ERROR_MESSAGE);
+      }
+      return await adapter?.attach?.(handle, props);
+    }
+    /**
+     * Global adapter registration.
+     * @deprecated Use props.adapters instead
+     */
     registerAdapters(adapters) {
       for (const deviceClass of adapters) {
         this.preregisteredAdapters.set(deviceClass.type, deviceClass);
@@ -1548,92 +1810,75 @@ var __exports__ = (() => {
     }
     /** Get type strings for supported Devices */
     getSupportedAdapters(adapters = []) {
-      const adapterMap = this.getAdapterMap(adapters);
+      const adapterMap = this._getAdapterMap(adapters);
       return Array.from(adapterMap).map(([, adapter]) => adapter).filter((adapter) => adapter.isSupported?.()).map((adapter) => adapter.type);
     }
     /** Get type strings for best available Device */
-    getBestAvailableAdapter(adapters = []) {
-      const adapterMap = this.getAdapterMap(adapters);
-      if (adapterMap.get("webgpu")?.isSupported?.()) {
-        return "webgpu";
-      }
-      if (adapterMap.get("webgl")?.isSupported?.()) {
-        return "webgl";
+    getBestAvailableAdapterType(adapters = []) {
+      const KNOWN_ADAPTERS = ["webgpu", "webgl", "null"];
+      const adapterMap = this._getAdapterMap(adapters);
+      for (const type of KNOWN_ADAPTERS) {
+        if (adapterMap.get(type)?.isSupported?.()) {
+          return type;
+        }
       }
       return null;
     }
-    setDefaultDeviceProps(props) {
-      Object.assign(_Luma.defaultProps, props);
-    }
-    /** Creates a device. Asynchronously. */
-    async createDevice(props = {}) {
-      props = { ..._Luma.defaultProps, ...props };
-      if (props.waitForPageLoad) {
-        await _Luma.pageLoaded;
-      }
-      const adapterMap = this.getAdapterMap(props.adapters);
-      let type = props.type || "";
+    /** Select adapter of type from registered adapters */
+    selectAdapter(type, adapters = []) {
+      let selectedType = type;
       if (type === "best-available") {
-        type = this.getBestAvailableAdapter(props.adapters) || type;
-      }
-      const adapters = this.getAdapterMap(props.adapters) || adapterMap;
-      const adapter = adapters.get(type);
-      const device = await adapter?.create?.(props);
-      if (device) {
-        return device;
-      }
-      throw new Error(ERROR_MESSAGE);
-    }
-    /** Attach to an existing GPU API handle (WebGL2RenderingContext or GPUDevice). */
-    async attachDevice(props) {
-      const adapters = this.getAdapterMap(props.adapters);
-      let type = "";
-      if (props.handle instanceof WebGL2RenderingContext) {
-        type = "webgl";
-      }
-      if (props.createCanvasContext) {
-        await _Luma.pageLoaded;
-      }
-      if (props.handle === null) {
-        type = "unknown";
-      }
-      const adapter = adapters.get(type);
-      const device = await adapter?.attach?.(null);
-      if (device) {
-        return device;
+        selectedType = this.getBestAvailableAdapterType(adapters);
       }
-      throw new Error(ERROR_MESSAGE);
+      const adapterMap = this._getAdapterMap(adapters);
+      return selectedType && adapterMap.get(selectedType) || null;
     }
     /**
      * Override `HTMLCanvasContext.getCanvas()` to always create WebGL2 contexts with additional WebGL1 compatibility.
      * Useful when attaching luma to a context from an external library does not support creating WebGL2 contexts.
      */
     enforceWebGL2(enforce = true, adapters = []) {
-      const adapterMap = this.getAdapterMap(adapters);
+      const adapterMap = this._getAdapterMap(adapters);
       const webgl2Adapter = adapterMap.get("webgl");
       if (!webgl2Adapter) {
         log.warn("enforceWebGL2: webgl adapter not found")();
       }
       webgl2Adapter?.enforceWebGL2?.(enforce);
     }
+    // DEPRECATED
+    /** @deprecated */
+    setDefaultDeviceProps(props) {
+      Object.assign(_Luma.defaultProps, props);
+    }
+    // HELPERS
     /** Convert a list of adapters to a map */
-    getAdapterMap(adapters = []) {
+    _getAdapterMap(adapters = []) {
       const map = new Map(this.preregisteredAdapters);
       for (const adapter of adapters) {
         map.set(adapter.type, adapter);
       }
       return map;
     }
-    // DEPRECATED
-    /** @deprecated Use registerAdapters */
-    registerDevices(deviceClasses) {
-      log.warn("luma.registerDevices() is deprecated, use luma.registerAdapters() instead");
-      for (const deviceClass of deviceClasses) {
-        const adapter = deviceClass.adapter;
-        if (adapter) {
-          this.preregisteredAdapters.set(adapter.type, adapter);
-        }
+    /** Get type of a handle (for attachDevice) */
+    _getTypeFromHandle(handle, adapters = []) {
+      if (handle instanceof WebGL2RenderingContext) {
+        return "webgl";
+      }
+      if (typeof GPUDevice !== "undefined" && handle instanceof GPUDevice) {
+        return "webgpu";
+      }
+      if (handle?.queue) {
+        return "webgpu";
+      }
+      if (handle === null) {
+        return "null";
       }
+      if (handle instanceof WebGLRenderingContext) {
+        log.warn("WebGL1 is not supported", handle)();
+      } else {
+        log.warn("Unknown handle type", handle)();
+      }
+      return null;
     }
   };
   var Luma = _Luma;
@@ -1643,224 +1888,326 @@ var __exports__ = (() => {
     adapters: void 0,
     waitForPageLoad: true
   });
-  /**
-   * Page load promise
-   * Get a 'lazy' promise that resolves when the DOM is loaded.
-   * @note Since there may be limitations on number of `load` event listeners,
-   * it is recommended avoid calling this function until actually needed.
-   * I.e. don't call it until you know that you will be looking up a string in the DOM.
-   */
-  __publicField(Luma, "pageLoaded", getPageLoadPromise().then(() => {
-    log.probe(2, "DOM is loaded")();
-  }));
   var luma = new Luma();
-  function getPageLoadPromise() {
-    if (isPageLoaded() || typeof window === "undefined") {
-      return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-      window.addEventListener("load", () => resolve());
-    });
-  }
 
   // ../core/src/adapter/adapter.ts
   var Adapter = class {
+    /**
+     * Page load promise
+     * Resolves when the DOM is loaded.
+     * @note Since are be limitations on number of `load` event listeners,
+     * it is recommended avoid calling this accessor until actually needed.
+     * I.e. we don't call it unless you know that you will be looking up a string in the DOM.
+     */
+    get pageLoaded() {
+      return getPageLoadPromise();
+    }
   };
+  var isPage = isBrowser() && typeof document !== "undefined";
+  var isPageLoaded = () => isPage && document.readyState === "complete";
+  var pageLoadPromise = null;
+  function getPageLoadPromise() {
+    if (!pageLoadPromise) {
+      if (isPageLoaded() || typeof window === "undefined") {
+        pageLoadPromise = Promise.resolve();
+      } else {
+        pageLoadPromise = new Promise((resolve) => window.addEventListener("load", () => resolve()));
+      }
+    }
+    return pageLoadPromise;
+  }
+
+  // ../core/src/utils/promise-utils.ts
+  function withResolvers() {
+    let resolve;
+    let reject;
+    const promise = new Promise((_resolve, _reject) => {
+      resolve = _resolve;
+      reject = _reject;
+    });
+    return { promise, resolve, reject };
+  }
 
   // ../core/src/adapter/canvas-context.ts
   var _CanvasContext = class {
+    static isHTMLCanvas(canvas) {
+      return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
+    }
+    static isOffscreenCanvas(canvas) {
+      return typeof OffscreenCanvas !== "undefined" && canvas instanceof OffscreenCanvas;
+    }
     id;
     props;
     canvas;
+    /** Handle to HTML canvas */
     htmlCanvas;
+    /** Handle to wrapped OffScreenCanvas */
     offscreenCanvas;
     type;
-    width = 1;
-    height = 1;
-    resizeObserver;
-    /** State used by luma.gl classes: TODO - move to canvasContext*/
-    _canvasSizeInfo = { clientWidth: 0, clientHeight: 0, devicePixelRatio: 1 };
+    /** Promise that resolved once the resize observer has updated the pixel size */
+    initialized;
+    isInitialized = false;
+    /** Visibility is automatically updated (via an IntersectionObserver) */
+    isVisible = true;
+    /** Width of canvas in CSS units (tracked by a ResizeObserver) */
+    cssWidth;
+    /** Height of canvas in CSS units (tracked by a ResizeObserver) */
+    cssHeight;
+    /** Device pixel ratio. Automatically updated via media queries */
+    devicePixelRatio;
+    /** Exact width of canvas in physical pixels (tracked by a ResizeObserver) */
+    devicePixelWidth;
+    /** Exact height of canvas in physical pixels (tracked by a ResizeObserver) */
+    devicePixelHeight;
+    /** Width of drawing buffer: automatically tracks this.pixelWidth if props.autoResize is true */
+    drawingBufferWidth;
+    /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
+    drawingBufferHeight;
+    _initializedResolvers = withResolvers();
+    _resizeObserver;
+    _intersectionObserver;
+    _position;
+    destroyed = false;
     toString() {
       return `${this[Symbol.toStringTag]}(${this.id})`;
     }
     constructor(props) {
       this.props = { ..._CanvasContext.defaultProps, ...props };
       props = this.props;
+      this.initialized = this._initializedResolvers.promise;
       if (!isBrowser()) {
-        this.id = "node-canvas-context";
-        this.type = "node";
-        this.width = this.props.width;
-        this.height = this.props.height;
-        this.canvas = null;
-        return;
-      }
-      if (!props.canvas) {
-        const canvas = createCanvas(props);
-        const container = getContainer(props?.container || null);
-        container.insertBefore(canvas, container.firstChild);
-        this.canvas = canvas;
-        if (!props?.visible) {
-          this.canvas.style.visibility = "hidden";
-        }
+        this.canvas = { width: props.width || 1, height: props.height || 1 };
+      } else if (!props.canvas) {
+        this.canvas = createCanvasElement(props);
       } else if (typeof props.canvas === "string") {
         this.canvas = getCanvasFromDOM(props.canvas);
       } else {
         this.canvas = props.canvas;
       }
-      if (this.canvas instanceof HTMLCanvasElement) {
-        this.id = this.canvas.id;
+      if (_CanvasContext.isHTMLCanvas(this.canvas)) {
+        this.id = props.id || this.canvas.id;
         this.type = "html-canvas";
         this.htmlCanvas = this.canvas;
-      } else {
-        this.id = "offscreen-canvas";
+      } else if (_CanvasContext.isOffscreenCanvas(this.canvas)) {
+        this.id = props.id || "offscreen-canvas";
         this.type = "offscreen-canvas";
         this.offscreenCanvas = this.canvas;
+      } else {
+        this.id = props.id || "node-canvas-context";
+        this.type = "node";
       }
-      if (this.canvas instanceof HTMLCanvasElement && props.autoResize) {
-        this.resizeObserver = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            if (entry.target === this.canvas) {
-              this.update();
-            }
-          }
-        });
-        this.resizeObserver.observe(this.canvas);
+      this.cssWidth = this.htmlCanvas?.clientWidth || this.canvas.width;
+      this.cssHeight = this.htmlCanvas?.clientHeight || this.canvas.height;
+      this.devicePixelWidth = this.canvas.width;
+      this.devicePixelHeight = this.canvas.height;
+      this.drawingBufferWidth = this.canvas.width;
+      this.drawingBufferHeight = this.canvas.height;
+      this.devicePixelRatio = globalThis.devicePixelRatio || 1;
+      this._position = [0, 0];
+      if (_CanvasContext.isHTMLCanvas(this.canvas)) {
+        this._intersectionObserver = new IntersectionObserver(
+          (entries) => this._handleIntersection(entries)
+        );
+        this._intersectionObserver.observe(this.canvas);
+        this._resizeObserver = new ResizeObserver((entries) => this._handleResize(entries));
+        try {
+          this._resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
+        } catch {
+          this._resizeObserver.observe(this.canvas, { box: "content-box" });
+        }
+        setTimeout(() => this._observeDevicePixelRatio(), 0);
+        if (this.props.trackPosition) {
+          this._trackPosition();
+        }
       }
     }
+    destroy() {
+      this.destroyed = true;
+    }
+    // SIZE METHODS
     /**
-     * Returns the current DPR, if props.useDevicePixels is true
-     * Device refers to physical
+     * Returns the size covered by the canvas in CSS pixels
+     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
+     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
      */
-    getDevicePixelRatio(useDevicePixels) {
-      if (typeof OffscreenCanvas !== "undefined" && this.canvas instanceof OffscreenCanvas) {
-        return 1;
-      }
-      useDevicePixels = useDevicePixels === void 0 ? this.props.useDevicePixels : useDevicePixels;
-      if (!useDevicePixels || useDevicePixels <= 0) {
-        return 1;
-      }
-      if (useDevicePixels === true) {
-        const dpr = typeof window !== "undefined" && window.devicePixelRatio;
-        return dpr || 1;
-      }
-      return useDevicePixels;
+    getCSSSize() {
+      return [this.cssWidth, this.cssHeight];
+    }
+    getPosition() {
+      return this._position;
+    }
+    /**
+     * Returns the size covered by the canvas in actual device pixels.
+     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
+     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
+     */
+    getDevicePixelSize() {
+      return [this.devicePixelWidth, this.devicePixelHeight];
+    }
+    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
+    getDrawingBufferSize() {
+      return [this.drawingBufferWidth, this.drawingBufferHeight];
+    }
+    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
+    getMaxDrawingBufferSize() {
+      const maxTextureDimension = this.device.limits.maxTextureDimension2D;
+      return [maxTextureDimension, maxTextureDimension];
+    }
+    /** Update the canvas drawing buffer size. Called automatically if props.autoResize is true. */
+    setDrawingBufferSize(width, height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.drawingBufferWidth = width;
+      this.drawingBufferHeight = height;
     }
     /**
-     * Returns the size of drawing buffer in device pixels.
-     * @note This can be different from the 'CSS' size of a canvas, and also from the
-     * canvas' internal drawing buffer size (.width, .height).
-     * This is the size required to cover the canvas, adjusted for DPR
+     * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
+     * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
+     * @note This function handles the non-HTML canvas cases
      */
+    getDevicePixelRatio() {
+      const dpr = typeof window !== "undefined" && window.devicePixelRatio;
+      return dpr || 1;
+    }
+    // DEPRECATED METHODS
+    /**
+     * Maps CSS pixel position to device pixel position
+     */
+    cssToDevicePixels(cssPixel, yInvert = true) {
+      const ratio = this.cssToDeviceRatio();
+      const [width, height] = this.getDrawingBufferSize();
+      return scalePixels(cssPixel, ratio, width, height, yInvert);
+    }
+    /** @deprecated - use .getDevicePixelSize() */
     getPixelSize() {
-      switch (this.type) {
-        case "node":
-          return [this.width, this.height];
-        case "offscreen-canvas":
-          return [this.canvas.width, this.canvas.height];
-        case "html-canvas":
-          const dpr = this.getDevicePixelRatio();
-          const canvas = this.canvas;
-          return canvas.parentElement ? [canvas.clientWidth * dpr, canvas.clientHeight * dpr] : [this.canvas.width, this.canvas.height];
-        default:
-          throw new Error(this.type);
-      }
+      return this.getDevicePixelSize();
     }
+    /** @deprecated - TODO which values should we use for aspect */
     getAspect() {
-      const [width, height] = this.getPixelSize();
+      const [width, height] = this.getDevicePixelSize();
       return width / height;
     }
-    /**
-     * Returns multiplier need to convert CSS size to Device size
-     */
+    /** @deprecated Returns multiplier need to convert CSS size to Device size */
     cssToDeviceRatio() {
       try {
         const [drawingBufferWidth] = this.getDrawingBufferSize();
-        const clientWidth = this._canvasSizeInfo.clientWidth || this.htmlCanvas?.clientWidth;
-        return clientWidth ? drawingBufferWidth / clientWidth : 1;
+        const [cssWidth] = this.getCSSSize();
+        return cssWidth ? drawingBufferWidth / cssWidth : 1;
       } catch {
         return 1;
       }
     }
+    /** @deprecated Use canvasContext.setDrawingBufferSize() */
+    resize(size) {
+      this.setDrawingBufferSize(size.width, size.height);
+    }
+    // IMPLEMENTATION
     /**
-     * Maps CSS pixel position to device pixel position
+     * Allows subclass constructor to override the canvas id for auto created canvases.
+     * This can really help when debugging DOM in apps that create multiple devices
      */
-    cssToDevicePixels(cssPixel, yInvert = true) {
-      const ratio = this.cssToDeviceRatio();
-      const [width, height] = this.getDrawingBufferSize();
-      return scalePixels(cssPixel, ratio, width, height, yInvert);
+    _setAutoCreatedCanvasId(id) {
+      if (this.htmlCanvas?.id === "lumagl-auto-created-canvas") {
+        this.htmlCanvas.id = id;
+      }
+    }
+    /** reacts to an observed intersection */
+    _handleIntersection(entries) {
+      const entry = entries.find((entry_) => entry_.target === this.canvas);
+      if (!entry) {
+        return;
+      }
+      const isVisible = entry.isIntersecting;
+      if (this.isVisible !== isVisible) {
+        this.isVisible = isVisible;
+        this.device.props.onVisibilityChange(this);
+      }
     }
     /**
-     * Use devicePixelRatio to set canvas width and height
-     * @note this is a raw port of luma.gl v8 code. Might be worth a review
+     * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
+     * @see https://web.dev/articles/device-pixel-content-box
+     * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
      */
-    setDevicePixelRatio(devicePixelRatio, options = {}) {
-      if (!this.htmlCanvas) {
+    _handleResize(entries) {
+      const entry = entries.find((entry_) => entry_.target === this.canvas);
+      if (!entry) {
         return;
       }
-      let clientWidth = "width" in options ? options.width : this.htmlCanvas.clientWidth;
-      let clientHeight = "height" in options ? options.height : this.htmlCanvas.clientHeight;
-      if (!clientWidth || !clientHeight) {
-        log.log(1, "Canvas clientWidth/clientHeight is 0")();
-        devicePixelRatio = 1;
-        clientWidth = this.htmlCanvas.width || 1;
-        clientHeight = this.htmlCanvas.height || 1;
-      }
-      const cachedSize = this._canvasSizeInfo;
-      if (cachedSize.clientWidth !== clientWidth || cachedSize.clientHeight !== clientHeight || cachedSize.devicePixelRatio !== devicePixelRatio) {
-        let clampedPixelRatio = devicePixelRatio;
-        const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);
-        const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);
-        this.htmlCanvas.width = canvasWidth;
-        this.htmlCanvas.height = canvasHeight;
-        const gl = this.device.gl;
-        if (gl) {
-          const [drawingBufferWidth, drawingBufferHeight] = this.getDrawingBufferSize();
-          if (drawingBufferWidth !== canvasWidth || drawingBufferHeight !== canvasHeight) {
-            clampedPixelRatio = Math.min(
-              drawingBufferWidth / clientWidth,
-              drawingBufferHeight / clientHeight
-            );
-            this.htmlCanvas.width = Math.floor(clientWidth * clampedPixelRatio);
-            this.htmlCanvas.height = Math.floor(clientHeight * clampedPixelRatio);
-            log.warn("Device pixel ratio clamped")();
-          }
-          this._canvasSizeInfo.clientWidth = clientWidth;
-          this._canvasSizeInfo.clientHeight = clientHeight;
-          this._canvasSizeInfo.devicePixelRatio = devicePixelRatio;
+      this.cssWidth = entry.contentBoxSize[0].inlineSize;
+      this.cssHeight = entry.contentBoxSize[0].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 [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
+      this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
+      this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
+      if (this.props.autoResize) {
+        if (this.props.useDevicePixels) {
+          this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
+        } else {
+          this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
         }
-      }
+        this._updateDevice();
+      }
+      this._initializedResolvers.resolve();
+      this.isInitialized = true;
+      this.updatePosition();
+      this.device.props.onResize(this, { oldPixelSize });
+    }
+    /** Monitor DPR changes */
+    _observeDevicePixelRatio() {
+      const oldRatio = this.devicePixelRatio;
+      this.devicePixelRatio = window.devicePixelRatio;
+      this.updatePosition();
+      this.device.props.onDevicePixelRatioChange(this, { oldRatio });
+      matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener(
+        "change",
+        () => this._observeDevicePixelRatio(),
+        { once: true }
+      );
     }
-    // PRIVATE
-    /** @todo Major hack done to port the CSS methods above, base canvas context should not depend on WebGL */
-    getDrawingBufferSize() {
-      const gl = this.device.gl;
-      if (!gl) {
-        return this.getPixelSize();
-      }
-      return [gl.drawingBufferWidth, gl.drawingBufferHeight];
+    /** Start tracking positions with a timer */
+    _trackPosition(intervalMs = 100) {
+      const intervalId = setInterval(() => {
+        if (this.destroyed) {
+          clearInterval(intervalId);
+        } else {
+          this.updatePosition();
+        }
+      }, intervalMs);
     }
     /**
-     * Allows subclass constructor to override the canvas id for auto created canvases.
-     * This can really help when debugging DOM in apps that create multiple devices
+     * Calculated the absolute position of the canvas
+     * @note - getBoundingClientRect() is normally cheap but can be expensive
+     * if called before browser has finished a reflow. Should not be the case here.
      */
-    _setAutoCreatedCanvasId(id) {
-      if (this.htmlCanvas?.id === "lumagl-auto-created-canvas") {
-        this.htmlCanvas.id = id;
+    updatePosition() {
+      const newRect = this.htmlCanvas?.getBoundingClientRect();
+      if (newRect) {
+        const position = [newRect.left, newRect.top];
+        this._position ??= position;
+        const positionChanged = position[0] !== this._position[0] || position[1] !== this._position[1];
+        if (positionChanged) {
+          const oldPosition = this._position;
+          this._position = position;
+          this.device.props.onPositionChange?.(this, { oldPosition });
+        }
       }
     }
   };
   var CanvasContext = _CanvasContext;
   __publicField(CanvasContext, "defaultProps", {
+    id: void 0,
     canvas: null,
     width: 800,
-    // width are height are only used by headless gl
     height: 600,
     useDevicePixels: true,
     autoResize: true,
     container: null,
     visible: true,
     alphaMode: "opaque",
-    colorSpace: "srgb"
+    colorSpace: "srgb",
+    trackPosition: false
   });
   function getContainer(container) {
     if (typeof container === "string") {
@@ -1869,27 +2216,33 @@ var __exports__ = (() => {
         throw new Error(`${container} is not an HTML element`);
       }
       return element;
-    } else if (container) {
+    }
+    if (container) {
       return container;
     }
     return document.body;
   }
   function getCanvasFromDOM(canvasId) {
     const canvas = document.getElementById(canvasId);
-    if (!(canvas instanceof HTMLCanvasElement)) {
+    if (!CanvasContext.isHTMLCanvas(canvas)) {
       throw new Error("Object is not a canvas element");
     }
     return canvas;
   }
-  function createCanvas(props) {
+  function createCanvasElement(props) {
     const { width, height } = props;
-    const targetCanvas = document.createElement("canvas");
-    targetCanvas.id = uid("lumagl-auto-created-canvas");
-    targetCanvas.width = width || 1;
-    targetCanvas.height = height || 1;
-    targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : "100%";
-    targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : "100%";
-    return targetCanvas;
+    const newCanvas = document.createElement("canvas");
+    newCanvas.id = uid("lumagl-auto-created-canvas");
+    newCanvas.width = width || 1;
+    newCanvas.height = height || 1;
+    newCanvas.style.width = Number.isFinite(width) ? `${width}px` : "100%";
+    newCanvas.style.height = Number.isFinite(height) ? `${height}px` : "100%";
+    if (!props?.visible) {
+      newCanvas.style.visibility = "hidden";
+    }
+    const container = getContainer(props?.container || null);
+    container.insertBefore(newCanvas, container.firstChild);
+    return newCanvas;
   }
   function scalePixels(pixel, ratio, width, height, yInvert) {
     const point = pixel;
@@ -1922,16 +2275,50 @@ var __exports__ = (() => {
     return yInvert ? Math.max(0, height - 1 - Math.round(y * ratio)) : Math.min(Math.round(y * ratio), height - 1);
   }
 
-  // ../core/src/adapter/resources/texture.ts
-  var _Texture = class extends Resource {
+  // ../core/src/adapter/resources/sampler.ts
+  var _Sampler = class extends Resource {
     get [Symbol.toStringTag]() {
-      return "Texture";
+      return "Sampler";
     }
-    toString() {
-      return `Texture(${this.id},${this.format},${this.width}x${this.height})`;
+    constructor(device, props) {
+      props = _Sampler.normalizeProps(device, props);
+      super(device, props, _Sampler.defaultProps);
+    }
+    static normalizeProps(device, props) {
+      return props;
     }
+  };
+  var Sampler = _Sampler;
+  __publicField(Sampler, "defaultProps", {
+    ...Resource.defaultProps,
+    type: "color-sampler",
+    addressModeU: "clamp-to-edge",
+    addressModeV: "clamp-to-edge",
+    addressModeW: "clamp-to-edge",
+    magFilter: "nearest",
+    minFilter: "nearest",
+    mipmapFilter: "none",
+    lodMinClamp: 0,
+    lodMaxClamp: 32,
+    // Per WebGPU spec
+    compare: "less-equal",
+    maxAnisotropy: 1
+  });
+
+  // ../core/src/adapter/resources/texture.ts
+  var BASE_DIMENSIONS = {
+    "1d": "1d",
+    "2d": "2d",
+    "2d-array": "2d",
+    cube: "2d",
+    "cube-array": "2d",
+    "3d": "3d"
+  };
+  var _Texture = class extends Resource {
     /** dimension of this texture */
     dimension;
+    /** base dimension of this texture */
+    baseDimension;
     /** format of this texture */
     format;
     /** width in pixels of this texture */
@@ -1944,133 +2331,55 @@ var __exports__ = (() => {
     mipLevels;
     /** "Time" of last update. Monotonically increasing timestamp. TODO move to AsyncTexture? */
     updateTimestamp;
+    get [Symbol.toStringTag]() {
+      return "Texture";
+    }
+    toString() {
+      return `Texture(${this.id},${this.format},${this.width}x${this.height})`;
+    }
     /** Do not use directly. Create with device.createTexture() */
     constructor(device, props) {
       props = _Texture.normalizeProps(device, props);
       super(device, props, _Texture.defaultProps);
       this.dimension = this.props.dimension;
+      this.baseDimension = BASE_DIMENSIONS[this.dimension];
       this.format = this.props.format;
       this.width = this.props.width;
       this.height = this.props.height;
       this.depth = this.props.depth;
+      this.mipLevels = this.props.mipLevels;
       if (this.props.width === void 0 || this.props.height === void 0) {
-        const size = _Texture.getTextureDataSize(this.props.data);
-        this.width = size?.width || 1;
-        this.height = size?.height || 1;
-      }
-      if (this.props.mipmaps && this.props.mipLevels === void 0) {
-        this.props.mipLevels = "pyramid";
+        if (device.isExternalImage(props.data)) {
+          const size = device.getExternalImageSize(props.data);
+          this.width = size?.width || 1;
+          this.height = size?.height || 1;
+        } else {
+          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.`
+            )();
+          }
+        }
       }
-      this.mipLevels = this.props.mipLevels === "pyramid" ? _Texture.getMipLevelCount(this.width, this.height) : this.props.mipLevels || 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
+     * 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.
      * @note Does not copy contents of the texture
      */
     clone(size) {
       return this.device.createTexture({ ...this.props, ...size });
     }
-    /** Check if data is an external image */
-    static isExternalImage(data) {
-      return typeof ImageData !== "undefined" && data instanceof ImageData || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement || typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement || typeof VideoFrame !== "undefined" && data instanceof VideoFrame || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas;
-    }
-    /** Determine size (width and height) of provided image data */
-    static getExternalImageSize(data) {
-      if (typeof ImageData !== "undefined" && data instanceof ImageData || typeof ImageBitmap !== "undefined" && data instanceof ImageBitmap || typeof HTMLCanvasElement !== "undefined" && data instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && data instanceof OffscreenCanvas) {
-        return { width: data.width, height: data.height };
-      }
-      if (typeof HTMLImageElement !== "undefined" && data instanceof HTMLImageElement) {
-        return { width: data.naturalWidth, height: data.naturalHeight };
-      }
-      if (typeof HTMLVideoElement !== "undefined" && data instanceof HTMLVideoElement) {
-        return { width: data.videoWidth, height: data.videoHeight };
-      }
-      if (typeof VideoFrame !== "undefined" && data instanceof VideoFrame) {
-        return { width: data.displayWidth, height: data.displayHeight };
-      }
-      throw new Error("Unknown image type");
-    }
-    /** Check if texture data is a typed array */
-    static isTextureLevelData(data) {
-      const typedArray = data?.data;
-      return ArrayBuffer.isView(typedArray);
-    }
-    /** Get the size of the texture described by the provided TextureData */
-    static getTextureDataSize(data) {
-      if (!data) {
-        return null;
-      }
-      if (ArrayBuffer.isView(data)) {
-        return null;
-      }
-      if (Array.isArray(data)) {
-        return _Texture.getTextureDataSize(data[0]);
-      }
-      if (_Texture.isExternalImage(data)) {
-        return _Texture.getExternalImageSize(data);
-      }
-      if (data && typeof data === "object" && data.constructor === Object) {
-        const textureDataArray = Object.values(data);
-        const untypedData = textureDataArray[0];
-        return { width: untypedData.width, height: untypedData.height };
-      }
-      throw new Error("texture size deduction failed");
-    }
-    /**
-     * Normalize TextureData to an array of TextureLevelData / ExternalImages
-     * @param data
-     * @param options
-     * @returns array of TextureLevelData / ExternalImages
-     */
-    static normalizeTextureData(data, options) {
-      let lodArray;
-      if (ArrayBuffer.isView(data)) {
-        lodArray = [
-          {
-            // ts-expect-error does data really need to be Uint8ClampedArray?
-            data,
-            width: options.width,
-            height: options.height
-            // depth: options.depth
-          }
-        ];
-      } else if (!Array.isArray(data)) {
-        lodArray = [data];
-      } else {
-        lodArray = data;
-      }
-      return lodArray;
-    }
-    /** Calculate the number of mip levels for a texture of width and height */
-    static getMipLevelCount(width, height) {
-      return Math.floor(Math.log2(Math.max(width, height))) + 1;
-    }
-    /** Convert luma.gl cubemap face constants to depth index */
-    static getCubeFaceDepth(face) {
-      switch (face) {
-        case "+X":
-          return 0;
-        case "-X":
-          return 1;
-        case "+Y":
-          return 2;
-        case "-Y":
-          return 3;
-        case "+Z":
-          return 4;
-        case "-Z":
-          return 5;
-        default:
-          throw new Error(face);
-      }
-    }
     /** Ensure we have integer coordinates */
     static normalizeProps(device, props) {
       const newProps = { ...props };
-      const overriddenDefaultProps = device?.props?._resourceDefaults?.texture || {};
-      Object.assign(newProps, overriddenDefaultProps);
       const { width, height } = newProps;
       if (typeof width === "number") {
         newProps.width = Math.max(1, Math.ceil(width));
@@ -2080,30 +2389,98 @@ var __exports__ = (() => {
       }
       return newProps;
     }
+    // HELPERS
+    /** Initialize texture with supplied props */
+    // eslint-disable-next-line max-statements
+    _initializeData(data) {
+      if (this.device.isExternalImage(data)) {
+        this.copyExternalImage({
+          image: data,
+          width: this.width,
+          height: this.height,
+          depth: this.depth,
+          mipLevel: 0,
+          x: 0,
+          y: 0,
+          z: 0,
+          aspect: "all",
+          colorSpace: "srgb",
+          premultipliedAlpha: false,
+          flipY: false
+        });
+      } else if (data) {
+        this.copyImageData({
+          data,
+          // width: this.width,
+          // height: this.height,
+          // depth: this.depth,
+          mipLevel: 0,
+          x: 0,
+          y: 0,
+          z: 0,
+          aspect: "all"
+        });
+      }
+    }
+    _normalizeCopyImageDataOptions(options_) {
+      const { width, height, depth } = this;
+      const options = { ..._Texture.defaultCopyDataOptions, width, height, depth, ...options_ };
+      const info = this.device.getTextureFormatInfo(this.format);
+      if (!options_.bytesPerRow && !info.bytesPerPixel) {
+        throw new Error(`bytesPerRow must be provided for texture format ${this.format}`);
+      }
+      options.bytesPerRow = options_.bytesPerRow || width * (info.bytesPerPixel || 4);
+      options.rowsPerImage = options_.rowsPerImage || height;
+      return options;
+    }
+    _normalizeCopyExternalImageOptions(options_) {
+      const size = this.device.getExternalImageSize(options_.image);
+      const options = { ..._Texture.defaultCopyExternalImageOptions, ...size, ...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 */
+  __publicField(Texture, "SAMPLE", 4);
+  /** The texture can be bound for use as a storage texture in a shader */
+  __publicField(Texture, "STORAGE", 8);
+  /** The texture can be used as a color or depth/stencil attachment in a render pass */
+  __publicField(Texture, "RENDER", 16);
+  /** The texture can be used as the source of a copy operation */
   __publicField(Texture, "COPY_SRC", 1);
+  /** he texture can be used as the destination of a copy or write operation */
   __publicField(Texture, "COPY_DST", 2);
+  /** @deprecated Use Texture.SAMPLE */
   __publicField(Texture, "TEXTURE", 4);
-  __publicField(Texture, "STORAGE", 8);
+  /** @deprecated Use Texture.RENDER */
   __publicField(Texture, "RENDER_ATTACHMENT", 16);
-  __publicField(Texture, "CubeFaces", ["+X", "-X", "+Y", "-Y", "+Z", "-Z"]);
+  /** Default options */
   __publicField(Texture, "defaultProps", {
     ...Resource.defaultProps,
     data: null,
     dimension: "2d",
     format: "rgba8unorm",
+    usage: _Texture.TEXTURE | _Texture.RENDER_ATTACHMENT | _Texture.COPY_DST,
     width: void 0,
     height: void 0,
     depth: 1,
-    mipmaps: false,
-    compressed: false,
-    usage: 0,
-    mipLevels: void 0,
+    mipLevels: 1,
     samples: void 0,
     sampler: {},
-    view: void 0,
-    flipY: void 0
+    view: void 0
+  });
+  __publicField(Texture, "defaultCopyDataOptions", {
+    data: void 0,
+    byteOffset: 0,
+    bytesPerRow: void 0,
+    rowsPerImage: void 0,
+    mipLevel: 0,
+    x: 0,
+    y: 0,
+    z: 0,
+    aspect: "all"
   });
   /** Default options */
   __publicField(Texture, "defaultCopyExternalImageOptions", {
@@ -2179,6 +2556,13 @@ var __exports__ = (() => {
             });
           }
         }
+        while (log2.length > currentMessage) {
+          const message = log2[currentMessage++];
+          formattedLog += formatCompilerMessage(message, [], 0, {
+            ...options,
+            inlineSource: false
+          });
+        }
         return formattedLog;
       case "issues":
       case "no":
@@ -2274,19 +2658,19 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       if (trigger === "warnings" && messages?.length === 0) {
         return;
       }
-      this._displayShaderLog(messages);
+      this._displayShaderLog(messages, this.id);
     }
     // PRIVATE
     /**
      * In-browser UI logging of errors
      * TODO - this HTML formatting code should not be in Device, should be pluggable
      */
-    _displayShaderLog(messages) {
+    _displayShaderLog(messages, shaderId) {
       if (typeof document === "undefined" || !document?.createElement) {
         return;
       }
-      const shaderName = getShaderName(this.source);
-      const shaderTitle = `${this.stage} ${shaderName}`;
+      const shaderName = shaderId;
+      const shaderTitle = `${this.stage} shader "${shaderName}"`;
       let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
       const translatedSource = this.getTranslatedSource();
       if (translatedSource) {
@@ -2294,7 +2678,7 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       }
       const button = document.createElement("Button");
       button.innerHTML = `
-<h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
+<h1>Compilation error in ${shaderTitle}</h1><br /><br />
 <code style="user-select:text;"><pre>
 ${htmlLog}
 </pre></code>`;
@@ -2332,38 +2716,6 @@ ${htmlLog}
     return match ? match[1] : defaultName;
   }
 
-  // ../core/src/adapter/resources/sampler.ts
-  var _Sampler = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "Sampler";
-    }
-    constructor(device, props) {
-      props = _Sampler.normalizeProps(device, props);
-      super(device, props, _Sampler.defaultProps);
-    }
-    static normalizeProps(device, props) {
-      const overriddenDefaultProps = device?.props?._resourceDefaults?.sampler || {};
-      const newProps = { ...props, ...overriddenDefaultProps };
-      return newProps;
-    }
-  };
-  var Sampler = _Sampler;
-  __publicField(Sampler, "defaultProps", {
-    ...Resource.defaultProps,
-    type: "color-sampler",
-    addressModeU: "clamp-to-edge",
-    addressModeV: "clamp-to-edge",
-    addressModeW: "clamp-to-edge",
-    magFilter: "nearest",
-    minFilter: "nearest",
-    mipmapFilter: "none",
-    lodMinClamp: 0,
-    lodMaxClamp: 32,
-    // Per WebGPU spec
-    compare: "less-equal",
-    maxAnisotropy: 1
-  });
-
   // ../core/src/adapter/resources/framebuffer.ts
   var _Framebuffer = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -2453,8 +2805,7 @@ ${htmlLog}
         usage: Texture.RENDER_ATTACHMENT,
         format,
         width: this.width,
-        height: this.height,
-        mipmaps: false
+        height: this.height
       });
     }
     /**
@@ -2515,16 +2866,6 @@ ${htmlLog}
       this.shaderLayout = this.props.shaderLayout;
       this.bufferLayout = this.props.bufferLayout || [];
     }
-    // DEPRECATED METHODS
-    /**
-     * Uniforms
-     * @deprecated Use uniforms buffers
-     * @note textures, samplers and uniform buffers should be set via `setBindings()`, these are not considered uniforms.
-     * @note In WebGL uniforms have a performance penalty, they are reset before each call to enable pipeline sharing.
-     */
-    setUniformsWebGL(uniforms) {
-      throw new Error("Use uniform blocks");
-    }
   };
   var RenderPipeline = _RenderPipeline;
   __publicField(RenderPipeline, "defaultProps", {
@@ -2538,10 +2879,9 @@ ${htmlLog}
     shaderLayout: null,
     bufferLayout: [],
     topology: "triangle-list",
+    colorAttachmentFormats: void 0,
+    depthStencilAttachmentFormat: void 0,
     parameters: {},
-    // isInstanced: false,
-    // instanceCount: 0,
-    // vertexCount: 0,
     bindings: {},
     uniforms: {}
   });
@@ -2556,9 +2896,7 @@ ${htmlLog}
       super(device, props, _RenderPass.defaultProps);
     }
     static normalizeProps(device, props) {
-      const overriddenDefaultProps = device.props._resourceDefaults?.renderPass;
-      const newProps = { ...overriddenDefaultProps, ...props };
-      return newProps;
+      return props;
     }
   };
   var RenderPass = _RenderPass;
@@ -2610,12 +2948,12 @@ ${htmlLog}
 
   // ../core/src/adapter/resources/compute-pass.ts
   var _ComputePass = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "ComputePass";
-    }
     constructor(device, props) {
       super(device, props, _ComputePass.defaultProps);
     }
+    get [Symbol.toStringTag]() {
+      return "ComputePass";
+    }
   };
   var ComputePass = _ComputePass;
   __publicField(ComputePass, "defaultProps", {
@@ -2633,11 +2971,11 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, _CommandEncoder.defaultProps);
     }
-    // TODO - luma.gl has these on the device, should we align with WebGPU API?
-    // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
-    // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   };
   var CommandEncoder = _CommandEncoder;
+  // TODO - luma.gl has these on the device, should we align with WebGPU API?
+  // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+  // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
   __publicField(CommandEncoder, "defaultProps", {
     ...Resource.defaultProps,
     measureExecutionTime: void 0
@@ -2657,42 +2995,31 @@ ${htmlLog}
     ...Resource.defaultProps
   });
 
-  // ../core/src/gpu-type-utils/decode-attribute-type.ts
-  function decodeShaderAttributeType(attributeType) {
-    const [dataType, components] = TYPE_INFO[attributeType];
-    const integer = dataType === "i32" || dataType === "u32";
-    const signed = dataType !== "u32";
-    const byteLength = TYPE_SIZES2[dataType] * components;
-    const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
+  // ../core/src/shadertypes/data-types/decode-shader-types.ts
+  function getVariableShaderTypeInfo(format) {
+    const decoded = UNIFORM_FORMATS[format];
+    return decoded;
+  }
+  function getAttributeShaderTypeInfo(attributeType) {
+    const [primitiveType, components] = TYPE_INFO[attributeType];
+    const integer = primitiveType === "i32" || primitiveType === "u32";
+    const signed = primitiveType !== "u32";
+    const byteLength = PRIMITIVE_TYPE_SIZES[primitiveType] * components;
     return {
-      dataType,
+      primitiveType,
       components,
-      defaultVertexFormat,
       byteLength,
       integer,
       signed
     };
   }
-  function getCompatibleVertexFormat(dataType, components) {
-    let vertexType;
-    switch (dataType) {
-      case "f32":
-        vertexType = "float32";
-        break;
-      case "i32":
-        vertexType = "sint32";
-        break;
-      case "u32":
-        vertexType = "uint32";
-        break;
-      case "f16":
-        return components <= 2 ? "float16x2" : "float16x4";
-    }
-    if (components === 1) {
-      return vertexType;
-    }
-    return `${vertexType}x${components}`;
-  }
+  var PRIMITIVE_TYPE_SIZES = {
+    f32: 4,
+    f16: 2,
+    i32: 4,
+    u32: 4
+    // 'bool-webgl': 4,
+  };
   var TYPE_INFO = {
     f32: ["f32", 1],
     "vec2<f32>": ["f32", 2],
@@ -2711,38 +3038,115 @@ ${htmlLog}
     "vec3<u32>": ["u32", 3],
     "vec4<u32>": ["u32", 4]
   };
-  var TYPE_SIZES2 = {
-    f32: 4,
-    f16: 2,
-    i32: 4,
-    u32: 4
-    // 'bool-webgl': 4,
+  var UNIFORM_FORMATS = {
+    f32: { type: "f32", components: 1 },
+    f16: { type: "f16", components: 1 },
+    i32: { type: "i32", components: 1 },
+    u32: { type: "u32", components: 1 },
+    // 'bool-webgl': {type: 'bool-webgl', components: 1},
+    "vec2<f32>": { type: "f32", components: 2 },
+    "vec3<f32>": { type: "f32", components: 3 },
+    "vec4<f32>": { type: "f32", components: 4 },
+    "vec2<f16>": { type: "f16", components: 2 },
+    "vec3<f16>": { type: "f16", components: 3 },
+    "vec4<f16>": { type: "f16", components: 4 },
+    "vec2<i32>": { type: "i32", components: 2 },
+    "vec3<i32>": { type: "i32", components: 3 },
+    "vec4<i32>": { type: "i32", components: 4 },
+    "vec2<u32>": { type: "u32", components: 2 },
+    "vec3<u32>": { type: "u32", components: 3 },
+    "vec4<u32>": { type: "u32", components: 4 },
+    "mat2x2<f32>": { type: "f32", components: 4 },
+    "mat2x3<f32>": { type: "f32", components: 6 },
+    "mat2x4<f32>": { type: "f32", components: 8 },
+    "mat3x2<f32>": { type: "f32", components: 6 },
+    "mat3x3<f32>": { type: "f32", components: 9 },
+    "mat3x4<f32>": { type: "f32", components: 12 },
+    "mat4x2<f32>": { type: "f32", components: 8 },
+    "mat4x3<f32>": { type: "f32", components: 12 },
+    "mat4x4<f32>": { type: "f32", components: 16 },
+    "mat2x2<f16>": { type: "f16", components: 4 },
+    "mat2x3<f16>": { type: "f16", components: 6 },
+    "mat2x4<f16>": { type: "f16", components: 8 },
+    "mat3x2<f16>": { type: "f16", components: 6 },
+    "mat3x3<f16>": { type: "f16", components: 9 },
+    "mat3x4<f16>": { type: "f16", components: 12 },
+    "mat4x2<f16>": { type: "f16", components: 8 },
+    "mat4x3<f16>": { type: "f16", components: 12 },
+    "mat4x4<f16>": { type: "f16", components: 16 },
+    "mat2x2<i32>": { type: "i32", components: 4 },
+    "mat2x3<i32>": { type: "i32", components: 6 },
+    "mat2x4<i32>": { type: "i32", components: 8 },
+    "mat3x2<i32>": { type: "i32", components: 6 },
+    "mat3x3<i32>": { type: "i32", components: 9 },
+    "mat3x4<i32>": { type: "i32", components: 12 },
+    "mat4x2<i32>": { type: "i32", components: 8 },
+    "mat4x3<i32>": { type: "i32", components: 12 },
+    "mat4x4<i32>": { type: "i32", components: 16 },
+    "mat2x2<u32>": { type: "u32", components: 4 },
+    "mat2x3<u32>": { type: "u32", components: 6 },
+    "mat2x4<u32>": { type: "u32", components: 8 },
+    "mat3x2<u32>": { type: "u32", components: 6 },
+    "mat3x3<u32>": { type: "u32", components: 9 },
+    "mat3x4<u32>": { type: "u32", components: 12 },
+    "mat4x2<u32>": { type: "u32", components: 8 },
+    "mat4x3<u32>": { type: "u32", components: 12 },
+    "mat4x4<u32>": { type: "u32", components: 16 }
+  };
+  var WGSL_ATTRIBUTE_TYPE_ALIAS_MAP = {
+    vec2i: "vec2<i32>",
+    vec3i: "vec3<i32>",
+    vec4i: "vec4<i32>",
+    vec2u: "vec2<u32>",
+    vec3u: "vec3<u32>",
+    vec4u: "vec4<u32>",
+    vec2f: "vec2<f32>",
+    vec3f: "vec3<f32>",
+    vec4f: "vec4<f32>",
+    // Requires the f16 extension.
+    vec2h: "vec2<f16>",
+    vec3h: "vec3<f16>",
+    vec4h: "vec4<f16>"
+  };
+  var WGSL_VARIABLE_TYPE_ALIAS_MAP = {
+    ...WGSL_ATTRIBUTE_TYPE_ALIAS_MAP,
+    mat2x2f: "mat2x2<f32>",
+    mat2x3f: "mat2x3<f32>",
+    mat2x4f: "mat2x4<f32>",
+    mat3x2f: "mat3x2<f32>",
+    mat3x3f: "mat3x3<f32>",
+    mat3x4f: "mat3x4<f32>",
+    mat4x2f: "mat4x2<f32>",
+    mat4x3f: "mat4x3<f32>",
+    mat4x4f: "mat4x4<f32>",
+    mat2x2i: "mat2x2<i32>",
+    mat2x3i: "mat2x3<i32>",
+    mat2x4i: "mat2x4<i32>",
+    mat3x2i: "mat3x2<i32>",
+    mat3x3i: "mat3x3<i32>",
+    mat3x4i: "mat3x4<i32>",
+    mat4x2i: "mat4x2<i32>",
+    mat4x3i: "mat4x3<i32>",
+    mat4x4i: "mat4x4<i32>",
+    mat2x2u: "mat2x2<u32>",
+    mat2x3u: "mat2x3<u32>",
+    mat2x4u: "mat2x4<u32>",
+    mat3x2u: "mat3x2<u32>",
+    mat3x3u: "mat3x3<u32>",
+    mat3x4u: "mat3x4<u32>",
+    mat4x2u: "mat4x2<u32>",
+    mat4x3u: "mat4x3<u32>",
+    mat4x4u: "mat4x4<u32>",
+    mat2x2h: "mat2x2<f16>",
+    mat2x3h: "mat2x3<f16>",
+    mat2x4h: "mat2x4<f16>",
+    mat3x2h: "mat3x2<f16>",
+    mat3x3h: "mat3x3<f16>",
+    mat3x4h: "mat3x4<f16>",
+    mat4x2h: "mat4x2<f16>",
+    mat4x3h: "mat4x3<f16>",
+    mat4x4h: "mat4x4<f16>"
   };
-
-  // ../core/src/gpu-type-utils/decode-vertex-format.ts
-  function decodeVertexFormat(format) {
-    let webglOnly;
-    if (format.endsWith("-webgl")) {
-      format.replace("-webgl", "");
-      webglOnly = true;
-    }
-    const [type_, count] = format.split("x");
-    const type = type_;
-    const components = count ? parseInt(count) : 1;
-    const decodedType = decodeVertexType(type);
-    const result = {
-      type,
-      components,
-      byteLength: decodedType.byteLength * components,
-      integer: decodedType.integer,
-      signed: decodedType.signed,
-      normalized: decodedType.normalized
-    };
-    if (webglOnly) {
-      result.webglOnly = true;
-    }
-    return result;
-  }
 
   // ../core/src/adapter-utils/get-attribute-from-layouts.ts
   function getAttributeInfosFromLayouts(shaderLayout, bufferLayout) {
@@ -2772,15 +3176,16 @@ ${htmlLog}
     if (!shaderDeclaration) {
       return null;
     }
-    const attributeTypeInfo = decodeShaderAttributeType(shaderDeclaration.type);
-    const vertexFormat = bufferMapping?.vertexFormat || attributeTypeInfo.defaultVertexFormat;
-    const vertexFormatInfo = decodeVertexFormat(vertexFormat);
+    const attributeTypeInfo = getAttributeShaderTypeInfo(shaderDeclaration.type);
+    const defaultVertexFormat = getCompatibleVertexFormat(attributeTypeInfo);
+    const vertexFormat = bufferMapping?.vertexFormat || defaultVertexFormat;
+    const vertexFormatInfo = getVertexFormatInfo(vertexFormat);
     return {
       attributeName: bufferMapping?.attributeName || shaderDeclaration.name,
       bufferName: bufferMapping?.bufferName || shaderDeclaration.name,
       location: shaderDeclaration.location,
       shaderType: shaderDeclaration.type,
-      shaderDataType: attributeTypeInfo.dataType,
+      primitiveType: attributeTypeInfo.primitiveType,
       shaderComponents: attributeTypeInfo.components,
       vertexFormat,
       bufferDataType: vertexFormatInfo.type,
@@ -2842,7 +3247,7 @@ ${htmlLog}
       let byteStride = bufferLayout.byteStride;
       if (typeof bufferLayout.byteStride !== "number") {
         for (const attributeMapping2 of bufferLayout.attributes || []) {
-          const info = decodeVertexFormat(attributeMapping2.format);
+          const info = getVertexFormatInfo(attributeMapping2.format);
           byteStride += info.byteLength;
         }
       }
@@ -2879,26 +3284,23 @@ ${htmlLog}
       super(device, props, _VertexArray.defaultProps);
       this.maxVertexAttributes = device.limits.maxVertexAttributes;
       this.attributes = new Array(this.maxVertexAttributes).fill(null);
-      const { shaderLayout, bufferLayout } = props.renderPipeline || {};
-      if (!shaderLayout || !bufferLayout) {
-        throw new Error("VertexArray");
-      }
       this.attributeInfos = getAttributeInfosByLocation(
-        shaderLayout,
-        bufferLayout,
+        props.shaderLayout,
+        props.bufferLayout,
         this.maxVertexAttributes
       );
     }
     // DEPRECATED METHODS
     /** @deprecated Set constant attributes (WebGL only) */
     setConstantWebGL(location, value) {
-      this.device.reportError(new Error("constant attributes not supported"));
+      this.device.reportError(new Error("constant attributes not supported"), this)();
     }
   };
   var VertexArray = _VertexArray;
   __publicField(VertexArray, "defaultProps", {
     ...Resource.defaultProps,
-    renderPipeline: null
+    shaderLayout: void 0,
+    bufferLayout: []
   });
 
   // ../core/src/adapter/resources/transform-feedback.ts
@@ -2951,46 +3353,6 @@ ${htmlLog}
     }
   });
 
-  // ../core/src/gpu-type-utils/decode-shader-types.ts
-  var UNIFORM_FORMATS = {
-    f32: { type: "f32", components: 1 },
-    i32: { type: "i32", components: 1 },
-    u32: { type: "u32", components: 1 },
-    // 'bool-webgl': {type: 'bool-webgl', components: 1},
-    "vec2<f32>": { type: "f32", components: 2 },
-    "vec3<f32>": { type: "f32", components: 3 },
-    "vec4<f32>": { type: "f32", components: 4 },
-    "vec2<i32>": { type: "i32", components: 2 },
-    "vec3<i32>": { type: "i32", components: 3 },
-    "vec4<i32>": { type: "i32", components: 4 },
-    "vec2<u32>": { type: "u32", components: 2 },
-    "vec3<u32>": { type: "u32", components: 3 },
-    "vec4<u32>": { type: "u32", components: 4 },
-    "mat2x2<f32>": { type: "f32", components: 4 },
-    "mat2x3<f32>": { type: "f32", components: 6 },
-    "mat2x4<f32>": { type: "f32", components: 8 },
-    "mat3x2<f32>": { type: "f32", components: 6 },
-    "mat3x3<f32>": { type: "f32", components: 9 },
-    "mat3x4<f32>": { type: "f32", components: 12 },
-    "mat4x2<f32>": { type: "f32", components: 8 },
-    "mat4x3<f32>": { type: "f32", components: 12 },
-    "mat4x4<f32>": { type: "f32", components: 16 }
-  };
-  function decodeShaderUniformType(format) {
-    const decoded = UNIFORM_FORMATS[format];
-    return decoded;
-  }
-  function alignTo(size, count) {
-    switch (count) {
-      case 1:
-        return size;
-      case 2:
-        return size + size % 2;
-      default:
-        return size + (4 - size % 4) % 4;
-    }
-  }
-
   // ../core/src/utils/array-utils-flat.ts
   var arrayBuffer;
   function getScratchArrayBuffer(byteLength) {
@@ -3025,7 +3387,7 @@ ${htmlLog}
     constructor(uniformTypes) {
       let size = 0;
       for (const [key, uniformType] of Object.entries(uniformTypes)) {
-        const typeAndComponents = decodeShaderUniformType(uniformType);
+        const typeAndComponents = getVariableShaderTypeInfo(uniformType);
         const { type, components: count } = typeAndComponents;
         size = alignTo(size, count);
         const offset = size;
@@ -3274,137 +3636,86 @@ ${htmlLog}
     }
   };
 
-  // ../core/src/gpu-type-utils/vertex-format-from-attribute.ts
-  function getDataTypeFromTypedArray(arrayOrType) {
-    const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
-    switch (type) {
-      case Float32Array:
-        return "float32";
-      case Uint16Array:
-        return "uint16";
-      case Uint32Array:
-        return "uint32";
-      case Uint8Array:
-      case Uint8ClampedArray:
-        return "uint8";
-      case Int8Array:
-        return "sint8";
-      case Int16Array:
-        return "sint16";
-      case Int32Array:
-        return "sint32";
-      default:
-        throw new Error(type.constructor.name);
-    }
-  }
-  function getTypedArrayFromDataType(dataType) {
-    switch (dataType) {
-      case "float32":
-        return Float32Array;
-      case "uint32":
-        return Uint32Array;
-      case "sint32":
-        return Int32Array;
-      case "uint16":
-      case "unorm16":
-        return Uint16Array;
-      case "sint16":
-      case "snorm16":
-        return Int16Array;
-      case "uint8":
-      case "unorm8":
-        return Uint8Array;
-      case "sint8":
-      case "snorm8":
-        return Int8Array;
-      default:
-        throw new Error(dataType);
-    }
-  }
-  function getVertexFormatFromAttribute(typedArray, size, normalized) {
-    if (!size || size > 4) {
-      throw new Error(`size ${size}`);
-    }
-    const components = size;
-    let dataType = getDataTypeFromTypedArray(typedArray);
-    if (dataType === "uint8" && normalized && components === 1) {
-      return "unorm8-webgl";
-    }
-    if (dataType === "uint8" && normalized && components === 3) {
-      return "unorm8x3-webgl";
-    }
-    if (dataType === "uint8" || dataType === "sint8") {
-      if (components === 1 || components === 3) {
-        throw new Error(`size: ${size}`);
-      }
-      if (normalized) {
-        dataType = dataType.replace("int", "norm");
-      }
-      return `${dataType}x${components}`;
-    }
-    if (dataType === "uint16" || dataType === "sint16") {
-      if (components === 1 || components === 3) {
-        throw new Error(`size: ${size}`);
-      }
-      if (normalized) {
-        dataType = dataType.replace("int", "norm");
-      }
-      return `${dataType}x${components}`;
-    }
-    if (components === 1) {
-      return dataType;
+  // ../core/src/shadertypes/textures/pixel-utils.ts
+  function readPixel(pixelData, x, y, bitsPerChannel) {
+    if (x < 0 || x >= pixelData.width || y < 0 || y >= pixelData.height) {
+      throw new Error("Coordinates out of bounds.");
+    }
+    const byteOffset = y * pixelData.bytesPerRow + x * pixelData.bytesPerPixel;
+    const pixelDataView = new DataView(pixelData.arrayBuffer, byteOffset, pixelData.bytesPerPixel);
+    let bitOffsetWithinPixel = 0;
+    const channels = [];
+    for (let i = 0; i < 4; i++) {
+      const bits = bitsPerChannel[i];
+      if (bits <= 0) {
+        channels.push(0);
+      } else {
+        const channelValue = readBitsFromDataView(pixelDataView, bitOffsetWithinPixel, bits);
+        channels.push(channelValue);
+        bitOffsetWithinPixel += bits;
+      }
+    }
+    return [channels[0], channels[1], channels[2], channels[3]];
+  }
+  function writePixel(dataView, bitOffset, bitsPerChannel, pixel) {
+    let currentBitOffset = bitOffset;
+    for (let channel = 0; channel < 4; channel++) {
+      const bits = bitsPerChannel[channel];
+      const maxValue = (1 << bits) - 1;
+      const channelValue = pixel[channel] & maxValue;
+      writeBitsToDataView(dataView, currentBitOffset, bits, channelValue);
+      currentBitOffset += bits;
+    }
+  }
+  function readBitsFromDataView(dataView, bitOffset, bitCount) {
+    if (bitOffset % 8 === 0) {
+      const byteOffset = bitOffset / 8;
+      if (bitCount === 8 && byteOffset + 1 <= dataView.byteLength) {
+        return dataView.getUint8(byteOffset);
+      } else if (bitCount === 16 && byteOffset + 2 <= dataView.byteLength) {
+        return dataView.getUint16(byteOffset, false);
+      } else if (bitCount === 32 && byteOffset + 4 <= dataView.byteLength) {
+        return dataView.getUint32(byteOffset, false);
+      }
+    }
+    let value = 0;
+    for (let i = 0; i < bitCount; i++) {
+      const overallBitIndex = bitOffset + i;
+      const byteIndex = Math.floor(overallBitIndex / 8);
+      const bitIndex = overallBitIndex % 8;
+      const byteValue = dataView.getUint8(byteIndex);
+      const bit = byteValue >> 7 - bitIndex & 1;
+      value = value << 1 | bit;
     }
-    return `${dataType}x${components}`;
+    return value;
   }
-
-  // ../core/src/adapter-utils/buffer-layout-helper.ts
-  var BufferLayoutHelper = class {
-    bufferLayouts;
-    constructor(bufferLayouts) {
-      this.bufferLayouts = bufferLayouts;
-    }
-    getBufferLayout(name2) {
-      return this.bufferLayouts.find((layout) => layout.name === name2) || null;
-    }
-    /** Get attribute names from a BufferLayout */
-    getAttributeNamesForBuffer(bufferLayout) {
-      return bufferLayout.attributes ? bufferLayout.attributes?.map((layout) => layout.attribute) : [bufferLayout.name];
-    }
-    mergeBufferLayouts(bufferLayouts1, bufferLayouts2) {
-      const mergedLayouts = [...bufferLayouts1];
-      for (const attribute of bufferLayouts2) {
-        const index = mergedLayouts.findIndex((attribute2) => attribute2.name === attribute.name);
-        if (index < 0) {
-          mergedLayouts.push(attribute);
-        } else {
-          mergedLayouts[index] = attribute;
-        }
+  function writeBitsToDataView(dataView, bitOffset, bitCount, value) {
+    if (bitOffset % 8 === 0) {
+      const byteOffset = bitOffset / 8;
+      if (bitCount === 8 && byteOffset + 1 <= dataView.byteLength) {
+        dataView.setUint8(byteOffset, value & 255);
+        return;
+      } else if (bitCount === 16 && byteOffset + 2 <= dataView.byteLength) {
+        dataView.setUint16(byteOffset, value & 65535, false);
+        return;
+      } else if (bitCount === 32 && byteOffset + 4 <= dataView.byteLength) {
+        dataView.setUint32(byteOffset, value, false);
+        return;
       }
-      return mergedLayouts;
     }
-    getBufferIndex(bufferName) {
-      const bufferIndex = this.bufferLayouts.findIndex((layout) => layout.name === bufferName);
-      if (bufferIndex === -1) {
-        log.warn(`BufferLayout: Missing buffer for "${bufferName}".`)();
+    for (let i = 0; i < bitCount; i++) {
+      const overallBitIndex = bitOffset + i;
+      const byteIndex = Math.floor(overallBitIndex / 8);
+      const bitIndex = overallBitIndex % 8;
+      const mask = 1 << 7 - bitIndex;
+      const bitValue = value >> bitCount - 1 - i & 1;
+      let currentByte = dataView.getUint8(byteIndex);
+      currentByte &= ~mask;
+      if (bitValue) {
+        currentByte |= mask;
       }
-      return bufferIndex;
+      dataView.setUint8(byteIndex, currentByte);
     }
-  };
-
-  // ../core/src/adapter-utils/buffer-layout-order.ts
-  function sortedBufferLayoutByShaderSourceLocations(shaderLayout, bufferLayout) {
-    const shaderLayoutMap = Object.fromEntries(
-      shaderLayout.attributes.map((attr) => [attr.name, attr.location])
-    );
-    const sortedLayout = bufferLayout.slice();
-    sortedLayout.sort((a, b) => {
-      const attributeNamesA = a.attributes ? a.attributes.map((attr) => attr.attribute) : [a.name];
-      const attributeNamesB = b.attributes ? b.attributes.map((attr) => attr.attribute) : [b.name];
-      const minLocationA = Math.min(...attributeNamesA.map((name2) => shaderLayoutMap[name2]));
-      const minLocationB = Math.min(...attributeNamesB.map((name2) => shaderLayoutMap[name2]));
-      return minLocationA - minLocationB;
-    });
-    return sortedLayout;
   }
 
   // bundle.ts