@luma.gl/engine 9.0.0-beta.4 → 9.0.0-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@luma.gl/engine",
-  "version": "9.0.0-beta.4",
-  "description": "WebGL2 Components for High Performance Rendering and Computation",
+  "version": "9.0.0-beta.6",
+  "description": "3D Engine Components for luma.gl",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -35,17 +35,18 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build-bundle": "ocular-bundle ./src/index.ts",
-    "pre-build": "npm run build-bundle && npm run build-bundle -- --env=dev"
+    "build-minified-bundle": "ocular-bundle ./src/index.ts -output=dist/dist.min.js",
+    "build-dev-bundle": "ocular-bundle ./src/index.ts -output=dist/dist.dev.js -- --env=dev",
+    "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
+  },
+  "peerDependencies": {
+    "@luma.gl/core": "^9.0.0-beta.4",
+    "@luma.gl/shadertools": "^9.0.0-beta.4"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@luma.gl/constants": "9.0.0-beta.4",
-    "@luma.gl/core": "9.0.0-beta.4",
-    "@luma.gl/shadertools": "9.0.0-beta.4",
     "@math.gl/core": "^4.0.0",
     "@probe.gl/log": "^4.0.2",
     "@probe.gl/stats": "^4.0.2"
   },
-  "gitHead": "bf6bb45b25d59de5b3d05dab4b2e91ad583059e6"
+  "gitHead": "cb2f0938d03a65e3588622ac99650b14a10488b6"
 }

package/src/animation/timeline.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 /**
@@ -9,30 +10,30 @@
  * @param repeat = 1
  */
 export type ChannelOptions = {
-  delay?: number
-  duration?: number
-  rate?: number
-  repeat?: number
-}
+  delay?: number;
+  duration?: number;
+  rate?: number;
+  repeat?: number;
+};
 
 export type AnimationOptions = {
-  setTime: (time: number) => void
-}
+  setTime: (time: number) => void;
+};
 
- type Channel = {
-  time: number
-  delay: number
-  duration: number
-  rate: number
-  repeat: number
-}
+type Channel = {
+  time: number;
+  delay: number;
+  duration: number;
+  rate: number;
+  repeat: number;
+};
 
 type Animation = {
   channel?: number;
   animation: {
-    setTime: (time: number) => void
-  }
-}
+    setTime: (time: number) => void;
+  };
+};
 
 let channelHandles = 1;
 let animationHandles = 1;
