@luma.gl/engine 9.2.6 → 9.3.0-alpha.11

package/src/compute/swap.ts

@@ -12,12 +12,15 @@ import {Device, Resource, Buffer, Framebuffer, Texture} from '@luma.gl/core';
  * @note the two resources can be destroyed by calling `destroy()`
  */
 export class Swap<T extends Resource<any>> {
+  id: string;
+
   /** The current resource - usually the source for renders or computations */
   current: T;
   /** The next resource - usually the target/destination for transforms / computations */
   next: T;
 
-  constructor(props: {current: T; next: T}) {
+  constructor(props: {current: T; next: T; id?: string}) {
+    this.id = props.id || 'swap';
     this.current = props.current;
     this.next = props.next;
   }
@@ -41,14 +44,17 @@ export class SwapFramebuffers extends Swap<Framebuffer> {
   constructor(device: Device, props: FramebufferProps) {
     props = {...props};
 
+    const {width = 1, height = 1} = props;
+
     let colorAttachments = props.colorAttachments?.map(colorAttachment =>
       typeof colorAttachment !== 'string'
         ? colorAttachment
         : device.createTexture({
+            id: `${props.id}-texture-0`,
             format: colorAttachment,
             usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_SRC | Texture.COPY_DST,
-            width: 1,
-            height: 1
+            width,
+            height
           })
     );
 
@@ -58,11 +64,11 @@ export class SwapFramebuffers extends Swap<Framebuffer> {
       typeof colorAttachment !== 'string'
         ? colorAttachment
         : device.createTexture({
+            id: `${props.id}-texture-1`,
             format: colorAttachment,
-            usage:
-              Texture.TEXTURE | Texture.COPY_SRC | Texture.COPY_DST | Texture.RENDER_ATTACHMENT,
-            width: 1,
-            height: 1
+            usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_SRC | Texture.COPY_DST,
+            width,
+            height
           })
     );
 

package/src/debug/debug-framebuffer.ts

@@ -2,75 +2,153 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {Framebuffer, Texture} from '@luma.gl/core';
-// import {copyTextureToImage} from '../debug/copy-texture-to-image';
+import type {Device, Framebuffer, RenderPass, Texture} from '@luma.gl/core';
 
-/** Only works with 1st device? */
-let canvas: HTMLCanvasElement | null = null;
-let ctx: CanvasRenderingContext2D | null = null;
-// let targetImage: HTMLImageElement | null = null;
+const DEBUG_FRAMEBUFFER_STATE_KEY = '__debugFramebufferState';
+const DEFAULT_MARGIN_PX = 8;
 
-/** Debug utility to draw FBO contents onto screen */
-// eslint-disable-next-line
+type DebugFramebufferOptions = {
+  id: string;
+  minimap?: boolean;
+  opaque?: boolean;
+  top?: string;
+  left?: string;
+  rgbaScale?: number;
+};
+
+type DebugFramebufferState = {
+  flushing: boolean;
+  queuedFramebuffers: Framebuffer[];
+};
+
+/**
+ * Debug utility to blit queued offscreen framebuffers into the default framebuffer
+ * without CPU readback. Currently implemented for WebGL only.
+ */
 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;
+  renderPass: RenderPass,
+  source: Framebuffer | Texture | null,
+  options: DebugFramebufferOptions
+): void {
+  if (renderPass.device.type !== 'webgl') {
+    return;
+  }
+
+  const state = getDebugFramebufferState(renderPass.device);
+  if (state.flushing) {
+    return;
+  }
+
+  if (isDefaultRenderPass(renderPass)) {
+    flushDebugFramebuffers(renderPass, options, state);
+    return;
   }
-) {
-  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 5px solid';
-    canvas.style.transform = 'scaleY(-1)';
-    document.body.appendChild(canvas);
-
-    ctx = canvas.getContext('2d');
-    // targetImage = new Image();
+
+  if (source && isFramebuffer(source) && source.handle !== null) {
+    if (!state.queuedFramebuffers.includes(source)) {
+      state.queuedFramebuffers.push(source);
+    }
   }
+}
 
-  // 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';
+function flushDebugFramebuffers(
+  renderPass: RenderPass,
+  options: DebugFramebufferOptions,
+  state: DebugFramebufferState
+): void {
+  if (state.queuedFramebuffers.length === 0) {
+    return;
   }
 
-  // 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);
-  if (imageData) {
-    // 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;
+  const webglDevice = renderPass.device as Device & {gl: WebGL2RenderingContext};
+  const {gl} = webglDevice;
+  const previousReadFramebuffer = gl.getParameter(gl.READ_FRAMEBUFFER_BINDING);
+  const previousDrawFramebuffer = gl.getParameter(gl.DRAW_FRAMEBUFFER_BINDING);
+  const [targetWidth, targetHeight] = renderPass.device
+    .getDefaultCanvasContext()
+    .getDrawingBufferSize();
+
+  let topPx = parseCssPixel(options.top, DEFAULT_MARGIN_PX);
+  const leftPx = parseCssPixel(options.left, DEFAULT_MARGIN_PX);
+
+  state.flushing = true;
+  try {
+    for (const framebuffer of state.queuedFramebuffers) {
+      const [targetX0, targetY0, targetX1, targetY1, previewHeight] = getOverlayRect({
+        framebuffer,
+        targetWidth,
+        targetHeight,
+        topPx,
+        leftPx,
+        minimap: options.minimap
+      });
+
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, framebuffer.handle as WebGLFramebuffer | null);
+      gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+      gl.blitFramebuffer(
+        0,
+        0,
+        framebuffer.width,
+        framebuffer.height,
+        targetX0,
+        targetY0,
+        targetX1,
+        targetY1,
+        gl.COLOR_BUFFER_BIT,
+        gl.NEAREST
+      );
+
+      topPx += previewHeight + DEFAULT_MARGIN_PX;
     }
-    ctx?.putImageData(imageData, 0, 0);
+  } finally {
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, previousReadFramebuffer);
+    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, previousDrawFramebuffer);
+    state.flushing = false;
+  }
+}
+
+function getOverlayRect(options: {
+  framebuffer: Framebuffer;
+  targetWidth: number;
+  targetHeight: number;
+  topPx: number;
+  leftPx: number;
+  minimap?: boolean;
+}): [number, number, number, number, number] {
+  const {framebuffer, targetWidth, targetHeight, topPx, leftPx, minimap} = options;
+  const maxWidth = minimap ? Math.max(Math.floor(targetWidth / 4), 1) : targetWidth;
+  const maxHeight = minimap ? Math.max(Math.floor(targetHeight / 4), 1) : targetHeight;
+  const scale = Math.min(maxWidth / framebuffer.width, maxHeight / framebuffer.height);
+  const previewWidth = Math.max(Math.floor(framebuffer.width * scale), 1);
+  const previewHeight = Math.max(Math.floor(framebuffer.height * scale), 1);
+  const targetX0 = leftPx;
+  const targetY0 = Math.max(targetHeight - topPx - previewHeight, 0);
+  const targetX1 = targetX0 + previewWidth;
+  const targetY1 = targetY0 + previewHeight;
+  return [targetX0, targetY0, targetX1, targetY1, previewHeight];
+}
+
+function getDebugFramebufferState(device: Device): DebugFramebufferState {
+  device.userData[DEBUG_FRAMEBUFFER_STATE_KEY] ||= {
+    flushing: false,
+    queuedFramebuffers: []
+  } satisfies DebugFramebufferState;
+  return device.userData[DEBUG_FRAMEBUFFER_STATE_KEY] as DebugFramebufferState;
+}
+
+function isFramebuffer(value: Framebuffer | Texture): value is Framebuffer {
+  return 'colorAttachments' in value;
+}
+
+function isDefaultRenderPass(renderPass: RenderPass): boolean {
+  const framebuffer = renderPass.props.framebuffer as {handle?: unknown} | null;
+  return !framebuffer || framebuffer.handle === null;
+}
+
+function parseCssPixel(value: string | undefined, defaultValue: number): number {
+  if (!value) {
+    return defaultValue;
   }
+  const parsedValue = Number.parseInt(value, 10);
+  return Number.isFinite(parsedValue) ? parsedValue : defaultValue;
 }