@luma.gl/engine 9.2.5 → 9.3.0-alpha.10

package/dist/utils/buffer-layout-order.js

@@ -1,14 +1,24 @@
 // luma.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+function getMinLocation(attributeNames, shaderLayoutMap) {
+    let minLocation = Infinity;
+    for (const name of attributeNames) {
+        const location = shaderLayoutMap[name];
+        if (location !== undefined) {
+            minLocation = Math.min(minLocation, location);
+        }
+    }
+    return minLocation;
+}
 export function sortedBufferLayoutByShaderSourceLocations(shaderLayout, bufferLayout) {
     const shaderLayoutMap = Object.fromEntries(shaderLayout.attributes.map(attr => [attr.name, attr.location]));
     const sortedLayout = bufferLayout.slice();
     sortedLayout.sort((a, b) => {
         const attributeNamesA = a.attributes ? a.attributes.map(attr => attr.attribute) : [a.name];
         const attributeNamesB = b.attributes ? b.attributes.map(attr => attr.attribute) : [b.name];
-        const minLocationA = Math.min(...attributeNamesA.map(name => shaderLayoutMap[name]));
-        const minLocationB = Math.min(...attributeNamesB.map(name => shaderLayoutMap[name]));
+        const minLocationA = getMinLocation(attributeNamesA, shaderLayoutMap);
+        const minLocationB = getMinLocation(attributeNamesB, shaderLayoutMap);
         return minLocationA - minLocationB;
     });
     return sortedLayout;

package/dist/utils/buffer-layout-order.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffer-layout-order.js","sourceRoot":"","sources":["../../src/utils/buffer-layout-order.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,MAAM,UAAU,yCAAyC,CACvD,YAA0B,EAC1B,YAA4B;IAE5B,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CACxC,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAChE,CAAC;IAEF,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAC1C,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,eAAe,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3F,MAAM,eAAe,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3F,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACrF,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAErF,OAAO,YAAY,GAAG,YAAY,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC;AACtB,CAAC"}
+{"version":3,"file":"buffer-layout-order.js","sourceRoot":"","sources":["../../src/utils/buffer-layout-order.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,SAAS,cAAc,CACrB,cAAwB,EACxB,eAAmD;IAEnD,IAAI,WAAW,GAAG,QAAQ,CAAC;IAE3B,KAAK,MAAM,IAAI,IAAI,cAAc,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,yCAAyC,CACvD,YAA0B,EAC1B,YAA4B;IAE5B,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CACxC,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAChE,CAAC;IAEF,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAC1C,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,eAAe,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3F,MAAM,eAAe,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC3F,MAAM,YAAY,GAAG,cAAc,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QACtE,MAAM,YAAY,GAAG,cAAc,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAEtE,OAAO,YAAY,GAAG,YAAY,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC;AACtB,CAAC"}

package/dist/utils/shader-module-utils.d.ts

@@ -0,0 +1,7 @@
+import type { ComputeShaderLayout, ShaderLayout } from '@luma.gl/core';
+import type { ShaderModule } from '@luma.gl/shadertools';
+type AnyShaderLayout = ShaderLayout | ComputeShaderLayout;
+export declare function mergeShaderModuleBindingsIntoLayout<TShaderLayout extends AnyShaderLayout>(shaderLayout: TShaderLayout | null | undefined, modules: ShaderModule[]): TShaderLayout | null | undefined;
+export declare function shaderModuleHasUniforms(module: ShaderModule): boolean;
+export {};
+//# sourceMappingURL=shader-module-utils.d.ts.map

package/dist/utils/shader-module-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-module-utils.d.ts","sourceRoot":"","sources":["../../src/utils/shader-module-utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,mBAAmB,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD,KAAK,eAAe,GAAG,YAAY,GAAG,mBAAmB,CAAC;AAE1D,wBAAgB,mCAAmC,CAAC,aAAa,SAAS,eAAe,EACvF,YAAY,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,EAC9C,OAAO,EAAE,YAAY,EAAE,GACtB,aAAa,GAAG,IAAI,GAAG,SAAS,CA4BlC;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,YAAY,GAAG,OAAO,CAErE"}

package/dist/utils/shader-module-utils.js

@@ -0,0 +1,46 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export function mergeShaderModuleBindingsIntoLayout(shaderLayout, modules) {
+    if (!shaderLayout || !modules.some(module => module.bindingLayout?.length)) {
+        return shaderLayout;
+    }
+    const mergedLayout = {
+        ...shaderLayout,
+        bindings: shaderLayout.bindings.map(binding => ({ ...binding }))
+    };
+    if ('attributes' in (shaderLayout || {})) {
+        mergedLayout.attributes = shaderLayout?.attributes || [];
+    }
+    for (const module of modules) {
+        for (const bindingLayout of module.bindingLayout || []) {
+            for (const relatedBindingName of getRelatedBindingNames(bindingLayout.name)) {
+                const binding = mergedLayout.bindings.find(candidate => candidate.name === relatedBindingName);
+                if (binding?.group === 0) {
+                    binding.group = bindingLayout.group;
+                }
+            }
+        }
+    }
+    return mergedLayout;
+}
+export function shaderModuleHasUniforms(module) {
+    return Boolean(module.uniformTypes && !isObjectEmpty(module.uniformTypes));
+}
+/** Returns binding-name aliases that should share the module-declared bind group. */
+function getRelatedBindingNames(bindingName) {
+    const bindingNames = new Set([bindingName, `${bindingName}Uniforms`]);
+    if (!bindingName.endsWith('Uniforms')) {
+        bindingNames.add(`${bindingName}Sampler`);
+    }
+    return [...bindingNames];
+}
+function isObjectEmpty(obj) {
+    // @ts-ignore key is intentionally unused
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for (const key in obj) {
+        return false;
+    }
+    return true;
+}
+//# sourceMappingURL=shader-module-utils.js.map

package/dist/utils/shader-module-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-module-utils.js","sourceRoot":"","sources":["../../src/utils/shader-module-utils.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAOpC,MAAM,UAAU,mCAAmC,CACjD,YAA8C,EAC9C,OAAuB;IAEvB,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,CAAC;QAC3E,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,MAAM,YAAY,GAAG;QACnB,GAAG,YAAY;QACf,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAC,GAAG,OAAO,EAAC,CAAC,CAAC;KAC9C,CAAC;IAEnB,IAAI,YAAY,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,EAAE,CAAC;QACxC,YAA6B,CAAC,UAAU,GAAI,YAA6B,EAAE,UAAU,IAAI,EAAE,CAAC;IAC/F,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,aAAa,IAAI,EAAE,EAAE,CAAC;YACvD,KAAK,MAAM,kBAAkB,IAAI,sBAAsB,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC5E,MAAM,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,IAAI,CACxC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,KAAK,kBAAkB,CACnD,CAAC;gBACF,IAAI,OAAO,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC;oBACzB,OAAO,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,MAAoB;IAC1D,OAAO,OAAO,CAAC,MAAM,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAC7E,CAAC;AAED,qFAAqF;AACrF,SAAS,sBAAsB,CAAC,WAAmB;IACjD,MAAM,YAAY,GAAG,IAAI,GAAG,CAAS,CAAC,WAAW,EAAE,GAAG,WAAW,UAAU,CAAC,CAAC,CAAC;IAE9E,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACtC,YAAY,CAAC,GAAG,CAAC,GAAG,WAAW,SAAS,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;AAC3B,CAAC;AAED,SAAS,aAAa,CAAC,GAAW;IAChC,yCAAyC;IACzC,6DAA6D;IAC7D,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/engine",
-  "version": "9.2.5",
+  "version": "9.3.0-alpha.10",
   "description": "3D Engine Components for luma.gl",
   "type": "module",
   "license": "MIT",
@@ -40,14 +40,14 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "~9.2.0",
-    "@luma.gl/shadertools": "~9.2.0"
+    "@luma.gl/core": "9.3.0-alpha.6",
+    "@luma.gl/shadertools": "9.3.0-alpha.6"
   },
   "dependencies": {
     "@math.gl/core": "^4.1.0",
     "@math.gl/types": "^4.1.0",
-    "@probe.gl/log": "^4.0.8",
-    "@probe.gl/stats": "^4.0.8"
+    "@probe.gl/log": "^4.1.1",
+    "@probe.gl/stats": "^4.1.1"
   },
-  "gitHead": "a8efd26edd0c61c7bb29ea700c6c38f544f60326"
+  "gitHead": "ca3a841517106f8608ce392440fa7f324863a84f"
 }