@@ -44,8 +45,7 @@ export class Timeline {
   playing: boolean = false;
   lastEngineTime: number = -1;
 
-  constructor() {
-  }
+  constructor() {}
 
   addChannel(props: ChannelOptions): number {
     const {delay = 0, duration = Number.POSITIVE_INFINITY, rate = 1, repeat = 1} = props;

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

@@ -3,21 +3,23 @@ import type {AnimationProps} from './animation-props';
 /**
  * Minimal class that represents a "componentized" rendering life cycle
  * (resource construction, repeated rendering, resource destruction)
- * 
- * @note A motivation for this class compared to the raw animation loop is 
- * that it simplifies TypeScript code by allowing resources to be typed unconditionally 
+ *
+ * @note A motivation for this class compared to the raw animation loop is
+ * that it simplifies TypeScript code by allowing resources to be typed unconditionally
  * since they are allocated in the constructor rather than in onInitialized
- * 
+ *
  * @note Introduced in luma.gl v9
- * 
- * @example AnimationLoopTemplate is intended to be subclassed, 
+ *
+ * @example AnimationLoopTemplate is intended to be subclassed,
  * but the subclass should not be instantiated directly. Instead the subclass
- * (i.e. the constructor of the subclass) should be used 
+ * (i.e. the constructor of the subclass) should be used
  * as an argument to create an AnimationLoop.
  */
 export abstract class AnimationLoopTemplate {
   constructor(animationProps?: AnimationProps) {}
-  async onInitialize(animationProps: AnimationProps): Promise<unknown> { return null; }
+  async onInitialize(animationProps: AnimationProps): Promise<unknown> {
+    return null;
+  }
   abstract onRender(animationProps: AnimationProps): unknown;
   abstract onFinalize(animationProps: AnimationProps): void;
 }

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {luma, Device} from '@luma.gl/core';
@@ -32,23 +33,25 @@ export type MutableAnimationLoopProps = {
   autoResizeViewport?: boolean;
   autoResizeDrawingBuffer?: boolean;
   useDevicePixels?: number | boolean;
-}
+};
 
 const DEFAULT_ANIMATION_LOOP_PROPS: Required<AnimationLoopProps> = {
   device: null!,
 
   onAddHTML: () => '',
-  onInitialize: async () => { return null; },
+  onInitialize: async () => {
+    return null;
+  },
   onRender: () => {},
   onFinalize: () => {},
-  onError: (error) => console.error(error), // eslint-disable-line no-console
+  onError: error => console.error(error), // eslint-disable-line no-console
 
   stats: luma.stats.get(`animation-loop-${statIdCounter++}`),
 
   // view parameters
   useDevicePixels: true,
   autoResizeViewport: false,
-  autoResizeDrawingBuffer: false,
+  autoResizeDrawingBuffer: false
 };
 
 /** Convenient animation loop */
@@ -148,7 +151,6 @@ export class AnimationLoop {
     this._running = true;
 
     try {
-
       let appContext;
       if (!this._initialized) {
         this._initialized = true;
@@ -174,7 +176,7 @@ export class AnimationLoop {
 
       return this;
     } catch (err: unknown) {
-      const error = err instanceof Error ? err : new Error('Unknown error')
+      const error = err instanceof Error ? err : new Error('Unknown error');
       this.props.onError(error);
       // this._running = false; // TODO
       throw error;
@@ -242,7 +244,7 @@ export class AnimationLoop {
     this.setNeedsRedraw('waitForRender');
 
     if (!this._nextFramePromise) {
-      this._nextFramePromise = new Promise((resolve) => {
+      this._nextFramePromise = new Promise(resolve => {
         this._resolveNextFrame = resolve;
       });
     }
@@ -461,7 +463,7 @@ export class AnimationLoop {
     }
   }
 
-  _getSizeAndAspect(): {width: number; height: number; aspect: number}  {
+  _getSizeAndAspect(): {width: number; height: number; aspect: number} {
     if (!this.device) {
       return {width: 1, height: 1, aspect: 1};
     }
@@ -485,10 +487,18 @@ export class AnimationLoop {
 
   /** Default viewport setup */
   _resizeViewport(): void {
+    // TODO can we use canvas context to code this in a portable way?
     // @ts-expect-error Expose on canvasContext
     if (this.props.autoResizeViewport && this.device.gl) {
       // @ts-expect-error Expose canvasContext
-      this.device.gl.viewport(0, 0, this.device.gl.drawingBufferWidth, this.device.gl.drawingBufferHeight);
+      this.device.gl.viewport(
+        0,
+        0,
+        // @ts-expect-error Expose canvasContext
+        this.device.gl.drawingBufferWidth,
+        // @ts-expect-error Expose canvasContext
+        this.device.gl.drawingBufferHeight
+      );
     }
   }
 

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

@@ -1,5 +1,5 @@
 import {Device} from '@luma.gl/core';
-import {Timeline} from '../animation/timeline'
+import {Timeline} from '../animation/timeline';
 import type {AnimationLoop} from './animation-loop';
 
 /** Properties passed to every render frame  */

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

@@ -1,20 +1,29 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {luma} from '@luma.gl/core';
-import {AnimationLoopTemplate} from './animation-loop-template'
-import {AnimationLoop, AnimationLoopProps} from './animation-loop'
+import {AnimationLoopTemplate} from './animation-loop-template';
+import {AnimationLoop, AnimationLoopProps} from './animation-loop';
 import type {AnimationProps} from './animation-props';
 
-export type MakeAnimationLoopProps = Omit<AnimationLoopProps, 'onCreateDevice' | 'onInitialize' | 'onRedraw' | 'onFinalize'>;
+export type MakeAnimationLoopProps = Omit<
+  AnimationLoopProps,
+  'onCreateDevice' | 'onInitialize' | 'onRedraw' | 'onFinalize'
+>;
 
 /** Instantiates and runs the render loop */
-export function makeAnimationLoop(AnimationLoopTemplateCtor: typeof AnimationLoopTemplate, props?: MakeAnimationLoopProps): AnimationLoop {
+export function makeAnimationLoop(
+  AnimationLoopTemplateCtor: typeof AnimationLoopTemplate,
+  props?: MakeAnimationLoopProps
+): AnimationLoop {
   let renderLoop: AnimationLoopTemplate | null = null;
 
   const device = props?.device || luma.createDevice();
 
   // Create an animation loop;
   const animationLoop = new AnimationLoop({
-    ... props,
+    ...props,
 
     device,
 
@@ -26,7 +35,7 @@ export function makeAnimationLoop(AnimationLoopTemplateCtor: typeof AnimationLoo
     },
 
     onRender: (animationProps: AnimationProps) => renderLoop?.onRender(animationProps),
-    
+
     onFinalize: (animationProps: AnimationProps) => renderLoop?.onFinalize(animationProps)
   });
 
@@ -35,7 +44,7 @@ export function makeAnimationLoop(AnimationLoopTemplateCtor: typeof AnimationLoo
     // @ts-ignore
     // eslint-disable-next-line no-invalid-this
     return this.AnimationLoopTemplateCtor.info;
-  }
+  };
 
   // Start the loop automatically
   // animationLoop.start();

package/src/debug/copy-texture-to-image.ts

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {Texture, Framebuffer} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {flipRows, scalePixels} from './pixel-data-utils';
@@ -8,7 +11,7 @@ import {flipRows, scalePixels} from './pixel-data-utils';
  * @todo - support gl.readBuffer
  */
 export type CopyTextureToImageOptions = {
-  sourceAttachment?: number; 
+  sourceAttachment?: number;
   targetMaxHeight?: number;
   targetImage?: HTMLImageElement;
 };
@@ -16,15 +19,14 @@ export type CopyTextureToImageOptions = {
 /**
  * Reads pixels from a Framebuffer or Texture object into an HTML Image
  * @todo - can we move this to @luma.gl/core?
- * @param source 
+ * @param source
  * @param options options passed to copyToDataUrl
- * @returns 
+ * @returns
  */
 export function copyTextureToImage(
   source: Texture | Framebuffer,
   options?: CopyTextureToImageOptions
 ): HTMLImageElement {
-
   const dataUrl = copyTextureToDataUrl(source, options);
   const targetImage: HTMLImageElement = options?.targetImage || new Image();
   targetImage.src = dataUrl;
@@ -36,7 +38,7 @@ export function copyTextureToImage(
  * Reads pixels from a Framebuffer or Texture object to a dataUrl
  * @todo - can we move this to @luma.gl/core?
  * @param source texture or framebuffer to read from
- * @param options 
+ * @param options
  */
 export function copyTextureToDataUrl(
   source: Texture | Framebuffer,

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

@@ -44,4 +44,4 @@ export function unpackIndexedGeometry(geometry: any) {
 //     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

@@ -101,7 +101,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 +109,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';

package/src/lib/clip-space.ts

@@ -1,4 +1,3 @@
-
 // ClipSpace
 import {Device, glsl} from '@luma.gl/core';
 import {Model, ModelProps} from '../model/model';
@@ -30,24 +29,21 @@ const POSITIONS = [-1, -1, 1, -1, -1, 1, 1, 1];
  */
 export class ClipSpace extends Model {
   constructor(device: Device, opts: Omit<ModelProps, 'vs' | 'vertexCount' | 'geometry'>) {
-    const TEX_COORDS = POSITIONS.map((coord) => (coord === -1 ? 0 : coord));
+    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)}
+        }
+      })
+    });
   }
 }