@luma.gl/engine 9.0.0-alpha.9 → 9.0.0-beta.2

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

@@ -0,0 +1,72 @@
+// luma.gl, MIT license
+import {Texture, Framebuffer} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {flipRows, scalePixels} from './pixel-data-utils';
+
+/**
+ * Options for copying texture pixels to image
+ * @todo - support gl.readBuffer
+ */
+export type CopyTextureToImageOptions = {
+  sourceAttachment?: number; 
+  targetMaxHeight?: number;
+  targetImage?: HTMLImageElement;
+};
+
+/**
+ * Reads pixels from a Framebuffer or Texture object into an HTML Image
+ * @todo - can we move this to @luma.gl/core?
+ * @param source 
+ * @param options options passed to copyToDataUrl
+ * @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;
+
+  return targetImage;
+}
+
+/**
+ * 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 
+ */
+export function copyTextureToDataUrl(
+  source: Texture | Framebuffer,
+  options: CopyTextureToImageOptions = {}
+): string {
+  const {
+    sourceAttachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
+    targetMaxHeight = Number.MAX_SAFE_INTEGER
+  } = options;
+
+  let data = source.device.readPixelsToArrayWebGL(source, {sourceAttachment});
+
+  // Scale down
+  let {width, height} = source;
+  while (height > targetMaxHeight) {
+    ({data, width, height} = scalePixels({data, width, height}));
+  }
+
+  // Flip to top down coordinate system
+  flipRows({data, width, height});
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+
+  // Copy the pixels to a 2D canvas
+  const imageData = context.createImageData(width, height);
+  imageData.data.set(data);
+  context.putImageData(imageData, 0, 0);
+
+  return canvas.toDataURL('image/png');
+}

package/src/debug/debug-framebuffer.ts

@@ -0,0 +1,57 @@
+import type {Framebuffer, Texture} from '@luma.gl/core';
+// import {copyTextureToImage} from '../debug/copy-texture-to-image';
+
+/** Only works with 1st device? */
+let canvas: HTMLCanvasElement | null = null;
+let ctx: CanvasRenderingContext2D | null = null;
+// let targetImage: HTMLImageElement | null = null;
+
+/** Debug utility to draw FBO contents onto screen */
+// 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}
+) {
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    canvas.id = id;
+    canvas.title = id;
+    canvas.style.zIndex = '100';
+    canvas.style.position = 'absolute';
+    canvas.style.top = top; // ⚠️
+    canvas.style.left = left; // ⚠️
+    canvas.style.border = 'blue 1px solid';
+    canvas.style.transform = 'scaleY(-1)';
+    document.body.appendChild(canvas);
+
+    ctx = canvas.getContext('2d');
+    // targetImage = new Image();
+  }
+
+  // const canvasHeight = (minimap ? 2 : 1) * fbo.height;
+  if (canvas.width !== fbo.width || canvas.height !== fbo.height) {
+    canvas.width = fbo.width / 2;
+    canvas.height = fbo.height / 2;
+    canvas.style.width = '400px';
+    canvas.style.height = '400px';
+
+  }
+
+  // const image = copyTextureToImage(fbo, {targetMaxHeight: 100, targetImage});
+  // ctx.drawImage(image, 0, 0);
+
+  const color = fbo.device.readPixelsToArrayWebGL(fbo);
+  const imageData = ctx.createImageData(fbo.width, fbo.height);
+  // Full map
+  const offset = 0;
+  // if (color.some((v) => v > 0)) {
+  //   console.error('THERE IS NON-ZERO DATA IN THE FBO!');
+  // }
+  for (let i = 0; i < color.length; i += 4) {
+    imageData.data[offset + i + 0] = color[i + 0] * rgbaScale;
+    imageData.data[offset + i + 1] = color[i + 1] * rgbaScale;
+    imageData.data[offset + i + 2] = color[i + 2] * rgbaScale;
+    imageData.data[offset + i + 3] = opaque ? 255 : color[i + 3] * rgbaScale;
+  }
+  ctx.putImageData(imageData, 0, 0);
+};

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

