@aics/vole-core 3.15.5 → 3.15.7

package/README.md

@@ -34,7 +34,6 @@ const loaderContext = new VolumeLoaderContext(CACHE_MAX_SIZE, CONCURRENCY_LIMIT,
 
 // create the viewer.  it will try to fill the parent element.
 const view3D = new View3d(el);
-view3D.loaderContext = loaderContext;
 
 // ensure the loader worker is ready
 await loaderContext.onOpen();

package/es/Channel.js

@@ -14,7 +14,7 @@ export default class Channel {
     };
     this.rawMin = 0;
     this.rawMax = 255;
-    this.time = 0;
+    this.frame = 0;
 
     // on gpu
     this.dataTexture = new DataTexture(new Uint8Array(), 0, 0);
@@ -148,7 +148,7 @@ export default class Channel {
 
   // give the channel fresh data and initialize from that data
   // data is formatted as a texture atlas where each tile is a z slice of the volume
-  setFromAtlas(bitsArray, w, h, dtype, rawMin, rawMax, subregionSize, time = 0) {
+  setFromAtlas(bitsArray, w, h, dtype, rawMin, rawMax, subregionSize, frame = 0) {
     this.dtype = dtype;
     this.imgData = {
       data: bitsArray,
@@ -158,7 +158,7 @@ export default class Channel {
     this.rebuildDataTexture(this.imgData.data, w, h);
     this.loaded = true;
     this.histogram = new Histogram(bitsArray);
-    this.time = time;
+    this.frame = frame;
 
     // reuse old lut but auto-remap it to new data range
     this.setRawDataRange(rawMin, rawMax);
@@ -195,11 +195,11 @@ export default class Channel {
   }
 
   // give the channel fresh volume data and initialize from that data
-  setFromVolumeData(bitsArray, vx, vy, vz, ax, ay, rawMin, rawMax, dtype, time = 0) {
+  setFromVolumeData(bitsArray, vx, vy, vz, ax, ay, rawMin, rawMax, dtype, frame = 0) {
     this.dims = [vx, vy, vz];
     this.volumeData = bitsArray;
     this.dtype = dtype;
-    this.time = time;
+    this.frame = frame;
     // TODO FIXME performance hit for shuffling the data and storing 2 versions of it (could do this in worker at least?)
     this.packToAtlas(vx, vy, vz, ax, ay);
     this.loaded = true;

package/es/ContourPass.js

@@ -0,0 +1,98 @@
+import { Color, DataTexture, FloatType, RedIntegerFormat, RGBAFormat, Uniform, UnsignedIntType } from "three";
+import { clamp } from "three/src/math/MathUtils.js";
+import RenderToBuffer, { RenderPassType } from "./RenderToBuffer.js";
+/* babel-plugin-inline-import './constants/shaders/contour.frag' */
+const contourFragShader = "precision highp float;\nprecision highp int;\nprecision highp usampler2D;\nprecision highp sampler3D;\n\n/**\n * LUT mapping from the segmentation ID (raw pixel value) to the\n * global ID (index in data buffers like `featureData` and `outlierData`).\n * \n * For a given local pixel ID `localId`, the global ID is given by:\n * `localIdToGlobalId[localId - localIdOffset] - 1`.\n*/\nuniform usampler2D localIdToGlobalId;\nuniform uint localIdOffset;\nuniform bool useGlobalIdLookup;\n/* Pick buffer. Used to determine IDs. */\nuniform sampler2D pickBuffer;\n\nuniform int highlightedId;\nuniform int outlineThickness;\nuniform float outlineAlpha;\nuniform vec3 outlineColor;\nuniform float devicePixelRatio;\n\nconst uint BACKGROUND_ID = 0u;\nconst uint MISSING_DATA_ID = 0xFFFFFFFFu;\nconst int ID_OFFSET = 1;\n\nuvec4 getUintFromTex(usampler2D tex, int index) {\n  int width = textureSize(tex, 0).x;\n  ivec2 featurePos = ivec2(index % width, index / width);\n  return uvec4(texelFetch(tex, featurePos, 0));\n}\n\nuint getId(ivec2 uv) {\n  float rawId = texelFetch(pickBuffer, uv, 0).g;\n  if (rawId == 0.0) {\n    return BACKGROUND_ID;\n  }\n  int localId = int(rawId) - int(localIdOffset);\n  if (!useGlobalIdLookup) {\n    return uint(localId + ID_OFFSET);\n  }\n  uvec4 c = getUintFromTex(localIdToGlobalId, localId);\n  // Note: IDs are offset by `ID_OFFSET` (`=1`) to reserve `0` for local IDs\n  // that don't have associated data in the global lookup. `ID_OFFSET` MUST be\n  // subtracted from the ID when accessing data buffers.\n  uint globalId = c.r;\n  if (globalId == 0u) {\n    return MISSING_DATA_ID;\n  }\n  return globalId;\n}\n\nbool isEdge(ivec2 uv, int id, int thickness) {\n  float wStep = 1.0;\n  float hStep = 1.0;\n  float thicknessFloat = float(thickness);\n  // sample around the pixel to see if we are on an edge\n  int R = int(getId(uv + ivec2(thicknessFloat * wStep, 0))) - ID_OFFSET;\n  int L = int(getId(uv + ivec2(-thicknessFloat * wStep, 0))) - ID_OFFSET;\n  int T = int(getId(uv + ivec2(0, thicknessFloat * hStep))) - ID_OFFSET;\n  int B = int(getId(uv + ivec2(0, -thicknessFloat * hStep))) - ID_OFFSET;\n  // if any neighbors are not id then this is an edge\n  return id != -1 && (R != id || L != id || T != id || B != id);\n}\n\nvoid main(void) {\n  ivec2 vUv = ivec2(int(gl_FragCoord.x / devicePixelRatio), int(gl_FragCoord.y / devicePixelRatio));\n\n  uint rawId = getId(vUv);\n  int id = int(rawId) - ID_OFFSET;\n\n  if (id == highlightedId && isEdge(vUv, id, outlineThickness)) {\n    gl_FragColor = vec4(outlineColor, outlineAlpha);\n  } else {\n    gl_FragColor = vec4(0, 0, 0, 0.0);\n  }\n}";
+const makeDefaultUniforms = () => {
+  const pickBufferTex = new DataTexture(new Float32Array([1, 0, 0, 0]), 1, 1, RGBAFormat, FloatType);
+  const localIdToGlobalId = new DataTexture(new Uint32Array([0]), 1, 1, RedIntegerFormat, UnsignedIntType);
+  localIdToGlobalId.needsUpdate = true;
+  return {
+    pickBuffer: new Uniform(pickBufferTex),
+    highlightedId: new Uniform(94),
+    outlineThickness: new Uniform(2.0),
+    outlineColor: new Uniform(new Color(1, 0, 1)),
+    outlineAlpha: new Uniform(1.0),
+    useGlobalIdLookup: new Uniform(false),
+    localIdToGlobalId: new Uniform(localIdToGlobalId),
+    localIdOffset: new Uniform(0),
+    devicePixelRatio: new Uniform(1.0)
+  };
+};
+export default class ContourPass {
+  constructor() {
+    this.pass = new RenderToBuffer(contourFragShader, makeDefaultUniforms(), RenderPassType.TRANSPARENT);
+    this.frameToGlobalIdLookup = null;
+    this.frame = 0;
+  }
+  setOutlineColor(color, alpha = 1.0) {
+    this.pass.material.uniforms.outlineColor.value = color;
+    this.pass.material.uniforms.outlineAlpha.value = clamp(alpha, 0, 1);
+  }
+  setOutlineThickness(thickness) {
+    this.pass.material.uniforms.outlineThickness.value = Math.floor(thickness);
+  }
+  syncGlobalIdLookup() {
+    const uniforms = this.pass.material.uniforms;
+    const globalIdLookupInfo = this.frameToGlobalIdLookup?.get(this.frame);
+    if (!globalIdLookupInfo) {
+      uniforms.useGlobalIdLookup.value = false;
+      return;
+    }
+    uniforms.useGlobalIdLookup.value = true;
+    uniforms.localIdToGlobalId.value = globalIdLookupInfo.texture;
+    uniforms.localIdOffset.value = globalIdLookupInfo.minSegId;
+  }
+
+  /**
+   * Sets a frame-dependent lookup for global IDs. Set to a non-null value if
+   * the `highlightedId` represents a global ID instead of a local (pixel) ID.
+   * @param frameToGlobalIdLookup A map from a frame number to a lookup object,
+   * containing a texture and an offset value; see `ColorizeFeature` for more
+   * details. If `null`, the pass will not use a global ID lookup.
+   */
+  setGlobalIdLookup(frameToGlobalIdLookup) {
+    if (this.frameToGlobalIdLookup !== frameToGlobalIdLookup) {
+      this.frameToGlobalIdLookup = frameToGlobalIdLookup;
+      this.syncGlobalIdLookup();
+    }
+  }
+
+  /**
+   * Sets the current frame number. If a global ID lookup has been set
+   * (`setGlobalIdLookup`), this must be updated on every frame.
+   */
+  setFrame(frame) {
+    if (this.frame !== frame) {
+      this.frame = frame;
+      this.syncGlobalIdLookup();
+    }
+  }
+
+  /**
+   * Sets the current ID that should be highlighted with a contour.
+   * @param id The ID to highlight. If a global ID lookup has been set
+   * (`setGlobalIdLookup`), this should be a global ID.
+   */
+  setHighlightedId(id) {
+    this.pass.material.uniforms.highlightedId.value = id;
+  }
+
+  /**
+   * Renders the contour as a transparent pass on the specified target.
+   * @param renderer The WebGL renderer to render with.
+   * @param target The render target to render to.
+   * @param pickBuffer The pick buffer containing the pixel IDs to highlight,
+   * e.g. `PickVolume.getPickBuffer()`.
+   */
+  render(renderer, target, pickBuffer) {
+    // Setup uniforms
+    const uniforms = this.pass.material.uniforms;
+    uniforms.devicePixelRatio.value = window.devicePixelRatio;
+    uniforms.pickBuffer.value = pickBuffer.texture;
+    const startingAutoClearState = renderer.autoClear;
+    renderer.autoClear = false;
+    this.pass.render(renderer, target ?? undefined);
+    renderer.autoClear = startingAutoClearState;
+  }
+}

package/es/FusedChannelData.js

@@ -1,13 +1,13 @@
 import { Color, DataTexture, RedFormat, UnsignedByteType, ClampToEdgeWrapping, Scene, OrthographicCamera, WebGLRenderTarget, RGBAFormat, ShaderMaterial, Mesh, PlaneGeometry, OneFactor, CustomBlending, MaxEquation, LinearFilter, Vector2 } from "three";
 import { renderToBufferVertShader } from "./constants/basicShaders.js";
 /* babel-plugin-inline-import './constants/shaders/fuseUI.frag' */
-const fuseShaderSrcUI = "precision highp float;\nprecision highp int;\nprecision highp usampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\nuniform uint highlightedId;\n\n// src texture is the raw volume intensity data\nuniform usampler2D srcTexture;\n\nvoid main()\n{\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n    uint intensity = texelFetch(srcTexture, vUv, 0).r;\n    if (intensity == (highlightedId)) {\n        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n        return;\n    }\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz*pix.w, pix.w);\n}\n";
+const fuseShaderSrcUI = "precision highp float;\nprecision highp int;\nprecision highp usampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\nuniform uint highlightedId;\n\n// src texture is the raw volume intensity data\nuniform usampler2D srcTexture;\n\nvoid main() {\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n    uint intensity = texelFetch(srcTexture, vUv, 0).r;\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz * pix.w, pix.w);\n}\n";
 /* babel-plugin-inline-import './constants/shaders/fuseF.frag' */
 const fuseShaderSrcF = "precision highp float;\nprecision highp int;\nprecision highp sampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\n\n// src texture is the raw volume intensity data\nuniform sampler2D srcTexture;\n\nvoid main()\n{\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n\n    // load from channel\n    float intensity = texelFetch(srcTexture, vUv, 0).r;\n\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz*pix.w, pix.w);\n}\n";
 /* babel-plugin-inline-import './constants/shaders/fuseI.frag' */
 const fuseShaderSrcI = "precision highp float;\nprecision highp int;\nprecision highp sampler2D;\nprecision highp sampler3D;\n\n// the lut texture is a 256x1 rgba texture for each channel\nuniform sampler2D lutSampler;\n\nuniform vec2 lutMinMax;\n\n// src texture is the raw volume intensity data\nuniform isampler2D srcTexture;\n\nvoid main()\n{\n    ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n    int intensity = texelFetch(srcTexture, vUv, 0).r;\n    float ilookup = float(float(intensity) - lutMinMax.x) / float(lutMinMax.y - lutMinMax.x);\n    // apply lut to intensity:\n    vec4 pix = texture(lutSampler, vec2(ilookup, 0.5));\n    gl_FragColor = vec4(pix.xyz*pix.w, pix.w);\n}\n";
 /* babel-plugin-inline-import './constants/shaders/colorizeUI.frag' */
-const colorizeSrcUI = "precision highp float;\nprecision highp int;\nprecision highp usampler2D;\nprecision highp sampler3D;\n\nuniform sampler2D featureData;\n/** Min and max feature values that define the endpoints of the color map. Values\n * outside the range will be clamped to the nearest endpoint.\n */\nuniform float featureColorRampMin;\nuniform float featureColorRampMax;\nuniform sampler2D colorRamp;\nuniform usampler2D inRangeIds;\nuniform usampler2D outlierData;\n\n/**\n * LUT mapping from the segmentation ID (raw pixel value) to the\n * global ID (index in data buffers like `featureData` and `outlierData`).\n * \n * For a given segmentation ID `segId`, the global ID is given by:\n * `segIdToGlobalId[segId - segIdOffset] - 1`.\n*/\nuniform usampler2D segIdToGlobalId;\nuniform uint segIdOffset;\n\nuniform vec3 outlineColor;\n\n/** MUST be synchronized with the DrawMode enum in ColorizeCanvas! */\nconst uint DRAW_MODE_HIDE = 0u;\nconst uint DRAW_MODE_COLOR = 1u;\nconst uint BACKGROUND_ID = 0u;\nconst uint MISSING_DATA_ID = 0xFFFFFFFFu;\n\nuniform vec3 outlierColor;\nuniform uint outlierDrawMode;\nuniform vec3 outOfRangeColor;\nuniform uint outOfRangeDrawMode;\n\nuniform uint highlightedId;\n\nuniform bool useRepeatingCategoricalColors;\n\n// src texture is the raw volume intensity data\nuniform usampler2D srcTexture;\n\nvec4 getFloatFromTex(sampler2D tex, int index) {\n  int width = textureSize(tex, 0).x;\n  ivec2 featurePos = ivec2(index % width, index / width);\n  return texelFetch(tex, featurePos, 0);\n}\nuvec4 getUintFromTex(usampler2D tex, int index) {\n  int width = textureSize(tex, 0).x;\n  ivec2 featurePos = ivec2(index % width, index / width);\n  return texelFetch(tex, featurePos, 0);\n}\nuint getId(ivec2 uv) {\n  uint rawId = texelFetch(srcTexture, uv, 0).r;\n  if (rawId == 0u) {\n    return BACKGROUND_ID;\n  }\n  uvec4 c = getUintFromTex(segIdToGlobalId, int(rawId - segIdOffset));\n  // Note: IDs are offset by `1` to reserve `0` for segmentations that don't\n  // have associated data. `1` MUST be subtracted from the ID when accessing\n  // data buffers.\n  uint globalId = c.r;\n  if (globalId == 0u) {\n    return MISSING_DATA_ID;\n  }\n  return globalId;\n}\n\nvec4 getColorRamp(float val) {\n  float width = float(textureSize(colorRamp, 0).x);\n  float range = (width - 1.0) / width;\n  float adjustedVal = (0.5 / width) + (val * range);\n  return texture(colorRamp, vec2(adjustedVal, 0.5));\n}\n\nvec4 getCategoricalColor(float featureValue) {\n  float width = float(textureSize(colorRamp, 0).x);\n  float modValue = mod(featureValue, width);\n  // The categorical texture uses no interpolation, so when sampling, `modValue`\n  // is rounded to the nearest integer.\n  return getColorRamp(modValue / (width - 1.0));\n}\n\nvec4 getColorFromDrawMode(uint drawMode, vec3 defaultColor) {\n  const uint DRAW_MODE_HIDE = 0u;\n  vec3 backgroundColor = vec3(0.0, 0.0, 0.0);\n  if (drawMode == DRAW_MODE_HIDE) {\n    return vec4(backgroundColor, 0.0);\n  } else {\n    return vec4(defaultColor, 1.0);\n  }\n}\n\nfloat getFeatureVal(uint id) {\n  // Data buffer starts at 0, non-background segmentation IDs start at 1\n  return getFloatFromTex(featureData, int(id) - 1).r;\n}\nuint getOutlierVal(uint id) {\n  // Data buffer starts at 0, non-background segmentation IDs start at 1\n  return getUintFromTex(outlierData, int(id) - 1).r;\n}\nbool getIsInRange(uint id) {\n  return getUintFromTex(inRangeIds, int(id) - 1).r == 1u;\n}\nbool getIsOutlier(float featureVal, uint outlierVal) {\n  return isinf(featureVal) || outlierVal != 0u;\n}\n\nvec4 getObjectColor(ivec2 sUv, float opacity) {\n  // Get the segmentation id at this pixel\n  uint id = getId(sUv);\n\n  // A segmentation id of 0 represents background\n  if (id == BACKGROUND_ID) {\n    return vec4(0, 0, 0, 0);\n  }\n\n  // color the highlighted object. Note, `highlightedId` is a 0-based index\n  // (global ID w/o offset), while `id` is a 1-based index.\n  if (id - 1u == highlightedId) {\n    return vec4(outlineColor, 1.0);\n  }\n\n  float featureVal = getFeatureVal(id);\n  uint outlierVal = getOutlierVal(id);\n  float normFeatureVal = (featureVal - featureColorRampMin) / (featureColorRampMax - featureColorRampMin);\n\n  // Use the selected draw mode to handle out of range and outlier values;\n  // otherwise color with the color ramp as usual.\n  bool isInRange = getIsInRange(id);\n  bool isOutlier = getIsOutlier(featureVal, outlierVal);\n  bool isMissingData = (id == MISSING_DATA_ID);\n\n  // Features outside the filtered/thresholded range will all be treated the same (use `outOfRangeDrawColor`).\n  // Features inside the range can either be outliers or standard values, and are colored accordingly.\n  vec4 color;\n  if (isMissingData) { \n    // TODO: Add color controls for missing data\n    color = getColorFromDrawMode(outlierDrawMode, outlierColor);\n  } else if (isInRange) {\n    if (isOutlier) {\n      color = getColorFromDrawMode(outlierDrawMode, outlierColor);\n    } else if (useRepeatingCategoricalColors) {\n      color = getCategoricalColor(featureVal);\n    } else {\n      color = getColorRamp(normFeatureVal);\n    }\n  } else {\n    color = getColorFromDrawMode(outOfRangeDrawMode, outOfRangeColor);\n  }\n  color.a *= opacity;\n  return color;\n}\n\nvoid main() {\n  ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n  gl_FragColor = getObjectColor(vUv, 1.0);\n}\n";
+const colorizeSrcUI = "precision highp float;\nprecision highp int;\nprecision highp usampler2D;\nprecision highp sampler3D;\n\nuniform sampler2D featureData;\n/** Min and max feature values that define the endpoints of the color map. Values\n * outside the range will be clamped to the nearest endpoint.\n */\nuniform float featureColorRampMin;\nuniform float featureColorRampMax;\nuniform sampler2D colorRamp;\nuniform usampler2D inRangeIds;\nuniform usampler2D outlierData;\n\n// TODO: Rename to `localId` for consistency\n/**\n * LUT mapping from the segmentation ID (raw pixel value) to the\n * global ID (index in data buffers like `featureData` and `outlierData`).\n * \n * For a given segmentation ID `segId`, the global ID is given by:\n * `segIdToGlobalId[segId - segIdOffset] - 1`.\n*/\nuniform usampler2D segIdToGlobalId;\nuniform uint segIdOffset;\n\nuniform vec3 outlineColor;\n\n/** MUST be synchronized with the DrawMode enum in ColorizeCanvas! */\nconst uint DRAW_MODE_HIDE = 0u;\nconst uint DRAW_MODE_COLOR = 1u;\nconst uint BACKGROUND_ID = 0u;\nconst uint MISSING_DATA_ID = 0xFFFFFFFFu;\n\nuniform vec3 outlierColor;\nuniform uint outlierDrawMode;\nuniform vec3 outOfRangeColor;\nuniform uint outOfRangeDrawMode;\n\nuniform uint highlightedId;\n\nuniform bool useRepeatingCategoricalColors;\n\n// src texture is the raw volume intensity data\nuniform usampler2D srcTexture;\n\nvec4 getFloatFromTex(sampler2D tex, int index) {\n  int width = textureSize(tex, 0).x;\n  ivec2 featurePos = ivec2(index % width, index / width);\n  return texelFetch(tex, featurePos, 0);\n}\nuvec4 getUintFromTex(usampler2D tex, int index) {\n  int width = textureSize(tex, 0).x;\n  ivec2 featurePos = ivec2(index % width, index / width);\n  return texelFetch(tex, featurePos, 0);\n}\nuint getId(ivec2 uv) {\n  uint rawId = texelFetch(srcTexture, uv, 0).r;\n  if (rawId == 0u) {\n    return BACKGROUND_ID;\n  }\n  uvec4 c = getUintFromTex(segIdToGlobalId, int(rawId - segIdOffset));\n  // Note: IDs are offset by `1` to reserve `0` for segmentations that don't\n  // have associated data. `1` MUST be subtracted from the ID when accessing\n  // data buffers.\n  uint globalId = c.r;\n  if (globalId == 0u) {\n    return MISSING_DATA_ID;\n  }\n  return globalId;\n}\n\nvec4 getColorRamp(float val) {\n  float width = float(textureSize(colorRamp, 0).x);\n  float range = (width - 1.0) / width;\n  float adjustedVal = (0.5 / width) + (val * range);\n  return texture(colorRamp, vec2(adjustedVal, 0.5));\n}\n\nvec4 getCategoricalColor(float featureValue) {\n  float width = float(textureSize(colorRamp, 0).x);\n  float modValue = mod(featureValue, width);\n  // The categorical texture uses no interpolation, so when sampling, `modValue`\n  // is rounded to the nearest integer.\n  return getColorRamp(modValue / (width - 1.0));\n}\n\nvec4 getColorFromDrawMode(uint drawMode, vec3 defaultColor) {\n  const uint DRAW_MODE_HIDE = 0u;\n  vec3 backgroundColor = vec3(0.0, 0.0, 0.0);\n  if (drawMode == DRAW_MODE_HIDE) {\n    return vec4(backgroundColor, 0.0);\n  } else {\n    return vec4(defaultColor, 1.0);\n  }\n}\n\nfloat getFeatureVal(uint id) {\n  // Data buffer starts at 0, non-background segmentation IDs start at 1\n  return getFloatFromTex(featureData, int(id) - 1).r;\n}\nuint getOutlierVal(uint id) {\n  // Data buffer starts at 0, non-background segmentation IDs start at 1\n  return getUintFromTex(outlierData, int(id) - 1).r;\n}\nbool getIsInRange(uint id) {\n  return getUintFromTex(inRangeIds, int(id) - 1).r == 1u;\n}\nbool getIsOutlier(float featureVal, uint outlierVal) {\n  return isinf(featureVal) || outlierVal != 0u;\n}\n\nvec4 getObjectColor(ivec2 sUv, float opacity) {\n  // Get the segmentation id at this pixel\n  uint id = getId(sUv);\n\n  // A segmentation id of 0 represents background\n  if (id == BACKGROUND_ID) {\n    return vec4(0, 0, 0, 0);\n  }\n\n  // color the highlighted object. Note, `highlightedId` is a 0-based index\n  // (global ID w/o offset), while `id` is a 1-based index.\n  // if (id - 1u == highlightedId) {\n  //   return vec4(outlineColor, 1.0);\n  // }\n\n  float featureVal = getFeatureVal(id);\n  uint outlierVal = getOutlierVal(id);\n  float normFeatureVal = (featureVal - featureColorRampMin) / (featureColorRampMax - featureColorRampMin);\n\n  // Use the selected draw mode to handle out of range and outlier values;\n  // otherwise color with the color ramp as usual.\n  bool isInRange = getIsInRange(id);\n  bool isOutlier = getIsOutlier(featureVal, outlierVal);\n  bool isMissingData = (id == MISSING_DATA_ID);\n\n  // Features outside the filtered/thresholded range will all be treated the same (use `outOfRangeDrawColor`).\n  // Features inside the range can either be outliers or standard values, and are colored accordingly.\n  vec4 color;\n  if (isMissingData) { \n    // TODO: Add color controls for missing data\n    color = getColorFromDrawMode(outlierDrawMode, outlierColor);\n  } else if (isInRange) {\n    if (isOutlier) {\n      color = getColorFromDrawMode(outlierDrawMode, outlierColor);\n    } else if (useRepeatingCategoricalColors) {\n      color = getCategoricalColor(featureVal);\n    } else {\n      color = getColorRamp(normFeatureVal);\n    }\n  } else {\n    color = getColorFromDrawMode(outOfRangeDrawMode, outOfRangeColor);\n  }\n  color.a *= opacity;\n  return color;\n}\n\nvoid main() {\n  ivec2 vUv = ivec2(int(gl_FragCoord.x), int(gl_FragCoord.y));\n  gl_FragColor = getObjectColor(vUv, 1.0);\n}\n";
 // This is the owner of the fused RGBA volume texture atlas, and the mask texture atlas.
 // This module is responsible for updating the fused texture, given the read-only volume channel data.
 export default class FusedChannelData {
@@ -229,10 +229,10 @@ export default class FusedChannelData {
           mat.uniforms.outlierDrawMode.value = feature.outlierDrawMode;
           mat.uniforms.outOfRangeDrawMode.value = feature.outOfRangeDrawMode;
           mat.uniforms.hideOutOfRange.value = feature.hideOutOfRange;
-          const time = channels[chIndex].time;
-          let globalIdLookupInfo = feature.frameToGlobalIdLookup.get(time);
+          const frame = channels[chIndex].frame;
+          let globalIdLookupInfo = feature.frameToGlobalIdLookup.get(frame);
           if (!globalIdLookupInfo) {
-            console.warn(`FusedChannelData.gpuFuse: No global ID lookup info for time ${time} in channel ${chIndex}. A default lookup will be used, which may cause visual artifacts.`);
+            console.warn(`FusedChannelData.gpuFuse: No global ID lookup info for frame ${frame} in channel ${chIndex}. A default lookup will be used, which may cause visual artifacts.`);
             globalIdLookupInfo = {
               texture: new DataTexture(Uint32Array[0]),
               minSegId: 1

package/es/Line3d.js

@@ -1,8 +1,8 @@
 import { Group, Vector3 } from "three";
 import { LineMaterial } from "three/addons/lines/LineMaterial.js";
-import { MESH_LAYER, OVERLAY_LAYER } from "./ThreeJsPanel.js";
 import { LineSegments2 } from "three/addons/lines/LineSegments2.js";
 import { LineSegmentsGeometry } from "three/addons/lines/LineSegmentsGeometry.js";
+import { MESH_NO_PICK_OCCLUSION_LAYER, OVERLAY_LAYER } from "./ThreeJsPanel.js";
 const DEFAULT_VERTEX_BUFFER_SIZE = 1020;
 
 /**
@@ -20,11 +20,18 @@ export default class Line3d {
       worldUnits: false
     });
     this.lineMesh = new LineSegments2(geometry, material);
-    this.lineMesh.layers.set(MESH_LAYER);
+
+    // Lines need to write depth information so they interact with the volume
+    // (so the lines appear to fade into the volume if they intersect), but
+    // lines shouldn't interact with the pick buffer, otherwise strange visual
+    // artifacts can occur where contours are drawn around lines. This layer
+    // (MESH_NO_PICK_OCCLUSION_LAYER) does not occlude/interact with the pick
+    // buffer but still writes depth information for the volume.
+    this.lineMesh.layers.set(MESH_NO_PICK_OCCLUSION_LAYER);
     this.lineMesh.frustumCulled = false;
     this.meshPivot = new Group();
     this.meshPivot.add(this.lineMesh);
-    this.meshPivot.layers.set(MESH_LAYER);
+    this.meshPivot.layers.set(MESH_NO_PICK_OCCLUSION_LAYER);
     this.scale = new Vector3(1, 1, 1);
     this.flipAxes = new Vector3(1, 1, 1);
   }
@@ -108,7 +115,7 @@ export default class Line3d {
    * volume, ignoring depth.
    */
   setRenderAsOverlay(renderAsOverlay) {
-    this.lineMesh.layers.set(renderAsOverlay ? OVERLAY_LAYER : MESH_LAYER);
+    this.lineMesh.layers.set(renderAsOverlay ? OVERLAY_LAYER : MESH_NO_PICK_OCCLUSION_LAYER);
     this.lineMesh.material.depthTest = !renderAsOverlay;
     this.lineMesh.material.depthTest = !renderAsOverlay;
     this.lineMesh.material.needsUpdate = true;

package/es/PickVolume.js

@@ -1,6 +1,7 @@
 import { BoxGeometry, Color, DataTexture, FloatType, Group, Matrix4, Mesh, NearestFilter, RGBAFormat, Scene, ShaderMaterial, Vector2, WebGLRenderTarget } from "three";
 import { pickVertexShaderSrc, pickFragmentShaderSrc, pickShaderUniforms } from "./constants/volumeRayMarchPickShader.js";
 import { VolumeRenderSettings, SettingsFlags } from "./VolumeRenderSettings.js";
+import { VOLUME_LAYER } from "./ThreeJsPanel.js";
 export default class PickVolume {
   needRedraw = false;
   channelToPick = 0;
@@ -43,6 +44,9 @@ export default class PickVolume {
   setChannelToPick(channel) {
     this.channelToPick = channel;
   }
+  getChannelToPick() {
+    return this.channelToPick;
+  }
   getPickBuffer() {
     return this.pickBuffer;
   }
@@ -185,7 +189,6 @@ export default class PickVolume {
     }
     this.needRedraw = false;
     this.setUniform("iResolution", this.settings.resolution);
-    this.setUniform("textureRes", this.settings.resolution);
     const depthTex = depthTexture ?? this.emptyPositionTex;
     this.setUniform("textureDepth", depthTex);
     this.setUniform("usingPositionTexture", depthTex.isDepthTexture ? 0 : 1);
@@ -194,18 +197,16 @@ export default class PickVolume {
 
     // this.channelData.gpuFuse(renderer);
 
-    // set up texture from segmentation channel!!!!
-    // we need to know the channel index for this.
-    // ...channel.dataTexture...
-    // TODO TODO TODO FIXME
-    this.setUniform("textureAtlas", this.volume.getChannel(this.channelToPick).dataTexture);
+    const channelTex = this.volume.getChannel(this.channelToPick).dataTexture;
+    this.setUniform("textureAtlas", channelTex);
+    this.setUniform("textureRes", new Vector2(channelTex.image.width, channelTex.image.height));
     this.geometryTransformNode.updateMatrixWorld(true);
     const mvm = new Matrix4();
     mvm.multiplyMatrices(camera.matrixWorldInverse, this.geometryMesh.matrixWorld);
     mvm.invert();
     this.setUniform("inverseModelViewMatrix", mvm);
     this.setUniform("inverseProjMatrix", camera.projectionMatrixInverse);
-    const VOLUME_LAYER = 0;
+
     // draw into pick buffer...
     camera.layers.set(VOLUME_LAYER);
     renderer.setRenderTarget(this.pickBuffer);

package/es/RenderToBuffer.js

@@ -1,18 +1,24 @@
 import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial } from "three";
 import { renderToBufferVertShader } from "./constants/basicShaders.js";
+export let RenderPassType = /*#__PURE__*/function (RenderPassType) {
+  RenderPassType[RenderPassType["OPAQUE"] = 0] = "OPAQUE";
+  RenderPassType[RenderPassType["TRANSPARENT"] = 1] = "TRANSPARENT";
+  return RenderPassType;
+}({});
 
 /**
  * Helper for render passes that just require a fragment shader: accepts a fragment shader and its
  * uniforms, and handles the ceremony of rendering a fullscreen quad with a simple vertex shader.
  */
 export default class RenderToBuffer {
-  constructor(fragmentSrc, uniforms) {
+  constructor(fragmentSrc, uniforms, passType = RenderPassType.OPAQUE) {
     this.scene = new Scene();
     this.geometry = new PlaneGeometry(2, 2);
     this.material = new ShaderMaterial({
       vertexShader: renderToBufferVertShader,
       fragmentShader: fragmentSrc,
-      uniforms
+      uniforms,
+      transparent: passType === RenderPassType.TRANSPARENT
     });
     this.material.depthWrite = false;
     this.material.depthTest = false;

package/es/ThreeJsPanel.js

@@ -9,7 +9,9 @@ import RenderToBuffer from "./RenderToBuffer.js";
 import { copyImageFragShader } from "./constants/basicShaders.js";
 export const VOLUME_LAYER = 0;
 export const MESH_LAYER = 1;
-export const OVERLAY_LAYER = 2;
+/** Meshes that do not occlude picking/contour behavior. */
+export const MESH_NO_PICK_OCCLUSION_LAYER = 2;
+export const OVERLAY_LAYER = 3;
 const DEFAULT_PERSPECTIVE_CAMERA_DISTANCE = 5.0;
 const DEFAULT_PERSPECTIVE_CAMERA_NEAR = 0.1;
 const DEFAULT_PERSPECTIVE_CAMERA_FAR = 20.0;
@@ -48,7 +50,8 @@ export class ThreeJsPanel {
     this.timestepIndicatorElement = document.createElement("div");
     this.showTimestepIndicator = false;
     this.animateFuncs = [];
-    this.postAnimateFuncs = [];
+    this.postMeshRenderFuncs = [];
+    this.overlayRenderFuncs = [];
 
     // are we in a constant render loop or not?
     this.inRenderLoop = false;
@@ -546,38 +549,52 @@ export class ThreeJsPanel {
 
     // RENDERING
     // Step 1: Render meshes, e.g. isosurfaces, separately to a render target. (Meshes are all on
-    //   layer 1.) This is necessary to access the depth buffer.
+    // layer 1.) This is necessary to access the depth buffer.
     this.camera.layers.set(MESH_LAYER);
     this.renderer.setRenderTarget(this.meshRenderTarget);
     this.renderer.render(this.scene, this.camera);
 
-    // Step 2: Render the mesh render target out to the screen.
+    // Step 2. Render any passes that have to happen after the meshes are
+    // rendered but before volume rendering (e.g. pick buffer).
+    this.postMeshRenderFuncs.forEach(func => {
+      func(this.renderer, this.camera, this.meshRenderTarget.depthTexture);
+    });
+
+    // Step 3: Render meshes that do not interact with the pick buffer. This
+    // must happen after the pick buffer is rendered so picking isn't occluded
+    // by them, but before the volume renders so that volumes can still depth
+    // test against the lines.
+    this.renderer.autoClear = false;
+    this.camera.layers.set(MESH_NO_PICK_OCCLUSION_LAYER);
+    this.renderer.setRenderTarget(this.meshRenderTarget);
+    this.renderer.render(this.scene, this.camera);
+
+    // Step 4: Render the mesh render target out to the screen.
     this.meshRenderToBuffer.material.uniforms.image.value = this.meshRenderTarget.texture;
     this.meshRenderToBuffer.render(this.renderer);
 
-    // Step 3: Render volumes, which can now depth test against the meshes.
-    this.renderer.autoClear = false;
+    // Step 5: Render volumes, which can now depth test against the meshes.
     this.camera.layers.set(VOLUME_LAYER);
     this.renderer.setRenderTarget(null);
     this.renderer.render(this.scene, this.camera);
 
-    // Step 4: Render lines and other objects that must render over volumes and meshes.
+    // Step 6: Render lines and other objects that must render over volumes and meshes.
     this.camera.layers.set(OVERLAY_LAYER);
     this.renderer.setRenderTarget(null);
     this.renderer.render(this.scene, this.camera);
+
+    // Step 7: Render overlay passes (e.g. contours) and update the pick buffer.
+    this.overlayRenderFuncs.forEach(func => {
+      func(this.renderer, this.camera, this.meshRenderTarget.depthTexture);
+    });
     this.renderer.autoClear = true;
 
-    // overlay
+    // Step 8: Render axis helper and other overlays.
     if (this.showAxis) {
       this.renderer.autoClear = false;
       this.renderer.render(this.axisHelperScene, this.axisCamera);
       this.renderer.autoClear = true;
     }
-    for (let i = 0; i < this.postAnimateFuncs.length; i++) {
-      if (this.postAnimateFuncs[i]) {
-        this.postAnimateFuncs[i](this.renderer, this.camera, this.meshRenderTarget.depthTexture);
-      }
-    }
     if (this.dataurlcallback) {
       this.dataurlcallback(this.canvas.toDataURL());
       this.dataurlcallback = undefined;

package/es/View3d.js

@@ -19,10 +19,6 @@ const allGlobalLoadingOptions = {
  * @class
  */
 export class View3d {
-  // TODO because View3d is basically a top level entrypoint for Vol-E,
-  // maybe it should create the VolumeLoaderContext with options passed in.
-  // (instead of having the loaderContext created externally)
-
   /**
    * @param {Object} options Optional options.
    * @param {boolean} options.useWebGL2 Default true
@@ -143,7 +139,8 @@ export class View3d {
     if (this.image) {
       this.canvas3d.removeControlHandlers();
       this.canvas3d.animateFuncs = [];
-      this.canvas3d.postAnimateFuncs = [];
+      this.canvas3d.postMeshRenderFuncs = [];
+      this.canvas3d.overlayRenderFuncs = [];
       this.scene.remove(this.image.sceneRoot);
     }
     return this.image;
@@ -345,11 +342,12 @@ export class View3d {
     this.canvas3d.setControlHandlers(this.onStartControls.bind(this), this.onChangeControls.bind(this), this.onEndControls.bind(this));
     this.canvas3d.animateFuncs.push(this.preRender.bind(this));
     this.canvas3d.animateFuncs.push(img.onAnimate.bind(img));
-    // NOTE: `fillPickBuffer` MUST run after render occurs. This is because the
-    // pick buffer needs to access the `meshRenderTarget`'s depth texture, but
-    // during a resize, the texture is disposed of and not recreated until the
-    // next render.
-    this.canvas3d.postAnimateFuncs.push(img.fillPickBuffer.bind(img));
+    // NOTE: `fillPickBuffer` MUST run after mesh rendering occurs. This is
+    // because the pick buffer needs to access the `meshRenderTarget`'s depth
+    // texture, but during a resize, the texture is disposed of and not
+    // recreated until the next render.
+    this.canvas3d.postMeshRenderFuncs.push(img.fillPickBuffer.bind(img));
+    this.canvas3d.overlayRenderFuncs.push(img.drawContours.bind(img));
     this.updatePerspectiveScaleBar(img.volume);
     this.updateTimestepIndicator(img.volume);
 
@@ -966,7 +964,7 @@ export class View3d {
     });
     // when multiple prefetch frames arrive at once, should we slow down how quickly we load them?
     prefetch.addInput(allGlobalLoadingOptions, "throttleArrivingChannelData").on("change", event => {
-      this.loaderContext?.setThrottleChannelData(event.value);
+      loader?.getContext?.().setThrottleChannelData(event.value);
     });
     return pane;
   }

package/es/VolumeDrawable.js

@@ -7,6 +7,7 @@ import { LUT_ARRAY_LENGTH } from "./Lut.js";
 import { RenderMode } from "./types.js";
 import Atlas2DSlice from "./Atlas2DSlice.js";
 import { VolumeRenderSettings, SettingsFlags, Axis } from "./VolumeRenderSettings.js";
+import ContourPass from "./ContourPass.js";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -80,6 +81,7 @@ export default class VolumeDrawable {
     if (this.pickRendering) {
       this.pickRendering = new PickVolume(this.volume, this.settings);
     }
+    this.contourRendering = new ContourPass();
 
     // draw meshes first, and volume last, for blending and depth test reasons with raymarch
     this.meshVolume = new MeshVolume(this.volume);
@@ -103,6 +105,7 @@ export default class VolumeDrawable {
   getPickBuffer() {
     return this.pickRendering?.getPickBuffer();
   }
+
   /**
    * Updates whether a channel's data must be loaded for rendering,
    * based on if its volume or isosurface is enabled, or whether it is needed for masking.
@@ -414,6 +417,12 @@ export default class VolumeDrawable {
   fillPickBuffer(renderer, camera, depthTexture) {
     this.pickRendering?.doRender(renderer, camera, depthTexture);
   }
+  drawContours(renderer) {
+    if (!this.pickRendering || !this.contourRendering) {
+      return;
+    }
+    this.contourRendering.render(renderer, renderer.getRenderTarget(), this.pickRendering.getPickBuffer());
+  }
   getViewMode() {
     return this.viewMode;
   }
@@ -424,6 +433,7 @@ export default class VolumeDrawable {
     return this.meshVolume.hasIsosurface(channel);
   }
   setSelectedID(channelIndex, id) {
+    this.contourRendering.setHighlightedId(id);
     if (this.fusion.length > 0) {
       // TODO does it make sense to do this for a particular channel?
       if (id !== this.fusion[channelIndex].selectedID) {
@@ -440,6 +450,13 @@ export default class VolumeDrawable {
     this.volumeRendering.updateActiveChannels(this.fusion, this.volume.channels);
     // pickRendering only really works with one channel so we don't need to call
     // its updateActiveChannels method
+    if (this.pickRendering) {
+      const pickChannel = this.pickRendering.getChannelToPick();
+      const channelData = this.volume.channels[pickChannel];
+      if (channelData) {
+        this.contourRendering.setFrame(channelData.frame);
+      }
+    }
   }
   setRenderUpdateListener(callback) {
     this.renderUpdateListener = callback;
@@ -610,8 +627,11 @@ export default class VolumeDrawable {
     // TODO only one channel can ever have this?
     if (!featureInfo) {
       this.fusion[channelIndex].feature = undefined;
+      this.contourRendering.setGlobalIdLookup(null);
     } else {
       this.fusion[channelIndex].feature = featureInfo;
+      this.contourRendering.setOutlineColor(featureInfo.outlineColor, featureInfo.outlineAlpha);
+      this.contourRendering.setGlobalIdLookup(featureInfo.frameToGlobalIdLookup);
     }
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.MATERIAL);
     this.pickRendering?.updateSettings(this.settings, SettingsFlags.MATERIAL);

package/es/constants/volumeRayMarchPickShader.js

@@ -2,7 +2,7 @@ import { Vector2, Vector3, Matrix4, Texture } from "three";
 /* babel-plugin-inline-import './shaders/raymarch.vert' */
 const rayMarchVertexShader = "// switch on high precision floats\n#ifdef GL_ES\nprecision highp float;\n#endif\n\nvarying vec3 pObj;\n\nvoid main() {\n  pObj = position;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
 /* babel-plugin-inline-import './shaders/volumePick.frag' */
-const rayMarchFragmentShader = "\n#ifdef GL_ES\nprecision highp float;\nprecision highp usampler2D;\n#endif\n\n#define M_PI 3.14159265358979323846\n\nuniform vec2 iResolution;\nuniform vec2 textureRes;\n\n//uniform float maskAlpha;\nuniform vec2 ATLAS_DIMS;\nuniform vec3 AABB_CLIP_MIN;\nuniform float CLIP_NEAR;\nuniform vec3 AABB_CLIP_MAX;\nuniform float CLIP_FAR;\n// one raw channel atlas that has segmentation data\nuniform usampler2D textureAtlas;\n//uniform sampler2D textureAtlasMask;\nuniform sampler2D textureDepth;\nuniform int usingPositionTexture;\nuniform int BREAK_STEPS;\nuniform float SLICES;\nuniform float isOrtho;\nuniform float orthoThickness;\nuniform float orthoScale;\nuniform int maxProject;\nuniform vec3 flipVolume;\nuniform vec3 volumeScale;\n\n// view space to axis-aligned volume box\nuniform mat4 inverseModelViewMatrix;\nuniform mat4 inverseProjMatrix;\n\nvarying vec3 pObj;\n\nfloat powf(float a, float b) {\n  return pow(a,b);\n}\n\nfloat rand(vec2 co) {\n  float threadId = gl_FragCoord.x/(gl_FragCoord.y + 1.0);\n  float bigVal = threadId*1299721.0/911.0;\n  vec2 smallVal = vec2(threadId*7927.0/577.0, threadId*104743.0/1039.0);\n  return fract(sin(dot(co, smallVal)) * bigVal);\n}\n\nvec2 offsetFrontBack(float t) {\n  int a = int(t);\n  int ax = int(ATLAS_DIMS.x);\n  vec2 os = vec2(float(a - (a / ax) * ax), float(a / ax)) / ATLAS_DIMS;\n  return clamp(os, vec2(0.0), vec2(1.0) - vec2(1.0) / ATLAS_DIMS);\n}\n\nuint sampleAtlasNearest(usampler2D tex, vec4 pos) {\n  uint bounds = uint(pos[0] >= 0.0 && pos[0] <= 1.0 &&\n                       pos[1] >= 0.0 && pos[1] <= 1.0 &&\n                       pos[2] >= 0.0 && pos[2] <= 1.0 );\n  float nSlices = float(SLICES);\n\n  vec2 loc0 = ((pos.xy - 0.5) * flipVolume.xy + 0.5) / ATLAS_DIMS;\n\n  // No interpolation - sample just one slice at a pixel center.\n  // Ideally this would be accomplished in part by switching this texture to linear\n  //   filtering, but three makes this difficult to do through a WebGLRenderTarget.\n  loc0 = floor(loc0 * textureRes) / textureRes;\n  loc0 += vec2(0.5) / textureRes;\n\n  float z = min(floor(pos.z * nSlices), nSlices-1.0);\n  \n  if (flipVolume.z == -1.0) {\n    z = nSlices - z - 1.0;\n  }\n\n  vec2 o = offsetFrontBack(z) + loc0;\n  uint voxelColor = texture2D(tex, o).x;\n\n  // Apply mask\n//   float voxelMask = texture2D(textureAtlasMask, o).x;\n//   voxelMask = mix(voxelMask, 1.0, maskAlpha);\n//   voxelColor.rgb *= voxelMask;\n\n  return bounds*voxelColor;\n}\n\nbool intersectBox(in vec3 r_o, in vec3 r_d, in vec3 boxMin, in vec3 boxMax,\n                  out float tnear, out float tfar) {\n  // compute intersection of ray with all six bbox planes\n  vec3 invR = vec3(1.0,1.0,1.0) / r_d;\n  vec3 tbot = invR * (boxMin - r_o);\n  vec3 ttop = invR * (boxMax - r_o);\n\n  // re-order intersections to find smallest and largest on each axis\n  vec3 tmin = min(ttop, tbot);\n  vec3 tmax = max(ttop, tbot);\n\n  // find the largest tmin and the smallest tmax\n  float largest_tmin  = max(max(tmin.x, tmin.y), tmin.z);\n  float smallest_tmax = min(min(tmax.x, tmax.y), tmax.z);\n\n  tnear = largest_tmin;\n  tfar = smallest_tmax;\n\n  // use >= here?\n  return(smallest_tmax > largest_tmin);\n}\n\nvec4 integrateVolume(vec4 eye_o,vec4 eye_d,\n                     float tnear,   float tfar,\n                     float clipNear, float clipFar,\n                     usampler2D textureAtlas\n                     ) {\n  uint C = 0u;\n  // march along ray from front to back, accumulating color\n\n  // estimate step length\n  const int maxSteps = 512;\n  // modify the 3 components of eye_d by volume scale\n  float scaledSteps = float(BREAK_STEPS) * length((eye_d.xyz/volumeScale));\n  float csteps = clamp(float(scaledSteps), 1.0, float(maxSteps));\n  float invstep = (tfar-tnear)/csteps;\n  // special-casing the single slice to remove the random ray dither.\n  // this removes a Moire pattern visible in single slice images, which we want to view as 2D images as best we can.\n  float r = (SLICES==1.0) ? 0.0 : rand(eye_d.xy);\n  // if ortho and clipped, make step size smaller so we still get same number of steps\n  float tstep = invstep*orthoThickness;\n  float tfarsurf = r*tstep;\n  float overflow = mod((tfarsurf - tfar),tstep); // random dithering offset\n  float t = tnear + overflow;\n  t += r*tstep; // random dithering offset\n  float tdist = 0.0;\n  int numSteps = 0;\n  vec4 pos, col;\n  for (int i = 0; i < maxSteps; i++) {\n    pos = eye_o + eye_d*t;\n    // !!! assume box bounds are -0.5 .. 0.5.  pos = (pos-min)/(max-min)\n    // scaling is handled by model transform and already accounted for before we get here.\n    // AABB clip is independent of this and is only used to determine tnear and tfar.\n    pos.xyz = (pos.xyz-(-0.5))/((0.5)-(-0.5)); //0.5 * (pos + 1.0); // map position from [boxMin, boxMax] to [0, 1] coordinates\n\n    uint col = sampleAtlasNearest(textureAtlas, pos);\n\n    // FOR INTERSECTION / PICKING, the FIRST nonzero intensity terminates the raymarch\n\n    if (maxProject != 0) {\n      C = max(col, C);\n    } else {\n      if (col > 0u) {\n        C = col;\n        break;\n      }\n    }\n    t += tstep;\n    numSteps = i;\n\n    if (t > tfar || t > tnear+clipFar ) break;\n  }\n\n  return vec4(float(C));\n}\n\nvoid main() {\n  gl_FragColor = vec4(0.0);\n  vec2 vUv = gl_FragCoord.xy/iResolution.xy;\n\n  vec3 eyeRay_o, eyeRay_d;\n\n  if (isOrtho == 0.0) {\n    // for perspective rays:\n    // world space camera coordinates\n    // transform to object space\n    eyeRay_o = (inverseModelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0)).xyz;\n    eyeRay_d = normalize(pObj - eyeRay_o);\n  } else {\n    // for ortho rays:\n    float zDist = 2.0;\n    eyeRay_d = (inverseModelViewMatrix*vec4(0.0, 0.0, -zDist, 0.0)).xyz;\n    vec4 ray_o = vec4(2.0*vUv - 1.0, 1.0, 1.0);\n    ray_o.xy *= orthoScale;\n    ray_o.x *= iResolution.x/iResolution.y;\n    eyeRay_o = (inverseModelViewMatrix*ray_o).xyz;\n  }\n\n  // -0.5..0.5 is full box. AABB_CLIP lets us clip to a box shaped ROI to look at\n  // I am applying it here at the earliest point so that the ray march does\n  // not waste steps.  For general shaped ROI, this has to be handled more\n  // generally (obviously)\n  vec3 boxMin = AABB_CLIP_MIN;\n  vec3 boxMax = AABB_CLIP_MAX;\n\n  float tnear, tfar;\n  bool hit = intersectBox(eyeRay_o, eyeRay_d, boxMin, boxMax, tnear, tfar);\n\n  if (!hit) {\n    // return background color if ray misses the cube\n    // is this safe to do when there is other geometry / gObjects drawn?\n    gl_FragColor = vec4(0.0); //C1;//vec4(0.0);\n    return;\n  }\n\n  float clipNear = 0.0;//-(dot(eyeRay_o.xyz, eyeNorm) + dNear) / dot(eyeRay_d.xyz, eyeNorm);\n  float clipFar  = 10000.0;//-(dot(eyeRay_o.xyz,-eyeNorm) + dFar ) / dot(eyeRay_d.xyz,-eyeNorm);\n\n  // Sample the depth/position texture\n  // If this is a depth texture, the r component is a depth value. If this is a position texture,\n  // the xyz components are a view space position and w is 1.0 iff there's a mesh at this fragment.\n  vec4 meshPosSample = texture2D(textureDepth, vUv);\n  // Note: we make a different check for whether a mesh is present with depth vs. position textures.\n  // Here's the check for depth textures:\n  bool hasDepthValue = usingPositionTexture == 0 && meshPosSample.r < 1.0;\n\n  // If there's a depth-contributing mesh at this fragment, we may need to terminate the ray early\n  if (hasDepthValue || (usingPositionTexture == 1 && meshPosSample.a > 0.0)) {\n    if (hasDepthValue) {\n      // We're working with a depth value, so we need to convert back to view space position\n      // Get a projection space position from depth and uv, and unproject back to view space\n      vec4 meshProj = vec4(vUv * 2.0 - 1.0, meshPosSample.r * 2.0 - 1.0, 1.0);\n      vec4 meshView = inverseProjMatrix * meshProj;\n      meshPosSample = vec4(meshView.xyz / meshView.w, 1.0);\n    }\n    // Transform the mesh position to object space\n    vec4 meshObj = inverseModelViewMatrix * meshPosSample;\n\n    // Derive a t value for the mesh intersection\n    // NOTE: divides by 0 when `eyeRay_d.z` is 0. Could be mitigated by picking another component\n    //   to derive with when z is 0, but I found this was rare enough in practice to be acceptable.\n    float tMesh = (meshObj.z - eyeRay_o.z) / eyeRay_d.z;\n    if (tMesh < tfar) {\n      clipFar = tMesh - tnear;\n    }\n  }\n\n  vec4 C = integrateVolume(vec4(eyeRay_o,1.0), vec4(eyeRay_d,0.0),\n                          tnear,    tfar, //intersections of box\n                          clipNear, clipFar,\n                          textureAtlas);\n\n  gl_FragColor = C;\n  return;\n}\n";
+const rayMarchFragmentShader = "\n#ifdef GL_ES\nprecision highp float;\nprecision highp usampler2D;\n#endif\n\n#define M_PI 3.14159265358979323846\n\nuniform vec2 iResolution;\nuniform vec2 textureRes;\n\n//uniform float maskAlpha;\nuniform uvec2 ATLAS_DIMS;\nuniform vec3 AABB_CLIP_MIN;\nuniform float CLIP_NEAR;\nuniform vec3 AABB_CLIP_MAX;\nuniform float CLIP_FAR;\n// one raw channel atlas that has segmentation data\nuniform usampler2D textureAtlas;\n//uniform sampler2D textureAtlasMask;\nuniform sampler2D textureDepth;\nuniform int usingPositionTexture;\nuniform int BREAK_STEPS;\nuniform float SLICES;\nuniform float isOrtho;\nuniform float orthoThickness;\nuniform float orthoScale;\nuniform int maxProject;\nuniform vec3 flipVolume;\nuniform vec3 volumeScale;\n\n// view space to axis-aligned volume box\nuniform mat4 inverseModelViewMatrix;\nuniform mat4 inverseProjMatrix;\n\nvarying vec3 pObj;\n\nfloat powf(float a, float b) {\n  return pow(a,b);\n}\n\nfloat rand(vec2 co) {\n  float threadId = gl_FragCoord.x/(gl_FragCoord.y + 1.0);\n  float bigVal = threadId*1299721.0/911.0;\n  vec2 smallVal = vec2(threadId*7927.0/577.0, threadId*104743.0/1039.0);\n  return fract(sin(dot(co, smallVal)) * bigVal);\n}\n\n// get the uv offset into the atlas for the given z slice\n// ATLAS_DIMS is the number of z slices across the atlas texture\nvec2 offsetFrontBack(uint a) {\n  uint ax = ATLAS_DIMS.x;\n  vec2 tiles = vec2(1.0f/float(ATLAS_DIMS.x), 1.0f/float(ATLAS_DIMS.y));\n  vec2 os = vec2(float(a % ax), float(a / ax)) * tiles;\n  return clamp(os, vec2(0.0), vec2(1.0) - vec2(1.0) * tiles);\n}\n\nuint sampleAtlasNearest(usampler2D tex, vec4 pos) {\n  uint bounds = uint(pos[0] >= 0.0 && pos[0] <= 1.0 &&\n                       pos[1] >= 0.0 && pos[1] <= 1.0 &&\n                       pos[2] >= 0.0 && pos[2] <= 1.0 );\n  float nSlices = float(SLICES);\n\n  // ascii art of a texture atlas:\n  //  +------------------+\n  //  | 0  | 1  | 2  | 3 |\n  //  +------------------+\n  //  | 4  | 5  | 6  | 7 | \n  //  +------------------+\n  //  | 8  | 9  |10  |11 |\n  //  +------------------+\n  //  |12  |13  |14  |15 |\n  //  +------------------+\n  // Each tile is one z-slice of the 3D texture, which has been flattened\n  // into an atlased 2D texture.\n\n  // pos.xy is 0-1 range. Apply the xy flip here and then divide by number of tiles in x and y to normalize\n  // to a single tile. This results in a uv coordinate that's in the correct X and Y position but only for\n  // the first tile (z slice) of the atlas texture, z=0.\n  vec2 loc0 = ((pos.xy - 0.5) * flipVolume.xy + 0.5) / vec2(float(ATLAS_DIMS.x), float(ATLAS_DIMS.y));\n  \n  // Next, offset the UV coordinate so we are sampling in the correct Z slice.\n  // Round z to the nearest (floor) slice\n  float z = min(floor(pos.z * nSlices), nSlices-1.0);\n  // flip z coordinate if needed\n  if (flipVolume.z == -1.0) {\n    z = nSlices - z - 1.0;\n  }\n\n  // calculate the offset to the z slice in the atlas texture\n  vec2 o = offsetFrontBack(uint(z)) + loc0;\n  //uint voxelColor = texture2D(tex, o).x;\n  uint voxelColor = texelFetch(tex, ivec2(o * textureRes), 0).x;\n\n  // Apply mask\n  // float voxelMask = texture2D(textureAtlasMask, o).x;\n  // voxelMask = mix(voxelMask, 1.0, maskAlpha);\n  // voxelColor.rgb *= voxelMask;\n\n  return bounds*voxelColor;\n}\n\nbool intersectBox(in vec3 r_o, in vec3 r_d, in vec3 boxMin, in vec3 boxMax,\n                  out float tnear, out float tfar) {\n  // compute intersection of ray with all six bbox planes\n  vec3 invR = vec3(1.0,1.0,1.0) / r_d;\n  vec3 tbot = invR * (boxMin - r_o);\n  vec3 ttop = invR * (boxMax - r_o);\n\n  // re-order intersections to find smallest and largest on each axis\n  vec3 tmin = min(ttop, tbot);\n  vec3 tmax = max(ttop, tbot);\n\n  // find the largest tmin and the smallest tmax\n  float largest_tmin  = max(max(tmin.x, tmin.y), tmin.z);\n  float smallest_tmax = min(min(tmax.x, tmax.y), tmax.z);\n\n  tnear = largest_tmin;\n  tfar = smallest_tmax;\n\n  // use >= here?\n  return(smallest_tmax > largest_tmin);\n}\n\nvec4 integrateVolume(vec4 eye_o,vec4 eye_d,\n                     float tnear,   float tfar,\n                     float clipNear, float clipFar,\n                     usampler2D textureAtlas\n                     ) {\n  uint C = 0u;\n  // march along ray from front to back, accumulating color\n\n  // estimate step length\n  const int maxSteps = 512;\n  // modify the 3 components of eye_d by volume scale\n  float scaledSteps = float(BREAK_STEPS) * length((eye_d.xyz/volumeScale));\n  float csteps = clamp(float(scaledSteps), 1.0, float(maxSteps));\n  float invstep = (tfar-tnear)/csteps;\n  // Removed random ray dither to prevent artifacting\n  float r = 0.0; // (SLICES==1.0) ? 0.0 : rand(eye_d.xy);\n  // if ortho and clipped, make step size smaller so we still get same number of steps\n  float tstep = invstep*orthoThickness;\n  float tfarsurf = r*tstep;\n  float overflow = mod((tfarsurf - tfar),tstep); // random dithering offset\n  float t = tnear + overflow;\n  t += r*tstep; // random dithering offset\n  float tdist = 0.0;\n  int numSteps = 0;\n  vec4 pos, col;\n  for (int i = 0; i < maxSteps; i++) {\n    pos = eye_o + eye_d*t;\n    // !!! assume box bounds are -0.5 .. 0.5.  pos = (pos-min)/(max-min)\n    // scaling is handled by model transform and already accounted for before we get here.\n    // AABB clip is independent of this and is only used to determine tnear and tfar.\n    pos.xyz = (pos.xyz-(-0.5))/((0.5)-(-0.5)); //0.5 * (pos + 1.0); // map position from [boxMin, boxMax] to [0, 1] coordinates\n\n    uint col = sampleAtlasNearest(textureAtlas, pos);\n\n    // FOR INTERSECTION / PICKING, the FIRST nonzero intensity terminates the raymarch\n\n    if (maxProject != 0) {\n      C = max(col, C);\n    } else {\n      if (col > 0u) {\n        C = col;\n        break;\n      }\n    }\n    t += tstep;\n    numSteps = i;\n\n    if (t > tfar || t > tnear+clipFar ) break;\n  }\n\n  return vec4(float(C));\n}\n\nvoid main() {\n  gl_FragColor = vec4(0.0);\n  vec2 vUv = gl_FragCoord.xy/iResolution.xy;\n\n  vec3 eyeRay_o, eyeRay_d;\n\n  if (isOrtho == 0.0) {\n    // for perspective rays:\n    // world space camera coordinates\n    // transform to object space\n    eyeRay_o = (inverseModelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0)).xyz;\n    eyeRay_d = normalize(pObj - eyeRay_o);\n  } else {\n    // for ortho rays:\n    float zDist = 2.0;\n    eyeRay_d = (inverseModelViewMatrix*vec4(0.0, 0.0, -zDist, 0.0)).xyz;\n    vec4 ray_o = vec4(2.0*vUv - 1.0, 1.0, 1.0);\n    ray_o.xy *= orthoScale;\n    ray_o.x *= iResolution.x/iResolution.y;\n    eyeRay_o = (inverseModelViewMatrix*ray_o).xyz;\n  }\n\n  // -0.5..0.5 is full box. AABB_CLIP lets us clip to a box shaped ROI to look at\n  // I am applying it here at the earliest point so that the ray march does\n  // not waste steps.  For general shaped ROI, this has to be handled more\n  // generally (obviously)\n  vec3 boxMin = AABB_CLIP_MIN;\n  vec3 boxMax = AABB_CLIP_MAX;\n\n  float tnear, tfar;\n  bool hit = intersectBox(eyeRay_o, eyeRay_d, boxMin, boxMax, tnear, tfar);\n\n  if (!hit) {\n    // return background color if ray misses the cube\n    // is this safe to do when there is other geometry / gObjects drawn?\n    gl_FragColor = vec4(0.0); //C1;//vec4(0.0);\n    return;\n  }\n\n  float clipNear = 0.0;//-(dot(eyeRay_o.xyz, eyeNorm) + dNear) / dot(eyeRay_d.xyz, eyeNorm);\n  float clipFar  = 10000.0;//-(dot(eyeRay_o.xyz,-eyeNorm) + dFar ) / dot(eyeRay_d.xyz,-eyeNorm);\n\n  // Sample the depth/position texture\n  // If this is a depth texture, the r component is a depth value. If this is a position texture,\n  // the xyz components are a view space position and w is 1.0 iff there's a mesh at this fragment.\n  vec4 meshPosSample = texture2D(textureDepth, vUv);\n  // Note: we make a different check for whether a mesh is present with depth vs. position textures.\n  // Here's the check for depth textures:\n  bool hasDepthValue = usingPositionTexture == 0 && meshPosSample.r < 1.0;\n\n  // If there's a depth-contributing mesh at this fragment, we may need to terminate the ray early\n  if (hasDepthValue || (usingPositionTexture == 1 && meshPosSample.a > 0.0)) {\n    if (hasDepthValue) {\n      // We're working with a depth value, so we need to convert back to view space position\n      // Get a projection space position from depth and uv, and unproject back to view space\n      vec4 meshProj = vec4(vUv * 2.0 - 1.0, meshPosSample.r * 2.0 - 1.0, 1.0);\n      vec4 meshView = inverseProjMatrix * meshProj;\n      meshPosSample = vec4(meshView.xyz / meshView.w, 1.0);\n    }\n    // Transform the mesh position to object space\n    vec4 meshObj = inverseModelViewMatrix * meshPosSample;\n\n    // Derive a t value for the mesh intersection\n    // NOTE: divides by 0 when `eyeRay_d.z` is 0. Could be mitigated by picking another component\n    //   to derive with when z is 0, but I found this was rare enough in practice to be acceptable.\n    float tMesh = (meshObj.z - eyeRay_o.z) / eyeRay_d.z;\n    if (tMesh < tfar) {\n      clipFar = tMesh - tnear;\n    }\n  }\n\n  vec4 C = integrateVolume(vec4(eyeRay_o,1.0), vec4(eyeRay_d,0.0),\n                          tnear,    tfar, //intersections of box\n                          clipNear, clipFar,\n                          textureAtlas);\n\n  gl_FragColor = C;\n  return;\n}\n";
 export const pickVertexShaderSrc = rayMarchVertexShader;
 export const pickFragmentShaderSrc = rayMarchFragmentShader;
 export const pickShaderUniforms = () => {

package/es/loaders/TiffLoader.js

@@ -11,15 +11,16 @@ function prepareXML(xml) {
   return xml.trim().replace(expr, "").trim();
 }
 function getOME(xml) {
+  if (xml === undefined) {
+    return undefined;
+  }
+  const prepared = prepareXML(xml);
   const parser = new DOMParser();
   try {
-    const xmlDoc = parser.parseFromString(xml, "text/xml");
+    const xmlDoc = parser.parseFromString(prepared, "text/xml");
     return xmlDoc.getElementsByTagName("OME")[0];
   } catch (e) {
-    throw new VolumeLoadError("Could not find OME metadata in TIFF file", {
-      type: VolumeLoadErrorType.INVALID_METADATA,
-      cause: e
-    });
+    return undefined;
   }
 }
 class OMEDims {
@@ -85,6 +86,7 @@ function getOMEDims(imageEl) {
   return dims;
 }
 const getBytesPerSample = type => type === "uint8" ? 1 : type === "uint16" ? 2 : 4;
+const getPixelType = pxSize => pxSize === 1 ? "uint8" : pxSize === 2 ? "uint16" : "uint32";
 
 // Despite the class `TiffLoader` extends, this loader is not threadable, since geotiff internally uses features that
 // aren't available on workers. It uses its own specialized workers anyways.
@@ -95,17 +97,32 @@ class TiffLoader extends ThreadableVolumeLoader {
   }
   async loadOmeDims() {
     if (!this.dims) {
-      const tiff = await fromUrl(this.url, {
+      const tiff = await fromUrl(this.url[0], {
         allowFullFile: true
-      }).catch(wrapVolumeLoadError(`Could not open TIFF file at ${this.url}`, VolumeLoadErrorType.NOT_FOUND));
+      }).catch(wrapVolumeLoadError(`Could not open TIFF file at ${this.url[0]}`, VolumeLoadErrorType.NOT_FOUND));
       // DO NOT DO THIS, ITS SLOW
       // const imagecount = await tiff.getImageCount();
       // read the FIRST image
       const image = await tiff.getImage().catch(wrapVolumeLoadError("Failed to open TIFF image", VolumeLoadErrorType.NOT_FOUND));
-      const tiffimgdesc = prepareXML(image.getFileDirectory().ImageDescription);
-      const omeEl = getOME(tiffimgdesc);
-      const image0El = omeEl.getElementsByTagName("Image")[0];
-      this.dims = getOMEDims(image0El);
+      const omeEl = getOME(image.getFileDirectory().ImageDescription);
+      if (omeEl !== undefined) {
+        const image0El = omeEl.getElementsByTagName("Image")[0];
+        this.dims = getOMEDims(image0El);
+      } else {
+        console.warn("Could not read OME-TIFF metadata from file. Doing our best with base TIFF metadata.");
+        this.dims = new OMEDims();
+        this.dims.sizex = image.getWidth();
+        this.dims.sizey = image.getHeight();
+        // TODO this is a big hack/assumption about only loading multi-source tiffs that are not OMETIFF.
+        // We really have to check each url in the array for sizec to get the total number of channels
+        // See combinedNumChannels in ImageInfo below.
+        // Also compare with how OMEZarrLoader does this.
+        this.dims.sizec = this.url.length > 1 ? this.url.length : 1; // if multiple urls, assume one channel per url
+        this.dims.pixeltype = getPixelType(image.getBytesPerPixel());
+        this.dims.channelnames = Array.from({
+          length: this.dims.sizec
+        }, (_, i) => "Channel" + i);
+      }
     }
     return this.dims;
   }
@@ -189,7 +206,7 @@ class TiffLoader extends ThreadableVolumeLoader {
           sizez: volumeSize.z,
           dimensionOrder: dims.dimensionorder,
           bytesPerSample: getBytesPerSample(dims.pixeltype),
-          url: this.url
+          url: this.url.length > 1 ? this.url[channel] : this.url[0] // if multiple urls, use the channel index to select the right one
         };
         const worker = new Worker(new URL("../workers/FetchTiffWorker", import.meta.url), {
           type: "module"

package/es/loaders/index.js

@@ -24,13 +24,14 @@ export function pathToFileType(path) {
 export async function createVolumeLoader(path, options) {
   const pathString = Array.isArray(path) ? path[0] : path;
   const fileType = options?.fileType || pathToFileType(pathString);
+  const pathArrayForTiffLoader = Array.isArray(path) ? path : [path];
   switch (fileType) {
     case VolumeFileFormat.ZARR:
       return await OMEZarrLoader.createLoader(path, options?.scene, options?.cache, options?.queue, options?.fetchOptions);
     case VolumeFileFormat.JSON:
       return new JsonImageInfoLoader(path, options?.cache);
     case VolumeFileFormat.TIFF:
-      return new TiffLoader(pathString);
+      return new TiffLoader(pathArrayForTiffLoader);
     case VolumeFileFormat.DATA:
       if (!options?.rawArrayOptions) {
         throw new Error("Must provide RawArrayOptions for RawArrayLoader");

package/es/types/Channel.d.ts

@@ -25,7 +25,7 @@ export default class Channel {
     lutTexture: DataTexture;
     rawMin: number;
     rawMax: number;
-    time: number;
+    frame: number;
     constructor(name: string);
     combineLuts(rgbColor: [number, number, number] | number, out?: Uint8Array): Uint8Array;
     setRawDataRange(min: number, max: number): void;
@@ -34,9 +34,9 @@ export default class Channel {
     normalizeRaw(val: number): number;
     getIntensityFromAtlas(x: number, y: number, z: number): number;
     private rebuildDataTexture;
-    setFromAtlas(bitsArray: TypedArray<NumberType>, w: number, h: number, dtype: NumberType, rawMin: number, rawMax: number, subregionSize: Vector3, time?: number): void;
+    setFromAtlas(bitsArray: TypedArray<NumberType>, w: number, h: number, dtype: NumberType, rawMin: number, rawMax: number, subregionSize: Vector3, frame?: number): void;
     private unpackFromAtlas;
-    setFromVolumeData(bitsArray: TypedArray<NumberType>, vx: number, vy: number, vz: number, ax: number, ay: number, rawMin: number, rawMax: number, dtype: NumberType, time?: number): void;
+    setFromVolumeData(bitsArray: TypedArray<NumberType>, vx: number, vy: number, vz: number, ax: number, ay: number, rawMin: number, rawMax: number, dtype: NumberType, frame?: number): void;
     private packToAtlas;
     setLut(lut: Lut): void;
     setColorPalette(palette: Uint8Array): void;

package/es/types/ContourPass.d.ts

@@ -0,0 +1,38 @@
+import { Color, WebGLRenderer, WebGLRenderTarget } from "three";
+import { ColorizeFeature } from "./types.js";
+export default class ContourPass {
+    private pass;
+    private frameToGlobalIdLookup;
+    private frame;
+    constructor();
+    setOutlineColor(color: Color, alpha?: number): void;
+    setOutlineThickness(thickness: number): void;
+    private syncGlobalIdLookup;
+    /**
+     * Sets a frame-dependent lookup for global IDs. Set to a non-null value if
+     * the `highlightedId` represents a global ID instead of a local (pixel) ID.
+     * @param frameToGlobalIdLookup A map from a frame number to a lookup object,
+     * containing a texture and an offset value; see `ColorizeFeature` for more
+     * details. If `null`, the pass will not use a global ID lookup.
+     */
+    setGlobalIdLookup(frameToGlobalIdLookup: ColorizeFeature["frameToGlobalIdLookup"] | null): void;
+    /**
+     * Sets the current frame number. If a global ID lookup has been set
+     * (`setGlobalIdLookup`), this must be updated on every frame.
+     */
+    setFrame(frame: number): void;
+    /**
+     * Sets the current ID that should be highlighted with a contour.
+     * @param id The ID to highlight. If a global ID lookup has been set
+     * (`setGlobalIdLookup`), this should be a global ID.
+     */
+    setHighlightedId(id: number): void;
+    /**
+     * Renders the contour as a transparent pass on the specified target.
+     * @param renderer The WebGL renderer to render with.
+     * @param target The render target to render to.
+     * @param pickBuffer The pick buffer containing the pixel IDs to highlight,
+     * e.g. `PickVolume.getPickBuffer()`.
+     */
+    render(renderer: WebGLRenderer, target: WebGLRenderTarget | null, pickBuffer: WebGLRenderTarget): void;
+}

package/es/types/PickVolume.d.ts

@@ -24,6 +24,7 @@ export default class PickVolume implements VolumeRenderImpl {
      */
     constructor(volume: Volume, settings?: VolumeRenderSettings);
     setChannelToPick(channel: number): void;
+    getChannelToPick(): number;
     getPickBuffer(): WebGLRenderTarget;
     updateVolumeDimensions(): void;
     viewpointMoved(): void;

package/es/types/RenderToBuffer.d.ts

@@ -1,4 +1,8 @@
 import { IUniform, Mesh, OrthographicCamera, PlaneGeometry, WebGLRenderer, Scene, ShaderMaterial, WebGLRenderTarget } from "three";
+export declare enum RenderPassType {
+    OPAQUE = 0,
+    TRANSPARENT = 1
+}
 /**
  * Helper for render passes that just require a fragment shader: accepts a fragment shader and its
  * uniforms, and handles the ceremony of rendering a fullscreen quad with a simple vertex shader.
@@ -11,7 +15,7 @@ export default class RenderToBuffer {
     camera: OrthographicCamera;
     constructor(fragmentSrc: string, uniforms: {
         [key: string]: IUniform;
-    });
+    }, passType?: RenderPassType);
     /** Renders this pass to `target` using `renderer`, or to the canvas if no `target` is given. */
     render(renderer: WebGLRenderer, target?: WebGLRenderTarget): void;
 }

package/es/types/ThreeJsPanel.d.ts

@@ -3,7 +3,9 @@ import TrackballControls from "./TrackballControls.js";
 import { ViewportCorner } from "./types.js";
 export declare const VOLUME_LAYER = 0;
 export declare const MESH_LAYER = 1;
-export declare const OVERLAY_LAYER = 2;
+/** Meshes that do not occlude picking/contour behavior. */
+export declare const MESH_NO_PICK_OCCLUSION_LAYER = 2;
+export declare const OVERLAY_LAYER = 3;
 export type CameraState = {
     position: [number, number, number];
     up: [number, number, number];
@@ -21,7 +23,8 @@ export declare class ThreeJsPanel {
     private meshRenderTarget;
     private meshRenderToBuffer;
     animateFuncs: AnimateFunction[];
-    postAnimateFuncs: AnimateFunction[];
+    postMeshRenderFuncs: AnimateFunction[];
+    overlayRenderFuncs: AnimateFunction[];
     private inRenderLoop;
     private requestedRender;
     hasWebGL2: boolean;

package/es/types/View3d.d.ts

@@ -5,7 +5,6 @@ import { Light } from "./Light.js";
 import Volume from "./Volume.js";
 import { type ColorizeFeature, type VolumeChannelDisplayOptions, type VolumeDisplayOptions, ViewportCorner, RenderMode } from "./types.js";
 import { PerChannelCallback } from "./loaders/IVolumeLoader.js";
-import VolumeLoaderContext from "./workers/VolumeLoaderContext.js";
 import Line3d from "./Line3d.js";
 export declare const RENDERMODE_RAYMARCH = RenderMode.RAYMARCH;
 export declare const RENDERMODE_PATHTRACE = RenderMode.PATHTRACE;
@@ -17,7 +16,6 @@ export interface View3dOptions {
  * @class
  */
 export declare class View3d {
-    loaderContext?: VolumeLoaderContext;
     private canvas3d;
     private scene;
     private backgroundColor;

package/es/types/VolumeDrawable.d.ts

@@ -39,6 +39,7 @@ export default class VolumeDrawable {
     private childObjects;
     private volumeRendering;
     private pickRendering?;
+    private contourRendering;
     private renderMode;
     private renderUpdateListener?;
     constructor(volume: Volume, options: VolumeDisplayOptions);
@@ -71,6 +72,7 @@ export default class VolumeDrawable {
     onAnimate(renderer: WebGLRenderer, camera: PerspectiveCamera | OrthographicCamera, depthTexture?: DepthTexture | Texture | null): void;
     enablePicking(enabled: boolean, channelIndex: number): void;
     fillPickBuffer(renderer: WebGLRenderer, camera: PerspectiveCamera | OrthographicCamera, depthTexture?: DepthTexture | Texture | null): void;
+    drawContours(renderer: WebGLRenderer): void;
     getViewMode(): Axis;
     getIsovalue(channel: number): number | undefined;
     hasIsosurface(channel: number): boolean;

package/es/types/loaders/TiffLoader.d.ts

@@ -34,9 +34,9 @@ export type TiffLoadResult = {
     range: [number, number];
 };
 declare class TiffLoader extends ThreadableVolumeLoader {
-    url: string;
+    url: string[];
     dims?: OMEDims;
-    constructor(url: string);
+    constructor(url: string[]);
     private loadOmeDims;
     loadDims(_loadSpec: LoadSpec): Promise<VolumeDims[]>;
     createImageInfo(_loadSpec: LoadSpec): Promise<LoadedVolumeInfo>;

package/es/types/types.d.ts

@@ -65,6 +65,7 @@ export interface ColorizeFeature {
     featureMin: number;
     featureMax: number;
     outlineColor: Color;
+    outlineAlpha: number;
     outlierColor: Color;
     outOfRangeColor: Color;
     outlierDrawMode: number;

package/es/types/workers/VolumeLoaderContext.d.ts

@@ -78,11 +78,13 @@ declare class VolumeLoaderContext {
 declare class WorkerLoader extends ThreadableVolumeLoader {
     private loaderId;
     private workerHandle;
+    private context;
     private currentLoadId;
     private currentLoadCallback;
     private currentMetadataUpdateCallback;
-    constructor(loaderId: number, workerHandle: SharedLoadWorkerHandle);
+    constructor(loaderId: number, workerHandle: SharedLoadWorkerHandle, context: VolumeLoaderContext);
     private getLoaderId;
+    getContext(): VolumeLoaderContext;
     /** Close and permanently invalidate this loader. */
     close(): void;
     /**

package/es/workers/VolumeLoaderContext.js

@@ -164,7 +164,9 @@ class VolumeLoaderContext {
     const pathString = Array.isArray(path) ? path[0] : path;
     const fileType = options?.fileType || pathToFileType(pathString);
     if (fileType === VolumeFileFormat.TIFF) {
-      return new TiffLoader(pathString);
+      // tiff loader accepts array of paths for separate channel sources
+      const pathArray = Array.isArray(path) ? path : [path];
+      return new TiffLoader(pathArray);
     } else if (fileType === VolumeFileFormat.DATA) {
       if (!options?.rawArrayOptions) {
         throw new Error("Failed to create loader: Must provide RawArrayOptions for RawArrayLoader");
@@ -178,7 +180,7 @@ class VolumeLoaderContext {
     if (loaderId === undefined) {
       throw new Error("Failed to create loader");
     }
-    const loader = new WorkerLoader(loaderId, this.workerHandle);
+    const loader = new WorkerLoader(loaderId, this.workerHandle, this);
     this.loaders.set(loaderId, loader);
     return loader;
   }
@@ -196,10 +198,11 @@ class WorkerLoader extends ThreadableVolumeLoader {
   currentLoadId = -1;
   currentLoadCallback = undefined;
   currentMetadataUpdateCallback = undefined;
-  constructor(loaderId, workerHandle) {
+  constructor(loaderId, workerHandle, context) {
     super();
     this.loaderId = loaderId;
     this.workerHandle = workerHandle;
+    this.context = context;
   }
   getLoaderId() {
     if (this.loaderId === undefined || !this.workerHandle.isOpen) {
@@ -207,6 +210,9 @@ class WorkerLoader extends ThreadableVolumeLoader {
     }
     return this.loaderId;
   }
+  getContext() {
+    return this.context;
+  }
 
   /** Close and permanently invalidate this loader. */
   close() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-core",
-  "version": "3.15.5",
+  "version": "3.15.7",
   "description": "volume renderer for 3d, 4d, or 5d imaging data with OME-Zarr support",
   "main": "es/index.js",
   "type": "module",