@luma.gl/core 9.2.0-alpha.1 → 9.2.0-alpha.5

package/dist/dist.dev.js

@@ -44,6 +44,7 @@ var __exports__ = (() => {
     DeviceLimits: () => DeviceLimits,
     ExternalTexture: () => ExternalTexture,
     Framebuffer: () => Framebuffer,
+    PipelineLayout: () => PipelineLayout,
     QuerySet: () => QuerySet,
     RenderPass: () => RenderPass,
     RenderPipeline: () => RenderPipeline,
@@ -51,30 +52,31 @@ 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,
     getAttributeInfosFromLayouts: () => getAttributeInfosFromLayouts,
     getAttributeShaderTypeInfo: () => getAttributeShaderTypeInfo,
-    getDataTypeFromTypedArray: () => getDataTypeFromTypedArray,
+    getDataType: () => getDataType,
     getDataTypeInfo: () => getDataTypeInfo,
+    getNormalizedDataType: () => getNormalizedDataType,
     getScratchArray: () => getScratchArray,
-    getTextureFormatCapabilities: () => getTextureFormatCapabilities,
-    getTextureFormatInfo: () => getTextureFormatInfo,
-    getTypedArrayFromDataType: () => getTypedArrayFromDataType,
+    getTypedArrayConstructor: () => getTypedArrayConstructor,
     getVariableShaderTypeInfo: () => getVariableShaderTypeInfo,
     getVertexFormatFromAttribute: () => getVertexFormatFromAttribute,
     getVertexFormatInfo: () => getVertexFormatInfo,
     log: () => log,
     luma: () => luma,
-    makeNormalizedDataType: () => makeNormalizedDataType,
-    makeVertexFormat: () => makeVertexFormat
+    makeVertexFormat: () => makeVertexFormat,
+    readPixel: () => readPixel,
+    textureFormatDecoder: () => textureFormatDecoder,
+    writePixel: () => writePixel
   });
 
   // ../../node_modules/@probe.gl/stats/dist/utils/hi-res-timestamp.js
