@luma.gl/engine 9.0.0-beta.1 → 9.0.0-beta.10

package/src/debug/debug-framebuffer.ts

@@ -10,7 +10,21 @@ let ctx: CanvasRenderingContext2D | null = null;
 // eslint-disable-next-line
 export function debugFramebuffer(
   fbo: Framebuffer | Texture,
-  {id, minimap, opaque, top = '0', left = '0', rgbaScale = 1}: {id: string, minimap?: boolean; opaque?: boolean, top?: string, left?: string, rgbaScale?: number}
+  {
+    id,
+    minimap,
+    opaque,
+    top = '0',
+    left = '0',
+    rgbaScale = 1
+  }: {
+    id: string;
+    minimap?: boolean;
+    opaque?: boolean;
+    top?: string;
+    left?: string;
+    rgbaScale?: number;
+  }
 ) {
   if (!canvas) {
     canvas = document.createElement('canvas');
@@ -34,7 +48,6 @@ export function debugFramebuffer(
     canvas.height = fbo.height / 2;
     canvas.style.width = '400px';
     canvas.style.height = '400px';
-
   }
 
   // const image = copyTextureToImage(fbo, {targetMaxHeight: 100, targetImage});
@@ -54,4 +67,4 @@ export function debugFramebuffer(
     imageData.data[offset + i + 3] = opaque ? 255 : color[i + 3] * rgbaScale;
   }
   ctx.putImageData(imageData, 0, 0);
-};
+}

package/src/debug/debug-shader-layout.ts

@@ -8,7 +8,7 @@ import type {ShaderLayout} from '@luma.gl/core';
  * Extracts a table suitable for `console.table()` from a shader layout to assist in debugging.
  * @param layout shader layout
  * @param name app should provide the most meaningful name, usually the model or pipeline name / id.
- * @returns 
+ * @returns
  */
 export function getDebugTableForShaderLayout(
   layout: ShaderLayout,

package/src/debug/pixel-data-utils.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {TypedArray} from '@luma.gl/core';
@@ -33,11 +34,7 @@ export function flipRows(options: {
   }
 }
 
-export function scalePixels(options: {
-  data: TypedArray;
-  width: number;
-  height: number;
-}): {
+export function scalePixels(options: {data: TypedArray; width: number; height: number}): {
   data: Uint8Array;
   width: number;
   height: number;

package/src/geometries/cube-geometry.ts

@@ -11,19 +11,23 @@ export type CubeGeometryProps = {
 export class CubeGeometry extends Geometry {
   constructor(props: CubeGeometryProps = {}) {
     const {id = uid('cube-geometry'), indices = true} = props;
-    super(indices ? {
-      ...props,
-      id,
-      topology: 'triangle-list',
-      indices: {size: 1, value: CUBE_INDICES},
-      attributes: {...ATTRIBUTES, ...props.attributes}
-    } : {
-      ...props,
-      id,
-      topology: 'triangle-list',
-      indices: undefined,
-      attributes: {...NON_INDEXED_ATTRIBUTES, ...props.attributes}
-    });
+    super(
+      indices
+        ? {
+            ...props,
+            id,
+            topology: 'triangle-list',
+            indices: {size: 1, value: CUBE_INDICES},
+            attributes: {...ATTRIBUTES, ...props.attributes}
+          }
+        : {
+            ...props,
+            id,
+            topology: 'triangle-list',
+            indices: undefined,
+            attributes: {...NON_INDEXED_ATTRIBUTES, ...props.attributes}
+          }
+    );
   }
 }
 

package/src/geometries/ico-sphere-geometry.ts

@@ -11,7 +11,7 @@ export type IcoSphereGeometryProps = {
   id?: string;
   radius?: number;
   iterations?: number;
-  attributes?: any
+  attributes?: any;
 };
 
 export class IcoSphereGeometry extends Geometry {

package/src/geometries/plane-geometry.ts

@@ -5,7 +5,7 @@ import {unpackIndexedGeometry} from '../geometry/geometry-utils';
 export type PlaneGeometryProps = {
   id?: string;
   radius?: number;
-  attributes?: any
+  attributes?: any;
 };
 
 // Primitives inspired by TDL http://code.google.com/p/webglsamples/,

package/src/geometries/sphere-geometry.ts

@@ -6,7 +6,7 @@ export type SphereGeometryProps = {
   radius?: number;
   nlat?: number;
   nlong?: number;
-  attributes?: any
+  attributes?: any;
 };
 
 // Primitives inspired by TDL http://code.google.com/p/webglsamples/,

package/src/geometries/truncated-cone-geometry.ts

@@ -36,7 +36,8 @@ export class TruncatedConeGeometry extends Geometry {
         POSITION: {size: 3, value: attributes.POSITION},
         NORMAL: {size: 3, value: attributes.NORMAL},
         TEXCOORD_0: {size: 2, value: attributes.TEXCOORD_0},
-        ...props.attributes}
+        ...props.attributes
+      }
     });
   }
 }

