feat(panels): allow a debug visualisation for offscreen textures

src/display_context.ts

@@ -276,6 +276,37 @@ export abstract class RenderedPanel extends RefCounted {
     gl.scissor(canvasRelativeClippedLeft, glBottom, width, height);
   }
 
+  setSubdividedGLClippedViewport(cellIndex: number, totalCells: number) {
+    const {
+      gl,
+      canvasRelativeClippedTop,
+      canvasRelativeClippedLeft,
+      renderViewport: { width, height },
+    } = this;
+
+    const numCols = Math.ceil(Math.sqrt(totalCells));
+    const numRows = Math.ceil(totalCells / numCols);
+
+    const col = cellIndex % numCols;
+    const row = Math.floor(cellIndex / numCols);
+
+    const cellWidth = width / numCols;
+    const cellHeight = height / numRows;
+
+    const left = canvasRelativeClippedLeft + col * cellWidth;
+    const top = canvasRelativeClippedTop + row * cellHeight;
+    const bottom = top + cellHeight;
+
+    const glLeft = Math.floor(left);
+    const glBottom = Math.floor(this.context.canvas.height - bottom);
+    const glWidth = Math.ceil(cellWidth);
+    const glHeight = Math.ceil(cellHeight);
+
+    gl.enable(WebGL2RenderingContext.SCISSOR_TEST);
+    gl.viewport(glLeft, glBottom, glWidth, glHeight);
+    gl.scissor(glLeft, glBottom, glWidth, glHeight);
+  }
+
   // Sets the viewport to the logical viewport, using the scissor test to constrain drawing to the
   // clipped viewport.  Drawing does not need to take `visible{Left,Top,Width,Height}Fraction` into
   // account.

src/perspective_view/panel.ts

@@ -83,6 +83,12 @@ import { MultipleScaleBarTextures } from "#src/widget/scale_bar.js";
 import type { RPC } from "#src/worker_rpc.js";
 import { SharedObject } from "#src/worker_rpc.js";
 
+// Turn on to see each of the offscreen textures
+// render order is from top left to bottom right
+// picking will not work as expected in a subdivision
+// of the full panel, pretend you are picking from the full panel
+const DEBUG_OFFSCREEN_TEXTURES = false;
+
 export interface PerspectiveViewerState extends RenderedDataViewerState {
   wireFrame: WatchableValueInterface<boolean>;
   enableAdaptiveDownsampling: WatchableValueInterface<boolean>;
@@ -1419,6 +1425,17 @@ export class PerspectivePanel extends RenderedDataPanel {
     }
     this.offscreenFramebuffer.unbind();
 
+    if (DEBUG_OFFSCREEN_TEXTURES) {
+      const numTextures = OffscreenTextures.NUM_TEXTURES;
+      for (let i = 0; i < numTextures; i++) {
+        const texture = this.offscreenFramebuffer.colorBuffers[i].texture;
+        if (texture) {
+          this.setSubdividedGLClippedViewport(i, numTextures);
+          this.offscreenCopyHelper.draw(texture);
+        }
+      }
+      return true;
+    }
     // Draw the texture over the whole viewport.
     this.setGLClippedViewport();
     this.offscreenCopyHelper.draw(

src/sliceview/panel.ts

@@ -59,6 +59,12 @@ import type { ShaderBuilder } from "#src/webgl/shader.js";
 import type { TrackableScaleBarOptions } from "#src/widget/scale_bar.js";
 import { MultipleScaleBarTextures } from "#src/widget/scale_bar.js";
 
+// Turn on to see each of the offscreen textures
+// render order is from top left to bottom right
+// picking will not work as expected in a subdivision
+// of the full panel, pretend you are picking from the full panel
+const DEBUG_OFFSCREEN_TEXTURES = false;
+
 export interface SliceViewerState extends RenderedDataViewerState {
   showScaleBar: TrackableBoolean;
   wireFrame: TrackableBoolean;
@@ -431,9 +437,19 @@ export class SliceViewPanel extends RenderedDataPanel {
         gl.disable(WebGL2RenderingContext.BLEND);
       }
     }
-
     this.offscreenFramebuffer.unbind();
 
+    if (DEBUG_OFFSCREEN_TEXTURES) {
+      const numTextures = OffscreenTextures.NUM_TEXTURES;
+      for (let i = 0; i < numTextures; i++) {
+        const texture = this.offscreenFramebuffer.colorBuffers[i].texture;
+        if (texture) {
+          this.setSubdividedGLClippedViewport(i, numTextures);
+          this.offscreenCopyHelper.draw(texture);
+        }
+      }
+      return true;
+    }
     // Draw the texture over the whole viewport.
     this.setGLClippedViewport();
     this.offscreenCopyHelper.draw(