refactor: derive layer transparency from blend mode (#668)

Summary:

This PR removed the redundant Layer.transparent flag. Transparency is now derived from
blendMode !== "none. It also changes the blend mode from normal to none so a default
constructed layer is explicitly opaque.

Author: shlomnissan

examples/image2d_from_omezarr4d_hcs/main.ts

@@ -100,7 +100,6 @@ const onImageChange = async () => {
     sliceCoords: { t: 0, z: initZ, c: [2] },
     channelProps,
     policy,
-    transparent: true,
     blendMode: "additive",
   });
   viewport.layerManager.add(layer1);

examples/image_series_labels_overlay/main.ts

@@ -71,7 +71,6 @@ function createLabelsLayer() {
     source: labelsSource,
     sliceCoords: labelsSliceCoords,
     policy: createExplorationPolicy(),
-    transparent: true,
     opacity: 0.25,
     blendMode: "normal",
     outlineSelected: outlineMode,

src/core/layer.ts

@@ -20,7 +20,6 @@ type StateChangeCallback = (
 ) => void;
 
 export interface LayerOptions {
-  transparent?: boolean;
   opacity?: number;
   blendMode?: BlendMode;
 }
@@ -36,22 +35,16 @@ export abstract class Layer {
   private state_: LayerState = "initialized";
   private readonly callbacks_: StateChangeCallback[] = [];
 
-  public transparent: boolean;
   private opacity_: number;
   public blendMode: BlendMode;
 
-  constructor({
-    transparent = false,
-    opacity = 1.0,
-    blendMode = "normal",
-  }: LayerOptions = {}) {
+  constructor({ opacity = 1.0, blendMode = "none" }: LayerOptions = {}) {
     if (opacity < 0 || opacity > 1) {
       Logger.warn(
         "Layer",
         `Layer opacity out of bounds: ${opacity} — clamping to [0.0, 1.0]`
       );
     }
-    this.transparent = transparent;
     this.opacity_ = clamp(opacity, 0.0, 1.0);
     this.blendMode = blendMode;
   }

src/core/layer_manager.ts

@@ -19,10 +19,10 @@ export class LayerManager {
     const transparent: Layer[] = [];
 
     for (const layer of this.layers) {
-      if (layer.transparent) {
-        transparent.push(layer);
-      } else {
+      if (layer.blendMode === "none") {
         opaque.push(layer);
+      } else {
+        transparent.push(layer);
       }
     }
 

src/layers/volume_layer.ts

@@ -104,7 +104,7 @@ export class VolumeLayer extends Layer implements ChannelsEnabled {
   }
 
   constructor({ source, sliceCoords, policy, channelProps }: VolumeLayerProps) {
-    super({ transparent: true, blendMode: "premultiplied" });
+    super({ blendMode: "premultiplied" });
     this.source_ = source;
     this.sliceCoords_ = sliceCoords;
     this.sourcePolicy_ = policy;

src/renderers/webgl_renderer.ts

@@ -132,7 +132,7 @@ export class WebGLRenderer extends Renderer {
 
   private renderLayer(layer: Layer, camera: Camera, frustum: Frustum) {
     if (layer.objects.length === 0) return;
-    this.state_.setBlendingMode(layer.transparent ? layer.blendMode : "none");
+    this.state_.setBlendingMode(layer.blendMode);
     const shouldUseStencil = layer.hasMultipleLODs();
     this.state_.setStencilTest(shouldUseStencil);
     if (shouldUseStencil) {

src/renderers/webgpu/webgpu_renderer.ts

@@ -213,7 +213,7 @@ class WebGPURenderer extends Renderer {
       this.passEncoder_.setStencilReference(0);
     }
 
-    this.currentBlendMode_ = layer.transparent ? layer.blendMode : "none";
+    this.currentBlendMode_ = layer.blendMode;
     this.currentOpacity_ = layer.opacity;
 
     layer.objects.forEach((object, i) => {