@luma.gl/engine 9.3.0-alpha.2 → 9.3.0-alpha.6

package/src/factories/shader-factory.ts

@@ -5,6 +5,8 @@
 import {Device, Shader, ShaderProps, log} from '@luma.gl/core';
 import type {EngineModuleState} from '../types';
 
+type CacheItem = {resource: Shader; useCount: number};
+
 /** Manages a cached pool of Shaders for reuse. */
 export class ShaderFactory {
   static readonly defaultProps: Required<ShaderProps> = {...Shader.defaultProps};
@@ -17,11 +19,8 @@ export class ShaderFactory {
   }
 
   public readonly device: Device;
-  readonly cachingEnabled: boolean;
-  readonly destroyPolicy: 'unused' | 'never';
-  readonly debug: boolean;
 
-  private readonly _cache: Record<string, {shader: Shader; useCount: number}> = {};
+  private readonly _cache: Record<string, CacheItem> = {};
 
   get [Symbol.toStringTag](): string {
     return 'ShaderFactory';
@@ -34,14 +33,11 @@ export class ShaderFactory {
   /** @internal */
   constructor(device: Device) {
     this.device = device;
-    this.cachingEnabled = device.props._cacheShaders;
-    this.destroyPolicy = device.props._cacheDestroyPolicy;
-    this.debug = true; // device.props.debugFactories;
   }
 
   /** Requests a {@link Shader} from the cache, creating a new Shader only if necessary. */
   createShader(props: ShaderProps): Shader {
-    if (!this.cachingEnabled) {
+    if (!this.device.props._cacheShaders) {
       return this.device.createShader(props);
     }
 
@@ -49,30 +45,30 @@ export class ShaderFactory {
 
     let cacheEntry = this._cache[key];
     if (!cacheEntry) {
-      const shader = this.device.createShader({
+      const resource = this.device.createShader({
         ...props,
         id: props.id ? `${props.id}-cached` : undefined
       });
-      this._cache[key] = cacheEntry = {shader, useCount: 1};
-      if (this.debug) {
-        log.log(3, `${this}: Created new shader ${shader.id}`)();
+      this._cache[key] = cacheEntry = {resource, useCount: 1};
+      if (this.device.props.debugFactories) {
+        log.log(3, `${this}: Created new shader ${resource.id}`)();
       }
     } else {
       cacheEntry.useCount++;
-      if (this.debug) {
+      if (this.device.props.debugFactories) {
         log.log(
           3,
-          `${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`
+          `${this}: Reusing shader ${cacheEntry.resource.id} count=${cacheEntry.useCount}`
         )();
       }
     }
 
-    return cacheEntry.shader;
+    return cacheEntry.resource;
   }
 
   /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
   release(shader: Shader): void {
-    if (!this.cachingEnabled) {
+    if (!this.device.props._cacheShaders) {
       shader.destroy();
       return;
     }
@@ -82,16 +78,16 @@ export class ShaderFactory {
     if (cacheEntry) {
       cacheEntry.useCount--;
       if (cacheEntry.useCount === 0) {
-        if (this.destroyPolicy === 'unused') {
+        if (this.device.props._destroyShaders) {
           delete this._cache[key];
-          cacheEntry.shader.destroy();
-          if (this.debug) {
+          cacheEntry.resource.destroy();
+          if (this.device.props.debugFactories) {
             log.log(3, `${this}: Releasing shader ${shader.id}, destroyed`)();
           }
         }
       } else if (cacheEntry.useCount < 0) {
         throw new Error(`ShaderFactory: Shader ${shader.id} released too many times`);
-      } else if (this.debug) {
+      } else if (this.device.props.debugFactories) {
         log.log(3, `${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
       }
     }

package/src/geometries/cone-geometry.ts

@@ -2,13 +2,18 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {TruncatedConeGeometryProps} from './truncated-cone-geometry';
 import {TruncatedConeGeometry} from './truncated-cone-geometry';
 import {uid} from '../utils/uid';
 
-export type ConeGeometryProps = {
+export type ConeGeometryProps = Omit<
+  TruncatedConeGeometryProps,
+  'topRadius' | 'bottomRadius' | 'topCap' | 'bottomCap'
+> & {
   id?: string;
   radius?: number;
   cap?: boolean;
+  attributes?: any;
 };
 
 export class ConeGeometry extends TruncatedConeGeometry {

package/src/geometries/cylinder-geometry.ts

@@ -2,10 +2,14 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {TruncatedConeGeometryProps} from './truncated-cone-geometry';
 import {TruncatedConeGeometry} from './truncated-cone-geometry';
 import {uid} from '../utils/uid';
 
-export type CylinderGeometryProps = {
+export type CylinderGeometryProps = Omit<
+  TruncatedConeGeometryProps,
+  'topRadius' | 'bottomRadius'
+> & {
   id?: string;
   radius?: number;
   attributes?: any;

package/src/model/model.ts

@@ -64,6 +64,8 @@ export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs' | 'bindings'> & {
   shaderInputs?: ShaderInputs;
   /** Bindings */
   bindings?: Record<string, Binding | DynamicTexture>;
+  /** WebGL-only uniforms */
+  uniforms?: Record<string, unknown>;
   /** Parameters that are built into the pipeline */
   parameters?: RenderPipelineParameters;
 
@@ -114,7 +116,7 @@ export type ModelProps = Omit<RenderPipelineProps, 'vs' | 'fs' | 'bindings'> & {
  * - Reuses and lazily recompiles {@link RenderPipeline | pipelines} as needed.
  * - Integrates with `@luma.gl/shadertools` to assemble GLSL or WGSL from shader modules.
  * - Manages geometry attributes and buffer bindings.
- * - Accepts textures, samplers and uniform buffers as bindings, including `AsyncTexture`.
+ * - Accepts textures, samplers and uniform buffers as bindings, including `DynamicTexture`.
  * - Provides detailed debug logging and optional shader source inspection.
  */
 export class Model {
@@ -132,6 +134,8 @@ export class Model {
     indexBuffer: null,
     attributes: {},
     constantAttributes: {},
+    bindings: {},
+    uniforms: {},
     varyings: [],
 
     isInstanced: undefined!,
@@ -357,7 +361,7 @@ export class Model {
       this.pipelineFactory.release(this.pipeline);
       // Release the shaders
       this.shaderFactory.release(this.pipeline.vs);
-      if (this.pipeline.fs) {
+      if (this.pipeline.fs && this.pipeline.fs !== this.pipeline.vs) {
         this.shaderFactory.release(this.pipeline.fs);
       }
       this._uniformStore.destroy();
@@ -422,14 +426,7 @@ export class Model {
       // Application can call Model.predraw() to avoid this.
       this.pipeline = this._updatePipeline();
 
-      // Set pipeline state, we may be sharing a pipeline so we need to set all state on every draw
-      // Any caching needs to be done inside the pipeline functions
-      // TODO this is a busy initialized check for all bindings every frame
-
       const syncBindings = this._getBindings();
-      this.pipeline.setBindings(syncBindings, {
-        disableWarnings: this.props.disableWarnings
-      });
 
       const {indexBuffer} = this.vertexArray;
       const indexCount = indexBuffer
@@ -444,6 +441,11 @@ export class Model {
         instanceCount: this.instanceCount,
         indexCount,
         transformFeedback: this.transformFeedback || undefined,
+        // Pipelines may be shared across models when caching is enabled, so bindings
+        // and WebGL uniforms must be supplied on every draw instead of being stored
+        // on the pipeline instance.
+        bindings: syncBindings,
+        uniforms: this.props.uniforms,
         // WebGL shares underlying cached pipelines even for models that have different parameters and topology,
         // so we must provide our unique parameters to each draw
         // (In WebGPU most parameters are encoded in the pipeline and cannot be changed per draw call)
@@ -827,7 +829,9 @@ export class Model {
       );
 
       if (prevShaderVs) this.shaderFactory.release(prevShaderVs);
-      if (prevShaderFs) this.shaderFactory.release(prevShaderFs);
+      if (prevShaderFs && prevShaderFs !== prevShaderVs) {
+        this.shaderFactory.release(prevShaderFs);
+      }
     }
     return this.pipeline;
   }

package/src/models/billboard-texture-model.ts

@@ -22,15 +22,15 @@ struct backgroundUniforms {
 };
 @group(0) @binding(2) var<uniform> background: backgroundUniforms;
 
-fn billboardTexture_getTextureUV(coordinates: vec2<f32>) -> vec2<f32> {
+fn billboardTexture_getTextureUV(uv: vec2<f32>) -> vec2<f32> {
         let scale: vec2<f32> = background.scale;
-        var position: vec2<f32> = (coordinates - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
+        var position: vec2<f32> = (uv - vec2<f32>(0.5, 0.5)) / scale + vec2<f32>(0.5, 0.5);
         return position;
 }
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.coordinate);
+        let position: vec2<f32> = billboardTexture_getTextureUV(inputs.uv);
         return textureSample(backgroundTexture, backgroundTextureSampler, position);
 }
 `;
@@ -79,21 +79,23 @@ export class BackgroundTextureModel extends ClipSpace {
 
   constructor(device: Device, props: BackgroundTextureModelProps) {
     super(device, {
+      ...props,
       id: props.id || 'background-texture-model',
       source: BACKGROUND_FS_WGSL,
       fs: BACKGROUND_FS,
-      modules: [backgroundModule],
+      modules: [...(props.modules || []), backgroundModule],
       parameters: {
         depthWriteEnabled: false,
+        ...(props.parameters || {}),
         ...(props.blend
           ? {
               blend: true,
               blendColorOperation: 'add',
               blendAlphaOperation: 'add',
-              blendColorSrcFactor: 'one',
-              blendColorDstFactor: 'one-minus-src',
-              blendAlphaSrcFactor: 'one',
-              blendAlphaDstFactor: 'one-minus-src-alpha'
+              blendColorSrcFactor: 'one-minus-dst-alpha',
+              blendColorDstFactor: 'one',
+              blendAlphaSrcFactor: 'one-minus-dst-alpha',
+              blendAlphaDstFactor: 'one'
             }
           : {})
       }

package/src/models/clip-space.ts

@@ -10,9 +10,9 @@ import {uid} from '../utils/uid';
 
 const CLIPSPACE_VERTEX_SHADER_WGSL = /* wgsl */ `\
 struct VertexInputs {
-  @location(0) clipSpacePosition: vec2<f32>,
-  @location(1) texCoord: vec2<f32>,
-  @location(2) coordinate: vec2<f32>  
+  @location(0) clipSpacePositions: vec2<f32>,
+  @location(1) texCoords: vec2<f32>,
+  @location(2) coordinates: vec2<f32>
 }
 
 struct FragmentInputs {
@@ -25,10 +25,10 @@ struct FragmentInputs {
 @vertex
 fn vertexMain(inputs: VertexInputs) -> FragmentInputs {
   var outputs: FragmentInputs;
-  outputs.Position = vec4(inputs.clipSpacePosition, 0., 1.);
-  outputs.position = inputs.clipSpacePosition;
-  outputs.coordinate = inputs.coordinate;
-  outputs.uv = inputs.texCoord;
+  outputs.Position = vec4(inputs.clipSpacePositions, 0., 1.);
+  outputs.position = inputs.clipSpacePositions;
+  outputs.coordinate = inputs.coordinates;
+  outputs.uv = inputs.texCoords;
   return outputs;
 }
 `;

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

@@ -16,12 +16,6 @@ const INDEX_PICKING_MODE_INSTANCE = 0;
 const INDEX_PICKING_MODE_CUSTOM = 1;
 const INDEX_PICKING_INVALID_INDEX = ${INVALID_INDEX}; // 2^32 - 1
 
-struct indexPickingFragmentInputs = {
-  objectIndex: int32;
-};
-
-let indexPickingFragmentInputs: indexPickingFragmentInputs;
-
 /**
  * Vertex shaders should call this function to set the object index.
  * If using instance or vertex mode, argument will be ignored, 0 can be supplied.

package/src/passes/get-fragment-shader.ts

@@ -36,26 +36,16 @@ export function getFragmentShaderForRenderPass(options: {
 /** Get a filtering WGSL fragment shader */
 function getFilterShaderWGSL(func: string) {
   return /* wgsl */ `\
-// Binding 0:1 is reserved for shader passes
-// @group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
-@group(0) @binding(1) var texture: texture_2d<f32>;
-@group(0) @binding(2) var textureSampler: sampler;
-
-// This needs to be aligned with
-// struct FragmentInputs {
-//   @location(0) fragUV: vec2f,
-//   @location(1) fragPosition: vec4f,
-//   @location(2) fragCoordinate: vec4f
-// };
+@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(2) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let fragUV = inputs.uv;
-  let fragCoordinate = inputs.coordinate;
-  let texSize = vec2f(textureDimensions(texture, 0));
+  let texCoord = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(sourceTexture));
 
-  var fragColor = textureSample(texture, textureSampler, fragUV);
-  fragColor = ${func}(fragColor, texSize, fragCoordinate);
+  var fragColor = textureSample(sourceTexture, sourceTextureSampler, texCoord);
+  fragColor = ${func}(fragColor, texSize, texCoord);
   return fragColor;
 }
 `;
@@ -64,23 +54,14 @@ fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
 /** Get a sampling WGSL fragment shader */
 function getSamplerShaderWGSL(func: string) {
   return /* wgsl */ `\
-// Binding 0:1 is reserved for shader passes
-@group(0) @binding(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
-@group(0) @binding(1) var texture: texture_2d<f32>;
-@group(0) @binding(2) var sampler: sampler;
-
-struct FragmentInputs = {
-  @location(0) fragUV: vec2f,
-  @location(1) fragPosition: vec4f,
-  @location(2) fragCoordinate: vec4f
-};
+@group(0) @binding(0) var sourceTexture: texture_2d<f32>;
+@group(0) @binding(2) var sourceTextureSampler: sampler;
 
 @fragment
 fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4f {
-  let texSize = vec2f(textureDimensions(texture, 0));
-  var fragColor = textureSample(texture, sampler, fragUV);
-  fragColor = ${func}(fragColor, texSize, texCoord);
-  return fragColor;
+  let texCoord = inputs.coordinate;
+  let texSize = vec2f(textureDimensions(sourceTexture));
+  return ${func}(sourceTexture, sourceTextureSampler, texSize, texCoord);
 }
 `;
 }

package/src/passes/shader-pass-renderer.ts

@@ -29,8 +29,6 @@ export class ShaderPassRenderer {
   shaderInputs: ShaderInputs;
   passRenderers: PassRenderer[];
   swapFramebuffers: SwapFramebuffers;
-  /** For rendering to the screen */
-  clipSpace: ClipSpace;
   textureModel: BackgroundTextureModel;
 
   constructor(device: Device, props: ShaderPassRendererProps) {
@@ -55,31 +53,6 @@ export class ShaderPassRenderer {
       backgroundTexture: this.swapFramebuffers.current.colorAttachments[0].texture
     });
 
-    this.clipSpace = new ClipSpace(device, {
-      source: /* wgsl */ `\
-  @group(0) @binding(0) var sourceTexture: texture_2d<f32>;
-  @group(0) @binding(1) var sourceTextureSampler: sampler;
-
-@fragment
-fn fragmentMain(inputs: FragmentInputs) -> @location(0) vec4<f32> {
-	let texCoord: vec2<f32> = inputs.coordinate;
-	return textureSample(sourceTexture, sourceTextureSampler, texCoord);
-}
-`,
-
-      fs: /* glsl */ `\
-#version 300 es
-
-uniform sampler2D sourceTexture;
-in vec2 uv;
-out vec4 fragColor;
-
-void main() {
-  fragColor = texture(sourceTexture, uv);
-}
-`
-    });
-
     this.passRenderers = props.shaderPasses.map(shaderPass => new PassRenderer(device, shaderPass));
   }
 
@@ -89,7 +62,6 @@ void main() {
       subPassRenderer.destroy();
     }
     this.swapFramebuffers.destroy();
-    this.clipSpace.destroy();
     this.textureModel.destroy();
   }
 
@@ -112,16 +84,15 @@ void main() {
 
     const framebuffer = this.device
       .getDefaultCanvasContext()
-      // @ts-expect-error TODO - remove after republish
-      .getCurrentFramebuffer({depthStencilAttachment: false});
+      .getCurrentFramebuffer({depthStencilFormat: false});
     const renderPass = this.device.beginRenderPass({
       id: 'shader-pass-renderer-to-screen',
       framebuffer,
       // clearColor: [1, 1, 0, 1],
-      clearDepth: 1
+      clearDepth: false
     });
-    this.clipSpace.setBindings({sourceTexture: outputTexture});
-    this.clipSpace.draw(renderPass);
+    this.textureModel.setProps({backgroundTexture: outputTexture});
+    this.textureModel.draw(renderPass);
     renderPass.end();
     return true;
   }

package/src/scenegraph/group-node.ts

@@ -108,4 +108,20 @@ export class GroupNode extends ScenegraphNode {
       }
     }
   }
+
+  preorderTraversal(
+    visitor: (node: ScenegraphNode, context: {worldMatrix: Matrix4}) => void,
+    {worldMatrix = new Matrix4()} = {}
+  ) {
+    const modelMatrix = new Matrix4(worldMatrix).multiplyRight(this.matrix);
+    visitor(this, {worldMatrix: modelMatrix});
+
+    for (const child of this.children) {
+      if (child instanceof GroupNode) {
+        child.preorderTraversal(visitor, {worldMatrix: modelMatrix});
+      } else {
+        visitor(child, {worldMatrix: modelMatrix});
+      }
+    }
+  }
 }

package/src/scenegraph/model-node.ts

@@ -9,12 +9,12 @@ import {Model} from '../model/model';
 export type ModelNodeProps = ScenegraphNodeProps & {
   model: Model;
   managedResources?: any[];
-  bounds?: [number[], number[]];
+  bounds?: [[number, number, number], [number, number, number]];
 };
 
 export class ModelNode extends ScenegraphNode {
   readonly model: Model;
-  bounds: [number[], number[]] | null = null;
+  bounds: [[number, number, number], [number, number, number]] | null = null;
   managedResources: any[];
 
   // TODO - is this used? override callbacks to make sure we call them with this

package/src/scenegraph/scenegraph-node.ts

@@ -5,6 +5,12 @@
 import {Vector3, Matrix4, NumericArray} from '@math.gl/core';
 import {uid} from '../utils/uid';
 
+function assert(condition: boolean, message?: string): asserts condition {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
 /** Properties for creating a new Scenegraph */
 export type ScenegraphNodeProps = {
   id?: string;
@@ -57,19 +63,19 @@ export class ScenegraphNode {
   }
 
   setPosition(position: any): this {
-    // assert(position.length === 3, 'setPosition requires vector argument');
+    assert(position.length === 3, 'setPosition requires vector argument');
     this.position = position;
     return this;
   }
 
   setRotation(rotation: any): this {
-    // assert(rotation.length === 3, 'setRotation requires vector argument');
+    assert(rotation.length === 3 || rotation.length === 4, 'setRotation requires vector argument');
     this.rotation = rotation;
     return this;
   }
 
   setScale(scale: any): this {
-    // assert(scale.length === 3, 'setScale requires vector argument');
+    assert(scale.length === 3, 'setScale requires vector argument');
     this.scale = scale;
     return this;
   }
@@ -105,19 +111,20 @@ export class ScenegraphNode {
   }
 
   updateMatrix(): this {
-    const pos = this.position;
-    const rot = this.rotation;
-    const scale = this.scale;
-
     this.matrix.identity();
-    this.matrix.translate(pos);
-    this.matrix.rotateXYZ(rot);
-    this.matrix.scale(scale);
+    this.matrix.translate(this.position);
+    if (this.rotation.length === 4) {
+      const rotationMatrix = new Matrix4().fromQuaternion(this.rotation);
+      this.matrix.multiplyRight(rotationMatrix);
+    } else {
+      this.matrix.rotateXYZ(this.rotation);
+    }
+    this.matrix.scale(this.scale);
+
     return this;
   }
 
-  update(options: {position?: any; rotation?: any; scale?: any} = {}): this {
-    const {position, rotation, scale} = options;
+  update({position, rotation, scale}: {position?: any; rotation?: any; scale?: any} = {}): this {
     if (position) {
       this.setPosition(position);
     }
@@ -127,7 +134,9 @@ export class ScenegraphNode {
     if (scale) {
       this.setScale(scale);
     }
+
     this.updateMatrix();
+
     return this;
   }
 
@@ -188,18 +197,20 @@ export class ScenegraphNode {
     //   this.display = props.display;
     // }
 
-    if ('position' in props) {
+    if (props?.position) {
       this.setPosition(props.position);
     }
-    if ('rotation' in props) {
+    if (props?.rotation) {
       this.setRotation(props.rotation);
     }
-    if ('scale' in props) {
+    if (props?.scale) {
       this.setScale(props.scale);
     }
 
+    this.updateMatrix();
+
     // Matrix overwrites other props
-    if ('matrix' in props) {
+    if (props?.matrix) {
       this.setMatrix(props.matrix);
     }
 

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

@@ -4,6 +4,22 @@
 
 import {type BufferLayout, type ShaderLayout} from '@luma.gl/core';
 
+function getMinLocation(
+  attributeNames: string[],
+  shaderLayoutMap: Record<string, number | undefined>
+): number {
+  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: ShaderLayout,
   bufferLayout: BufferLayout[]
@@ -16,8 +32,8 @@ export function sortedBufferLayoutByShaderSourceLocations(
   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;
   });