@aics/vole-core 3.13.1 → 3.14.0

package/es/VolumeDrawable.js

@@ -2,6 +2,7 @@ import { Vector3, Object3D, Euler, Vector2, Box3 } from "three";
 import MeshVolume from "./MeshVolume.js";
 import RayMarchedAtlasVolume from "./RayMarchedAtlasVolume.js";
 import PathTracedVolume from "./PathTracedVolume.js";
+import PickVolume from "./PickVolume.js";
 import { LUT_ARRAY_LENGTH } from "./Lut.js";
 import { RenderMode } from "./types.js";
 import Atlas2DSlice from "./Atlas2DSlice.js";
@@ -42,7 +43,8 @@ export default class VolumeDrawable {
       return {
         chIndex: index,
         lut: new Uint8Array(LUT_ARRAY_LENGTH),
-        rgbColor: rgbColor
+        rgbColor: rgbColor,
+        selectedID: -1
       };
     });
     this.sceneRoot = new Object3D(); //create an empty container
@@ -60,6 +62,9 @@ export default class VolumeDrawable {
         this.renderMode = RenderMode.RAYMARCH;
         this.volumeRendering = new RayMarchedAtlasVolume(this.volume, this.settings);
     }
+    if (this.pickRendering) {
+      this.pickRendering = new PickVolume(this.volume, this.settings);
+    }
 
     // draw meshes first, and volume last, for blending and depth test reasons with raymarch
     if (options.renderMode === RenderMode.RAYMARCH || options.renderMode === RenderMode.SLICE) {
@@ -78,7 +83,9 @@ export default class VolumeDrawable {
     this.setOptions(options);
     // this.volumeRendering.setZSlice(this.zSlice);
   }
-
+  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.
@@ -201,6 +208,7 @@ export default class VolumeDrawable {
       this.settings.secondaryRayStepSize = secondary;
     }
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.SAMPLING);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.SAMPLING);
   }
   updateScale() {
     const {
@@ -212,6 +220,8 @@ export default class VolumeDrawable {
     // TODO only `RayMarchedAtlasVolume` handles scale properly. Get the others on board too!
     this.volumeRendering.updateVolumeDimensions();
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.TRANSFORM);
+    this.pickRendering?.updateVolumeDimensions();
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.TRANSFORM);
   }
   setOrthoScale(value) {
     if (this.settings.orthoScale === value) {
@@ -219,6 +229,7 @@ export default class VolumeDrawable {
     }
     this.settings.orthoScale = value;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.VIEW);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.VIEW);
   }
   setResolution(x, y) {
     const resolution = new Vector2(x, y);
@@ -226,6 +237,7 @@ export default class VolumeDrawable {
       this.meshVolume.setResolution(x, y);
       this.settings.resolution = resolution;
       this.volumeRendering.updateSettings(this.settings, SettingsFlags.SAMPLING);
+      this.pickRendering?.updateSettings(this.settings, SettingsFlags.SAMPLING);
     }
   }
 
@@ -250,6 +262,7 @@ export default class VolumeDrawable {
       this.meshVolume.setAxisClip(axis, minval, maxval, !!isOrthoAxis);
     }
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.ROI | SettingsFlags.VIEW);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.ROI | SettingsFlags.VIEW);
   }
   modeStringToAxis(mode) {
     const modeToAxis = {
@@ -284,6 +297,7 @@ export default class VolumeDrawable {
     if (this.settings.viewAxis !== axis) {
       this.settings.viewAxis = axis;
       this.volumeRendering.updateSettings(this.settings, SettingsFlags.VIEW);
+      this.pickRendering?.updateSettings(this.settings, SettingsFlags.VIEW);
     }
   }
 
@@ -295,6 +309,7 @@ export default class VolumeDrawable {
     }
     this.settings.isOrtho = isOrtho;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.VIEW);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.VIEW);
   }
   setInterpolationEnabled(active) {
     if (this.settings.useInterpolation === active) {
@@ -302,6 +317,7 @@ export default class VolumeDrawable {
     }
     this.settings.useInterpolation = active;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.SAMPLING);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.SAMPLING);
   }
   setOrthoThickness(value) {
     if (this.renderMode === RenderMode.PATHTRACE) {
@@ -323,6 +339,7 @@ export default class VolumeDrawable {
     this.settings.gammaLevel = glevel;
     this.settings.gammaMax = gmax;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.CAMERA);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.CAMERA);
   }
   setFlipAxes(flipX, flipY, flipZ) {
     const flipAxes = new Vector3(flipX, flipY, flipZ);
@@ -330,6 +347,7 @@ export default class VolumeDrawable {
       this.settings.flipAxes = flipAxes;
       this.meshVolume.setFlipAxes(flipX, flipY, flipZ);
       this.volumeRendering.updateSettings(this.settings, SettingsFlags.TRANSFORM);
+      this.pickRendering?.updateSettings(this.settings, SettingsFlags.TRANSFORM);
     }
   }
   setMaxProjectMode(isMaxProject) {
@@ -338,6 +356,7 @@ export default class VolumeDrawable {
     }
     this.settings.maxProjectMode = isMaxProject;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.VIEW);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.VIEW);
   }
   onAnimate(renderer, camera, depthTexture) {
     // TODO: this is inefficient, as this work is duplicated by threejs.
@@ -351,6 +370,22 @@ export default class VolumeDrawable {
       this.meshVolume.doRender();
     }
   }