@@ -0,0 +1,38 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+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 
+ */
+export function getDebugTableForShaderLayout(
+  layout: ShaderLayout,
+  name: string
+): Record<string, Record<string, string>> {
+  const table: Record<string, Record<string, string>> = {};
+
+  const header = 'Values'; // '`Shader Layout for ${name}`;
+
+  if (layout.attributes.length === 0 && !layout.varyings?.length) {
+    return {'No attributes or varyings': {[header]: 'N/A'}};
+  }
+
+  for (const attributeDeclaration of layout.attributes) {
+    if (attributeDeclaration) {
+      const glslDeclaration = `${attributeDeclaration.location} ${attributeDeclaration.name}: ${attributeDeclaration.type}`;
+      table[`in ${glslDeclaration}`] = {[header]: attributeDeclaration.stepMode || 'vertex'};
+    }
+  }
+
+  for (const varyingDeclaration of layout.varyings || []) {
+    const glslDeclaration = `${varyingDeclaration.location} ${varyingDeclaration.name}`;
+    table[`out ${glslDeclaration}`] = {[header]: JSON.stringify(varyingDeclaration.accessor)};
+  }
+
+  return table;
+}

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

@@ -0,0 +1,57 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+import {TypedArray} from '@luma.gl/core';
+
+/**
+ * Flip rows (can be used on arrays returned from `Framebuffer.readPixels`)
+ * https: *stackoverflow.com/questions/41969562/
+ * how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
+ * @param param0
+ */
+export function flipRows(options: {
+  data: TypedArray;
+  width: number;
+  height: number;
+  bytesPerPixel?: number;
+  temp?: Uint8Array;
+}): void {
+  const {data, width, height, bytesPerPixel = 4, temp} = options;
+  const bytesPerRow = width * bytesPerPixel;
+
+  // make a temp buffer to hold one row
+  const tempBuffer = temp || new Uint8Array(bytesPerRow);
+  for (let y = 0; y < height / 2; ++y) {
+    const topOffset = y * bytesPerRow;
+    const bottomOffset = (height - y - 1) * bytesPerRow;
+    // make copy of a row on the top half
+    tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
+    // copy a row from the bottom half to the top
+    data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
+    // copy the copy of the top half row to the bottom half
+    data.set(tempBuffer, bottomOffset);
+  }
+}
+
+export function scalePixels(options: {
+  data: TypedArray;
+  width: number;
+  height: number;
+}): {
+  data: Uint8Array;
+  width: number;
+  height: number;
+} {
+  const {data, width, height} = options;
+  const newWidth = Math.round(width / 2);
+  const newHeight = Math.round(height / 2);
+  const newData = new Uint8Array(newWidth * newHeight * 4);
+  for (let y = 0; y < newHeight; y++) {
+    for (let x = 0; x < newWidth; x++) {
+      for (let c = 0; c < 4; c++) {
+        newData[(y * newWidth + x) * 4 + c] = data[(y * 2 * width + x * 2) * 4 + c];
+      }
+    }
+  }
+  return {data: newData, width: newWidth, height: newHeight};
+}

package/src/geometries/cone-geometry.ts

@@ -1,4 +1,4 @@
-import {uid} from '@luma.gl/api';
+import {uid} from '@luma.gl/core';
 import {TruncatedConeGeometry} from './truncated-cone-geometry';
 
 export type ConeGeometryProps = {

package/src/geometries/cube-geometry.ts

@@ -1,11 +1,11 @@
-import {uid} from '@luma.gl/api';
-import Geometry from '../geometry/geometry';
+import {uid} from '@luma.gl/core';
+import {Geometry} from '../geometry/geometry';
 // import type {GeometryType} from '../geometry/geometry-type';
 
 export type CubeGeometryProps = {
   id?: string;
   indices?: boolean;
-  attributes?;
+  attributes?: any;
 };
 
 export class CubeGeometry extends Geometry {
@@ -14,11 +14,13 @@ export class CubeGeometry extends Geometry {
     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}
     });
