From 4305884470cb2534a2c724ad1a2e2533b98b6fe2 Mon Sep 17 00:00:00 2001 From: Kyle Barron Date: Thu, 1 Jan 2026 22:26:05 -0500 Subject: [PATCH 1/2] experiment: fast rendering of debug triangles using existing triangle mesh --- packages/deck.gl-raster/src/raster-layer.ts | 69 ++++++++++++++++++++- 1 file changed, 67 insertions(+), 2 deletions(-) diff --git a/packages/deck.gl-raster/src/raster-layer.ts b/packages/deck.gl-raster/src/raster-layer.ts index 841963c2..d98d080f 100644 --- a/packages/deck.gl-raster/src/raster-layer.ts +++ b/packages/deck.gl-raster/src/raster-layer.ts @@ -4,7 +4,7 @@ import type { UpdateParameters, } from "@deck.gl/core"; import { CompositeLayer } from "@deck.gl/core"; -import { PolygonLayer } from "@deck.gl/layers"; +import { PolygonLayer, SolidPolygonLayer } from "@deck.gl/layers"; import type { SimpleMeshLayerProps } from "@deck.gl/mesh-layers"; import type { ReprojectionFns } from "@developmentseed/raster-reproject"; import { RasterReprojector } from "@developmentseed/raster-reproject"; @@ -163,6 +163,71 @@ export class RasterLayer extends CompositeLayer { }); } + // data: { + // // @ts-expect-error passed through to enable use by function accessors + // data: batch, + // // Number of geometries + // length: polygonData.length, + // // Offsets into coordinateArray where each polygon starts + // startIndices: resolvedRingOffsets, + // attributes: { + // getPolygon: { value: flatCoordinateArray, size: nDim }, + // indices: { value: earcutTriangles, size: 1 }, + // }, + // }, + + renderDebugLayerFast(): Layer | null { + const { reprojector } = this.state; + const { debugOpacity } = this.props; + + if (!reprojector) { + return null; + } + + const numTriangles = reprojector.triangles.length / 3; + const positions = new Float64Array(reprojector.exactOutputPositions); + const triangles = new Uint32Array(reprojector.triangles); + + const getFillColor = new Uint8Array(numTriangles * 3 * 4); + for (let triangleIdx = 0; triangleIdx < numTriangles; triangleIdx++) { + const color = DEBUG_COLORS[triangleIdx % DEBUG_COLORS.length]!; + for (let colorIdx = 0; colorIdx < 3; colorIdx++) { + const i = triangleIdx * 4 + colorIdx; + getFillColor[i * 4] = color[0]; + getFillColor[i * 4 + 1] = color[1]; + getFillColor[i * 4 + 2] = color[2]; + getFillColor[i * 4 + 3] = 255; + } + } + + const startIndices = new Uint32Array(numTriangles); + for (let i = 0; i < numTriangles; i++) { + startIndices[i] = i * 3; + } + + return new SolidPolygonLayer( + this.getSubLayerProps({ + id: "fast-polygon", + _normalize: false, + _windingOrder: "CCW", + data: { + data: null, + length: numTriangles, + startIndices, + attributes: { + getPolygon: { value: positions, size: 2 }, + indices: { value: triangles, size: 1 }, + getFillColor: { value: getFillColor, size: 4 }, + }, + }, + opacity: + debugOpacity !== undefined && Number.isFinite(debugOpacity) + ? Math.max(0, Math.min(1, debugOpacity)) + : 1, + }), + ); + } + renderDebugLayer(): Layer | null { const { reprojector } = this.state; const { debugOpacity } = this.props; @@ -268,7 +333,7 @@ export class RasterLayer extends CompositeLayer { const layers: Layer[] = [meshLayer]; if (debug) { - const debugLayer = this.renderDebugLayer(); + const debugLayer = this.renderDebugLayerFast(); if (debugLayer) { layers.push(debugLayer); } From b4f4a93f8af92c2126250714a8921908e3bdc6f8 Mon Sep 17 00:00:00 2001 From: Kyle Barron Date: Thu, 1 Jan 2026 22:35:30 -0500 Subject: [PATCH 2/2] try with getFillColor callback --- packages/deck.gl-raster/src/raster-layer.ts | 25 +++++++++------------ 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/deck.gl-raster/src/raster-layer.ts b/packages/deck.gl-raster/src/raster-layer.ts index d98d080f..78038b0b 100644 --- a/packages/deck.gl-raster/src/raster-layer.ts +++ b/packages/deck.gl-raster/src/raster-layer.ts @@ -188,18 +188,6 @@ export class RasterLayer extends CompositeLayer { const positions = new Float64Array(reprojector.exactOutputPositions); const triangles = new Uint32Array(reprojector.triangles); - const getFillColor = new Uint8Array(numTriangles * 3 * 4); - for (let triangleIdx = 0; triangleIdx < numTriangles; triangleIdx++) { - const color = DEBUG_COLORS[triangleIdx % DEBUG_COLORS.length]!; - for (let colorIdx = 0; colorIdx < 3; colorIdx++) { - const i = triangleIdx * 4 + colorIdx; - getFillColor[i * 4] = color[0]; - getFillColor[i * 4 + 1] = color[1]; - getFillColor[i * 4 + 2] = color[2]; - getFillColor[i * 4 + 3] = 255; - } - } - const startIndices = new Uint32Array(numTriangles); for (let i = 0; i < numTriangles; i++) { startIndices[i] = i * 3; @@ -211,15 +199,24 @@ export class RasterLayer extends CompositeLayer { _normalize: false, _windingOrder: "CCW", data: { - data: null, length: numTriangles, startIndices, attributes: { getPolygon: { value: positions, size: 2 }, indices: { value: triangles, size: 1 }, - getFillColor: { value: getFillColor, size: 4 }, }, }, + getFillColor: ( + _: any, + { index, target }: { index: number; target: number[] }, + ) => { + const color = DEBUG_COLORS[index % DEBUG_COLORS.length]!; + target[0] = color[0]; + target[1] = color[1]; + target[2] = color[2]; + target[3] = 255; + return target; + }, opacity: debugOpacity !== undefined && Number.isFinite(debugOpacity) ? Math.max(0, Math.min(1, debugOpacity))