+  enablePicking(enabled, channelIndex) {
+    // TODO delete the whole pickRendering, or just enable/disable it and keep it around?
+    // the current implementation will delete and recreate the pickRendering object
+    if (enabled) {
+      if (!this.pickRendering) {
+        this.pickRendering = new PickVolume(this.volume, this.settings);
+      }
+      this.pickRendering.setChannelToPick(channelIndex);
+    } else {
+      this.pickRendering?.cleanup();
+      this.pickRendering = undefined;
+    }
+  }
+  fillPickBuffer(renderer, camera, depthTexture) {
+    this.pickRendering?.doRender(renderer, camera, depthTexture);
+  }
   getViewMode() {
     return this.viewMode;
   }
@@ -360,11 +395,23 @@ export default class VolumeDrawable {
   hasIsosurface(channel) {
     return this.meshVolume.hasIsosurface(channel);
   }
+  setSelectedID(channelIndex, id) {
+    if (this.fusion.length > 0) {
+      // TODO does it make sense to do this for a particular channel?
+      if (id !== this.fusion[channelIndex].selectedID) {
+        this.fusion[channelIndex].selectedID = id;
+        return true;
+      }
+    }
+    return false;
+  }
   fuse() {
     if (!this.volume) {
       return;
     }
     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
   }
   setRenderUpdateListener(callback) {
     this.renderUpdateListener = callback;
@@ -380,10 +427,14 @@ export default class VolumeDrawable {
   updateMaterial() {
     this.volumeRendering.updateActiveChannels(this.fusion, this.volume.channels);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.MATERIAL);
+    this.pickRendering?.updateActiveChannels(this.fusion, this.volume.channels);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.MATERIAL);
   }
   updateLuts() {
     this.volumeRendering.updateActiveChannels(this.fusion, this.volume.channels);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.MATERIAL);
+    this.pickRendering?.updateActiveChannels(this.fusion, this.volume.channels);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.MATERIAL);
   }
   setVoxelSize(values) {
     this.volume.setVoxelSize(values);
@@ -392,6 +443,7 @@ export default class VolumeDrawable {
   cleanup() {
     this.meshVolume.cleanup();
     this.volumeRendering.cleanup();
+    this.pickRendering?.cleanup();
   }
   getChannel(channelIndex) {
     return this.volume.getChannel(channelIndex);
@@ -421,7 +473,8 @@ export default class VolumeDrawable {
     this.fusion[newChannelIndex] = {
       chIndex: newChannelIndex,
       lut: new Uint8Array[LUT_ARRAY_LENGTH](),
-      rgbColor: [this.channelColors[newChannelIndex][0], this.channelColors[newChannelIndex][1], this.channelColors[newChannelIndex][2]]
+      rgbColor: [this.channelColors[newChannelIndex][0], this.channelColors[newChannelIndex][1], this.channelColors[newChannelIndex][2]],
+      selectedID: -1
     };
     this.settings.diffuse[newChannelIndex] = [this.channelColors[newChannelIndex][0], this.channelColors[newChannelIndex][1], this.channelColors[newChannelIndex][2]];
     this.settings.specular[newChannelIndex] = [0, 0, 0];
@@ -442,6 +495,7 @@ export default class VolumeDrawable {
     // if all are nulled out, then hide the volume element from the scene.
     this.settings.visible = !this.fusion.every(elem => elem.rgbColor === 0);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.VIEW);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.VIEW);
 
     // add or remove this channel from the list of required channels to load
     this.updateChannelDataRequired(channelIndex);
@@ -496,6 +550,7 @@ export default class VolumeDrawable {
   setDensity(density) {
     this.settings.density = density;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.MATERIAL);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.MATERIAL);
   }
 
   /**
@@ -507,6 +562,7 @@ export default class VolumeDrawable {
   setBrightness(brightness) {
     this.settings.brightness = brightness;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.CAMERA);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.CAMERA);
   }
   getBrightness() {
     return this.settings.brightness;
@@ -518,18 +574,32 @@ export default class VolumeDrawable {
     this.settings.maskChannelIndex = channelIndex;
     this.updateChannelDataRequired(channelIndex);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.MASK_DATA);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.MASK_DATA);
+  }
+  setChannelColorizeFeature(channelIndex, featureInfo) {
+    // TODO only one channel can ever have this?
+    if (!featureInfo) {
+      this.fusion[channelIndex].feature = undefined;
+    } else {
+      this.fusion[channelIndex].feature = featureInfo;
+    }
+    this.volumeRendering.updateSettings(this.settings, SettingsFlags.MATERIAL);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.MATERIAL);
   }
   setMaskAlpha(maskAlpha) {
     this.settings.maskAlpha = maskAlpha;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.MASK_ALPHA);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.MASK_ALPHA);
   }
   setShowBoundingBox(showBoundingBox) {
     this.settings.showBoundingBox = showBoundingBox;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.BOUNDING_BOX);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.BOUNDING_BOX);
   }
   setBoundingBoxColor(color) {
     this.settings.boundingBoxColor = color;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.BOUNDING_BOX);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.BOUNDING_BOX);
   }
   getIntensity(c, x, y, z) {
     return this.volume.getIntensity(c, x, y, z);
@@ -543,6 +613,7 @@ export default class VolumeDrawable {
     if (this.renderMode === RenderMode.PATHTRACE) {
       this.volumeRendering.onChangeControls();
     }
+    this.pickRendering?.viewpointMoved();
   }
   onEndControls() {
     if (this.renderMode === RenderMode.PATHTRACE) {
@@ -551,11 +622,13 @@ export default class VolumeDrawable {
   }
   onResetCamera() {
     this.volumeRendering.viewpointMoved();
+    this.pickRendering?.viewpointMoved();
   }
   onCameraChanged(fov, focalDistance, apertureSize) {
     if (this.renderMode === RenderMode.PATHTRACE) {
       this.volumeRendering.updateCamera(fov, focalDistance, apertureSize);
     }
+    this.pickRendering?.viewpointMoved();
   }
 
   // values are in 0..1 range
@@ -564,6 +637,7 @@ export default class VolumeDrawable {
     this.settings.bounds.bmax = new Vector3(xmax - 0.5, ymax - 0.5, zmax - 0.5);
     this.meshVolume.updateClipRegion(xmin, xmax, ymin, ymax, zmin, zmax);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.ROI);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.ROI);
   }
   updateLights(state) {
     if (this.renderMode === RenderMode.PATHTRACE) {
@@ -573,6 +647,7 @@ export default class VolumeDrawable {
   setPixelSamplingRate(value) {
     this.settings.pixelSamplingRate = value;
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.SAMPLING);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.SAMPLING);
   }
   setVolumeRendering(newRenderMode) {
     // Skip reassignment of Pathtrace renderer if already using
@@ -588,6 +663,7 @@ export default class VolumeDrawable {
 
     // destroy old resources.
     this.volumeRendering.cleanup();
+    this.pickRendering?.cleanup();
 
     // create new
     switch (newRenderMode) {
@@ -610,6 +686,9 @@ export default class VolumeDrawable {
         });
         break;
     }
+    if (this.pickRendering) {
+      this.pickRendering = new PickVolume(this.volume, this.settings);
+    }
     if (newRenderMode === RenderMode.RAYMARCH || newRenderMode === RenderMode.SLICE) {
       if (this.renderUpdateListener) {
         this.renderUpdateListener(0);
@@ -626,11 +705,13 @@ export default class VolumeDrawable {
     this.settings.translation.copy(xyz);
     this.meshVolume.setTranslation(this.settings.translation);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.TRANSFORM);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.TRANSFORM);
   }
   setRotation(eulerXYZ) {
     this.settings.rotation.copy(eulerXYZ);
     this.meshVolume.setRotation(this.settings.rotation);
     this.volumeRendering.updateSettings(this.settings, SettingsFlags.TRANSFORM);
+    this.pickRendering?.updateSettings(this.settings, SettingsFlags.TRANSFORM);
   }
   setScale(xyz) {
     this.settings.scale.copy(xyz);
@@ -692,6 +773,7 @@ export default class VolumeDrawable {
     if (this.settings.zSlice !== slice && slice < sizez && slice >= 0) {
       this.settings.zSlice = slice;
       this.volumeRendering.updateSettings(this.settings, SettingsFlags.ROI);
+      this.pickRendering?.updateSettings(this.settings, SettingsFlags.ROI);
       return true;
     }
     return false;

package/es/constants/volumeRayMarchPickShader.js

@@ -0,0 +1,91 @@
+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";
+export const pickVertexShaderSrc = rayMarchVertexShader;
+export const pickFragmentShaderSrc = rayMarchFragmentShader;
+export const pickShaderUniforms = () => {
+  return {
+    iResolution: {
+      type: "v2",
+      value: new Vector2(100, 100)
+    },
+    textureRes: {
+      type: "v2",
+      value: new Vector2(1.0, 1.0)
+    },
+    ATLAS_DIMS: {
+      type: "v2",
+      value: new Vector2(6, 6)
+    },
+    AABB_CLIP_MIN: {
+      type: "v3",
+      value: new Vector3(-0.5, -0.5, -0.5)
+    },
+    CLIP_NEAR: {
+      type: "f",
+      value: 0.1
+    },
+    AABB_CLIP_MAX: {
+      type: "v3",
+      value: new Vector3(0.5, 0.5, 0.5)
+    },
+    CLIP_FAR: {
+      type: "f",
+      value: 20.0
+    },
+    textureAtlas: {
+      type: "t",
+      value: new Texture()
+    },
+    textureDepth: {
+      type: "t",
+      value: new Texture()
+    },
+    usingPositionTexture: {
+      type: "i",
+      value: 0
+    },
+    BREAK_STEPS: {
+      type: "i",
+      value: 128
+    },
+    SLICES: {
+      type: "f",
+      value: 50
+    },
+    isOrtho: {
+      type: "f",
+      value: 0.0
+    },
+    orthoThickness: {
+      type: "f",
+      value: 1.0
+    },
+    orthoScale: {
+      type: "f",
+      value: 0.5 // needs to come from ThreeJsPanel's setting
+    },
+    maxProject: {
+      type: "i",
+      value: 0
+    },
+    flipVolume: {
+      type: "v3",
+      value: new Vector3(1.0, 1.0, 1.0)
+    },
+    volumeScale: {
+      type: "v3",
+      value: new Vector3(1.0, 1.0, 1.0)
+    },
+    inverseModelViewMatrix: {
+      type: "m4",
+      value: new Matrix4()
+    },
+    inverseProjMatrix: {
+      type: "m4",
+      value: new Matrix4()
+    }
+  };
+};

package/es/constants/volumeRayMarchShader.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/raymarch.frag' */
-const rayMarchFragmentShader = "\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n#define M_PI 3.14159265358979323846\n\nuniform vec2 iResolution;\nuniform vec2 textureRes;\nuniform float GAMMA_MIN;\nuniform float GAMMA_MAX;\nuniform float GAMMA_SCALE;\nuniform float BRIGHTNESS;\nuniform float DENSITY;\nuniform float maskAlpha;\nuniform vec2 ATLAS_DIMS;\nuniform vec3 AABB_CLIP_MIN;\nuniform float CLIP_NEAR;\nuniform vec3 AABB_CLIP_MAX;\nuniform float CLIP_FAR;\nuniform sampler2D textureAtlas;\nuniform 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 bool interpolationEnabled;\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\nvec4 luma2Alpha(vec4 color, float vmin, float vmax, float C) {\n  float x = dot(color.rgb, vec3(0.2125, 0.7154, 0.0721));\n  // float x = max(color[2], max(color[0],color[1]));\n  float xi = (x-vmin)/(vmax-vmin);\n  xi = clamp(xi,0.0,1.0);\n  float y = pow(xi,C);\n  y = clamp(y,0.0,1.0);\n  color[3] = y;\n  return color;\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\nvec4 sampleAtlasLinear(sampler2D tex, vec4 pos) {\n  float bounds = float(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  // get location within atlas tile\n  // TODO: get loc1 which follows ray to next slice along ray direction\n  // when flipvolume = 1:  pos\n  // when flipvolume = -1: 1-pos\n  vec2 loc0 = ((pos.xy - 0.5) * flipVolume.xy + 0.5) / ATLAS_DIMS;\n\n  // loc ranges from 0 to 1/ATLAS_DIMS\n  // shrink loc0 to within one half edge texel - so as not to sample across edges of tiles.\n  loc0 = vec2(0.5) / textureRes + loc0 * (vec2(1.0) - ATLAS_DIMS / textureRes);\n  \n  // interpolate between two slices\n  float z = (pos.z)*(nSlices-1.0);\n  float z0 = floor(z);\n  float t = z-z0; //mod(z, 1.0);\n  float z1 = min(z0+1.0, nSlices-1.0);\n\n  // flipped:\n  if (flipVolume.z == -1.0) {\n    z0 = nSlices - z0 - 1.0;\n    z1 = nSlices - z1 - 1.0;\n    t = 1.0 - t;\n  }\n\n  // get slice offsets in texture atlas\n  vec2 o0 = offsetFrontBack(z0) + loc0;\n  vec2 o1 = offsetFrontBack(z1) + loc0;\n\n  vec4 slice0Color = texture2D(tex, o0);\n  vec4 slice1Color = texture2D(tex, o1);\n  // NOTE we could premultiply the mask in the fuse function,\n  // but that is slower to update the maskAlpha value than here in the shader.\n  // it is a memory vs perf tradeoff.  Do users really need to update the maskAlpha at realtime speed?\n  float slice0Mask = texture2D(textureAtlasMask, o0).x;\n  float slice1Mask = texture2D(textureAtlasMask, o1).x;\n  // or use max for conservative 0 or 1 masking?\n  float maskVal = mix(slice0Mask, slice1Mask, t);\n  // take mask from 0..1 to alpha..1\n  maskVal = mix(maskVal, 1.0, maskAlpha);\n  vec4 retval = mix(slice0Color, slice1Color, t);\n  // only mask the rgb, not the alpha(?)\n  retval.rgb *= maskVal;\n  return bounds*retval;\n}\n\nvec4 sampleAtlasNearest(sampler2D tex, vec4 pos) {\n  float bounds = float(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  vec4 voxelColor = texture2D(tex, o);\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), max(tmin.x, tmin.z));\n  float smallest_tmax = min(min(tmax.x, tmax.y), min(tmax.x, tmax.z));\n\n  tnear = largest_tmin;\n  tfar = smallest_tmax;\n\n  // use >= here?\n  return(smallest_tmax > largest_tmin);\n}\n\nvec4 accumulate(vec4 col, float s, vec4 C) {\n  float stepScale = (1.0 - powf((1.0-col.w),s));\n  col.w = stepScale;\n  col.xyz *= col.w;\n  col = clamp(col,0.0,1.0);\n\n  C = (1.0-C.w)*col + C;\n  return C;\n}\n\nvec4 integrateVolume(vec4 eye_o,vec4 eye_d,\n                     float tnear,   float tfar,\n                     float clipNear, float clipFar,\n                     sampler2D textureAtlas\n                     ) {\n  vec4 C = vec4(0.0);\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  // We need to be able to scale the alpha contrib with number of ray steps,\n  // in order to make the final color invariant to the step size(?)\n  // use maxSteps (a constant) as the numerator... Not sure if this is sound.\n  float s = 0.5 * float(maxSteps) / csteps;\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    vec4 col = interpolationEnabled ? sampleAtlasLinear(textureAtlas, pos) : sampleAtlasNearest(textureAtlas, pos);\n\n    if (maxProject != 0) {\n      col.xyz *= BRIGHTNESS;\n      C = max(col, C);\n    } else {\n      col = luma2Alpha(col, GAMMA_MIN, GAMMA_MAX, GAMMA_SCALE);\n      col.xyz *= BRIGHTNESS;\n      // for practical use the density only matters for regular volume integration\n      col.w *= DENSITY;\n      C = accumulate(col, s, C);\n    }\n    t += tstep;\n    numSteps = i;\n\n    if (t > tfar || t > tnear+clipFar ) break;\n    if (C.w > 1.0 ) break;\n  }\n\n  return 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  C = clamp(C, 0.0, 1.0);\n  gl_FragColor = C;\n  return;\n}\n";
+const rayMarchFragmentShader = "\n#ifdef GL_ES\nprecision highp float;\n#endif\n\n#define M_PI 3.14159265358979323846\n\nuniform vec2 iResolution;\nuniform vec2 textureRes;\nuniform float GAMMA_MIN;\nuniform float GAMMA_MAX;\nuniform float GAMMA_SCALE;\nuniform float BRIGHTNESS;\nuniform float DENSITY;\nuniform float maskAlpha;\nuniform vec2 ATLAS_DIMS;\nuniform vec3 AABB_CLIP_MIN;\nuniform float CLIP_NEAR;\nuniform vec3 AABB_CLIP_MAX;\nuniform float CLIP_FAR;\nuniform sampler2D textureAtlas;\nuniform 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 bool interpolationEnabled;\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\nvec4 luma2Alpha(vec4 color, float vmin, float vmax, float C) {\n  float x = dot(color.rgb, vec3(0.2125, 0.7154, 0.0721));\n  // float x = max(color[2], max(color[0],color[1]));\n  float xi = (x-vmin)/(vmax-vmin);\n  xi = clamp(xi,0.0,1.0);\n  float y = pow(xi,C);\n  y = clamp(y,0.0,1.0);\n  color[3] = y;\n  return color;\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\nvec4 sampleAtlasLinear(sampler2D tex, vec4 pos) {\n  float bounds = float(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  // get location within atlas tile\n  // TODO: get loc1 which follows ray to next slice along ray direction\n  // when flipvolume = 1:  pos\n  // when flipvolume = -1: 1-pos\n  vec2 loc0 = ((pos.xy - 0.5) * flipVolume.xy + 0.5) / ATLAS_DIMS;\n\n  // loc ranges from 0 to 1/ATLAS_DIMS\n  // shrink loc0 to within one half edge texel - so as not to sample across edges of tiles.\n  loc0 = vec2(0.5) / textureRes + loc0 * (vec2(1.0) - ATLAS_DIMS / textureRes);\n  \n  // interpolate between two slices\n  float z = (pos.z)*(nSlices-1.0);\n  float z0 = floor(z);\n  float t = z-z0; //mod(z, 1.0);\n  float z1 = min(z0+1.0, nSlices-1.0);\n\n  // flipped:\n  if (flipVolume.z == -1.0) {\n    z0 = nSlices - z0 - 1.0;\n    z1 = nSlices - z1 - 1.0;\n    t = 1.0 - t;\n  }\n\n  // get slice offsets in texture atlas\n  vec2 o0 = offsetFrontBack(z0) + loc0;\n  vec2 o1 = offsetFrontBack(z1) + loc0;\n\n  vec4 slice0Color = texture2D(tex, o0);\n  vec4 slice1Color = texture2D(tex, o1);\n  // NOTE we could premultiply the mask in the fuse function,\n  // but that is slower to update the maskAlpha value than here in the shader.\n  // it is a memory vs perf tradeoff.  Do users really need to update the maskAlpha at realtime speed?\n  float slice0Mask = texture2D(textureAtlasMask, o0).x;\n  float slice1Mask = texture2D(textureAtlasMask, o1).x;\n  // or use max for conservative 0 or 1 masking?\n  float maskVal = mix(slice0Mask, slice1Mask, t);\n  // take mask from 0..1 to alpha..1\n  maskVal = mix(maskVal, 1.0, maskAlpha);\n  vec4 retval = mix(slice0Color, slice1Color, t);\n  // only mask the rgb, not the alpha(?)\n  retval.rgb *= maskVal;\n  return bounds*retval;\n}\n\nvec4 sampleAtlasNearest(sampler2D tex, vec4 pos) {\n  float bounds = float(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  vec4 voxelColor = texture2D(tex, o);\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 accumulate(vec4 col, float s, vec4 C) {\n  float stepScale = (1.0 - powf((1.0-col.w),s));\n  col.w = stepScale;\n  col.xyz *= col.w;\n  col = clamp(col,0.0,1.0);\n\n  C = (1.0-C.w)*col + C;\n  return C;\n}\n\nvec4 integrateVolume(vec4 eye_o,vec4 eye_d,\n                     float tnear,   float tfar,\n                     float clipNear, float clipFar,\n                     sampler2D textureAtlas\n                     ) {\n  vec4 C = vec4(0.0);\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  // We need to be able to scale the alpha contrib with number of ray steps,\n  // in order to make the final color invariant to the step size(?)\n  // use maxSteps (a constant) as the numerator... Not sure if this is sound.\n  float s = 0.5 * float(maxSteps) / csteps;\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    vec4 col = interpolationEnabled ? sampleAtlasLinear(textureAtlas, pos) : sampleAtlasNearest(textureAtlas, pos);\n\n    if (maxProject != 0) {\n      col.xyz *= BRIGHTNESS;\n      C = max(col, C);\n    } else {\n      col = luma2Alpha(col, GAMMA_MIN, GAMMA_MAX, GAMMA_SCALE);\n      col.xyz *= BRIGHTNESS;\n      // for practical use the density only matters for regular volume integration\n      col.w *= DENSITY;\n      C = accumulate(col, s, C);\n    }\n    t += tstep;\n    numSteps = i;\n\n    if (t > tfar || t > tnear+clipFar ) break;\n    if (C.w > 1.0 ) break;\n  }\n\n  return 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  C = clamp(C, 0.0, 1.0);\n  gl_FragColor = C;\n  return;\n}\n";
 export const rayMarchingVertexShaderSrc = rayMarchVertexShader;
 export const rayMarchingFragmentShaderSrc = rayMarchFragmentShader;
 export const rayMarchingShaderUniforms = () => {

package/es/types/FusedChannelData.d.ts

@@ -11,12 +11,14 @@ export default class FusedChannelData {
     private fuseMaterialF;
     private fuseMaterialUI;
     private fuseMaterialI;
+    private fuseMaterialColorizeUI;
     private fuseMaterialProps;
     private fuseScene;
     private quadCamera;
     private fuseRenderTarget;
     constructor(atlasX: number, atlasY: number);
     private setupFuseMaterial;
+    private setupFuseColorizeMaterial;
     getFusedTexture(): Texture;
     cleanup(): void;
     private getShader;

package/es/types/PickVolume.d.ts

@@ -0,0 +1,43 @@
+import { DepthTexture, Group, OrthographicCamera, PerspectiveCamera, Texture, WebGLRenderer, WebGLRenderTarget } from "three";
+import { Volume } from "./index.js";
+import Channel from "./Channel.js";
+import type { VolumeRenderImpl } from "./VolumeRenderImpl.js";
+import type { FuseChannel } from "./types.js";
+import { VolumeRenderSettings, SettingsFlags } from "./VolumeRenderSettings.js";
+export default class PickVolume implements VolumeRenderImpl {
+    private settings;
+    volume: Volume;
+    private geometry;
+    private geometryMesh;
+    private geometryTransformNode;
+    private scene;
+    private uniforms;
+    private emptyPositionTex;
+    needRedraw: boolean;
+    private pickBuffer;
+    private channelToPick;
+    /**
+     * Creates a new PickVolume.
+     * @param volume The volume that this renderer should render data from.
+     * @param settings Optional settings object. If set, updates the renderer with
+     * the given settings. Otherwise, uses the default VolumeRenderSettings.
+     */
+    constructor(volume: Volume, settings?: VolumeRenderSettings);
+    setChannelToPick(channel: number): void;
+    getPickBuffer(): WebGLRenderTarget;
+    updateVolumeDimensions(): void;
+    viewpointMoved(): void;
+    updateSettings(newSettings: VolumeRenderSettings, dirtyFlags?: number | SettingsFlags): void;
+    /**
+     * Creates the geometry mesh and material for rendering the volume.
+     * @param uniforms object containing uniforms to pass to the shader material.
+     * @returns the new geometry and geometry mesh.
+     */
+    private createGeometry;
+    cleanup(): void;
+    doRender(renderer: WebGLRenderer, camera: PerspectiveCamera | OrthographicCamera, depthTexture?: DepthTexture | Texture | null): void;
+    get3dObject(): Group;
+    private setUniform;
+    updateActiveChannels(_channelcolors: FuseChannel[], _channeldata: Channel[]): void;
+    setRenderUpdateListener(_listener?: ((iteration: number) => void) | undefined): void;
+}

package/es/types/ThreeJsPanel.d.ts

@@ -1,4 +1,4 @@
-import { Color, Event, EventListener, OrthographicCamera, PerspectiveCamera, WebGLRenderer, Scene, DepthTexture } from "three";
+import { Color, DepthTexture, Event, EventListener, OrthographicCamera, PerspectiveCamera, Scene, WebGLRenderer, WebGLRenderTarget } from "three";
 import TrackballControls from "./TrackballControls.js";
 import { ViewportCorner } from "./types.js";
 export declare const VOLUME_LAYER = 0;
@@ -104,4 +104,5 @@ export declare class ThreeJsPanel {
     stopRenderLoop(): void;
     removeControlHandlers(): void;
     setControlHandlers(onstart: EventListener<Event, "start", TrackballControls>, onchange: EventListener<Event, "change", TrackballControls>, onend: EventListener<Event, "end", TrackballControls>): void;
+    hitTest(offsetX: number, offsetY: number, pickBuffer: WebGLRenderTarget | undefined): number;
 }

package/es/types/View3d.d.ts

@@ -2,7 +2,7 @@ import { CameraState } from "./ThreeJsPanel.js";
 import VolumeDrawable from "./VolumeDrawable.js";
 import { Light } from "./Light.js";
 import Volume from "./Volume.js";
-import { type VolumeChannelDisplayOptions, type VolumeDisplayOptions, ViewportCorner, RenderMode } from "./types.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";
 export declare const RENDERMODE_RAYMARCH = RenderMode.RAYMARCH;
@@ -108,6 +108,13 @@ export declare class View3d {
      * @param {number} maskChannelIndex
      */
     setVolumeChannelAsMask(volume: Volume, maskChannelIndex: number): void;
+    /**
+     * @description Set the necessary data to colorize a segmentation channel, or turn off colorization.
+     * @param volume The volume to set the colorize feature for
+     * @param channelIndex The channel that will be colorized. This only makes sense for segmentation volumes.
+     * @param featureInfo A collection of all parameters necessary to colorize the channel. Pass null to turn off colorization.
+     */
+    setChannelColorizeFeature(volume: Volume, channelIndex: number, featureInfo: ColorizeFeature | null): void;
     /**
      * Set voxel dimensions - controls volume scaling. For example, the physical measurements of the voxels from a biological data set
      * @param {Object} volume
@@ -357,5 +364,26 @@ export declare class View3d {
     hasWebGL2(): boolean;
     handleKeydown: (event: KeyboardEvent) => void;
     removeEventListeners(): void;
+    /**
+     * @description Set the selected ID for a given channel.  This is used to change the appearance of the volume where that id is.
+     * @param volume the image to set the selected ID on
+     * @param channel the channel index where the selected ID is
+     * @param id the selected id
+     */
+    setSelectedID(volume: Volume, channel: number, id: number): void;
+    /**
+     * @description Enable or disable picking on a volume.  If enabled, the channelIndex is used to determine which channel to pick.
+     * @param volume the image to enable picking on
+     * @param enabled set true to enable, false to disable
+     * @param channelIndex if enabled is set to true, pass the pickable channel index here
+     */
+    enablePicking(volume: Volume, enabled: boolean, channelIndex?: number): void;
+    /**
+     * @description This function is used to determine if a mouse event occurred over a volume object.
+     * @param offsetX mouse event x coordinate
+     * @param offsetY mouse event y coordinate
+     * @returns id of object that is under offsetX, offsetY. -1 if none
+     */
+    hitTest(offsetX: number, offsetY: number): number;
     private setupGui;
 }