package/src/animation-loop/animation-loop.ts

@@ -12,6 +12,7 @@ import {AnimationProps} from './animation-props';
 import {Stats, Stat} from '@probe.gl/stats';
 
 let statIdCounter = 0;
+const ANIMATION_LOOP_STATS = 'Animation Loop';
 
 /** AnimationLoop properties */
 export type AnimationLoopProps = {
@@ -45,7 +46,7 @@ export class AnimationLoop {
     onFinalize: () => {},
     onError: error => console.error(error), // eslint-disable-line no-console
 
-    stats: luma.stats.get(`animation-loop-${statIdCounter++}`),
+    stats: undefined!,
 
     // view parameters
     autoResizeViewport: false
@@ -58,13 +59,14 @@ export class AnimationLoop {
   animationProps: AnimationProps | null = null;
   timeline: Timeline | null = null;
   stats: Stats;
+  sharedStats: Stats;
   cpuTime: Stat;
   gpuTime: Stat;
   frameRate: Stat;
 
   display: any;
 
-  needsRedraw: string | false = 'initialized';
+  private _needsRedraw: string | false = 'initialized';
 
   _initialized: boolean = false;
   _running: boolean = false;
@@ -73,8 +75,7 @@ export class AnimationLoop {
   _resolveNextFrame: ((animationLoop: AnimationLoop) => void) | null = null;
   _cpuStartTime: number = 0;
   _error: Error | null = null;
-
-  // _gpuTimeQuery: Query | null = null;
+  _lastFrameTime: number = 0;
 
   /*
    * @param {HTMLCanvasElement} canvas - if provided, width and height will be passed to context
@@ -88,10 +89,12 @@ export class AnimationLoop {
     }
 
     // state
-    this.stats = props.stats || new Stats({id: 'animation-loop-stats'});
+    this.stats = props.stats || new Stats({id: `animation-loop-${statIdCounter++}`});
+    this.sharedStats = luma.stats.get(ANIMATION_LOOP_STATS);
+    this.frameRate = this.stats.get('Frame Rate');
+    this.frameRate.setSampleSize(1);
     this.cpuTime = this.stats.get('CPU Time');
     this.gpuTime = this.stats.get('GPU Time');
-    this.frameRate = this.stats.get('Frame Rate');
 
     this.setProps({autoResizeViewport: props.autoResizeViewport});
 
@@ -106,6 +109,7 @@ export class AnimationLoop {
   destroy(): void {
     this.stop();
     this._setDisplay(null);
+    this.device?._disableDebugGPUTime();
   }
 
   /** @deprecated Use .destroy() */
@@ -120,10 +124,17 @@ export class AnimationLoop {
 
   /** Flags this animation loop as needing redraw */
   setNeedsRedraw(reason: string): this {
-    this.needsRedraw = this.needsRedraw || reason;
+    this._needsRedraw = this._needsRedraw || reason;
     return this;
   }
 
+  /** Query redraw status. Clears the flag. */
+  needsRedraw(): false | string {
+    const reason = this._needsRedraw;
+    this._needsRedraw = false;
+    return reason;
+  }
+
   setProps(props: MutableAnimationLoopProps): this {
     if ('autoResizeViewport' in props) {
       this.props.autoResizeViewport = props.autoResizeViewport || false;
@@ -145,6 +156,9 @@ export class AnimationLoop {
         // Create the WebGL context
         await this._initDevice();
         this._initialize();
+        if (!this._running) {
+          return null;
+        }
 
         // Note: onIntialize can return a promise (e.g. in case app needs to load resources)
         await this.props.onInitialize(this._getAnimationProps());
@@ -185,17 +199,18 @@ export class AnimationLoop {
       this._nextFramePromise = null;
       this._resolveNextFrame = null;
       this._running = false;
+      this._lastFrameTime = 0;
     }
     return this;
   }
 
   /** Explicitly draw a frame */
-  redraw(): this {
+  redraw(time?: number): this {
     if (this.device?.isLost || this._error) {
       return this;
     }
 
-    this._beginFrameTimers();
+    this._beginFrameTimers(time);
 
     this._setupFrame();
     this._updateAnimationProps();
@@ -261,7 +276,7 @@ export class AnimationLoop {
     // Default viewport setup, in case onInitialize wants to render
     this._resizeViewport();
 
-    // this._gpuTimeQuery = Query.isSupported(this.gl, ['timers']) ? new Query(this.gl) : null;
+    this.device?._enableDebugGPUTime();
   }
 
   _setDisplay(display: any): void {
@@ -307,11 +322,11 @@ export class AnimationLoop {
     this._animationFrameId = null;
   }
 
-  _animationFrame(): void {
+  _animationFrame(time: number): void {
     if (!this._running) {
       return;
     }
-    this.redraw();
+    this.redraw(time);
     this._requestAnimationFrame();
   }
 
@@ -333,7 +348,7 @@ export class AnimationLoop {
   }
 
   _clearNeedsRedraw(): void {
-    this.needsRedraw = false;
+    this._needsRedraw = false;
   }
 
   _setupFrame(): void {
@@ -406,7 +421,7 @@ export class AnimationLoop {
     this.animationProps.height = height;
     this.animationProps.aspect = aspect;
 
-    this.animationProps.needsRedraw = this.needsRedraw;
+    this.animationProps.needsRedraw = this._needsRedraw;
 
     // Update time properties
     this.animationProps.engineTime = Date.now() - this.animationProps.startTime;
@@ -460,20 +475,10 @@ export class AnimationLoop {
     if (!this.device) {
       return {width: 1, height: 1, aspect: 1};
     }
-    // https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
-    const [width, height] = this.device?.getDefaultCanvasContext().getDevicePixelSize() || [1, 1];
-
-    // https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html
-    let aspect = 1;
-    const canvas = this.device?.getDefaultCanvasContext().canvas;
-
-    // @ts-expect-error
-    if (canvas && canvas.clientHeight) {
-      // @ts-expect-error
-      aspect = canvas.clientWidth / canvas.clientHeight;
-    } else if (width > 0 && height > 0) {
-      aspect = width / height;
-    }
+    // Match projection setup to the actual render target dimensions, which may
+    // differ from the CSS size when device-pixel scaling or backend clamping applies.
+    const [width, height] = this.device.getDefaultCanvasContext().getDrawingBufferSize();
+    const aspect = width > 0 && height > 0 ? width / height : 1;
 
     return {width, height, aspect};
   }
@@ -495,36 +500,70 @@ export class AnimationLoop {
     }
   }
 
-  _beginFrameTimers() {
-    this.frameRate.timeEnd();
-    this.frameRate.timeStart();
-
-    // Check if timer for last frame has completed.
-    // GPU timer results are never available in the same
-    // frame they are captured.
-    // if (
-    //   this._gpuTimeQuery &&
-    //   this._gpuTimeQuery.isResultAvailable() &&
-    //   !this._gpuTimeQuery.isTimerDisjoint()
-    // ) {
-    //   this.stats.get('GPU Time').addTime(this._gpuTimeQuery.getTimerMilliseconds());
-    // }
+  _beginFrameTimers(time?: number) {
+    const now = time ?? (typeof performance !== 'undefined' ? performance.now() : Date.now());
+    if (this._lastFrameTime) {
+      const frameTime = now - this._lastFrameTime;
+      if (frameTime > 0) {
+        this.frameRate.addTime(frameTime);
+      }
+    }
+    this._lastFrameTime = now;
 
-    // if (this._gpuTimeQuery) {
-    //   // GPU time query start
-    //   this._gpuTimeQuery.beginTimeElapsedQuery();
-    // }
+    if (this.device?._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
 
     this.cpuTime.timeStart();
   }
 
   _endFrameTimers() {
+    if (this.device?._isDebugGPUTimeEnabled()) {
+      this._consumeEncodedGpuTime();
+    }
+
     this.cpuTime.timeEnd();
+    this._updateSharedStats();
+  }
 
-    // if (this._gpuTimeQuery) {
-    //   // GPU time query end. Results will be available on next frame.
-    //   this._gpuTimeQuery.end();
-    // }
+  _consumeEncodedGpuTime(): void {
+    if (!this.device) {
+      return;
+    }
+
+    const gpuTimeMs = this.device.commandEncoder._gpuTimeMs;
+    if (gpuTimeMs !== undefined) {
+      this.gpuTime.addTime(gpuTimeMs);
+      this.device.commandEncoder._gpuTimeMs = undefined;
+    }
+  }
+
+  _updateSharedStats(): void {
+    if (this.stats === this.sharedStats) {
+      return;
+    }
+
+    for (const name of Object.keys(this.sharedStats.stats)) {
+      if (!this.stats.stats[name]) {
+        delete this.sharedStats.stats[name];
+      }
+    }
+
+    this.stats.forEach(sourceStat => {
+      const targetStat = this.sharedStats.get(sourceStat.name, sourceStat.type);
+      targetStat.sampleSize = sourceStat.sampleSize;
+      targetStat.time = sourceStat.time;
+      targetStat.count = sourceStat.count;
+      targetStat.samples = sourceStat.samples;
+      targetStat.lastTiming = sourceStat.lastTiming;
+      targetStat.lastSampleTime = sourceStat.lastSampleTime;
+      targetStat.lastSampleCount = sourceStat.lastSampleCount;
+      targetStat._count = sourceStat._count;
+      targetStat._time = sourceStat._time;
+      targetStat._samples = sourceStat._samples;
+      targetStat._startTime = sourceStat._startTime;
+      targetStat._timerPending = sourceStat._timerPending;
+    });
   }
 
   // Event handling

package/src/animation-loop/make-animation-loop.ts

@@ -36,14 +36,14 @@ export function makeAnimationLoop(
     device,
 
     async onInitialize(animationProps: AnimationProps): Promise<unknown> {
-      clearError(animationProps.animationLoop.device!);
+      clearError(animationProps.animationLoop.device);
       try {
         // @ts-expect-error abstract to prevent instantiation
         renderLoop = new AnimationLoopTemplateCtor(animationProps);
         // Any async loading can be handled here
         return await renderLoop?.onInitialize(animationProps);
       } catch (error) {
-        setError(animationProps.animationLoop.device!, error as Error);
+        setError(animationProps.animationLoop.device, error as Error);
         return null;
       }
     },
@@ -63,8 +63,12 @@ export function makeAnimationLoop(
   return animationLoop;
 }
 
-function setError(device: Device, error: Error): void {
-  const canvas = device?.getDefaultCanvasContext().canvas;
+function setError(device: Device | null, error: Error): void {
+  if (!device) {
+    return;
+  }
+
+  const canvas = device.getDefaultCanvasContext().canvas;
   if (canvas instanceof HTMLCanvasElement) {
     canvas.style.overflow = 'visible';
     let errorDiv = document.getElementById('animation-loop-error');
@@ -82,7 +86,11 @@ function setError(device: Device, error: Error): void {
   }
 }
 
-function clearError(device: Device): void {
+function clearError(device: Device | null): void {
+  if (!device) {
+    return;
+  }
+
   const errorDiv = document.getElementById('animation-loop-error');
   if (errorDiv) {
     errorDiv.remove();

package/src/animation-loop/request-animation-frame.ts

@@ -7,14 +7,40 @@
 /** Node.js polyfill for requestAnimationFrame */
 // / <reference types="@types/node" />
 export function requestAnimationFramePolyfill(callback: (time?: any) => void): any {
-  return typeof window !== 'undefined' && window.requestAnimationFrame
-    ? window.requestAnimationFrame(callback)
-    : setTimeout(callback, 1000 / 60);
+  const browserRequestAnimationFrame =
+    typeof window !== 'undefined'
+      ? window.requestAnimationFrame ||
+        (window as Window & {webkitRequestAnimationFrame?: (cb: FrameRequestCallback) => number})
+          .webkitRequestAnimationFrame ||
+        (window as Window & {mozRequestAnimationFrame?: (cb: FrameRequestCallback) => number})
+          .mozRequestAnimationFrame
+      : null;
+
+  if (browserRequestAnimationFrame) {
+    return browserRequestAnimationFrame.call(window, callback);
+  }
+
+  return setTimeout(
+    () => callback(typeof performance !== 'undefined' ? performance.now() : Date.now()),
+    1000 / 60
+  );
 }
 
 /** Node.js polyfill for cancelAnimationFrame */
 export function cancelAnimationFramePolyfill(timerId: any): void {
-  return typeof window !== 'undefined' && window.cancelAnimationFrame
-    ? window.cancelAnimationFrame(timerId)
-    : clearTimeout(timerId);
+  const browserCancelAnimationFrame =
+    typeof window !== 'undefined'
+      ? window.cancelAnimationFrame ||
+        (window as Window & {webkitCancelAnimationFrame?: (handle: number) => void})
+          .webkitCancelAnimationFrame ||
+        (window as Window & {mozCancelAnimationFrame?: (handle: number) => void})
+          .mozCancelAnimationFrame
+      : null;
+
+  if (browserCancelAnimationFrame) {
+    browserCancelAnimationFrame.call(window, timerId);
+    return;
+  }
+
+  clearTimeout(timerId);
 }

package/src/compute/computation.ts

@@ -2,22 +2,28 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {DeviceFeature, ComputePipelineProps, Shader, Binding} from '@luma.gl/core';
 import {
+  type DeviceFeature,
+  type ComputePipelineProps,
+  type Shader,
+  type Binding,
   Device,
   Buffer,
   ComputePipeline,
   ComputePass,
+  PipelineFactory,
+  ShaderFactory,
   UniformStore,
   log,
-  getTypedArrayConstructor
+  dataTypeDecoder
 } from '@luma.gl/core';
-import type {ShaderModule, PlatformInfo} from '@luma.gl/shadertools';
-import {ShaderAssembler, getShaderLayoutFromWGSL} from '@luma.gl/shadertools';
-import {TypedArray, isNumericArray} from '@math.gl/types';
+import {type ShaderModule, type PlatformInfo, ShaderAssembler} from '@luma.gl/shadertools';
+import {type TypedArray, isNumericArray} from '@math.gl/types';
 import {ShaderInputs} from '../shader-inputs';
-import {PipelineFactory} from '../factories/pipeline-factory';
-import {ShaderFactory} from '../factories/shader-factory';
+import {
+  mergeShaderModuleBindingsIntoLayout,
+  shaderModuleHasUniforms
+} from '../utils/shader-module-utils';
 import {uid} from '../utils/uid';
 // import {getDebugTableForShaderLayout} from '../debug/debug-shader-layout';
 
@@ -131,10 +137,6 @@ export class Computation {
     this.shaderInputs = props.shaderInputs || new ShaderInputs(moduleMap);
     this.setShaderInputs(this.shaderInputs);
 
-    // Support WGSL shader layout introspection
-    // TODO - Don't modify props!!
-    this.props.shaderLayout ||= getShaderLayoutFromWGSL(this.props.source);
-
     // Setup shader assembler
     const platformInfo = getPlatformInfo(device);
 
@@ -142,6 +144,9 @@ export class Computation {
     const modules =
       (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.getModules()) || [];
 
+    this.props.shaderLayout =
+      mergeShaderModuleBindingsIntoLayout(this.props.shaderLayout, modules) || null;
+
     this.pipelineFactory =
       props.pipelineFactory || PipelineFactory.getDefaultPipelineFactory(this.device);
     this.shaderFactory = props.shaderFactory || ShaderFactory.getDefaultShaderFactory(this.device);
@@ -155,6 +160,14 @@ export class Computation {
     this.source = source;
     // @ts-ignore
     this._getModuleUniforms = getUniforms;
+    const inferredShaderLayout = (
+      device as Device & {getShaderLayout?: (source: string) => any}
+    ).getShaderLayout?.(this.source);
+    this.props.shaderLayout =
+      mergeShaderModuleBindingsIntoLayout(
+        this.props.shaderLayout || inferredShaderLayout || null,
+        modules
+      ) || null;
 
     // Create the pipeline
     // @note order is important
@@ -197,7 +210,7 @@ export class Computation {
       this.pipeline.setBindings(this.bindings);
       computePass.setPipeline(this.pipeline);
       // @ts-expect-error
-      computePass.setBindings([]);
+      computePass.setBindings({});
 
       computePass.dispatch(x, y, z);
     } finally {
@@ -227,11 +240,13 @@ export class Computation {
 
   setShaderInputs(shaderInputs: ShaderInputs): void {
     this.shaderInputs = shaderInputs;
-    this._uniformStore = new UniformStore(this.shaderInputs.modules);
+    this._uniformStore = new UniformStore(this.device, this.shaderInputs.modules);
     // Create uniform buffer bindings for all modules
-    for (const moduleName of Object.keys(this.shaderInputs.modules)) {
-      const uniformBuffer = this._uniformStore.getManagedUniformBuffer(this.device, moduleName);
-      this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+    for (const [moduleName, module] of Object.entries(this.shaderInputs.modules)) {
+      if (shaderModuleHasUniforms(module)) {
+        const uniformBuffer = this._uniformStore.getManagedUniformBuffer(moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
     }
   }
 
@@ -340,7 +355,7 @@ export class Computation {
 
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute: Buffer | TypedArray, dataType: any): string {
-    const TypedArrayConstructor = getTypedArrayConstructor(dataType);
+    const TypedArrayConstructor = dataTypeDecoder.getTypedArrayConstructor(dataType);
     const typedArray =
       attribute instanceof Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();

package/src/compute/swap.ts

@@ -12,12 +12,15 @@ import {Device, Resource, Buffer, Framebuffer, Texture} from '@luma.gl/core';
  * @note the two resources can be destroyed by calling `destroy()`
  */
 export class Swap<T extends Resource<any>> {
+  id: string;
+
   /** The current resource - usually the source for renders or computations */
   current: T;
   /** The next resource - usually the target/destination for transforms / computations */
   next: T;
 
-  constructor(props: {current: T; next: T}) {
+  constructor(props: {current: T; next: T; id?: string}) {
+    this.id = props.id || 'swap';
     this.current = props.current;
     this.next = props.next;
   }
@@ -41,14 +44,17 @@ export class SwapFramebuffers extends Swap<Framebuffer> {
   constructor(device: Device, props: FramebufferProps) {
     props = {...props};
 
+    const {width = 1, height = 1} = props;
+
     let colorAttachments = props.colorAttachments?.map(colorAttachment =>
       typeof colorAttachment !== 'string'
         ? colorAttachment
         : device.createTexture({
+            id: `${props.id}-texture-0`,
             format: colorAttachment,
             usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_SRC | Texture.COPY_DST,
-            width: 1,
-            height: 1
+            width,
+            height
           })
     );
 
@@ -58,11 +64,11 @@ export class SwapFramebuffers extends Swap<Framebuffer> {
       typeof colorAttachment !== 'string'
         ? colorAttachment
         : device.createTexture({
+            id: `${props.id}-texture-1`,
             format: colorAttachment,
-            usage:
-              Texture.TEXTURE | Texture.COPY_SRC | Texture.COPY_DST | Texture.RENDER_ATTACHMENT,
-            width: 1,
-            height: 1
+            usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_SRC | Texture.COPY_DST,
+            width,
+            height
           })
     );