package/src/geometry/geometry-table.ts

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {TypedArray, VertexFormat} from '@luma.gl/core';
 
 /** Holds one geometry */
@@ -6,11 +9,11 @@ export type GeometryTable = {
   length: number;
   schema?: Record<string, VertexFormat>;
   attributes: {
-    POSITION: TypedArray,
-    NORMAL: TypedArray,
-    TEXCOORD_0: TypedArray,
-    [key: string]: TypedArray,
+    POSITION: TypedArray;
+    NORMAL: TypedArray;
+    TEXCOORD_0: TypedArray;
+    [key: string]: TypedArray;
   };
   indices?: Uint16Array | Uint32Array;
   topology?: 'point-list' | 'line-list' | 'line-strip' | 'triangle-list' | 'triangle-strip';
-}
+};

package/src/geometry/geometry-utils.ts

@@ -29,3 +29,19 @@ export function unpackIndexedGeometry(geometry: any) {
     attributes: Object.assign({}, attributes, unpackedAttributes)
   };
 }
+
+// export function calculateVertexNormals(positions: Float32Array): Uint8Array {
+//   let normals = new Uint8Array(positions.length / 3);
+
+//   for (let i = 0; i < positions.length; i++) {
+//     const vec1 = new Vector3(positions.subarray(i * 3, i + 0, i + 3));
+//     const vec2 = new Vector3(positions.subarray(i + 3, i + 6));
+//     const vec3 = new Vector3(positions.subarray(i + 6, i + 9));
+
+//     const normal = new Vector3(vec1).cross(vec2).normalize();
+//     normals.set(normal[0], i + 4);
+//     normals.set(normal[1], i + 4 + 1);
+//     normals.set(normal[2], i + 2);
+//   }
+//   const normal = new Vector3(vec1).cross(vec2).normalize();
+// }

package/src/geometry/geometry.ts

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {PrimitiveTopology, TypedArray} from '@luma.gl/core';
 import {uid, assert} from '@luma.gl/core';
 
@@ -98,7 +101,7 @@ export class Geometry {
     return this.vertexCount;
   }
 
-  /** 
+  /**
    * Return an object with all attributes plus indices added as a field.
    * TODO Geometry types are a mess
    */