@@ -315,7 +317,7 @@ var __exports__ = (() => {
   }
 
   // ../../node_modules/@probe.gl/env/dist/index.js
-  var VERSION = true ? "4.0.7" : "untranspiled source";
+  var VERSION = true ? "4.1.0" : "untranspiled source";
 
   // ../../node_modules/@probe.gl/log/dist/utils/local-storage.js
   function getStorage(type) {
@@ -890,10 +892,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 */
@@ -939,10 +937,10 @@ var __exports__ = (() => {
     byteOffset: 0,
     data: null,
     indexType: "uint16",
-    mappedAtCreation: false
+    onMapped: void 0
   });
 
-  // src/shadertypes/utils/decode-data-types.ts
+  // src/shadertypes/data-types/decode-data-types.ts
   function getDataTypeInfo(type) {
     const [signedType, primitiveType, byteLength] = NORMALIZED_TYPE_MAP[type];
     const normalized = type.includes("norm");
@@ -957,7 +955,7 @@ var __exports__ = (() => {
       signed
     };
   }
-  function makeNormalizedDataType(signedDataType) {
+  function getNormalizedDataType(signedDataType) {
     const dataType = signedDataType;
     switch (dataType) {
       case "uint8":
@@ -982,72 +980,117 @@ var __exports__ = (() => {
         return size + (4 - size % 4) % 4;
     }
   }
-  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 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 getTypedArrayFromDataType(type) {
-    switch (type) {
-      case "f32":
-      case "float32":
-        return Float32Array;
-      case "u32":
-      case "uint32":
-        return Uint32Array;
-      case "i32":
-      case "sint32":
-        return Int32Array;
+  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]
+  };
+
+  // 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 "unorm16":
-        return Uint16Array;
       case "sint16":
+      case "unorm16":
       case "snorm16":
-        return Int16Array;
-      case "uint8":
-      case "unorm8":
-        return Uint8Array;
-      case "sint8":
-      case "snorm8":
-        return Int8Array;
-      case "f16":
+      case "float16":
+        if (components === 1 || components === 3) {
+          throw new Error(`size: ${components}`);
+        }
+        return `${dataType}x${components}`;
       default:
-        throw new Error(type);
+        return components === 1 ? dataType : `${dataType}x${components}`;
     }
   }
-  var NORMALIZED_TYPE_MAP = {
-    uint8: ["uint8", "u32", 1, false],
-    sint8: ["sint8", "i32", 1, false],
-    unorm8: ["uint8", "f32", 1, true],
-    snorm8: ["sint8", "f32", 1, true],
-    uint16: ["uint16", "u32", 2, false],
-    sint16: ["sint16", "i32", 2, false],
-    unorm16: ["uint16", "u32", 2, true],
-    snorm16: ["sint16", "i32", 2, true],
-    float16: ["float16", "f16", 2, false],
-    float32: ["float32", "f32", 4, false],
-    uint32: ["uint32", "u32", 4, false],
-    sint32: ["sint32", "i32", 4, false]
-  };
+  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}`;
+  }
 
-  // src/shadertypes/utils/texture-format-table.ts
+  // 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";
@@ -1072,73 +1115,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": { channels: "rgba", bitsPerChannel: [10, 10, 10, 2], packed: true, p: 1 },
-    // 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
+    // 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" },
@@ -1147,7 +1182,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 },
@@ -1218,8 +1255,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
+  };
 
-  // src/shadertypes/utils/decode-texture-format.ts
+  // src/shadertypes/textures/texture-format-decoder.ts
   var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
     "bc1",
     "bc2",
@@ -1236,12 +1277,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));
-  }
+  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 (isTextureFormatCompressed(format)) {
+    if (textureFormatDecoder.isCompressed(format)) {
       formatInfo.channels = "rgb";
       formatInfo.components = 3;
       formatInfo.bytesPerPixel = 1;
@@ -1295,25 +1375,6 @@ var __exports__ = (() => {
     }
     return formatInfo;
   }
-  function getTextureFormatCapabilities(format) {
-    const info = getTextureFormatDefinition(format);
-    const formatCapabilities = {
-      format,
-      create: info.f ?? true,
-      render: info.render ?? true,
-      filter: info.filter ?? true,
-      blend: info.blend ?? true,
-      store: info.store ?? true
-    };
-    const formatInfo = getTextureFormatInfo(format);
-    const isDepthStencil = format.startsWith("depth") || format.startsWith("stencil");
-    const isSigned = formatInfo?.signed;
-    const isInteger = formatInfo?.integer;
-    const isWebGLSpecific = formatInfo?.webgl;
-    formatCapabilities.render &&= !isSigned;
-    formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
-    return formatCapabilities;
-  }
   function getTextureFormatInfoUsingTable(format) {
     const info = getTextureFormatDefinition(format);
     const bytesPerPixel = info.bytesPerPixel || 1;
@@ -1395,9 +1456,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;
@@ -1409,12 +1469,24 @@ var __exports__ = (() => {
     statsManager = lumaStats;
     /** An abstract timestamp used for change tracking */
     timestamp = 0;
+    /** True if this device has been reused during device creation (app has multiple references) */
+    _reused = false;
     /** Used by other luma.gl modules to store data on the device */
     _lumaData = {};
     _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 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) {
@@ -1453,7 +1525,7 @@ var __exports__ = (() => {
     }
     /** Check if a specific texture format is GPU compressed */
     isTextureFormatCompressed(format) {
-      return isTextureFormatCompressed(format);
+      return textureFormatDecoder.isCompressed(format);
     }
     // DEBUG METHODS
     pushDebugGroup(groupLabel) {
@@ -1477,12 +1549,40 @@ var __exports__ = (() => {
     incrementTimestamp() {
       return this.timestamp++;
     }
-    /** Report error (normally called for unhandled device errors) */
-    reportError(error, context) {
+    /**
+     * 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)();
       }
-      this.props.onError(error, context);
     }
     /** Returns the default / primary canvas context. Throws an error if no canvas context is available (a WebGPU compute device) */
     getDefaultCanvasContext() {
@@ -1535,8 +1635,12 @@ var __exports__ = (() => {
       throw new Error("not implemented");
     }
     // IMPLEMENTATION
+    /** Helper to get the canvas context props */
+    static _getCanvasContextProps(props) {
+      return props.createCanvasContext === true ? {} : props.createCanvasContext;
+    }
     _getDeviceTextureFormatCapabilities(format) {
-      const genericCapabilities = getTextureFormatCapabilities(format);
+      const genericCapabilities = textureFormatDecoder.getCapabilities(format);
       const checkFeature = (feature) => (typeof feature === "string" ? this.features.has(feature) : feature) ?? true;
       const supported = checkFeature(genericCapabilities.create);
       return {
@@ -1554,13 +1658,17 @@ var __exports__ = (() => {
         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 type uint16 or uint32")();
+      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;
@@ -1575,11 +1683,16 @@ var __exports__ = (() => {
     // WebGL specific
     webgl: {},
     // Callbacks
-    onError: (error, context) => log.error(error.message, context)(),
+    // eslint-disable-next-line handle-callback-err
+    onError: (error, context) => {
+    },
     onResize: (context, info) => {
       const [width, height] = context.getDevicePixelSize();
-      const [prevWidth, prevHeight] = info.oldPixelSize;
-      log.log(1, `${context} Resized ${prevWidth}x${prevHeight} => ${width}x${height}px`)();
+      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}`)(),
@@ -1593,6 +1706,7 @@ var __exports__ = (() => {
     // Note: log setting is queried by the spector.js code
     debugSpectorJSUrl: void 0,
     // Experimental
+    _reuseDevices: false,
     _requestMaxLimits: true,
     _cacheShaders: false,
     _cachePipelines: false,
@@ -1831,6 +1945,8 @@ var __exports__ = (() => {
     _initializedResolvers = withResolvers();
     _resizeObserver;
     _intersectionObserver;
+    _position;
+    destroyed = false;
     toString() {
       return `${this[Symbol.toStringTag]}(${this.id})`;
     }
@@ -1866,6 +1982,7 @@ var __exports__ = (() => {
       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)
@@ -1878,8 +1995,14 @@ var __exports__ = (() => {
           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 size covered by the canvas in CSS pixels
@@ -1889,6 +2012,9 @@ var __exports__ = (() => {
     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
@@ -1995,7 +2121,10 @@ var __exports__ = (() => {
       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) {
+        if (typeof this.props.useDevicePixels === "number") {
+          const dpr = this.props.useDevicePixels;
+          this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
+        } else if (this.props.useDevicePixels) {
           this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
         } else {
           this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
@@ -2004,12 +2133,14 @@ var __exports__ = (() => {
       }
       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",
@@ -2017,6 +2148,34 @@ var __exports__ = (() => {
         { once: true }
       );
     }
+    /** Start tracking positions with a timer */
+    _trackPosition(intervalMs = 100) {
+      const intervalId = setInterval(() => {
+        if (this.destroyed) {
+          clearInterval(intervalId);
+        } else {
+          this.updatePosition();
+        }
+      }, intervalMs);
+    }
+    /**
+     * 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.
+     */
+    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", {
@@ -2029,7 +2188,8 @@ var __exports__ = (() => {
     container: null,
     visible: true,
     alphaMode: "opaque",
-    colorSpace: "srgb"
+    colorSpace: "srgb",
+    trackPosition: false
   });
   function getContainer(container) {
     if (typeof container === "string") {
@@ -2817,7 +2977,7 @@ ${htmlLog}
     ...Resource.defaultProps
   });
 
-  // src/shadertypes/utils/decode-shader-types.ts
+  // src/shadertypes/data-types/decode-shader-types.ts
   function getVariableShaderTypeInfo(format) {
     const decoded = UNIFORM_FORMATS[format];
     return decoded;
@@ -2970,86 +3130,6 @@ ${htmlLog}
     mat4x4h: "mat4x4<f16>"
   };
 
-  // src/shadertypes/utils/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 ? makeNormalizedDataType(signedDataType) : signedDataType;
-    switch (dataType) {
-      case "unorm8":
-        if (components === 1) {
-          return "unorm8-webgl";
-        }
-        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 = getDataTypeFromTypedArray(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}`;
-  }
-
   // src/adapter-utils/get-attribute-from-layouts.ts
   function getAttributeInfosFromLayouts(shaderLayout, bufferLayout) {
     const attributeInfos = {};
@@ -3195,7 +3275,7 @@ ${htmlLog}
     // DEPRECATED METHODS
     /** @deprecated Set constant attributes (WebGL only) */
     setConstantWebGL(location, value) {
-      throw new Error("constant attributes not supported");
+      this.device.reportError(new Error("constant attributes not supported"), this)();
     }
   };
   var VertexArray = _VertexArray;
@@ -3237,6 +3317,24 @@ ${htmlLog}
     count: void 0
   });
 
+  // src/adapter/resources/pipeline-layout.ts
+  var _PipelineLayout = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "PipelineLayout";
+    }
+    constructor(device, props) {
+      super(device, props, _PipelineLayout.defaultProps);
+    }
+  };
+  var PipelineLayout = _PipelineLayout;
+  __publicField(PipelineLayout, "defaultProps", {
+    ...Resource.defaultProps,
+    shaderLayout: {
+      attributes: [],
+      bindings: []
+    }
+  });
+
   // src/utils/array-utils-flat.ts
   var arrayBuffer;
   function getScratchArrayBuffer(byteLength) {
@@ -3268,11 +3366,12 @@ ${htmlLog}
     /** number of bytes needed for buffer allocation */
     byteLength;
     /** Create a new UniformBufferLayout given a map of attributes. */
-    constructor(uniformTypes) {
+    constructor(uniformTypes, uniformSizes = {}) {
       let size = 0;
       for (const [key, uniformType] of Object.entries(uniformTypes)) {
         const typeAndComponents = getVariableShaderTypeInfo(uniformType);
-        const { type, components: count } = typeAndComponents;
+        const { type, components } = typeAndComponents;
+        const count = components * (uniformSizes?.[key] ?? 1);
         size = alignTo(size, count);
         const offset = size;
         size += count;
@@ -3284,8 +3383,7 @@ ${htmlLog}
     }
     /** Get the data for the complete buffer */
     getData(uniformValues) {
-      const bufferSize = Math.max(this.byteLength, minBufferSize);
-      const arrayBuffer2 = getScratchArrayBuffer(bufferSize);
+      const arrayBuffer2 = getScratchArrayBuffer(this.byteLength);
       const typedArrays = {
         i32: new Int32Array(arrayBuffer2),
         u32: new Uint32Array(arrayBuffer2),
@@ -3319,7 +3417,7 @@ ${htmlLog}
           typedArray.set(value, offset);
         }
       }
-      return new Uint8Array(arrayBuffer2);
+      return new Uint8Array(arrayBuffer2, 0, this.byteLength);
     }
     /** Does this layout have a field with specified name */
     has(name2) {
@@ -3425,7 +3523,10 @@ ${htmlLog}
     constructor(blocks) {
       for (const [bufferName, block] of Object.entries(blocks)) {
         const uniformBufferName = bufferName;
-        const uniformBufferLayout = new UniformBufferLayout(block.uniformTypes || {});
+        const uniformBufferLayout = new UniformBufferLayout(
+          block.uniformTypes ?? {},
+          block.uniformSizes ?? {}
+        );
         this.uniformBufferLayouts.set(uniformBufferName, uniformBufferLayout);
         const uniformBlock = new UniformBlock({ name: bufferName });
         uniformBlock.setUniforms(block.defaultUniforms || {});
@@ -3520,32 +3621,87 @@ ${htmlLog}
     }
   };
 
-  // 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;
-        }
+  // 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 value;
+  }
+  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;
     }
-  };
+    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;
+      }
+      dataView.setUint8(byteIndex, currentByte);
+    }
+  }
   return __toCommonJS(bundle_exports);
 })();
       return __exports__;