@luma.gl/engine 9.0.0-beta.3 → 9.0.0-beta.5

package/dist/animation-loop/animation-props.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=animation-props.js.map

package/dist/animation-loop/make-animation-loop.js

@@ -1,28 +1,30 @@
+// luma.gl, MIT license
 import { luma } from '@luma.gl/core';
-import { AnimationLoop } from "./animation-loop.js";
+import { AnimationLoop } from './animation-loop';
+/** Instantiates and runs the render loop */
 export function makeAnimationLoop(AnimationLoopTemplateCtor, props) {
-  let renderLoop = null;
-  const device = (props === null || props === void 0 ? void 0 : props.device) || luma.createDevice();
-  const animationLoop = new AnimationLoop({
-    ...props,
-    device,
-    async onInitialize(animationProps) {
-      var _renderLoop;
-      renderLoop = new AnimationLoopTemplateCtor(animationProps);
-      return await ((_renderLoop = renderLoop) === null || _renderLoop === void 0 ? void 0 : _renderLoop.onInitialize(animationProps));
-    },
-    onRender: animationProps => {
-      var _renderLoop2;
-      return (_renderLoop2 = renderLoop) === null || _renderLoop2 === void 0 ? void 0 : _renderLoop2.onRender(animationProps);
-    },
-    onFinalize: animationProps => {
-      var _renderLoop3;
-      return (_renderLoop3 = renderLoop) === null || _renderLoop3 === void 0 ? void 0 : _renderLoop3.onFinalize(animationProps);
-    }
-  });
-  animationLoop.getInfo = () => {
-    return this.AnimationLoopTemplateCtor.info;
-  };
-  return animationLoop;
+    let renderLoop = null;
+    const device = props?.device || luma.createDevice();
+    // Create an animation loop;
+    const animationLoop = new AnimationLoop({
+        ...props,
+        device,
+        async onInitialize(animationProps) {
+            // @ts-expect-error abstract to prevent instantiation
+            renderLoop = new AnimationLoopTemplateCtor(animationProps);
+            // Any async loading can be handled here
+            return await renderLoop?.onInitialize(animationProps);
+        },
+        onRender: (animationProps) => renderLoop?.onRender(animationProps),
+        onFinalize: (animationProps) => renderLoop?.onFinalize(animationProps)
+    });
+    // @ts-expect-error Hack: adds info for the website to find
+    animationLoop.getInfo = () => {
+        // @ts-ignore
+        // eslint-disable-next-line no-invalid-this
+        return this.AnimationLoopTemplateCtor.info;
+    };
+    // Start the loop automatically
+    // animationLoop.start();
+    return animationLoop;
 }
-//# sourceMappingURL=make-animation-loop.js.map

package/dist/debug/copy-texture-to-image.js

@@ -1,46 +1,42 @@
-import { flipRows, scalePixels } from "./pixel-data-utils.js";
+import { GL } from '@luma.gl/constants';
+import { flipRows, scalePixels } from './pixel-data-utils';
+/**
+ * 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, options) {
-  const dataUrl = copyTextureToDataUrl(source, options);
-  const targetImage = (options === null || options === void 0 ? void 0 : options.targetImage) || new Image();
-  targetImage.src = dataUrl;
-  return targetImage;
+    const dataUrl = copyTextureToDataUrl(source, options);
+    const targetImage = options?.targetImage || new Image();
+    targetImage.src = dataUrl;
+    return targetImage;
 }
-export function copyTextureToDataUrl(source) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const {
-    sourceAttachment = 36064,
-    targetMaxHeight = Number.MAX_SAFE_INTEGER
-  } = options;
-  let data = source.device.readPixelsToArrayWebGL(source, {
-    sourceAttachment
-  });
-  let {
-    width,
-    height
-  } = source;
-  while (height > targetMaxHeight) {
-    ({
-      data,
-      width,
-      height
-    } = scalePixels({
-      data,
-      width,
-      height
-    }));
-  }
-  flipRows({
-    data,
-    width,
-    height
-  });
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-  const context = canvas.getContext('2d');
-  const imageData = context.createImageData(width, height);
-  imageData.data.set(data);
-  context.putImageData(imageData, 0, 0);
-  return canvas.toDataURL('image/png');
+/**
+ * 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, options = {}) {
+    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');
 }
-//# sourceMappingURL=copy-texture-to-image.js.map

package/dist/debug/debug-framebuffer.js

@@ -1,43 +1,47 @@
+// import {copyTextureToImage} from '../debug/copy-texture-to-image';
+/** Only works with 1st device? */
 let canvas = null;
 let ctx = null;
-export function debugFramebuffer(fbo, _ref) {
-  let {
-    id,
-    minimap,
-    opaque,
-    top = '0',
-    left = '0',
-    rgbaScale = 1
-  } = _ref;
-  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');
-  }
-  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 color = fbo.device.readPixelsToArrayWebGL(fbo);
-  const imageData = ctx.createImageData(fbo.width, fbo.height);
-  const offset = 0;
-  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);
+// let targetImage: HTMLImageElement | null = null;
+/** Debug utility to draw FBO contents onto screen */
+// eslint-disable-next-line
+export function debugFramebuffer(fbo, { id, minimap, opaque, top = '0', left = '0', rgbaScale = 1 }) {
+    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);
 }
 ;
-//# sourceMappingURL=debug-framebuffer.js.map

package/dist/debug/debug-shader-layout.js

@@ -1,28 +1,27 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/**
+ * 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, name) {
-  var _layout$varyings;
-  const table = {};
-  const header = 'Values';
-  if (layout.attributes.length === 0 && !((_layout$varyings = layout.varyings) !== null && _layout$varyings !== void 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'
-      };
+    const table = {};
+    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 varyingDeclaration of layout.varyings || []) {
-    const glslDeclaration = `${varyingDeclaration.location} ${varyingDeclaration.name}`;
-    table[`out ${glslDeclaration}`] = {
-      [header]: JSON.stringify(varyingDeclaration.accessor)
-    };
-  }
-  return table;
+    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;
 }
-//# sourceMappingURL=debug-shader-layout.js.map

package/dist/debug/pixel-data-utils.js

@@ -1,41 +1,38 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+/**
+ * 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) {
-  const {
-    data,
-    width,
-    height,
-    bytesPerPixel = 4,
-    temp
-  } = options;
-  const bytesPerRow = width * bytesPerPixel;
-  const tempBuffer = temp || new Uint8Array(bytesPerRow);
-  for (let y = 0; y < height / 2; ++y) {
-    const topOffset = y * bytesPerRow;
-    const bottomOffset = (height - y - 1) * bytesPerRow;
-    tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
-    data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
-    data.set(tempBuffer, bottomOffset);
-  }
+    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) {
-  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];
-      }
+    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
-  };
+    return { data: newData, width: newWidth, height: newHeight };
 }
-//# sourceMappingURL=pixel-data-utils.js.map