@luma.gl/engine 9.3.0-alpha.4 → 9.3.0-alpha.8

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,6 +59,7 @@ export class AnimationLoop {
   animationProps: AnimationProps | null = null;
   timeline: Timeline | null = null;
   stats: Stats;
+  sharedStats: Stats;
   cpuTime: Stat;
   gpuTime: Stat;
   frameRate: Stat;
@@ -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() */
@@ -152,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());
@@ -192,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();
@@ -268,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 {
@@ -314,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();
   }
 
@@ -467,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};
   }
@@ -502,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} 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,11 +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!!
-    // @ts-expect-error method on WebGPUDevice
-    this.props.shaderLayout ||= device.getShaderLayout(this.props.source);
-
     // Setup shader assembler
     const platformInfo = getPlatformInfo(device);
 
@@ -143,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);
@@ -156,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
@@ -198,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 {
@@ -230,9 +242,11 @@ export class Computation {
     this.shaderInputs = shaderInputs;
     this._uniformStore = new UniformStore(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(this.device, moduleName);
+        this.bindings[`${moduleName}Uniforms`] = uniformBuffer;
+      }
     }
   }
 
@@ -341,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();