Fallback to default LUT if colors exceed max uniform size

Author: manzt

src/layers/label-layer.ts

@@ -71,7 +71,7 @@ export class LabelLayer extends TileLayer<LabelPixelData> {
           pixelData: data,
           opacity: props.opacity,
           modelMatrix: props.modelMatrix,
-          lut: createColorLookupTable({ source: props.lut }),
+          lut: createColorLookupTable({ source: props.lut, fallback: DEFAULT_PALETTE }),
           bounds: [clamp(left, 0, width), clamp(top, 0, height), clamp(right, 0, width), clamp(bottom, 0, height)],
           // For underlying class
           image: new ImageData(data.width, data.height),
@@ -192,27 +192,44 @@ function getTileSizeForResolutions(resolutions: Array<ZarrPixelSource>): number
   return tileSize;
 }
 
+// Approx. Limit for WebGL2
+const MAX_UNIFORM_VEC3 = 1365;
+const SEEN_LUTS = new WeakSet<LabelLayerLut>();
+
+/**
+ * Creates a color lookup table (LUT) as a Float32Array.
+ * Falls back to a default LUT if the source is missing or exceeds the uniform size limit.
+ *
+ * @param options.source - The source lookup table.
+ * @param options.fallback - The fallback LUT to use if the source is invalid.
+ * @returns {Float32Array | undefined} The generated LUT or the fallback if the source is too large.
+ */
 function createColorLookupTable(options: {
   source?: LabelLayerLut;
-  palette?: ReadonlyArray<readonly [number, number, number]>;
+  fallback: Float32Array;
 }): Float32Array {
-  const { source, palette = COLOR_PALETTES.pathology } = options;
-  if (source) {
-    const values = Object.keys(source).map((value) => +value);
-    // This could blow up in size, should we worry about it?
-    // What about alpha?
-    const lut = new Float32Array(Math.max(...values) * 3);
-    for (let [value, color] of Object.entries(source)) {
-      const i = +value;
-      lut[i * 3 + 0] = color[0];
-      lut[i * 3 + 1] = color[1];
-      lut[i * 3 + 2] = color[2];
+  const { source, fallback } = options;
+  if (!source) {
+    return fallback;
+  }
+  const values = Object.keys(source).map((value) => +value);
+  const size = Math.max(...values);
+  if (size >= MAX_UNIFORM_VEC3) {
+    if (!SEEN_LUTS.has(source)) {
+      console.warn("[vizarr] Skipping color palette from OME-NGFF `image-label` source: exceeds uniform size limit.");
+      SEEN_LUTS.add(source);
     }
-    return lut;
+    return fallback;
   }
-
-  // generate a random categorical palette
-  return Float32Array.from(palette.flat(), (d) => d / 255.0);
+  // Either empty source or larger than what we can handle with WebGL uniforms
+  const lut = new Float32Array(size * 3);
+  for (let [value, color] of Object.entries(source)) {
+    const i = +value;
+    lut[i * 3 + 0] = color[0];
+    lut[i * 3 + 1] = color[1];
+    lut[i * 3 + 2] = color[2];
+  }
+  return lut;
 }
 
 const COLOR_PALETTES = {
@@ -267,6 +284,8 @@ const COLOR_PALETTES = {
   ],
 } as const;
 
+const DEFAULT_PALETTE = Float32Array.from(COLOR_PALETTES.pathology.flat(), (d) => d / 255);
+
 function typedArrayConstructorName(arr: zarr.TypedArray<LabelDataType>) {
   const ArrayType = arr.constructor as zarr.TypedArrayConstructor<LabelDataType>;
   const name = ArrayType.name as `${Capitalize<LabelDataType>}Array`;