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

package/dist/dist.dev.js

@@ -75,7 +75,6 @@ var __exports__ = (() => {
     glsl: () => glsl,
     isNumberArray: () => isNumberArray,
     isObjectEmpty: () => isObjectEmpty,
-    isPowerOfTwo: () => isPowerOfTwo,
     isTypedArray: () => isTypedArray,
     isUniformValue: () => isUniformValue,
     loadFile: () => loadFile,
@@ -176,20 +175,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 +198,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 +234,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 +317,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 +387,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 +565,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 +616,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 +826,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);
     }
@@ -850,6 +848,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 +875,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 +886,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 +912,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 +926,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 +998,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 +1019,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,10 +1036,13 @@ 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);
@@ -1022,22 +1059,30 @@ 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/device.ts
@@ -1046,18 +1091,28 @@ var __exports__ = (() => {
       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 = {};
+    /**
+     * 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 +1121,45 @@ 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
     _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,13 +1178,20 @@ 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,
     debug: Boolean(log.get("debug")),
+    // Instrument context (at the expense of performance)
     break: [],
+    // alpha: undefined,
+    // depth: undefined,
+    // stencil: undefined,
+    // antialias: undefined,
+    // premultipliedAlpha: undefined,
+    // preserveDrawingBuffer: undefined,
+    // failIfMajorPerformanceCaveat: undefined
     gl: null
   });
   __publicField(Device, "VERSION", VERSION2);
@@ -1156,11 +1221,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 +1236,6 @@ var __exports__ = (() => {
           }
           break;
         case "webgl":
-        case "webgl1":
-        case "webgl2":
           DeviceClass = deviceList.get("webgl");
           if (DeviceClass) {
             return await DeviceClass.create(props);
@@ -1194,7 +1255,9 @@ var __exports__ = (() => {
       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 +1266,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 +1276,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 +1335,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 +1353,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 +1377,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 +1422,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 +1435,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 +1444,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 +1495,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 +1522,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 +1540,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;
@@ -1463,8 +1570,11 @@ var __exports__ = (() => {
     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
@@ -1587,18 +1697,24 @@ ${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;
     }
+    // PORTABLE HELPERS
+    /** In browser logging of errors */
     async debugShader() {
       switch (this.props.debug) {
         case "never":
@@ -1618,16 +1734,15 @@ ${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
-      });
+      const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
       const button = document.createElement("Button");
       button.innerHTML = `
 <h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
@@ -1686,6 +1801,7 @@ ${htmlLog}
     mipmapFilter: "nearest",
     lodMinClamp: 0,
     lodMaxClamp: 32,
+    // Per WebGPU spec
     compare: "less-equal",
     maxAnisotropy: 1
   });
@@ -1695,7 +1811,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,6 +1837,51 @@ ${htmlLog}
         this.resizeAttachments(this.width, this.height);
       }
     }
+    // /** Returns fully populated attachment object. */
+    // protected normalizeColorAttachment(
+    //   attachment: Texture | ColorTextureFormat
+    // ): Required<ColorAttachment> {
+    //   const COLOR_ATTACHMENT_DEFAULTS: Required<ColorAttachment> = {
+    //     texture: undefined!,
+    //     format: undefined!,
+    //     clearValue: [0.0, 0.0, 0.0, 0.0],
+    //     loadOp: 'clear',
+    //     storeOp: 'store'
+    //   };
+    //   if (attachment instanceof Texture) {
+    //     return {...COLOR_ATTACHMENT_DEFAULTS, texture: attachment};
+    //   }
+    //   if (typeof attachment === 'string') {
+    //     return {...COLOR_ATTACHMENT_DEFAULTS, format: attachment};
+    //   }
+    //   return {...COLOR_ATTACHMENT_DEFAULTS, ...attachment};
+    // }
+    // /** Wraps texture inside fully populated attachment object. */
+    // protected normalizeDepthStencilAttachment(
+    //   attachment: DepthStencilAttachment | Texture | DepthStencilTextureFormat
+    // ): Required<DepthStencilAttachment> {
+    //   const DEPTH_STENCIL_ATTACHMENT_DEFAULTS: Required<DepthStencilAttachment> = {
+    //     texture: undefined!,
+    //     format: undefined!,
+    //     depthClearValue: 1.0,
+    //     depthLoadOp: 'clear',
+    //     depthStoreOp: 'store',
+    //     depthReadOnly: false,
+    //     stencilClearValue: 0,
+    //     stencilLoadOp: 'clear',
+    //     stencilStoreOp: 'store',
+    //     stencilReadOnly: false
+    //   };
+    //   if (typeof attachment === 'string') {
+    //     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, format: attachment};
+    //   }
+    //   // @ts-expect-error attachment instanceof Texture doesn't cover Renderbuffer
+    //   if (attachment.handle || attachment instanceof Texture) {
+    //     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, texture: attachment as Texture};
+    //   }
+    //   return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, ...attachment};
+    // }
+    /** Auto creates any textures */
     autoCreateAttachmentTextures() {
       this.colorAttachments = this.props.colorAttachments.map((attachment) => {
         if (typeof attachment === "string") {
@@ -1734,6 +1901,7 @@ ${htmlLog}
         }
       }
     }
+    /** Create a color texture */
     createColorTexture(format) {
       return this.device.createTexture({
         id: "color-attachment",
@@ -1743,6 +1911,7 @@ ${htmlLog}
         height: this.height
       });
     }
+    /** Create depth stencil texture */
     createDepthStencilTexture(format) {
       return this.device.createTexture({
         id: "depth-stencil-attachment",
@@ -1752,6 +1921,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]) {
@@ -1776,6 +1950,37 @@ ${htmlLog}
         this.attachResource(resizedTexture);
       }
     }
+    /** Create a color attachment for WebGL *
+    protected override createColorTexture(colorAttachment: Required<ColorAttachment>): Required<ColorAttachment> {
+      return this.device._createTexture({
+        id: `${this.id}-color`,
+        data: null, // reserves texture memory, but texels are undefined
+        format,
+        // type: GL.UNSIGNED_BYTE,
+        width: this.width,
+        height: this.height,
+        // Note: Mipmapping can be disabled by texture resource when we resize the texture
+        // to a non-power-of-two dimenstion (NPOT texture) under WebGL1. To have consistant
+        // behavior we always disable mipmaps.
+        mipmaps: false,
+        // Set MIN and MAG filtering parameters so mipmaps are not used in sampling.
+        // Use LINEAR so subpixel algos like fxaa work.
+        // Set WRAP modes that support NPOT textures too.
+        sampler: {
+          minFilter: 'linear',
+          magFilter: 'linear',
+          addressModeU: 'clamp-to-edge',
+          addressModeV: 'clamp-to-edge'
+        }
+        // parameters: {
+        //   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
+        //   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+        //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+        //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
+        // }
+      });
+    }
+    */
   };
   var Framebuffer = _Framebuffer;
   __publicField(Framebuffer, "defaultProps", {
@@ -1783,7 +1988,9 @@ ${htmlLog}
     width: 1,
     height: 1,
     colorAttachments: [],
+    // ['rgba8unorm-unsized'],
     depthStencilAttachment: null
+    // 'depth24plus-stencil8'
   });
 
   // src/adapter/resources/render-pipeline.ts
@@ -1792,6 +1999,12 @@ ${htmlLog}
       return "RenderPipeline";
     }
     hash = "";
+    /** 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";
     constructor(device, props) {
       super(device, props, _RenderPipeline.defaultProps);
       this.shaderLayout = this.props.shaderLayout;
@@ -1803,9 +2016,11 @@ ${htmlLog}
     ...Resource.defaultProps,
     vs: null,
     vsEntryPoint: "",
+    // main
     vsConstants: {},
     fs: null,
     fsEntryPoint: "",
+    // main
     fsConstants: {},
     shaderLayout: null,
     bufferLayout: [],
@@ -1844,8 +2059,44 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, _RenderPass.defaultProps);
     }
+    // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
+    // beginOcclusionQuery(queryIndex: number): void;
+    // endOcclusionQuery(): void;
+    // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+    // In WebGPU the following methods are on the renderpass.
+    // luma.gl keeps them on the pipeline for now
+    /*
+      setPipeline(pipeline: RenderPipeline): void {}
+    
+      setIndexBuffer(
+        buffer: Buffer,
+        indexFormat: 'uint16' | 'uint32',
+        offset?: number,
+        size?: number
+      ): void {}
+    
+      abstract setVertexBuffer(slot: number, buffer: Buffer, offset: number): void;
+    
+      abstract setBindings(bindings: Record<string, Binding>): void;
+    
+      abstract setParameters(parameters: RenderPassParameters);
+    
+      draw(options: {
+        vertexCount?: number; // Either vertexCount or indexCount must be provided
+        indexCount?: number;  // Activates indexed drawing (call setIndexBuffer())
+        instanceCount?: number; //
+        firstVertex?: number;
+        firstIndex?: number; // requires device.features.has('indirect-first-instance')?
+        firstInstance?: number;
+        baseVertex?: number;
+      }): void {}
+    
+      drawIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+      drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+      */
   };
   var RenderPass = _RenderPass;
+  /** Default properties for RenderPass */
   __publicField(RenderPass, "defaultProps", {
     ...Resource.defaultProps,
     framebuffer: null,
@@ -1866,6 +2117,9 @@ ${htmlLog}
     constructor(device, props) {
       super(device, props, Resource.defaultProps);
     }
+    // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
+    // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+    // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
   };
   __publicField(ComputePass, "defaultProps", {
     ...Resource.defaultProps
@@ -1885,6 +2139,14 @@ ${htmlLog}
     }
     insertDebugMarker(markerLabel) {
     }
+    // writeTimestamp(querySet: Query, queryIndex: number): void;
+    // resolveQuerySet(options: {
+    //   querySet: GPUQuerySet,
+    //   firstQuery: number,
+    //   queryCount: number,
+    //   destination: Buffer,
+    //   destinationOffset?: number;
+    // }): void;
   };
   var CommandEncoder = _CommandEncoder;
   __publicField(CommandEncoder, "defaultProps", {
@@ -1965,6 +2227,7 @@ ${htmlLog}
     f16: 2,
     i32: 4,
     u32: 4
+    // 'bool-webgl': 4,  
   };
 
   // src/adapter/type-utils/decode-data-type.ts
@@ -2040,7 +2303,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 +2338,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 +2382,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 +2416,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 +2435,23 @@ ${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
+      );
     }
   };
   var VertexArray = _VertexArray;
@@ -2199,90 +2478,28 @@ ${htmlLog}
 
   // 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 +2530,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 +2553,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 +2578,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,11 +2587,7 @@ ${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") {
@@ -2400,9 +2606,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 +2646,7 @@ ${htmlLog}
 
   // src/lib/uniforms/uniform-block.ts
   var UniformBlock = class {
+    name;
     uniforms = {};
     modifiedUniforms = {};
     modified = true;
@@ -2446,7 +2655,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 +2667,7 @@ ${htmlLog}
         }
       }
     }
+    /** Set a map of uniforms */
     setUniforms(uniforms) {
       for (const [key, value] of Object.entries(uniforms)) {
         this._setUniform(key, value);
@@ -2467,11 +2679,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 +2698,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 +2760,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 +2772,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 +2784,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,7 +2795,12 @@ ${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;
     }
@@ -2580,6 +2818,7 @@ ${htmlLog}
         return {
           format: format2,
           components: format2.length,
+          // dataType - overwritten by decodedType
           srgb: srgb === "-srgb",
           unsized: suffix === "-unsized",
           webgl: suffix === "-webgl",
@@ -2590,69 +2829,25 @@ ${htmlLog}
     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"
-    }
+    // 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 },
+    "rgb10a2unorm-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];
@@ -2755,10 +2950,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 +2964,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 +2977,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 +3015,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];