@@ -118,10 +121,10 @@ export class Geometry {
    * type: indices, vertices, uvs
    * size: elements per vertex
    * target: WebGL buffer type (string or constant)
-   * 
-   * @param attributes 
-   * @param indices 
-   * @returns 
+   *
+   * @param attributes
+   * @param indices
+   * @returns
    */
   _setAttributes(attributes: Record<string, GeometryAttribute>, indices: any): this {
     return this;

package/src/geometry/gpu-geometry.ts

@@ -48,11 +48,10 @@ export class GPUGeometry {
   }
 
   destroy(): void {
-    this.indices.destroy();
-    this.attributes.positions.destroy();
-    this.attributes.normals.destroy();
-    this.attributes.texCoords.destroy();
-    this.attributes.colors?.destroy();
+    this.indices?.destroy();
+    for (const attribute of Object.values(this.attributes)) {
+      attribute.destroy();
+    }
   }
 
   getVertexCount(): number {
@@ -101,7 +100,7 @@ export function getIndexBufferFromGeometry(device: Device, geometry: Geometry):
 export function getAttributeBuffersFromGeometry(
   device: Device,
   geometry: Geometry
-): {attributes: Record<string, Buffer>, bufferLayout: BufferLayout[], vertexCount: number} {
+): {attributes: Record<string, Buffer>; bufferLayout: BufferLayout[]; vertexCount: number} {
   const bufferLayout: BufferLayout[] = [];
 
   const attributes: Record<string, Buffer> = {};
@@ -109,17 +108,25 @@ export function getAttributeBuffersFromGeometry(
     let name: string = attributeName;
     // TODO Map some GLTF attribute names (is this still needed?)
     switch (attributeName) {
-      case 'POSITION': name = 'positions'; break;
-      case 'NORMAL': name = 'normals'; break;
-      case 'TEXCOORD_0': name = 'texCoords'; break;
-      case 'COLOR_0': name = 'colors'; break;
+      case 'POSITION':
+        name = 'positions';
+        break;
+      case 'NORMAL':
+        name = 'normals';
+        break;
+      case 'TEXCOORD_0':
+        name = 'texCoords';
+        break;
+      case 'COLOR_0':
+        name = 'colors';
+        break;
     }
     attributes[name] = device.createBuffer({data: attribute.value, id: `${attributeName}-buffer`});
     const {value, size, normalized} = attribute;
     bufferLayout.push({name, format: getVertexFormatFromAttribute(value, size, normalized)});
   }
 
-  const vertexCount = geometry._calculateVertexCount(geometry.attributes, geometry.indices)
+  const vertexCount = geometry._calculateVertexCount(geometry.attributes, geometry.indices);
 
   return {attributes, bufferLayout, vertexCount};
 }

package/src/index.ts

@@ -23,6 +23,7 @@ export type {TextureTransformProps} from './transform/texture-transform';
 export {TextureTransform} from './transform/texture-transform';
 
 export {PipelineFactory} from './lib/pipeline-factory';
+export {ShaderFactory} from './lib/shader-factory';
 
 // Utils
 export {ClipSpace} from './lib/clip-space';
@@ -34,7 +35,7 @@ export type {ModelNodeProps} from './scenegraph/model-node';
 export {ModelNode} from './scenegraph/model-node';
 
 // Geometries
-export type {GeometryProps} from './geometry/geometry';
+export type {GeometryProps, GeometryAttribute} from './geometry/geometry';
 export {Geometry} from './geometry/geometry';
 export type {GPUGeometryProps} from './geometry/gpu-geometry';
 export {GPUGeometry} from './geometry/gpu-geometry';
@@ -58,3 +59,5 @@ export {TruncatedConeGeometry} from './geometries/truncated-cone-geometry';
 // EXPERIMENTAL
 export type {ShaderModuleInputs} from './shader-inputs';
 export {ShaderInputs as _ShaderInputs} from './shader-inputs';
+export type {ComputationProps} from './computation';
+export {Computation} from './computation';

package/src/lib/clip-space.ts

@@ -1,10 +1,10 @@
-
 // ClipSpace
 import {Device, glsl} from '@luma.gl/core';
 import {Model, ModelProps} from '../model/model';
 import {Geometry} from '../geometry/geometry';
 
 const CLIPSPACE_VERTEX_SHADER = glsl`\
+#version 300 es
 in vec2 aClipSpacePosition;
 in vec2 aTexCoord;
 in vec2 aCoordinate;
@@ -28,25 +28,22 @@ const POSITIONS = [-1, -1, 1, -1, -1, 1, 1, 1];
  * A flat geometry that covers the "visible area" that the GPU renders.
  */
 export class ClipSpace extends Model {
-  constructor(device: Device, opts?: ModelProps) {
-    const TEX_COORDS = POSITIONS.map((coord) => (coord === -1 ? 0 : coord));
+  constructor(device: Device, opts: Omit<ModelProps, 'vs' | 'vertexCount' | 'geometry'>) {
+    const TEX_COORDS = POSITIONS.map(coord => (coord === -1 ? 0 : coord));
 
-    super(
-      device,
-      {
-        ...opts,
-        vs: CLIPSPACE_VERTEX_SHADER,
+    super(device, {
+      ...opts,
+      vs: CLIPSPACE_VERTEX_SHADER,
+      vertexCount: 4,
+      geometry: new Geometry({
+        topology: 'triangle-strip',
         vertexCount: 4,
-        geometry: new Geometry({
-          topology: 'triangle-strip',
-          vertexCount: 4,
-          attributes: {
-            aClipSpacePosition: {size: 2, value: new Float32Array(POSITIONS)},
-            aTexCoord: {size: 2, value: new Float32Array(TEX_COORDS)},
-            aCoordinate: {size: 2, value: new Float32Array(TEX_COORDS)}
-          }
-        })
-      }
-    );
+        attributes: {
+          aClipSpacePosition: {size: 2, value: new Float32Array(POSITIONS)},
+          aTexCoord: {size: 2, value: new Float32Array(TEX_COORDS)},
+          aCoordinate: {size: 2, value: new Float32Array(TEX_COORDS)}
+        }
+      })
+    });
   }
 }

package/src/lib/pipeline-factory.ts

@@ -1,33 +1,35 @@
-// luma.gl, MIT license
-import type {RenderPipelineProps} from '@luma.gl/core';
-import {Device, RenderPipeline} from '@luma.gl/core';
-
-/** Todo - should be same as RenderPipelineProps */
-export type PipelineFactoryProps = Omit<RenderPipelineProps, 'vs' | 'fs'> & {
-  // Only accepts string shaders
-  vs: string;
-  fs: string;
-};
-
-/** 
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {RenderPipelineProps, ComputePipelineProps} from '@luma.gl/core';
+import {Device, RenderPipeline, ComputePipeline} from '@luma.gl/core';
+
+export type PipelineFactoryProps = RenderPipelineProps;
+
+/**
  * Efficiently creates / caches pipelines
  */
 export class PipelineFactory {
-  static defaultProps: Required<PipelineFactoryProps> = {
-    ...RenderPipeline.defaultProps,
-    vs: undefined!,
-    fs: undefined!
-  }
+  static defaultProps: Required<PipelineFactoryProps> = {...RenderPipeline.defaultProps};
 
   readonly device: Device;
 
   private _hashCounter: number = 0;
   private readonly _hashes: Record<string, number> = {};
-  private readonly _useCounts: Record<string, number> = {};
-  private readonly _pipelineCache: Record<string, RenderPipeline> = {};
-
+  private readonly _renderPipelineCache: Record<
+    string,
+    {pipeline: RenderPipeline; useCount: number}
+  > = {};
+  private readonly _computePipelineCache: Record<
+    string,
+    {pipeline: ComputePipeline; useCount: number}
+  > = {};
+
+  /** Get the singleton default pipeline factory for the specified device */
   static getDefaultPipelineFactory(device: Device): PipelineFactory {
-    device._lumaData.defaultPipelineFactory = device._lumaData.defaultPipelineFactory || new PipelineFactory(device);
+    device._lumaData.defaultPipelineFactory =
+      device._lumaData.defaultPipelineFactory || new PipelineFactory(device);
     return device._lumaData.defaultPipelineFactory as PipelineFactory;
   }
 
@@ -35,83 +37,88 @@ export class PipelineFactory {
     this.device = device;
   }
 
-  createRenderPipeline(options: PipelineFactoryProps): RenderPipeline {
-    const props: Required<PipelineFactoryProps> = {...PipelineFactory.defaultProps, ...options};
+  /** Return a RenderPipeline matching props. Reuses a similar pipeline if already created. */
+  createRenderPipeline(props: RenderPipelineProps): RenderPipeline {
+    const allProps: Required<RenderPipelineProps> = {...RenderPipeline.defaultProps, ...props};
 
-    const hash = this._hashRenderPipeline({...props});
+    const hash = this._hashRenderPipeline(allProps);
 
-    if (!this._pipelineCache[hash]) {
+    if (!this._renderPipelineCache[hash]) {
       const pipeline = this.device.createRenderPipeline({
-        ...props,
-        vs: this.device.createShader({stage: 'vertex', source: props.vs}),
-        fs: props.fs ? this.device.createShader({stage: 'fragment', source: props.fs}) : null,
+        ...allProps,
+        id: allProps.id ? `${allProps.id}-cached` : undefined
       });
-
       pipeline.hash = hash;
-      this._pipelineCache[hash] = pipeline;
-      this._useCounts[hash] = 0;
+      this._renderPipelineCache[hash] = {pipeline, useCount: 0};
     }
 
-    this._useCounts[hash]++;
+    this._renderPipelineCache[hash].useCount++;
+    return this._renderPipelineCache[hash].pipeline;
+  }
+
+  createComputePipeline(props: ComputePipelineProps): ComputePipeline {
+    const allProps: Required<ComputePipelineProps> = {...ComputePipeline.defaultProps, ...props};
+
+    const hash = this._hashComputePipeline(allProps);
+
+    if (!this._computePipelineCache[hash]) {
+      const pipeline = this.device.createComputePipeline({
+        ...allProps,
+        id: allProps.id ? `${allProps.id}-cached` : undefined
+      });
+      pipeline.hash = hash;
+      this._computePipelineCache[hash] = {pipeline, useCount: 0};
+    }
 
-    return this._pipelineCache[hash];
+    this._computePipelineCache[hash].useCount++;
+    return this._computePipelineCache[hash].pipeline;
   }
 
-  release(pipeline: RenderPipeline): void {
+  release(pipeline: RenderPipeline | ComputePipeline): void {
     const hash = pipeline.hash;
-    this._useCounts[hash]--;
-    if (this._useCounts[hash] === 0) {
-      this._pipelineCache[hash].destroy();
-      delete this._pipelineCache[hash];
-      delete this._useCounts[hash];
+    const cache =
+      pipeline instanceof ComputePipeline ? this._computePipelineCache : this._renderPipelineCache;
+    cache[hash].useCount--;
+    if (cache[hash].useCount === 0) {
+      cache[hash].pipeline.destroy();
+      delete cache[hash];
     }
   }
 
   // PRIVATE
-
-  _createRenderPipeline(props: PipelineFactoryProps): RenderPipeline {
-    if (!props.fs) {
-      throw new Error('fs');
-    }
-
-    const pipeline = this.device.createRenderPipeline({
-      ...props,
-      vs: this.device.createShader({stage: 'vertex', source: props.vs}),
-      fs: props.fs ? this.device.createShader({stage: 'fragment', source: props.fs}) : null,
-    });
-
-    return pipeline;
+  private _hashComputePipeline(props: ComputePipelineProps): string {
+    const shaderHash = this._getHash(props.shader.source);
+    return `${shaderHash}`;
   }
 
   /** Calculate a hash based on all the inputs for a render pipeline */
-  _hashRenderPipeline(props: PipelineFactoryProps): string {
-    const vsHash = this._getHash(props.vs);
-    const fsHash = props.fs ? this._getHash(props.fs) : 0;
+  private _hashRenderPipeline(props: RenderPipelineProps): string {
+    const vsHash = this._getHash(props.vs.source);
+    const fsHash = props.fs ? this._getHash(props.fs.source) : 0;
 
     // WebGL specific
     // const {varyings = [], bufferMode = {}} = props;
     // const varyingHashes = varyings.map((v) => this._getHash(v));
     const varyingHash = '-'; // `${varyingHashes.join('/')}B${bufferMode}`
+    const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
 
-    switch (this.device.info.type) {
-      case 'webgpu':
+    switch (this.device.type) {
+      // case 'webgl':
+      // WebGL is more dynamic
+      // return `${vsHash}/${fsHash}V${varyingHash}BL${bufferLayoutHash}`;
+      default:
         // On WebGPU we need to rebuild the pipeline if topology, parameters or bufferLayout change
         const parameterHash = this._getHash(JSON.stringify(props.parameters));
-        const bufferLayoutHash = this._getHash(JSON.stringify(props.bufferLayout));
         // TODO - Can json.stringify() generate different strings for equivalent objects if order of params is different?
         // create a deepHash() to deduplicate?
-        return `${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}}`;
-      default:
-        // WebGL is more dynamic
-        return `${vsHash}/${fsHash}V${varyingHash}`;
+        return `${vsHash}/${fsHash}V${varyingHash}T${props.topology}P${parameterHash}BL${bufferLayoutHash}`;
     }
   }
 
-  _getHash(key: string): number {
+  private _getHash(key: string): number {
     if (this._hashes[key] === undefined) {
       this._hashes[key] = this._hashCounter++;
     }
     return this._hashes[key];
   }
 }
-

package/src/lib/shader-factory.ts

@@ -0,0 +1,57 @@
+import {Device, Shader, ShaderProps} from '@luma.gl/core';
+
+/** Manages a cached pool of Shaders for reuse. */
+export class ShaderFactory {
+  static readonly defaultProps: Required<ShaderProps> = {...Shader.defaultProps};
+
+  public readonly device: Device;
+
+  private readonly _cache: Record<string, {shader: Shader; useCount: number}> = {};
+
+  /** 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;
+  }
+
+  /** @internal */
+  constructor(device: Device) {
+    this.device = device;
+  }
+
+  /** Requests a {@link Shader} from the cache, creating a new Shader only if necessary. */
+  createShader(props: ShaderProps): Shader {
+    const key = this._hashShader(props);
+
+    let cacheEntry = this._cache[key];
+    if (!cacheEntry) {
+      const shader = this.device.createShader({
+        ...props,
+        id: props.id ? `${props.id}-cached` : undefined
+      });
+      this._cache[key] = cacheEntry = {shader, useCount: 0};
+    }
+
+    cacheEntry.useCount++;
+    return cacheEntry.shader;
+  }
+
+  /** Releases a previously-requested {@link Shader}, destroying it if no users remain. */
+  release(shader: Shader): void {
+    const key = this._hashShader(shader);
+    const cacheEntry = this._cache[key];
+    if (cacheEntry) {
+      cacheEntry.useCount--;
+      if (cacheEntry.useCount === 0) {
+        delete this._cache[key];
+        cacheEntry.shader.destroy();
+      }
+    }
+  }
+
+  // PRIVATE
+
+  private _hashShader(value: Shader | ShaderProps): string {
+    return `${value.stage}:${value.source}`;
+  }
+}