@luma.gl/engine 9.2.0-alpha.1 → 9.2.0-alpha.2

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {luma, Adapter} from '@luma.gl/core';
+import {luma, Adapter, Device} from '@luma.gl/core';
 import {AnimationLoopTemplate} from './animation-loop-template';
 import {AnimationLoop, AnimationLoopProps} from './animation-loop';
 import type {AnimationProps} from './animation-props';
@@ -15,7 +15,10 @@ export type MakeAnimationLoopProps = Omit<
   adapters?: Adapter[];
 };
 
-/** Instantiates and runs the render loop */
+/**
+ * Instantiates an animation loop and initializes it with the template.
+ * @note The application needs to call `start()` on the returned animation loop to start the rendering loop.
+ */
 export function makeAnimationLoop(
   AnimationLoopTemplateCtor: typeof AnimationLoopTemplate,
   props?: MakeAnimationLoopProps
@@ -33,10 +36,16 @@ export function makeAnimationLoop(
     device,
 
     async onInitialize(animationProps: AnimationProps): Promise<unknown> {
-      // @ts-expect-error abstract to prevent instantiation
-      renderLoop = new AnimationLoopTemplateCtor(animationProps);
-      // Any async loading can be handled here
-      return await renderLoop?.onInitialize(animationProps);
+      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);
+        return null;
+      }
     },
 
     onRender: (animationProps: AnimationProps) => renderLoop?.onRender(animationProps),
@@ -51,8 +60,31 @@ export function makeAnimationLoop(
     return this.AnimationLoopTemplateCtor.info;
   };
 
-  // Start the loop automatically
-  // animationLoop.start();
-
   return animationLoop;
 }
+
+function setError(device: Device, error: Error): void {
+  const canvas = device?.getDefaultCanvasContext().canvas;
+  if (canvas instanceof HTMLCanvasElement) {
+    canvas.style.overflow = 'visible';
+    let errorDiv = document.getElementById('animation-loop-error');
+    errorDiv?.remove();
+    errorDiv = document.createElement('h1');
+    errorDiv.id = 'animation-loop-error';
+    errorDiv.innerHTML = error.message;
+    errorDiv.style.position = 'absolute';
+    errorDiv.style.top = '10px'; // left: 50%; transform: translate(-50%, -50%);';
+    errorDiv.style.left = '10px';
+    errorDiv.style.color = 'black';
+    errorDiv.style.backgroundColor = 'red';
+    canvas.parentElement?.appendChild(errorDiv);
+    // canvas.style.position = 'absolute';
+  }
+}
+
+function clearError(device: Device): void {
+  const errorDiv = document.getElementById('animation-loop-error');
+  if (errorDiv) {
+    errorDiv.remove();
+  }
+}

package/src/async-texture/async-texture.ts