@@ -77,47 +79,47 @@ const CUBE_TEX_COORDS = new Float32Array([
 // float4 position
 // prettier-ignore
 export const CUBE_NON_INDEXED_POSITIONS = new Float32Array([
-  1, -1, 1, 1,
-  -1, -1, 1, 1,
-  -1, -1, -1, 1,
-  1, -1, -1, 1,
-  1, -1, 1, 1,
-  -1, -1, -1, 1,
-
-  1, 1, 1, 1,
-  1, -1, 1, 1,
-  1, -1, -1, 1,
-  1, 1, -1, 1,
-  1, 1, 1, 1,
-  1, -1, -1, 1,
-
-  -1, 1, 1, 1,
-  1, 1, 1, 1,
-  1, 1, -1, 1,
-  -1, 1, -1, 1,
-  -1, 1, 1, 1,
-  1, 1, -1, 1,
-
-  -1, -1, 1, 1,
-  -1, 1, 1, 1,
-  -1, 1, -1, 1,
-  -1, -1, -1, 1,
-  -1, -1, 1, 1,
-  -1, 1, -1, 1,
-
-  1, 1, 1, 1,
-  -1, 1, 1, 1,
-  -1, -1, 1, 1,
-  -1, -1, 1, 1,
-  1, -1, 1, 1,
-  1, 1, 1, 1,
-
-  1, -1, -1, 1,
-  -1, -1, -1, 1,
-  -1, 1, -1, 1,
-  1, 1, -1, 1,
-  1, -1, -1, 1,
-  -1, 1, -1, 1,
+  1, -1, 1,
+  -1, -1, 1,
+  -1, -1, -1,
+  1, -1, -1,
+  1, -1, 1,
+  -1, -1, -1,
+
+  1, 1, 1,
+  1, -1, 1,
+  1, -1, -1,
+  1, 1, -1,
+  1, 1, 1,
+  1, -1, -1,
+
+  -1, 1, 1,
+  1, 1, 1,
+  1, 1, -1,
+  -1, 1, -1,
+  -1, 1, 1,
+  1, 1, -1,
+
+  -1, -1, 1,
+  -1, 1, 1,
+  -1, 1, -1,
+  -1, -1, -1,
+  -1, -1, 1,
+  -1, 1, -1,
+
+  1, 1, 1,
+  -1, 1, 1,
+  -1, -1, 1,
+  -1, -1, 1,
+  1, -1, 1,
+  1, 1, 1,
+
+  1, -1, -1,
+  -1, -1, -1,
+  -1, 1, -1,
+  1, 1, -1,
+  1, -1, -1,
+  -1, 1, -1,
 ]);
 
 // float2 uv,
@@ -219,7 +221,7 @@ const ATTRIBUTES = {
 };
 
 const NON_INDEXED_ATTRIBUTES = {
-  POSITION: {size: 4, value: CUBE_NON_INDEXED_POSITIONS},
+  POSITION: {size: 3, value: CUBE_NON_INDEXED_POSITIONS},
   // NORMAL: {size: 3, value: CUBE_NON_INDEXED_NORMALS},
   TEXCOORD_0: {size: 2, value: CUBE_NON_INDEXED_TEX_COORDS},
   COLOR_0: {size: 3, value: CUBE_NON_INDEXED_COLORS}

package/src/geometries/cylinder-geometry.ts

@@ -1,10 +1,10 @@
-import {uid} from '@luma.gl/api';
+import {uid} from '@luma.gl/core';
 import {TruncatedConeGeometry} from './truncated-cone-geometry';
 
 export type CylinderGeometryProps = {
   id?: string;
   radius?: number;
-  attributes?
+  attributes?: any;
 };
 
 export class CylinderGeometry extends TruncatedConeGeometry {

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

@@ -1,6 +1,6 @@
-import {uid} from '@luma.gl/api';
+import {uid} from '@luma.gl/core';
 import {Vector3} from '@math.gl/core';
-import Geometry from '../geometry/geometry';
+import {Geometry} from '../geometry/geometry';
 
 /* eslint-disable comma-spacing, max-statements, complexity */
 
@@ -11,7 +11,7 @@ export type IcoSphereGeometryProps = {
   id?: string;
   radius?: number;
   iterations?: number;
-  attributes?
+  attributes?: any
 };
 
 export class IcoSphereGeometry extends Geometry {
@@ -21,6 +21,7 @@ export class IcoSphereGeometry extends Geometry {
     super({
       ...props,
       id,
+      topology: 'triangle-list',
       indices,
       attributes: {...attributes, ...props.attributes}
     });
@@ -40,9 +41,9 @@ function tesselateIcosaHedron(props: IcoSphereGeometryProps) {
   indices.push();
 
   const getMiddlePoint = (() => {
-    const pointMemo = {};
+    const pointMemo: Record<string, number> = {};
 
-    return (i1, i2) => {
+    return (i1: number, i2: number) => {
       i1 *= 3;
       i2 *= 3;
       const mini = i1 < i2 ? i1 : i2;

package/src/geometries/plane-geometry.ts

@@ -1,11 +1,11 @@
-import {uid} from '@luma.gl/api';
-import Geometry from '../geometry/geometry';
+import {uid} from '@luma.gl/core';
+import {Geometry} from '../geometry/geometry';
 import {unpackIndexedGeometry} from '../geometry/geometry-utils';
 
 export type PlaneGeometryProps = {
   id?: string;
   radius?: number;
-  attributes?
+  attributes?: any
 };
 
 // Primitives inspired by TDL http://code.google.com/p/webglsamples/,
@@ -19,6 +19,7 @@ export class PlaneGeometry extends Geometry {
     super({
       ...props,
       id,
+      topology: 'triangle-list',
       indices,
       attributes: {...attributes, ...props.attributes}
     });
@@ -26,7 +27,7 @@ export class PlaneGeometry extends Geometry {
 }
 
 /* eslint-disable complexity, max-statements */
-function tesselatePlane(props) {
+function tesselatePlane(props: any) {
   const {type = 'x,y', offset = 0, flipCull = false, unpack = false} = props;
 
   const coords = type.split(',');

package/src/geometries/sphere-geometry.ts

@@ -1,12 +1,12 @@
-import {uid} from '@luma.gl/api';
-import Geometry from '../geometry/geometry';
+import {uid} from '@luma.gl/core';
+import {Geometry} from '../geometry/geometry';
 
 export type SphereGeometryProps = {
   id?: string;
   radius?: number;
   nlat?: number;
   nlong?: number;
-  attributes?
+  attributes?: any
 };
 
 // Primitives inspired by TDL http://code.google.com/p/webglsamples/,
@@ -19,6 +19,7 @@ export class SphereGeometry extends Geometry {
     super({
       ...props,
       id,
+      topology: 'triangle-list',
       indices,
       attributes: {...attributes, ...props.attributes}
     });

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

@@ -1,6 +1,5 @@
-import {uid} from '@luma.gl/api';
-import Geometry from '../geometry/geometry';
-import {GeometryTable} from '../geometry/geometry-table';
+import {uid} from '@luma.gl/core';
+import {Geometry} from '../geometry/geometry';
 
 const INDEX_OFFSETS = {
   x: [2, 0, 1],
@@ -24,22 +23,14 @@ export type TruncatedConeGeometryProps = {
  * copyright 2011 Google Inc. new BSD License
  * (http://www.opensource.org/licenses/bsd-license.php).
  */
-export function makeTruncatedConeGeometry(props?: TruncatedConeGeometryProps): GeometryTable {
-  const {indices, attributes} = tesselateTruncatedCone(props);
-  return {
-    length: indices.length,
-    indices,
-    attributes
-  };
-}
-
 export class TruncatedConeGeometry extends Geometry {
-  constructor(props: TruncatedConeGeometryProps & {id?: string; attributes?} = {}) {
+  constructor(props: TruncatedConeGeometryProps & {id?: string; attributes?: any} = {}) {
     const {id = uid('truncated-code-geometry')} = props;
     const {indices, attributes} = tesselateTruncatedCone(props);
     super({
       ...props,
       id,
+      topology: 'triangle-list',
       indices,
       attributes: {
         POSITION: {size: 3, value: attributes.POSITION},

package/src/geometry/geometry-table.ts

@@ -1,5 +1,5 @@
 // luma.gl, MIT license
-import type {TypedArray, VertexFormat} from '@luma.gl/api';
+import type {TypedArray, VertexFormat} from '@luma.gl/core';
 
 /** Holds one geometry */
 export type GeometryTable = {

package/src/geometry/geometry-utils.ts

@@ -1,13 +1,13 @@
-// import type Geometry from './geometry';
+// import type {Geometry} from './geometry';
 
-export function unpackIndexedGeometry(geometry) {
+export function unpackIndexedGeometry(geometry: any) {
   const {indices, attributes} = geometry;
   if (!indices) {
     return geometry;
   }
 
   const vertexCount = indices.value.length;
-  const unpackedAttributes = {};
+  const unpackedAttributes: Record<string, any> = {};
 
   for (const attributeName in attributes) {
     const attribute = attributes[attributeName];
@@ -29,3 +29,19 @@ export function unpackIndexedGeometry(geometry) {
     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();
+// }