@luma.gl/core 9.0.0-beta.4 → 9.0.0-beta.6

package/dist/dist.dev.js

@@ -39,8 +39,11 @@ var __exports__ = (() => {
     ComputePass: () => ComputePass,
     ComputePipeline: () => ComputePipeline,
     Device: () => Device,
+    DeviceFeatures: () => DeviceFeatures,
+    DeviceLimits: () => DeviceLimits,
     ExternalTexture: () => ExternalTexture,
     Framebuffer: () => Framebuffer,
+    QuerySet: () => QuerySet,
     RenderPass: () => RenderPass,
     RenderPipeline: () => RenderPipeline,
     Resource: () => Resource,
@@ -48,6 +51,7 @@ var __exports__ = (() => {
     Shader: () => Shader,
     StatsManager: () => StatsManager,
     Texture: () => Texture,
+    TextureView: () => TextureView,
     TransformFeedback: () => TransformFeedback,
     UniformBlock: () => UniformBlock,
     UniformBufferLayout: () => UniformBufferLayout,
@@ -75,7 +79,6 @@ var __exports__ = (() => {
     glsl: () => glsl,
     isNumberArray: () => isNumberArray,
     isObjectEmpty: () => isObjectEmpty,
-    isPowerOfTwo: () => isPowerOfTwo,
     isTypedArray: () => isTypedArray,
     isUniformValue: () => isUniformValue,
     loadFile: () => loadFile,
@@ -176,20 +179,20 @@ var __exports__ = (() => {
   function formatTime(ms) {
     let formatted;
     if (ms < 10) {
-      formatted = "".concat(ms.toFixed(2), "ms");
+      formatted = `${ms.toFixed(2)}ms`;
     } else if (ms < 100) {
-      formatted = "".concat(ms.toFixed(1), "ms");
+      formatted = `${ms.toFixed(1)}ms`;
     } else if (ms < 1e3) {
-      formatted = "".concat(ms.toFixed(0), "ms");
+      formatted = `${ms.toFixed(0)}ms`;
     } else {
-      formatted = "".concat((ms / 1e3).toFixed(2), "s");
+      formatted = `${(ms / 1e3).toFixed(2)}s`;
     }
     return formatted;
   }
   function leftPad(string) {
     let length = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 8;
     const padLength = Math.max(length - string.length, 0);
-    return "".concat(" ".repeat(padLength)).concat(string);
+    return `${" ".repeat(padLength)}${string}`;
   }
   function formatImage(image, message, scale) {
     let maxWidth = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 600;
@@ -199,8 +202,8 @@ var __exports__ = (() => {
     }
     const width = image.width * scale;
     const height = image.height * scale;
-    const style = ["font-size:1px;", "padding:".concat(Math.floor(height / 2), "px ").concat(Math.floor(width / 2), "px;"), "line-height:".concat(height, "px;"), "background:url(".concat(imageUrl, ");"), "background-size:".concat(width, "px ").concat(height, "px;"), "color:transparent;"].join("");
-    return ["".concat(message, " %c+"), style];
+    const style = ["font-size:1px;", `padding:${Math.floor(height / 2)}px ${Math.floor(width / 2)}px;`, `line-height:${height}px;`, `background:url(${imageUrl});`, `background-size:${width}px ${height}px;`, "color:transparent;"].join("");
+    return [`${message} %c+`, style];
   }
 
   // ../../node_modules/@probe.gl/log/dist/utils/color.js
@@ -235,11 +238,11 @@ var __exports__ = (() => {
     if (!isBrowser && typeof string === "string") {
       if (color) {
         const colorCode = getColor(color);
-        string = "\x1B[".concat(colorCode, "m").concat(string, "\x1B[39m");
+        string = `\x1B[${colorCode}m${string}\x1B[39m`;
       }
       if (background) {
         const colorCode = getColor(background);
-        string = "\x1B[".concat(colorCode + BACKGROUND_INCREMENT, "m").concat(string, "\x1B[49m");
+        string = `\x1B[${colorCode + BACKGROUND_INCREMENT}m${string}\x1B[49m`;
       }
     }
     return string;
@@ -318,8 +321,8 @@ var __exports__ = (() => {
       this.LOG_THROTTLE_TIMEOUT = 0;
       this.id = id;
       this.userData = {};
-      this._storage = new LocalStorage("__probe-".concat(this.id, "__"), DEFAULT_LOG_CONFIGURATION);
-      this.timeStamp("".concat(this.id, " started"));
+      this._storage = new LocalStorage(`__probe-${this.id}__`, DEFAULT_LOG_CONFIGURATION);
+      this.timeStamp(`${this.id} started`);
       autobind(this);
       Object.seal(this);
     }
@@ -388,10 +391,10 @@ var __exports__ = (() => {
       return this._getLogFunction(0, message, originalConsole.error, arguments);
     }
     deprecated(oldUsage, newUsage) {
-      return this.warn("`".concat(oldUsage, "` is deprecated and will be removed in a later version. Use `").concat(newUsage, "` instead"));
+      return this.warn(`\`${oldUsage}\` is deprecated and will be removed in a later version. Use \`${newUsage}\` instead`);
     }
     removed(oldUsage, newUsage) {
-      return this.error("`".concat(oldUsage, "` has been removed. Use `").concat(newUsage, "` instead"));
+      return this.error(`\`${oldUsage}\` has been removed. Use \`${newUsage}\` instead`);
     }
     probe(logLevel, message) {
       return this._getLogFunction(logLevel, message, originalConsole.log, arguments, {
@@ -566,7 +569,7 @@ var __exports__ = (() => {
   function decorateMessage(id, message, opts) {
     if (typeof message === "string") {
       const time = opts.time ? leftPad(formatTime(opts.total)) : "";
-      message = opts.time ? "".concat(id, ": ").concat(time, "  ").concat(message) : "".concat(id, ": ").concat(message);
+      message = opts.time ? `${id}: ${time}  ${message}` : `${id}: ${message}`;
       message = addColor(message, opts.color, opts.background);
     }
     return message;
@@ -617,15 +620,16 @@ var __exports__ = (() => {
     return "empty";
   }
 
+  // ../../node_modules/@probe.gl/log/dist/init.js
+  globalThis.probe = {};
+
   // ../../node_modules/@probe.gl/log/dist/index.js
   var dist_default = new Log({
     id: "@probe.gl/log"
   });
 
   // src/utils/log.ts
-  var log = new Log({
-    id: "luma.gl"
-  });
+  var log = new Log({ id: "luma.gl" });
 
   // ../../node_modules/@probe.gl/stats/dist/utils/hi-res-timestamp.js
   function getHiResTimestamp2() {
@@ -826,9 +830,7 @@ var __exports__ = (() => {
     }
     get(name2) {
       if (!this.stats.has(name2)) {
-        this.stats.set(name2, new Stats({
-          id: name2
-        }));
+        this.stats.set(name2, new Stats({ id: name2 }));
       }
       return this.stats.get(name2);
     }
@@ -840,7 +842,9 @@ var __exports__ = (() => {
     const VERSION3 = typeof __VERSION__ !== "undefined" ? __VERSION__ : "running from source";
     const STARTUP_MESSAGE = "set luma.log.level=1 (or higher) to trace rendering";
     if (globalThis.luma && globalThis.luma.VERSION !== VERSION3) {
-      throw new Error(`luma.gl - multiple VERSIONs detected: ${globalThis.luma.VERSION} vs ${VERSION3}`);
+      throw new Error(
+        `luma.gl - multiple VERSIONs detected: ${globalThis.luma.VERSION} vs ${VERSION3}`
+      );
     }
     if (!globalThis.luma) {
       if (isBrowser()) {
@@ -850,6 +854,8 @@ var __exports__ = (() => {
         VERSION: VERSION3,
         version: VERSION3,
         log,
+        // A global stats object that various components can add information to
+        // E.g. see webgl/resource.js
         stats: lumaStats
       };
     }
@@ -875,9 +881,6 @@ var __exports__ = (() => {
     const count = uidCounters[id]++;
     return `${id}-${count}`;
   }
-  function isPowerOfTwo(n) {
-    return n > 0 && (n & n - 1) === 0;
-  }
   function isObjectEmpty(obj) {
     let isEmpty = true;
     for (const key in obj) {
@@ -889,10 +892,20 @@ var __exports__ = (() => {
 
   // src/adapter/resources/resource.ts
   var Resource = class {
+    /** props.id, for debugging. */
+    id;
+    props;
     userData = {};
+    _device;
+    /** Whether this resource has been destroyed */
     destroyed = false;
+    /** For resources that allocate GPU memory */
     allocatedBytes = 0;
+    /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
     _attachedResources = /* @__PURE__ */ new Set();
+    /**
+     * Create a new Resource. Called from Subclass
+     */
     constructor(device, props, defaultProps) {
       if (!device) {
         throw new Error("no device");
@@ -905,9 +918,13 @@ var __exports__ = (() => {
       this.userData = this.props.userData || {};
       this.addStats();
     }
+    /**
+     * destroy can be called on any resource to release it before it is garbage collected.
+     */
     destroy() {
       this.destroyResource();
     }
+    /** @deprecated Use destroy() */
     delete() {
       this.destroy();
       return this;
@@ -915,48 +932,70 @@ var __exports__ = (() => {
     toString() {
       return `${this[Symbol.toStringTag] || this.constructor.name}(${this.id})`;
     }
+    /**
+     * Combines a map of user props and default props, only including props from defaultProps
+     * @returns returns a map of overridden default props
+     */
     getProps() {
       return this.props;
     }
+    // ATTACHED RESOURCES
+    /**
+     * Attaches a resource. Attached resources are auto destroyed when this resource is destroyed
+     * Called automatically when sub resources are auto created but can be called by application
+     */
     attachResource(resource) {
       this._attachedResources.add(resource);
     }
+    /**
+     * Detach an attached resource. The resource will no longer be auto-destroyed when this resource is destroyed.
+     */
     detachResource(resource) {
       this._attachedResources.delete(resource);
     }
+    /**
+     * Destroys a resource (only if owned), and removes from the owned (auto-destroy) list for this resource.
+     */
     destroyAttachedResource(resource) {
       if (this._attachedResources.delete(resource)) {
         resource.destroy();
       }
     }
+    /** Destroy all owned resources. Make sure the resources are no longer needed before calling. */
     destroyAttachedResources() {
       for (const resource of Object.values(this._attachedResources)) {
         resource.destroy();
       }
       this._attachedResources = /* @__PURE__ */ new Set();
     }
+    // PROTECTED METHODS
+    /** Perform all destroy steps. Can be called by derived resources when overriding destroy() */
     destroyResource() {
       this.destroyAttachedResources();
       this.removeStats();
       this.destroyed = true;
     }
+    /** Called by .destroy() to track object destruction. Subclass must call if overriding destroy() */
     removeStats() {
       const stats = this._device.statsManager.getStats("Resource Counts");
       const name2 = this[Symbol.toStringTag];
       stats.get(`${name2}s Active`).decrementCount();
     }
+    /** Called by subclass to track memory allocations */
     trackAllocatedMemory(bytes, name2 = this[Symbol.toStringTag]) {
       const stats = this._device.statsManager.getStats("Resource Counts");
       stats.get("GPU Memory").addCount(bytes);
       stats.get(`${name2} Memory`).addCount(bytes);
       this.allocatedBytes = bytes;
     }
+    /** Called by subclass to track memory deallocations */
     trackDeallocatedMemory(name2 = this[Symbol.toStringTag]) {
       const stats = this._device.statsManager.getStats("Resource Counts");
       stats.get("GPU Memory").subtractCount(this.allocatedBytes);
       stats.get(`${name2} Memory`).subtractCount(this.allocatedBytes);
       this.allocatedBytes = 0;
     }
+    /** Called by resource constructor to track object creation */
     addStats() {
       const stats = this._device.statsManager.getStats("Resource Counts");
       const name2 = this[Symbol.toStringTag];
@@ -965,15 +1004,14 @@ var __exports__ = (() => {
       stats.get(`${name2}s Active`).incrementCount();
     }
   };
+  /** Default properties for resource */
   __publicField(Resource, "defaultProps", {
     id: "undefined",
     handle: void 0,
     userData: void 0
   });
   function selectivelyMerge(props, defaultProps) {
-    const mergedProps = {
-      ...defaultProps
-    };
+    const mergedProps = { ...defaultProps };
     for (const key in props) {
       if (props[key] !== void 0) {
         mergedProps[key] = props[key];
@@ -987,10 +1025,12 @@ var __exports__ = (() => {
     get [Symbol.toStringTag]() {
       return "Buffer";
     }
+    /** The usage with which this buffer was created */
+    usage;
+    /** For index buffers, whether indices are 16 or 32 bit */
+    indexType;
     constructor(device, props) {
-      const deducedProps = {
-        ...props
-      };
+      const deducedProps = { ...props };
       if ((props.usage || 0) & _Buffer.INDEX && !props.indexType) {
         if (props.data instanceof Uint32Array) {
           deducedProps.indexType = "uint32";
@@ -1002,13 +1042,19 @@ var __exports__ = (() => {
       this.usage = props.usage || 0;
       this.indexType = deducedProps.indexType;
     }
-    readSyncWebGL2(byteOffset, byteLength) {
+    /** 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 */
     _setDebugData(data, byteOffset, byteLength) {
       const buffer = ArrayBuffer.isView(data) ? data.buffer : data;
-      const debugDataLength = Math.min(data ? data.byteLength : byteLength, _Buffer.DEBUG_DATA_MAX_LENGTH);
+      const debugDataLength = Math.min(
+        data ? data.byteLength : byteLength,
+        _Buffer.DEBUG_DATA_MAX_LENGTH
+      );
       if (data === null) {
         this.debugData = new ArrayBuffer(debugDataLength);
       } else if (byteOffset === 0 && byteLength === data.byteLength) {
@@ -1022,42 +1068,197 @@ var __exports__ = (() => {
   __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 */
   __publicField(Buffer2, "VERTEX", 32);
+  /** Uniform buffer */
   __publicField(Buffer2, "UNIFORM", 64);
+  /** Storage buffer */
   __publicField(Buffer2, "STORAGE", 128);
   __publicField(Buffer2, "INDIRECT", 256);
   __publicField(Buffer2, "QUERY_RESOLVE", 512);
+  // 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);
 
+  // src/adapter/type-utils/decode-data-type.ts
+  function decodeVertexType(type) {
+    const dataType = TYPE_MAP[type];
+    const bytes = getDataTypeBytes(dataType);
+    const normalized = type.includes("norm");
+    const integer = !normalized && !type.startsWith("float");
+    const signed = type.startsWith("s");
+    return {
+      dataType: TYPE_MAP[type],
+      byteLength: bytes,
+      integer,
+      signed,
+      normalized
+    };
+  }
+  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
+  };
+
+  // src/adapter/type-utils/decode-texture-format.ts
+  var COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
+    "bc1",
+    "bc2",
+    "bc3",
+    "bc4",
+    "bc5",
+    "bc6",
+    "bc7",
+    "etc1",
+    "etc2",
+    "eac",
+    "atc",
+    "astc",
+    "pvrtc"
+  ];
+  var REGEX = /^(rg?b?a?)([0-9]*)([a-z]*)(-srgb)?(-webgl|-unsized)?$/;
+  function isTextureFormatCompressed(textureFormat) {
+    return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some((prefix) => textureFormat.startsWith(prefix));
+  }
+  function decodeTextureFormat(format) {
+    const matches = REGEX.exec(format);
+    if (matches) {
+      const [, format2, length, type, srgb, suffix] = matches;
+      if (format2) {
+        const dataType = `${type}${length}`;
+        const decodedType = decodeVertexType(dataType);
+        return {
+          format: format2,
+          components: format2.length,
+          // dataType - overwritten by decodedType
+          srgb: srgb === "-srgb",
+          unsized: suffix === "-unsized",
+          webgl: suffix === "-webgl",
+          ...decodedType
+        };
+      }
+    }
+    return decodeNonStandardFormat(format);
+  }
+  var EXCEPTIONS = {
+    // Packed 16 bit formats
+    "rgba4unorm-webgl": { format: "rgba", bpp: 2 },
+    "rgb565unorm-webgl": { format: "rgb", bpp: 2 },
+    "rgb5a1unorm-webgl": { format: "rgba", bbp: 2 },
+    // Packed 32 bit formats
+    rgb9e5ufloat: { format: "rgb", bbp: 4 },
+    rg11b10ufloat: { format: "rgb", bbp: 4 },
+    rgb10a2unorm: { format: "rgba", bbp: 4 },
+    "rgb10a2uint-webgl": { format: "rgba", bbp: 4 },
+    // Depth/stencil
+    stencil8: { components: 1, bpp: 1, a: "stencil" },
+    depth16unorm: { components: 1, bpp: 2, a: "depth" },
+    depth24plus: { components: 1, bpp: 3, a: "depth" },
+    depth32float: { components: 1, bpp: 4, a: "depth" },
+    "depth24plus-stencil8": { components: 2, bpp: 4, a: "depth-stencil" },
+    // "depth24unorm-stencil8" feature
+    "depth24unorm-stencil8": { components: 2, bpp: 4, a: "depth-stencil" },
+    // "depth32float-stencil8" feature
+    "depth32float-stencil8": { components: 2, bpp: 4, a: "depth-stencil" }
+  };
+  function decodeNonStandardFormat(format) {
+    const data = EXCEPTIONS[format];
+    if (!data) {
+      throw new Error(`Unknown format ${format}`);
+    }
+    return {
+      format: data.format || "",
+      components: data.components || data.format?.length || 1,
+      byteLength: data.bpp || 1,
+      srgb: false,
+      unsized: false
+    };
+  }
+
   // src/adapter/device.ts
+  var DeviceLimits = class {
+  };
+  var DeviceFeatures = class {
+    features;
+    constructor(features = []) {
+      this.features = new Set(features);
+    }
+    *[Symbol.iterator]() {
+      yield* this.features;
+    }
+    has(feature) {
+      return this.features.has(feature);
+    }
+  };
   var _Device = class {
     get [Symbol.toStringTag]() {
       return "Device";
     }
     constructor(props) {
-      this.props = {
-        ..._Device.defaultProps,
-        ...props
-      };
+      this.props = { ..._Device.defaultProps, ...props };
       this.id = this.props.id || uid(this[Symbol.toStringTag].toLowerCase());
     }
+    /** id of this device, primarily for debugging */
+    id;
+    /** stats */
     statsManager = lumaStats;
+    /** A copy of the device props  */
+    props;
+    /** Available for the application to store data on the device */
     userData = {};
+    /** Used by other luma.gl modules to store data on the device */
     _lumaData = {};
+    /** Check if a specific texture format is GPU compressed */
+    isTextureFormatCompressed(format) {
+      return isTextureFormatCompressed(format);
+    }
+    /**
+     * Trigger device loss.
+     * @returns `true` if context loss could actually be triggered.
+     * @note primarily intended for testing how application reacts to device loss
+     */
     loseDevice() {
       return false;
     }
+    /** Returns the default / primary canvas context. Throws an error if no canvas context is available (a WebGPU compute device) */
     getCanvasContext() {
       if (!this.canvasContext) {
         throw new Error("Device has no CanvasContext");
@@ -1066,42 +1267,50 @@ var __exports__ = (() => {
     }
     createTexture(props) {
       if (props instanceof Promise || typeof props === "string") {
-        props = {
-          data: props
-        };
+        props = { data: props };
       }
       return this._createTexture(props);
     }
     createCommandEncoder(props = {}) {
       throw new Error("not implemented");
     }
+    // WebGL specific HACKS - enables app to remove webgl import
+    // Use until we have a better way to handle these
+    /** @deprecated - will be removed - should use command encoder */
     readPixelsToArrayWebGL(source, options) {
       throw new Error("not implemented");
     }
+    /** @deprecated - will be removed - should use command encoder */
     readPixelsToBufferWebGL(source, options) {
       throw new Error("not implemented");
     }
+    /** @deprecated - will be removed - should use WebGPU parameters (pipeline) */
     setParametersWebGL(parameters) {
       throw new Error("not implemented");
     }
+    /** @deprecated - will be removed - should use WebGPU parameters (pipeline) */
     getParametersWebGL(parameters) {
       throw new Error("not implemented");
     }
+    /** @deprecated - will be removed - should use WebGPU parameters (pipeline) */
     withParametersWebGL(parameters, func) {
       throw new Error("not implemented");
     }
+    /** @deprecated - will be removed - should use clear arguments in RenderPass */
     clearWebGL(options) {
       throw new Error("not implemented");
     }
+    // IMPLEMENTATION
+    // Error Handling
+    /** Report unhandled device errors */
+    onError(error) {
+      this.props.onError(error);
+    }
     _getBufferProps(props) {
       if (props instanceof ArrayBuffer || ArrayBuffer.isView(props)) {
-        props = {
-          data: props
-        };
+        props = { data: props };
       }
-      const newProps = {
-        ...props
-      };
+      const newProps = { ...props };
       if ((props.usage || 0) & Buffer2.INDEX && !props.indexType) {
         if (props.data instanceof Uint32Array) {
           newProps.indexType = "uint32";
@@ -1120,14 +1329,26 @@ var __exports__ = (() => {
     type: "best-available",
     canvas: null,
     container: null,
-    webgl2: true,
-    webgl1: true,
     manageState: true,
     width: 800,
+    // width are height are only used by headless gl
     height: 600,
+    requestMaximalLimits: true,
     debug: Boolean(log.get("debug")),
+    // Instrument context (at the expense of performance)
+    spector: Boolean(log.get("spector")),
+    // Initialize the SpectorJS WebGL debugger
     break: [],
-    gl: null
+    // alpha: undefined,
+    // depth: undefined,
+    // stencil: undefined,
+    // antialias: undefined,
+    // premultipliedAlpha: undefined,
+    // preserveDrawingBuffer: undefined,
+    // failIfMajorPerformanceCaveat: undefined
+    gl: null,
+    // Callbacks
+    onError: (error) => log.error(error.message)
   });
   __publicField(Device, "VERSION", VERSION2);
 
@@ -1156,11 +1377,9 @@ var __exports__ = (() => {
     static setDefaultDeviceProps(props) {
       Object.assign(Device.defaultProps, props);
     }
+    /** Creates a device. Asynchronously. */
     static async createDevice(props = {}) {
-      props = {
-        ...Device.defaultProps,
-        ...props
-      };
+      props = { ...Device.defaultProps, ...props };
       if (props.gl) {
         props.type = "webgl";
       }
@@ -1173,8 +1392,6 @@ var __exports__ = (() => {
           }
           break;
         case "webgl":
-        case "webgl1":
-        case "webgl2":
           DeviceClass = deviceList.get("webgl");
           if (DeviceClass) {
             return await DeviceClass.create(props);
@@ -1191,10 +1408,14 @@ var __exports__ = (() => {
           }
           break;
       }
-      throw new Error("No matching device found. Ensure `@luma.gl/webgl` and/or `@luma.gl/webgpu` modules are imported.");
+      throw new Error(
+        "No matching device found. Ensure `@luma.gl/webgl` and/or `@luma.gl/webgpu` modules are imported."
+      );
     }
   };
+  /** Global stats for all devices */
   __publicField(luma, "stats", lumaStats);
+  /** Global log */
   __publicField(luma, "log", log);
 
   // src/adapter/canvas-context.ts
@@ -1203,6 +1424,7 @@ var __exports__ = (() => {
   var DEFAULT_CANVAS_CONTEXT_PROPS = {
     canvas: null,
     width: 800,
+    // width are height are only used by headless gl
     height: 600,
     useDevicePixels: true,
     autoResize: true,
@@ -1212,21 +1434,23 @@ var __exports__ = (() => {
     alphaMode: "opaque"
   };
   var CanvasContext = class {
+    id;
+    props;
+    canvas;
+    htmlCanvas;
+    offscreenCanvas;
+    type;
     width = 1;
     height = 1;
-    _canvasSizeInfo = {
-      clientWidth: 0,
-      clientHeight: 0,
-      devicePixelRatio: 1
-    };
+    resizeObserver;
+    /** State used by luma.gl classes: TODO - move to canvasContext*/
+    _canvasSizeInfo = { clientWidth: 0, clientHeight: 0, devicePixelRatio: 1 };
+    /** Check if the DOM is loaded */
     static get isPageLoaded() {
       return isPageLoaded();
     }
     constructor(props) {
-      this.props = {
-        ...DEFAULT_CANVAS_CONTEXT_PROPS,
-        ...props
-      };
+      this.props = { ...DEFAULT_CANVAS_CONTEXT_PROPS, ...props };
       props = this.props;
       if (!isBrowser()) {
         this.id = "node-canvas-context";
@@ -1269,6 +1493,10 @@ var __exports__ = (() => {
         this.resizeObserver.observe(this.canvas);
       }
     }
+    /**
+     * Returns the current DPR, if props.useDevicePixels is true
+     * Device refers to physical
+     */
     getDevicePixelRatio(useDevicePixels) {
       if (typeof OffscreenCanvas !== "undefined" && this.canvas instanceof OffscreenCanvas) {
         return 1;
@@ -1283,6 +1511,12 @@ var __exports__ = (() => {
       }
       return useDevicePixels;
     }
+    /**
+     * 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
+     */
     getPixelSize() {
       switch (this.type) {
         case "node":
@@ -1301,22 +1535,30 @@ var __exports__ = (() => {
       const [width, height] = this.getPixelSize();
       return width / height;
     }
+    /**
+     * Returns multiplier need to convert CSS size to Device size
+     */
     cssToDeviceRatio() {
       try {
         const [drawingBufferWidth] = this.getDrawingBufferSize();
-        const {
-          clientWidth
-        } = this._canvasSizeInfo;
+        const { clientWidth } = this._canvasSizeInfo;
         return clientWidth ? drawingBufferWidth / clientWidth : 1;
       } catch {
         return 1;
       }
     }
+    /**
+     * 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);
     }
+    /**
+     * Use devicePixelRatio to set canvas width and height
+     * @note this is a raw port of luma.gl v8 code. Might be worth a review
+     */
     setDevicePixelRatio(devicePixelRatio, options = {}) {
       if (!this.htmlCanvas) {
         return;
@@ -1338,7 +1580,10 @@ var __exports__ = (() => {
         this.htmlCanvas.height = canvasHeight;
         const [drawingBufferWidth, drawingBufferHeight] = this.getDrawingBufferSize();
         if (drawingBufferWidth !== canvasWidth || drawingBufferHeight !== canvasHeight) {
-          clampedPixelRatio = Math.min(drawingBufferWidth / clientWidth, drawingBufferHeight / clientHeight);
+          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")();
@@ -1348,6 +1593,8 @@ var __exports__ = (() => {
         this._canvasSizeInfo.devicePixelRatio = devicePixelRatio;
       }
     }
+    // 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) {
@@ -1355,12 +1602,22 @@ var __exports__ = (() => {
       }
       return [gl.drawingBufferWidth, gl.drawingBufferHeight];
     }
+    /**
+     * 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
+     */
     _setAutoCreatedCanvasId(id) {
       if (this.htmlCanvas?.id === "lumagl-auto-created-canvas") {
         this.htmlCanvas.id = id;
       }
     }
   };
+  /**
+   * 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(CanvasContext, "pageLoaded", getPageLoadPromise());
   function getPageLoadPromise() {
     if (isPageLoaded() || typeof window === "undefined") {
@@ -1396,10 +1653,7 @@ var __exports__ = (() => {
     return canvas;
   }
   function createCanvas(props) {
-    const {
-      width,
-      height
-    } = props;
+    const { width, height } = props;
     const targetCanvas = document.createElement("canvas");
     targetCanvas.id = "lumagl-auto-created-canvas";
     targetCanvas.width = width || 1;
@@ -1426,6 +1680,7 @@ var __exports__ = (() => {
     return {
       x,
       y,
+      // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
       width: Math.max(xHigh - x + 1, 1),
       height: Math.max(yHigh - y + 1, 1)
     };
@@ -1443,6 +1698,16 @@ var __exports__ = (() => {
     get [Symbol.toStringTag]() {
       return "Texture";
     }
+    /** dimension of this texture */
+    dimension;
+    /** format of this texture */
+    format;
+    /** width in pixels of this texture */
+    width;
+    /** height in pixels of this texture */
+    height;
+    /** depth of this texture */
+    depth;
     constructor(device, props, defaultProps = _Texture.defaultProps) {
       super(device, props, defaultProps);
       this.dimension = this.props.dimension;
@@ -1462,12 +1727,16 @@ var __exports__ = (() => {
     height: void 0,
     depth: 1,
     mipmaps: true,
-    sampler: {},
+    // type: undefined,
     compressed: false,
+    // mipLevels: 1,
     usage: 0,
+    // usage: GPUTextureUsage.COPY_DST
     mipLevels: void 0,
     samples: void 0,
-    type: void 0
+    type: void 0,
+    sampler: {},
+    view: void 0
   });
   __publicField(Texture, "COPY_SRC", 1);
   __publicField(Texture, "COPY_DST", 2);
@@ -1475,6 +1744,28 @@ var __exports__ = (() => {
   __publicField(Texture, "STORAGE_BINDING", 8);
   __publicField(Texture, "RENDER_ATTACHMENT", 16);
 
+  // src/adapter/resources/texture-view.ts
+  var _TextureView = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "TextureView";
+    }
+    /** Should not be constructed directly. Use `texture.createView(props)` */
+    constructor(device, props) {
+      super(device, props, _TextureView.defaultProps);
+    }
+  };
+  var TextureView = _TextureView;
+  __publicField(TextureView, "defaultProps", {
+    ...Resource.defaultProps,
+    format: void 0,
+    dimension: void 0,
+    aspect: "all",
+    baseMipLevel: 0,
+    mipLevelCount: void 0,
+    baseArrayLayer: 0,
+    arrayLayerCount: void 0
+  });
+
   // src/adapter/resources/external-texture.ts
   var _ExternalTexture = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -1587,20 +1878,30 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
     get [Symbol.toStringTag]() {
       return "Shader";
     }
+    /** The stage of this shader */
+    stage;
+    /** The source code of this shader */
+    source;
+    /** The compilation status of the shader. 'pending' if compilation is asynchronous, and on production */
     compilationStatus = "pending";
+    /** Create a new Shader instance */
     constructor(device, props) {
-      super(device, {
-        id: getShaderIdFromProps(props),
-        ...props
-      }, _Shader.defaultProps);
+      super(device, { id: getShaderIdFromProps(props), ...props }, _Shader.defaultProps);
       this.stage = this.props.stage;
       this.source = this.props.source;
     }
+    /** Get compiler log synchronously (WebGL only) */
     getCompilationInfoSync() {
       return null;
     }
-    async debugShader() {
-      switch (this.props.debug) {
+    /** Get translated shader source in host platform's native language (HLSL, GLSL, and even GLSL ES), if available */
+    getTranslatedSource() {
+      return null;
+    }
+    // PORTABLE HELPERS
+    /** In browser logging of errors */
+    async debugShader(trigger = this.props.debug) {
+      switch (trigger) {
         case "never":
           return;
         case "errors":
@@ -1618,16 +1919,19 @@ ${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.mes
       }
       this._displayShaderLog(messages);
     }
+    // PRIVATE
+    /** In-browser UI logging of errors */
     _displayShaderLog(messages) {
       if (typeof document === "undefined" || !document?.createElement) {
         return;
       }
       const shaderName = getShaderInfo(this.source).name;
       const shaderTitle = `${this.stage} ${shaderName}`;
-      const htmlLog = formatCompilerLog(messages, this.source, {
-        showSourceCode: "all",
-        html: true
-      });
+      let htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+      const translatedSource = this.getTranslatedSource();
+      if (translatedSource) {
+        htmlLog += `<br /><br /><h1>Translated Source</h1><br /><br /><code style="user-select:text;"><pre>${translatedSource}</pre></code>`;
+      }
       const button = document.createElement("Button");
       button.innerHTML = `
 <h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
@@ -1686,6 +1990,7 @@ ${htmlLog}
     mipmapFilter: "nearest",
     lodMinClamp: 0,
     lodMaxClamp: 32,
+    // Per WebGPU spec
     compare: "less-equal",
     maxAnisotropy: 1
   });
@@ -1695,7 +2000,13 @@ ${htmlLog}
     get [Symbol.toStringTag]() {
       return "Framebuffer";
     }
+    /** Width of all attachments in this framebuffer */
+    width;
+    /** Height of all attachments in this framebuffer */
+    height;
+    /** Color attachments */
     colorAttachments = [];
+    /** Depth-stencil attachment, if provided */
     depthStencilAttachment = null;
     constructor(device, props = {}) {
       super(device, props, _Framebuffer.defaultProps);
@@ -1715,25 +2026,33 @@ ${htmlLog}
         this.resizeAttachments(this.width, this.height);
       }
     }
+    /** Auto creates any textures */
     autoCreateAttachmentTextures() {
-      this.colorAttachments = this.props.colorAttachments.map((attachment) => {
-        if (typeof attachment === "string") {
-          const texture = this.createColorTexture(attachment);
+      this.colorAttachments = this.props.colorAttachments.map((attachment2) => {
+        if (typeof attachment2 === "string") {
+          const texture = this.createColorTexture(attachment2);
           this.attachResource(texture);
-          return texture;
+          return texture.view;
         }
-        return attachment;
+        if (attachment2 instanceof Texture) {
+          return attachment2.view;
+        }
+        return attachment2;
       });
-      if (this.props.depthStencilAttachment) {
-        if (typeof this.props.depthStencilAttachment === "string") {
-          const texture = this.createDepthStencilTexture(this.props.depthStencilAttachment);
+      const attachment = this.props.depthStencilAttachment;
+      if (attachment) {
+        if (typeof attachment === "string") {
+          const texture = this.createDepthStencilTexture(attachment);
           this.attachResource(texture);
-          this.depthStencilAttachment = texture;
+          this.depthStencilAttachment = texture.view;
+        } else if (attachment instanceof Texture) {
+          this.depthStencilAttachment = attachment.view;
         } else {
-          this.depthStencilAttachment = this.props.depthStencilAttachment;
+          this.depthStencilAttachment = attachment;
         }
       }
     }
+    /** Create a color texture */
     createColorTexture(format) {
       return this.device.createTexture({
         id: "color-attachment",
@@ -1743,6 +2062,7 @@ ${htmlLog}
         height: this.height
       });
     }
+    /** Create depth stencil texture */
     createDepthStencilTexture(format) {
       return this.device.createTexture({
         id: "depth-stencil-attachment",
@@ -1752,6 +2072,11 @@ ${htmlLog}
         height: this.height
       });
     }
+    /**
+     * Default implementation of resize
+     * Creates new textures with correct size for all attachments.
+     * and destroys existing textures if owned
+     */
     resizeAttachments(width, height) {
       for (let i = 0; i < this.colorAttachments.length; ++i) {
         if (this.colorAttachments[i]) {
@@ -1761,8 +2086,8 @@ ${htmlLog}
             height
           });
           this.destroyAttachedResource(this.colorAttachments[i]);
-          this.colorAttachments[i] = resizedTexture;
-          this.attachResource(resizedTexture);
+          this.colorAttachments[i] = resizedTexture.view;
+          this.attachResource(resizedTexture.view);
         }
       }
       if (this.depthStencilAttachment) {
@@ -1772,7 +2097,7 @@ ${htmlLog}
           height
         });
         this.destroyAttachedResource(this.depthStencilAttachment);
-        this.depthStencilAttachment = resizedTexture;
+        this.depthStencilAttachment = resizedTexture.view;
         this.attachResource(resizedTexture);
       }
     }
@@ -1783,7 +2108,9 @@ ${htmlLog}
     width: 1,
     height: 1,
     colorAttachments: [],
+    // ['rgba8unorm-unsized'],
     depthStencilAttachment: null
+    // 'depth24plus-stencil8'
   });
 
   // src/adapter/resources/render-pipeline.ts
@@ -1791,21 +2118,40 @@ ${htmlLog}
     get [Symbol.toStringTag]() {
       return "RenderPipeline";
     }
+    /** The merged layout */
+    shaderLayout;
+    /** Buffer map describing buffer interleaving etc */
+    bufferLayout;
+    /** The linking status of the pipeline. 'pending' if linking is asynchronous, and on production */
+    linkStatus = "pending";
+    /** The hash of the pipeline */
     hash = "";
     constructor(device, props) {
       super(device, props, _RenderPipeline.defaultProps);
       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", {
     ...Resource.defaultProps,
     vs: null,
     vsEntryPoint: "",
+    // main
     vsConstants: {},
     fs: null,
     fsEntryPoint: "",
+    // main
     fsConstants: {},
     shaderLayout: null,
     bufferLayout: [],
@@ -1817,25 +2163,6 @@ ${htmlLog}
     uniforms: {}
   });
 
-  // src/adapter/resources/compute-pipeline.ts
-  var _ComputePipeline = class extends Resource {
-    get [Symbol.toStringTag]() {
-      return "ComputePipeline";
-    }
-    hash = "";
-    constructor(device, props) {
-      super(device, props, _ComputePipeline.defaultProps);
-    }
-  };
-  var ComputePipeline = _ComputePipeline;
-  __publicField(ComputePipeline, "defaultProps", {
-    ...Resource.defaultProps,
-    cs: void 0,
-    csEntryPoint: void 0,
-    csConstants: {},
-    shaderLayout: []
-  });
-
   // src/adapter/resources/render-pass.ts
   var _RenderPass = class extends Resource {
     get [Symbol.toStringTag]() {
@@ -1844,8 +2171,20 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, _RenderPass.defaultProps);
     }
+    // In WebGPU the following methods are on the renderpass instead of the renderpipeline
+    // luma.gl keeps them on the pipeline for now.
+    // TODO - Can we align WebGL implementation with WebGPU API?
+    // abstract setPipeline(pipeline: RenderPipeline): void {}
+    // abstract setIndexBuffer()
+    // abstract setVertexBuffer(slot: number, buffer: Buffer, offset: number): void;
+    // abstract setBindings(bindings: Record<string, Binding>): void;
+    // abstract setParameters(parameters: RenderPassParameters);
+    // abstract draw(options: {
+    // abstract drawIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+    // abstract drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
   };
   var RenderPass = _RenderPass;
+  /** Default properties for RenderPass */
   __publicField(RenderPass, "defaultProps", {
     ...Resource.defaultProps,
     framebuffer: null,
@@ -1855,20 +2194,47 @@ ${htmlLog}
     clearStencil: 0,
     depthReadOnly: false,
     stencilReadOnly: false,
-    discard: false
+    discard: false,
+    occlusionQuerySet: void 0,
+    timestampQuerySet: void 0,
+    beginTimestampIndex: void 0,
+    endTimestampIndex: void 0
+  });
+
+  // src/adapter/resources/compute-pipeline.ts
+  var _ComputePipeline = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "ComputePipeline";
+    }
+    hash = "";
+    constructor(device, props) {
+      super(device, props, _ComputePipeline.defaultProps);
+    }
+  };
+  var ComputePipeline = _ComputePipeline;
+  __publicField(ComputePipeline, "defaultProps", {
+    ...Resource.defaultProps,
+    cs: void 0,
+    csEntryPoint: void 0,
+    csConstants: {},
+    shaderLayout: []
   });
 
   // src/adapter/resources/compute-pass.ts
-  var ComputePass = class extends Resource {
+  var _ComputePass = class extends Resource {
     get [Symbol.toStringTag]() {
       return "ComputePass";
     }
     constructor(device, props) {
-      super(device, props, Resource.defaultProps);
+      super(device, props, _ComputePass.defaultProps);
     }
   };
+  var ComputePass = _ComputePass;
   __publicField(ComputePass, "defaultProps", {
-    ...Resource.defaultProps
+    ...Resource.defaultProps,
+    timestampQuerySet: void 0,
+    beginTimestampIndex: void 0,
+    endTimestampIndex: void 0
   });
 
   // src/adapter/resources/command-encoder.ts
@@ -1879,12 +2245,9 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, _CommandEncoder.defaultProps);
     }
-    pushDebugGroup(groupLabel) {
-    }
-    popDebugGroup() {
-    }
-    insertDebugMarker(markerLabel) {
-    }
+    // 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;
   __publicField(CommandEncoder, "defaultProps", {
@@ -1911,7 +2274,7 @@ ${htmlLog}
     const [dataType, components] = TYPE_INFO[attributeType];
     const integer = dataType === "i32" || dataType === "u32";
     const signed = dataType !== "u32";
-    const byteLength = TYPE_SIZES[dataType] * components;
+    const byteLength = TYPE_SIZES2[dataType] * components;
     const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
     return {
       dataType,
@@ -1960,55 +2323,12 @@ ${htmlLog}
     "vec3<u32>": ["u32", 3],
     "vec4<u32>": ["u32", 4]
   };
-  var TYPE_SIZES = {
+  var TYPE_SIZES2 = {
     f32: 4,
     f16: 2,
     i32: 4,
     u32: 4
-  };
-
-  // src/adapter/type-utils/decode-data-type.ts
-  function decodeVertexType(type) {
-    const dataType = TYPE_MAP[type];
-    const bytes = getDataTypeBytes(dataType);
-    const normalized = type.includes("norm");
-    const integer = !normalized && !type.startsWith("float");
-    const signed = type.startsWith("s");
-    return {
-      dataType: TYPE_MAP[type],
-      byteLength: bytes,
-      integer,
-      signed,
-      normalized
-    };
-  }
-  function getDataTypeBytes(type) {
-    const bytes = TYPE_SIZES2[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_SIZES2 = {
-    uint8: 1,
-    sint8: 1,
-    uint16: 2,
-    sint16: 2,
-    float16: 2,
-    float32: 4,
-    uint32: 4,
-    sint32: 4
+    // 'bool-webgl': 4,
   };
 
   // src/adapter/type-utils/decode-vertex-format.ts
@@ -2040,7 +2360,11 @@ ${htmlLog}
   function getAttributeInfosFromLayouts(shaderLayout, bufferLayout) {
     const attributeInfos = {};
     for (const attribute of shaderLayout.attributes) {
-      attributeInfos[attribute.name] = getAttributeInfoFromLayouts(shaderLayout, bufferLayout, attribute.name);
+      attributeInfos[attribute.name] = getAttributeInfoFromLayouts(
+        shaderLayout,
+        bufferLayout,
+        attribute.name
+      );
     }
     return attributeInfos;
   }
@@ -2071,7 +2395,9 @@ ${htmlLog}
       vertexFormat,
       bufferDataType: vertexFormatInfo.type,
       bufferComponents: vertexFormatInfo.components,
+      // normalized is a property of the buffer's vertex format
       normalized: vertexFormatInfo.normalized,
+      // integer is a property of the shader declaration
       integer: attributeTypeInfo.integer,
       stepMode: bufferMapping?.stepMode || shaderDeclaration.stepMode,
       byteOffset: bufferMapping?.byteOffset || 0,
@@ -2113,6 +2439,7 @@ ${htmlLog}
           bufferName: name2,
           stepMode: bufferLayout.stepMode,
           vertexFormat: bufferLayout.format,
+          // If offset is needed, use `attributes` field.
           byteOffset: 0,
           byteStride: bufferLayout.byteStride || 0
         };
@@ -2146,9 +2473,7 @@ ${htmlLog}
   function mergeShaderLayout(baseLayout, overrideLayout) {
     const mergedLayout = {
       ...baseLayout,
-      attributes: baseLayout.attributes.map((attribute) => ({
-        ...attribute
-      }))
+      attributes: baseLayout.attributes.map((attribute) => ({ ...attribute }))
     };
     for (const attribute of overrideLayout?.attributes || []) {
       const baseAttribute = mergedLayout.attributes.find((attr) => attr.name === attribute.name);
@@ -2167,12 +2492,28 @@ ${htmlLog}
     get [Symbol.toStringTag]() {
       return "VertexArray";
     }
+    /** Max number of vertex attributes */
+    maxVertexAttributes;
+    /** Attribute infos indexed by location - TODO only needed by webgl module? */
+    attributeInfos;
+    /** Index buffer */
     indexBuffer = null;
+    /** Attributes indexed by buffer slot */
+    attributes;
     constructor(device, props) {
       super(device, props, _VertexArray.defaultProps);
       this.maxVertexAttributes = device.limits.maxVertexAttributes;
       this.attributes = new Array(this.maxVertexAttributes).fill(null);
-      this.attributeInfos = getAttributeInfosByLocation(props.renderPipeline.shaderLayout, props.renderPipeline.bufferLayout, this.maxVertexAttributes);
+      this.attributeInfos = getAttributeInfosByLocation(
+        props.renderPipeline.shaderLayout,
+        props.renderPipeline.bufferLayout,
+        this.maxVertexAttributes
+      );
+    }
+    // DEPRECATED METHODS
+    /** @deprecated Set constant attributes (WebGL only) */
+    setConstantWebGL(location, value) {
+      throw new Error("constant attributes not supported");
     }
   };
   var VertexArray = _VertexArray;
@@ -2197,92 +2538,46 @@ ${htmlLog}
     buffers: {}
   });
 
+  // src/adapter/resources/query-set.ts
+  var _QuerySet = class extends Resource {
+    get [Symbol.toStringTag]() {
+      return "QuerySet";
+    }
+    constructor(device, props) {
+      super(device, props, _QuerySet.defaultProps);
+    }
+  };
+  var QuerySet = _QuerySet;
+  __publicField(QuerySet, "defaultProps", {
+    ...Resource.defaultProps,
+    type: void 0,
+    count: void 0
+  });
+
   // src/adapter/type-utils/decode-shader-types.ts
   var UNIFORM_FORMATS = {
-    "f32": {
-      type: "f32",
-      components: 1
-    },
-    "i32": {
-      type: "i32",
-      components: 1
-    },
-    "u32": {
-      type: "u32",
-      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
-    }
+    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];
@@ -2313,12 +2608,7 @@ ${htmlLog}
     return new Type(scratchArrayBuffer, 0, length);
   }
   function fillArray(options) {
-    const {
-      target,
-      source,
-      start = 0,
-      count = 1
-    } = options;
+    const { target, source, start = 0, count = 1 } = options;
     const length = source.length;
     const total = count * length;
     let copied = 0;
@@ -2341,27 +2631,24 @@ ${htmlLog}
   var minBufferSize = 1024;
   var UniformBufferLayout = class {
     layout = {};
+    /** number of bytes needed for buffer allocation */
+    byteLength;
+    /** Create a new UniformBufferLayout given a map of attributes. */
     constructor(uniformTypes) {
       let size = 0;
       for (const [key, uniformType] of Object.entries(uniformTypes)) {
         const typeAndComponents = decodeShaderUniformType(uniformType);
-        const {
-          type,
-          components: count
-        } = typeAndComponents;
+        const { type, components: count } = typeAndComponents;
         size = alignTo(size, count);
         const offset = size;
         size += count;
-        this.layout[key] = {
-          type,
-          size: count,
-          offset
-        };
+        this.layout[key] = { type, size: count, offset };
       }
       size += (4 - size % 4) % 4;
       const actualByteLength = size * 4;
       this.byteLength = Math.max(actualByteLength, minBufferSize);
     }
+    /** Get the data for the complete buffer */
     getData(uniformValues) {
       const bufferSize = Math.max(this.byteLength, minBufferSize);
       const arrayBuffer2 = getScratchArrayBuffer(bufferSize);
@@ -2369,6 +2656,7 @@ ${htmlLog}
         i32: new Int32Array(arrayBuffer2),
         u32: new Uint32Array(arrayBuffer2),
         f32: new Float32Array(arrayBuffer2),
+        // TODO not implemented
         f16: new Uint16Array(arrayBuffer2)
       };
       for (const [name2, value] of Object.entries(uniformValues)) {
@@ -2377,22 +2665,22 @@ ${htmlLog}
           log.warn(`Supplied uniform value ${name2} not present in uniform block layout`)();
           continue;
         }
-        const {
-          type,
-          size,
-          offset
-        } = uniformLayout;
+        const { type, size, offset } = uniformLayout;
         const typedArray = typedArrays[type];
         if (size === 1) {
           if (typeof value !== "number" && typeof value !== "boolean") {
-            log.warn(`Supplied value for single component uniform ${name2} is not a number: ${value}`)();
+            log.warn(
+              `Supplied value for single component uniform ${name2} is not a number: ${value}`
+            )();
             continue;
           }
           typedArray[offset] = Number(value);
         } else {
           const numericArray = isNumberArray(value);
           if (!numericArray) {
-            log.warn(`Supplied value for multi component / array uniform ${name2} is not a numeric array: ${value}`)();
+            log.warn(
+              `Supplied value for multi component / array uniform ${name2} is not a numeric array: ${value}`
+            )();
             continue;
           }
           typedArray.set(numericArray, offset);
@@ -2400,9 +2688,11 @@ ${htmlLog}
       }
       return new Uint8Array(arrayBuffer2);
     }
+    /** Does this layout have a field with specified name */
     has(name2) {
       return Boolean(this.layout[name2]);
     }
+    /** Get offset and size for a field with specified name */
     get(name2) {
       const layout = this.layout[name2];
       return layout;
@@ -2438,6 +2728,7 @@ ${htmlLog}
 
   // src/lib/uniforms/uniform-block.ts
   var UniformBlock = class {
+    name;
     uniforms = {};
     modifiedUniforms = {};
     modified = true;
@@ -2446,7 +2737,9 @@ ${htmlLog}
     constructor(props) {
       this.name = props?.name;
       if (props?.name && props?.shaderLayout) {
-        const binding = props?.shaderLayout.bindings?.find((binding2) => binding2.type === "uniform" && binding2.name === props?.name);
+        const binding = props?.shaderLayout.bindings?.find(
+          (binding2) => binding2.type === "uniform" && binding2.name === props?.name
+        );
         if (!binding) {
           throw new Error(props?.name);
         }
@@ -2456,6 +2749,7 @@ ${htmlLog}
         }
       }
     }
+    /** Set a map of uniforms */
     setUniforms(uniforms) {
       for (const [key, value] of Object.entries(uniforms)) {
         this._setUniform(key, value);
@@ -2467,11 +2761,13 @@ ${htmlLog}
     setNeedsRedraw(reason) {
       this.needsRedraw = this.needsRedraw || reason;
     }
+    /** Returns all uniforms */
     getAllUniforms() {
       this.modifiedUniforms = {};
       this.needsRedraw = false;
       return this.uniforms || {};
     }
+    /** Set a single uniform */
     _setUniform(key, value) {
       if (arrayEqual(this.uniforms[key], value)) {
         return;
@@ -2484,39 +2780,55 @@ ${htmlLog}
 
   // src/lib/uniforms/uniform-store.ts
   var UniformStore = class {
+    /** Stores the uniform values for each uniform block */
     uniformBlocks = /* @__PURE__ */ new Map();
+    /** Can generate data for a uniform buffer for each block from data */
     uniformBufferLayouts = /* @__PURE__ */ new Map();
+    /** Actual buffer for the blocks */
     uniformBuffers = /* @__PURE__ */ new Map();
+    /**
+     * Create a new UniformStore instance
+     * @param blocks
+     */
     constructor(blocks) {
       for (const [bufferName, block] of Object.entries(blocks)) {
         const uniformBufferName = bufferName;
         const uniformBufferLayout = new UniformBufferLayout(block.uniformTypes || {});
         this.uniformBufferLayouts.set(uniformBufferName, uniformBufferLayout);
-        const uniformBlock = new UniformBlock({
-          name: bufferName
-        });
+        const uniformBlock = new UniformBlock({ name: bufferName });
         uniformBlock.setUniforms(block.defaultUniforms || {});
         this.uniformBlocks.set(uniformBufferName, uniformBlock);
       }
     }
+    /** Destroy any managed uniform buffers */
     destroy() {
       for (const uniformBuffer of Object.values(this.uniformBuffers)) {
         uniformBuffer.destroy();
       }
     }
+    /**
+     * Set uniforms
+     * Makes all properties partial
+     */
     setUniforms(uniforms) {
       for (const [blockName, uniformValues] of Object.entries(uniforms)) {
         this.uniformBlocks.get(blockName).setUniforms(uniformValues);
       }
       this.updateUniformBuffers();
     }
+    /** Get the required minimum length of the uniform buffer */
     getUniformBufferByteLength(uniformBufferName) {
       return this.uniformBufferLayouts.get(uniformBufferName).byteLength;
     }
+    /** Get formatted binary memory that can be uploaded to a buffer */
     getUniformBufferData(uniformBufferName) {
       const uniformValues = this.uniformBlocks.get(uniformBufferName).getAllUniforms();
       return this.uniformBufferLayouts.get(uniformBufferName).getData(uniformValues);
     }
+    /**
+     * Creates an unmanaged uniform buffer (umnanaged means that application is responsible for destroying it)
+     * The new buffer is initialized with current / supplied values
+     */
     createUniformBuffer(device, uniformBufferName, uniforms) {
       if (uniforms) {
         this.setUniforms(uniforms);
@@ -2530,6 +2842,7 @@ ${htmlLog}
       uniformBuffer.write(uniformBufferData);
       return uniformBuffer;
     }
+    /** Get the managed uniform buffer. "managed" resources are destroyed when the uniformStore is destroyed. */
     getManagedUniformBuffer(device, uniformBufferName) {
       if (!this.uniformBuffers.get(uniformBufferName)) {
         const byteLength = this.getUniformBufferByteLength(uniformBufferName);
@@ -2541,6 +2854,7 @@ ${htmlLog}
       }
       return this.uniformBuffers.get(uniformBufferName);
     }
+    /** Updates all uniform buffers where values have changed */
     updateUniformBuffers() {
       let reason = false;
       for (const uniformBufferName of this.uniformBlocks.keys()) {
@@ -2552,6 +2866,7 @@ ${htmlLog}
       }
       return reason;
     }
+    /** Update one uniform buffer. Only updates if values have changed */
     updateUniformBuffer(uniformBufferName) {
       const uniformBlock = this.uniformBlocks.get(uniformBufferName);
       const uniformBuffer = this.uniformBuffers.get(uniformBufferName);
@@ -2562,112 +2877,17 @@ ${htmlLog}
         const uniformBuffer2 = this.uniformBuffers.get(uniformBufferName);
         uniformBuffer2.write(uniformBufferData);
         const uniformValues = this.uniformBlocks.get(uniformBufferName).getAllUniforms();
-        log.log(4, `Writing to uniform buffer ${String(uniformBufferName)}`, uniformBufferData, uniformValues)();
+        log.log(
+          4,
+          `Writing to uniform buffer ${String(uniformBufferName)}`,
+          uniformBufferData,
+          uniformValues
+        )();
       }
       return reason;
     }
   };
 
-  // src/adapter/type-utils/decode-texture-format.ts
-  var REGEX = /^(rg?b?a?)([0-9]*)([a-z]*)(-srgb)?(-webgl|-unsized)?$/;
-  function decodeTextureFormat(format) {
-    const matches = REGEX.exec(format);
-    if (matches) {
-      const [, format2, length, type, srgb, suffix] = matches;
-      if (format2) {
-        const dataType = `${type}${length}`;
-        const decodedType = decodeVertexType(dataType);
-        return {
-          format: format2,
-          components: format2.length,
-          srgb: srgb === "-srgb",
-          unsized: suffix === "-unsized",
-          webgl: suffix === "-webgl",
-          ...decodedType
-        };
-      }
-    }
-    return decodeNonStandardFormat(format);
-  }
-  var EXCEPTIONS = {
-    "rgba4unorm-webgl": {
-      format: "rgba",
-      bpp: 2
-    },
-    "rgb565unorm-webgl": {
-      format: "rgb",
-      bpp: 2
-    },
-    "rgb5a1unorm-webgl": {
-      format: "rgba",
-      bbp: 2
-    },
-    "rgb9e5ufloat": {
-      format: "rgb",
-      bbp: 4
-    },
-    "rg11b10ufloat": {
-      format: "rgb",
-      bbp: 4
-    },
-    "rgb10a2unorm": {
-      format: "rgba",
-      bbp: 4
-    },
-    "rgb10a2unorm-webgl": {
-      format: "rgba",
-      bbp: 4
-    },
-    "stencil8": {
-      components: 1,
-      bpp: 1,
-      a: "stencil"
-    },
-    "depth16unorm": {
-      components: 1,
-      bpp: 2,
-      a: "depth"
-    },
-    "depth24plus": {
-      components: 1,
-      bpp: 3,
-      a: "depth"
-    },
-    "depth32float": {
-      components: 1,
-      bpp: 4,
-      a: "depth"
-    },
-    "depth24plus-stencil8": {
-      components: 2,
-      bpp: 4,
-      a: "depth-stencil"
-    },
-    "depth24unorm-stencil8": {
-      components: 2,
-      bpp: 4,
-      a: "depth-stencil"
-    },
-    "depth32float-stencil8": {
-      components: 2,
-      bpp: 4,
-      a: "depth-stencil"
-    }
-  };
-  function decodeNonStandardFormat(format) {
-    const data = EXCEPTIONS[format];
-    if (!data) {
-      throw new Error(`Unknown format ${format}`);
-    }
-    return {
-      format: data.format || "",
-      components: data.components || data.format?.length || 1,
-      byteLength: data.bpp || 1,
-      srgb: false,
-      unsized: false
-    };
-  }
-
   // src/adapter/type-utils/vertex-format-from-attribute.ts
   function getDataTypeFromTypedArray(arrayOrType) {
     const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
@@ -2755,10 +2975,7 @@ ${htmlLog}
     return isNumberArray(value) !== null || typeof value === "number" || typeof value === "boolean";
   }
   function splitUniformsAndBindings(uniforms) {
-    const result = {
-      bindings: {},
-      uniforms: {}
-    };
+    const result = { bindings: {}, uniforms: {} };
     Object.keys(uniforms).forEach((name2) => {
       const uniform = uniforms[name2];
       if (isUniformValue(uniform)) {
@@ -2772,10 +2989,7 @@ ${htmlLog}
 
   // src/utils/format-value.ts
   function formatArrayValue(v, opts = {}) {
-    const {
-      maxElts = 16,
-      size = 1
-    } = opts;
+    const { maxElts = 16, size = 1 } = opts;
     let string = "[";
     for (let i = 0; i < v.length && i < maxElts; ++i) {
       if (i > 0) {
@@ -2788,9 +3002,7 @@ ${htmlLog}
   }
   function formatValue(v, opts = {}) {
     const EPSILON = 1e-16;
-    const {
-      isInteger = false
-    } = opts;
+    const { isInteger = false } = opts;
     if (Array.isArray(v) || ArrayBuffer.isView(v)) {
       return formatArrayValue(v, opts);
     }
@@ -2828,11 +3040,7 @@ ${htmlLog}
 
   // src/utils/check-props.ts
   function checkProps(className, props, propChecks) {
-    const {
-      removedProps = {},
-      deprecatedProps = {},
-      replacedProps = {}
-    } = propChecks;
+    const { removedProps = {}, deprecatedProps = {}, replacedProps = {} } = propChecks;
     for (const propName in removedProps) {
       if (propName in props) {
         const replacementProp = removedProps[propName];
@@ -2877,7 +3085,7 @@ ${htmlLog}
     return await createImageBitmap(image);
   }
   async function loadImage(url, opts) {
-    return new Promise((resolve, reject) => {
+    return await new Promise((resolve, reject) => {
       try {
         const image = new Image();
         image.onload = () => resolve(image);