@@ -212,7 +212,7 @@ export class AsyncTexture {
           this._setTexture1DData(this.texture, data as Texture1DData);
           break;
         case '2d':
-          this._setTexture2DData(data as Texture2DData);
+          this._setTexture2DData(data);
           break;
         case '3d':
           this._setTexture3DData(this.texture, data as Texture3DData);
@@ -308,8 +308,8 @@ export class AsyncTexture {
       return this.device.getExternalImageSize(data);
     }
     if (data && typeof data === 'object' && data.constructor === Object) {
-      const textureDataArray = Object.values(data) as Texture2DData[];
-      const untypedData = textureDataArray[0] as any;
+      const textureDataArray = Object.values(data);
+      const untypedData = textureDataArray[0];
       return {width: untypedData.width, height: untypedData.height};
     }
     throw new Error('texture size deduction failed');

package/src/compute/computation.ts

@@ -10,7 +10,7 @@ import {
   ComputePass,
   UniformStore,
   log,
-  getTypedArrayFromDataType
+  getTypedArrayConstructor
 } from '@luma.gl/core';
 import type {ShaderModule, PlatformInfo} from '@luma.gl/shadertools';
 import {ShaderAssembler, getShaderLayoutFromWGSL} from '@luma.gl/shadertools';
@@ -340,7 +340,7 @@ export class Computation {
 
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute: Buffer | TypedArray, dataType: any): string {
-    const TypedArrayConstructor = getTypedArrayFromDataType(dataType);
+    const TypedArrayConstructor = getTypedArrayConstructor(dataType);
     const typedArray =
       attribute instanceof Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();

package/src/factories/pipeline-factory.ts

@@ -19,9 +19,9 @@ export class PipelineFactory {
 
   /** Get the singleton default pipeline factory for the specified device */
   static getDefaultPipelineFactory(device: Device): PipelineFactory {
-    device._lumaData.defaultPipelineFactory =
-      device._lumaData.defaultPipelineFactory || new PipelineFactory(device);
-    return device._lumaData.defaultPipelineFactory as PipelineFactory;
+    device._lumaData['defaultPipelineFactory'] =
+      device._lumaData['defaultPipelineFactory'] || new PipelineFactory(device);
+    return device._lumaData['defaultPipelineFactory'] as PipelineFactory;
   }
 
   readonly device: Device;

package/src/factories/shader-factory.ts

@@ -10,8 +10,8 @@ export class ShaderFactory {
 
   /** Returns the default ShaderFactory for the given {@link Device}, creating one if necessary. */
   static getDefaultShaderFactory(device: Device): ShaderFactory {
-    device._lumaData.defaultShaderFactory ||= new ShaderFactory(device);
-    return device._lumaData.defaultShaderFactory as ShaderFactory;
+    device._lumaData['defaultShaderFactory'] ||= new ShaderFactory(device);
+    return device._lumaData['defaultShaderFactory'] as ShaderFactory;
   }
 
   public readonly device: Device;

package/src/geometry/geometry.ts

@@ -86,9 +86,9 @@ export class Geometry {
       }
     }
 
-    if (this.indices && this.indices.isIndexed !== undefined) {
+    if (this.indices && this.indices['isIndexed'] !== undefined) {
       this.indices = Object.assign({}, this.indices);
-      delete this.indices.isIndexed;
+      delete this.indices['isIndexed'];
     }
 
     this.vertexCount = vertexCount || this._calculateVertexCount(this.attributes, this.indices);
@@ -103,6 +103,7 @@ export class Geometry {
    * TODO Geometry types are a mess
    */
   getAttributes(): GeometryAttributes {
+    // @ts-ignore
     return this.indices ? {indices: this.indices, ...this.attributes} : this.attributes;
   }
 

package/src/model/model.ts

@@ -26,9 +26,8 @@ import {
   RenderPass,
   UniformStore,
   log,
-  getTypedArrayFromDataType,
-  getAttributeInfosFromLayouts,
-  _BufferLayoutHelper
+  getTypedArrayConstructor,
+  getAttributeInfosFromLayouts
 } from '@luma.gl/core';
 
 import type {ShaderModule, PlatformInfo} from '@luma.gl/shadertools';
@@ -41,6 +40,8 @@ import {ShaderFactory} from '../factories/shader-factory';
 import {getDebugTableForShaderLayout} from '../debug/debug-shader-layout';
 import {debugFramebuffer} from '../debug/debug-framebuffer';
 import {deepEqual} from '../utils/deep-equal';
+import {BufferLayoutHelper} from '../utils/buffer-layout-helper';
+import {sortedBufferLayoutByShaderSourceLocations} from '../utils/buffer-layout-order';
 import {uid} from '../utils/uid';
 import {ShaderInputs} from '../shader-inputs';
 import {AsyncTexture} from '../async-texture/async-texture';
@@ -230,15 +231,19 @@ export class Model {
     const moduleMap = Object.fromEntries(
       this.props.modules?.map(module => [module.name, module]) || []
     );
-    // @ts-expect-error Fix typings
-    this.setShaderInputs(props.shaderInputs || new ShaderInputs(moduleMap));
+
+    const shaderInputs =
+      props.shaderInputs ||
+      new ShaderInputs(moduleMap, {disableWarnings: this.props.disableWarnings});
+    // @ts-ignore
+    this.setShaderInputs(shaderInputs);
 
     // Setup shader assembler
     const platformInfo = getPlatformInfo(device);
 
     // Extract modules from shader inputs if not supplied
     const modules =
-      // @ts-expect-error shaderInputs is assigned in setShaderInputs above.
+      // @ts-ignore shaderInputs is assigned in setShaderInputs above.
       (this.props.modules?.length > 0 ? this.props.modules : this.shaderInputs?.getModules()) || [];
 
     const isWebGPU = this.device.type === 'webgpu';
@@ -248,7 +253,6 @@ export class Model {
     // TODO - this is wrong, compile a single shader
     if (isWebGPU && this.props.source) {
       // WGSL
-      this.props.shaderLayout ||= getShaderLayoutFromWGSL(this.props.source);
       const {source, getUniforms} = this.props.shaderAssembler.assembleWGSLShader({
         platformInfo,
         ...this.props,
@@ -257,6 +261,8 @@ export class Model {
       this.source = source;
       // @ts-expect-error
       this._getModuleUniforms = getUniforms;
+      // Extract shader layout after modules have been added to WGSL source, to include any bindings added by modules
+      this.props.shaderLayout ||= getShaderLayoutFromWGSL(this.source);
     } else {
       // GLSL
       const {vs, fs, getUniforms} = this.props.shaderAssembler.assembleGLSLShaderPair({
@@ -453,7 +459,7 @@ export class Model {
     const gpuGeometry = geometry && makeGPUGeometry(this.device, geometry);
     if (gpuGeometry) {
       this.setTopology(gpuGeometry.topology || 'triangle-list');
-      const bufferLayoutHelper = new _BufferLayoutHelper(this.bufferLayout);
+      const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
       this.bufferLayout = bufferLayoutHelper.mergeBufferLayouts(
         gpuGeometry.bufferLayout,
         this.bufferLayout
@@ -481,7 +487,7 @@ export class Model {
    * @note Triggers a pipeline rebuild / pipeline cache fetch
    */
   setBufferLayout(bufferLayout: BufferLayout[]): void {
-    const bufferLayoutHelper = new _BufferLayoutHelper(this.bufferLayout);
+    const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
     this.bufferLayout = this._gpuGeometry
       ? bufferLayoutHelper.mergeBufferLayouts(bufferLayout, this._gpuGeometry.bufferLayout)
       : bufferLayout;
@@ -593,13 +599,19 @@ export class Model {
    */
   setAttributes(buffers: Record<string, Buffer>, options?: {disableWarnings?: boolean}): void {
     const disableWarnings = options?.disableWarnings ?? this.props.disableWarnings;
-    if (buffers.indices) {
+    if (buffers['indices']) {
       log.warn(
         `Model:${this.id} setAttributes() - indexBuffer should be set using setIndexBuffer()`
       )();
     }
 
-    const bufferLayoutHelper = new _BufferLayoutHelper(this.bufferLayout);
+    // ensure bufferLayout order matches source layout so we bind
+    // the correct buffers to the correct indices in webgpu.
+    this.bufferLayout = sortedBufferLayoutByShaderSourceLocations(
+      this.pipeline.shaderLayout,
+      this.bufferLayout
+    );
+    const bufferLayoutHelper = new BufferLayoutHelper(this.bufferLayout);
 
     // Check if all buffers have a layout
     for (const [bufferName, buffer] of Object.entries(buffers)) {
@@ -611,13 +623,19 @@ export class Model {
         continue; // eslint-disable-line no-continue
       }
 
-      // For an interleaved attribute we may need to set multiple attributes
+      // In WebGL, for an interleaved attribute we may need to set multiple attributes
+      // but in WebGPU, we set it according to the buffer's position in the vertexArray
       const attributeNames = bufferLayoutHelper.getAttributeNamesForBuffer(bufferLayout);
       let set = false;
       for (const attributeName of attributeNames) {
         const attributeInfo = this._attributeInfos[attributeName];
         if (attributeInfo) {
-          this.vertexArray.setBuffer(attributeInfo.location, buffer);
+          const location =
+            this.device.type === 'webgpu'
+              ? bufferLayoutHelper.getBufferIndex(attributeInfo.bufferName)
+              : attributeInfo.location;
+
+          this.vertexArray.setBuffer(location, buffer);
           set = true;
         }
       }
@@ -867,7 +885,7 @@ export class Model {
         indexBuffer.indexType === 'uint32'
           ? new Uint32Array(indexBuffer.debugData)
           : new Uint16Array(indexBuffer.debugData);
-      table.indices = {
+      table['indices'] = {
         name: 'indices',
         type: indexBuffer.indexType,
         values: values.toString()
@@ -878,7 +896,7 @@ export class Model {
 
   // TODO - fix typing of luma data types
   _getBufferOrConstantValues(attribute: Buffer | TypedArray, dataType: any): string {
-    const TypedArrayConstructor = getTypedArrayFromDataType(dataType);
+    const TypedArrayConstructor = getTypedArrayConstructor(dataType);
     const typedArray =
       attribute instanceof Buffer ? new TypedArrayConstructor(attribute.debugData) : attribute;
     return typedArray.toString();

package/src/modules/picking/picking-manager.ts

@@ -80,7 +80,7 @@ export class PickingManager {
     return pickingPass;
   }
 
-  getPickInfo(mousePosition: [number, number]): PickInfo | null {
+  async updatePickInfo(mousePosition: [number, number]): Promise<PickInfo | null> {
     const framebuffer = this.getFramebuffer();
 
     // use the center pixel location in device pixel range

package/src/shader-inputs.ts

@@ -8,6 +8,10 @@ import {log} from '@luma.gl/core';
 import {getShaderModuleDependencies, ShaderModule} from '@luma.gl/shadertools';
 import {splitUniformsAndBindings} from './model/split-uniforms-and-bindings';
 
+export type ShaderInputsOptions = {
+  disableWarnings?: boolean;
+};
+
 /**
  * ShaderInputs holds uniform and binding values for one or more shader modules,
  * - It can generate binary data for any uniform buffer
@@ -20,11 +24,15 @@ export class ShaderInputs<
     Record<string, Record<string, unknown>>
   >
 > {
+  options: Required<ShaderInputsOptions> = {
+    disableWarnings: false
+  };
+
   /**
    * The map of modules
    * @todo should should this include the resolved dependencies?
    */
-  // @ts-expect-error Fix typings
+  // @ts-ignore Fix typings
   modules: Readonly<{[P in keyof ShaderPropsT]: ShaderModule<ShaderPropsT[P]>}>;
 
   /** Stores the uniform values for each module */
@@ -38,8 +46,13 @@ export class ShaderInputs<
    * Create a new UniformStore instance
    * @param modules
    */
-  // @ts-expect-error Fix typings
-  constructor(modules: {[P in keyof ShaderPropsT]?: ShaderModule<ShaderPropsT[P], any>}) {
+  constructor(
+    // @ts-ignore Fix typings
+    modules: {[P in keyof ShaderPropsT]?: ShaderModule<ShaderPropsT[P], any>},
+    options?: ShaderInputsOptions
+  ) {
+    Object.assign(this.options, options);
+
     // Extract modules with dependencies
     const resolvedModules = getShaderModuleDependencies(
       Object.values(modules).filter(module => module.dependencies)
@@ -52,7 +65,7 @@ export class ShaderInputs<
     log.log(1, 'Creating ShaderInputs with modules', Object.keys(modules))();
 
     // Store the module definitions and create storage for uniform values and binding values, per module
-    // @ts-expect-error Fix typings
+    // @ts-ignore Fix typings
     this.modules = modules as {[P in keyof ShaderPropsT]: ShaderModule<ShaderPropsT[P]>};
     this.moduleUniforms = {} as Record<keyof ShaderPropsT, Record<string, UniformValue>>;
     this.moduleBindings = {} as Record<keyof ShaderPropsT, Record<string, Binding>>;
@@ -60,7 +73,7 @@ export class ShaderInputs<
     // Initialize the modules
     for (const [name, module] of Object.entries(modules)) {
       this._addModule(module);
-      if (module.name && name !== module.name) {
+      if (module.name && name !== module.name && !this.options.disableWarnings) {
         log.warn(`Module name: ${name} vs ${module.name}`)();
       }
     }
@@ -79,7 +92,9 @@ export class ShaderInputs<
       const module = this.modules[moduleName];
       if (!module) {
         // Ignore props for unregistered modules
-        log.warn(`Module ${name} not found`)();
+        if (!this.options.disableWarnings) {
+          log.warn(`Module ${name} not found`)();
+        }
         continue; // eslint-disable-line no-continue
       }
 

package/src/utils/buffer-layout-helper.ts

@@ -0,0 +1,51 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {log, type BufferLayout} from '@luma.gl/core';
+
+/** BufferLayoutHelper is a helper class that should not be used directly by applications */
+export class BufferLayoutHelper {
+  bufferLayouts: BufferLayout[];
+
+  constructor(bufferLayouts: BufferLayout[]) {
+    this.bufferLayouts = bufferLayouts;
+  }
+
+  getBufferLayout(name: string): BufferLayout | null {
+    return this.bufferLayouts.find(layout => layout.name === name) || null;
+  }
+
+  /** Get attribute names from a BufferLayout */
+  getAttributeNamesForBuffer(bufferLayout: BufferLayout): string[] {
+    return bufferLayout.attributes
+      ? bufferLayout.attributes?.map(layout => layout.attribute)
+      : [bufferLayout.name];
+  }
+
+  mergeBufferLayouts(
+    bufferLayouts1: BufferLayout[],
+    bufferLayouts2: BufferLayout[]
+  ): BufferLayout[] {
+    const mergedLayouts = [...bufferLayouts1];
+    for (const attribute of bufferLayouts2) {
+      const index = mergedLayouts.findIndex(attribute2 => attribute2.name === attribute.name);
+      if (index < 0) {
+        mergedLayouts.push(attribute);
+      } else {
+        mergedLayouts[index] = attribute;
+      }
+    }
+    return mergedLayouts;
+  }
+
+  getBufferIndex(bufferName: string): number {
+    const bufferIndex = this.bufferLayouts.findIndex(layout => layout.name === bufferName);
+
+    if (bufferIndex === -1) {
+      log.warn(`BufferLayout: Missing buffer for "${bufferName}".`)();
+    }
+
+    return bufferIndex;
+  }
+}

package/src/utils/buffer-layout-order.ts

@@ -0,0 +1,26 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {type BufferLayout, type ShaderLayout} from '@luma.gl/core';
+
+export function sortedBufferLayoutByShaderSourceLocations(
+  shaderLayout: ShaderLayout,
+  bufferLayout: BufferLayout[]
+): 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]));
+
+    return minLocationA - minLocationB;
+  });
+
+  return sortedLayout;
+}