@aics/vole-core 3.12.4

package/es/RayMarchedAtlasVolume.js

@@ -0,0 +1,250 @@
+import { Box3, Box3Helper, BoxGeometry, BufferAttribute, BufferGeometry, Color, DataTexture, Group, LineBasicMaterial, LineSegments, Matrix4, Mesh, ShaderMaterial, Vector2, Vector3 } from "three";
+import FusedChannelData from "./FusedChannelData.js";
+import { rayMarchingVertexShaderSrc, rayMarchingFragmentShaderSrc, rayMarchingShaderUniforms } from "./constants/volumeRayMarchShader.js";
+import { VolumeRenderSettings, SettingsFlags } from "./VolumeRenderSettings.js";
+const BOUNDING_BOX_DEFAULT_COLOR = new Color(0xffff00);
+export default class RayMarchedAtlasVolume {
+  /**
+   * Creates a new RayMarchedAtlasVolume.
+   * @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, settings = new VolumeRenderSettings(volume)) {
+    this.volume = volume;
+    this.uniforms = rayMarchingShaderUniforms();
+    [this.geometry, this.geometryMesh] = this.createGeometry(this.uniforms);
+    this.boxHelper = new Box3Helper(new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5)), BOUNDING_BOX_DEFAULT_COLOR);
+    this.boxHelper.updateMatrixWorld();
+    this.boxHelper.visible = false;
+    this.tickMarksMesh = this.createTickMarks();
+    this.tickMarksMesh.updateMatrixWorld();
+    this.tickMarksMesh.visible = false;
+    this.geometryTransformNode = new Group();
+    this.geometryTransformNode.name = "VolumeContainerNode";
+    this.geometryTransformNode.add(this.boxHelper, this.tickMarksMesh, this.geometryMesh);
+    this.emptyPositionTex = new DataTexture(new Uint8Array(Array(16).fill(0)), 2, 2);
+    this.settings = settings;
+    this.updateSettings(settings, SettingsFlags.ALL);
+    // TODO this is doing *more* redundant work! Fix?
+    this.updateVolumeDimensions();
+  }
+  updateVolumeDimensions() {
+    const {
+      normPhysicalSize,
+      normRegionSize
+    } = this.volume;
+    // Set offset
+    this.geometryMesh.position.copy(this.volume.getContentCenter().multiply(this.settings.scale));
+    // Set scale
+    const fullRegionScale = normPhysicalSize.clone().multiply(this.settings.scale);
+    this.geometryMesh.scale.copy(fullRegionScale).multiply(normRegionSize);
+    this.setUniform("volumeScale", normPhysicalSize);
+    this.boxHelper.box.set(fullRegionScale.clone().multiplyScalar(-0.5), fullRegionScale.clone().multiplyScalar(0.5));
+    this.tickMarksMesh.scale.copy(fullRegionScale);
+    this.settings && this.updateSettings(this.settings, SettingsFlags.ROI);
+
+    // Set atlas dimension uniforms
+    const {
+      atlasTileDims,
+      subregionSize
+    } = this.volume.imageInfo;
+    const atlasSize = new Vector2(subregionSize.x, subregionSize.y).multiply(atlasTileDims);
+    this.setUniform("ATLAS_DIMS", atlasTileDims);
+    this.setUniform("textureRes", atlasSize);
+    this.setUniform("SLICES", this.volume.imageInfo.volumeSize.z);
+
+    // (re)create channel data
+    if (!this.channelData || this.channelData.width !== atlasSize.x || this.channelData.height !== atlasSize.y) {
+      this.channelData?.cleanup();
+      this.channelData = new FusedChannelData(atlasSize.x, atlasSize.y);
+    }
+  }
+  viewpointMoved() {
+    return;
+  }
+  updateSettings(newSettings, dirtyFlags) {
+    if (dirtyFlags === undefined) {
+      dirtyFlags = SettingsFlags.ALL;
+    }
+    this.settings = newSettings;
+    if (dirtyFlags & SettingsFlags.VIEW) {
+      this.geometryMesh.visible = this.settings.visible;
+      // Configure ortho
+      this.setUniform("orthoScale", this.settings.orthoScale);
+      this.setUniform("isOrtho", this.settings.isOrtho ? 1.0 : 0.0);
+      // Ortho line thickness
+      const axis = this.settings.viewAxis;
+      if (this.settings.isOrtho && axis) {
+        // TODO: Does this code do any relevant changes?
+        const maxVal = this.settings.bounds.bmax[axis];
+        const minVal = this.settings.bounds.bmin[axis];
+        const thicknessPct = maxVal - minVal;
+        this.setUniform("orthoThickness", thicknessPct);
+      } else {
+        this.setUniform("orthoThickness", 1.0);
+      }
+    }
+    if (dirtyFlags & SettingsFlags.VIEW || dirtyFlags & SettingsFlags.BOUNDING_BOX) {
+      // Update tick marks with either view or bounding box changes
+      this.tickMarksMesh.visible = this.settings.showBoundingBox && !this.settings.isOrtho;
+      this.setUniform("maxProject", this.settings.maxProjectMode ? 1 : 0);
+    }
+    if (dirtyFlags & SettingsFlags.BOUNDING_BOX) {
+      // Configure bounding box
+      this.boxHelper.visible = this.settings.showBoundingBox;
+      const colorVector = this.settings.boundingBoxColor;
+      const newBoxColor = new Color(colorVector[0], colorVector[1], colorVector[2]);
+      this.boxHelper.material.color = newBoxColor;
+      this.tickMarksMesh.material.color = newBoxColor;
+    }
+    if (dirtyFlags & SettingsFlags.TRANSFORM) {
+      // Set rotation and translation
+      this.geometryTransformNode.position.copy(this.settings.translation);
+      this.geometryTransformNode.rotation.copy(this.settings.rotation);
+      // TODO this does some redundant work. Including a new call to this very function! Fix?
+      this.updateVolumeDimensions();
+      this.setUniform("flipVolume", this.settings.flipAxes);
+    }
+    if (dirtyFlags & SettingsFlags.MATERIAL) {
+      this.setUniform("DENSITY", this.settings.density);
+    }
+    if (dirtyFlags & SettingsFlags.CAMERA) {
+      // TODO brightness and exposure should be the same thing?
+      this.setUniform("BRIGHTNESS", this.settings.brightness * 2.0);
+      // Gamma
+      this.setUniform("GAMMA_MIN", this.settings.gammaMin);
+      this.setUniform("GAMMA_MAX", this.settings.gammaMax);
+      this.setUniform("GAMMA_SCALE", this.settings.gammaLevel);
+    }
+    if (dirtyFlags & SettingsFlags.ROI) {
+      // Normalize and set bounds
+      const bounds = this.settings.bounds;
+      const {
+        normRegionSize,
+        normRegionOffset
+      } = this.volume;
+      const offsetToCenter = normRegionSize.clone().divideScalar(2).add(normRegionOffset).subScalar(0.5);
+      const bmin = bounds.bmin.clone().sub(offsetToCenter).divide(normRegionSize).clampScalar(-0.5, 0.5);
+      const bmax = bounds.bmax.clone().sub(offsetToCenter).divide(normRegionSize).clampScalar(-0.5, 0.5);
+      this.setUniform("AABB_CLIP_MIN", bmin);
+      this.setUniform("AABB_CLIP_MAX", bmax);
+    }
+    if (dirtyFlags & SettingsFlags.SAMPLING) {
+      this.setUniform("interpolationEnabled", this.settings.useInterpolation);
+      this.setUniform("iResolution", this.settings.resolution);
+    }
+    if (dirtyFlags & SettingsFlags.MASK_ALPHA) {
+      this.setUniform("maskAlpha", this.settings.maskChannelIndex < 0 ? 1.0 : this.settings.maskAlpha);
+    }
+    if (dirtyFlags & SettingsFlags.MASK_DATA) {
+      this.channelData.setChannelAsMask(this.settings.maskChannelIndex, this.volume.getChannel(this.settings.maskChannelIndex));
+    }
+  }
+
+  /**
+   * 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.
+   */
+  createGeometry(uniforms) {
+    const geom = new BoxGeometry(1.0, 1.0, 1.0);
+    const mesh = new Mesh(geom);
+    mesh.name = "Volume";
+
+    // shader,vtx and frag.
+    const vtxsrc = rayMarchingVertexShaderSrc;
+    const fgmtsrc = rayMarchingFragmentShaderSrc;
+    const threeMaterial = new ShaderMaterial({
+      uniforms: uniforms,
+      vertexShader: vtxsrc,
+      fragmentShader: fgmtsrc,
+      transparent: true,
+      depthTest: true,
+      depthWrite: false
+    });
+    mesh.material = threeMaterial;
+    return [geom, mesh];
+  }
+  createTickMarks() {
+    // Length of tick mark lines in world units
+    const TICK_LENGTH = 0.025;
+    const {
+      tickMarkPhysicalLength,
+      physicalScale,
+      normPhysicalSize
+    } = this.volume;
+    const numTickMarks = physicalScale / tickMarkPhysicalLength;
+    const vertices = [];
+    const tickEndY = TICK_LENGTH / normPhysicalSize.y + 0.5;
+    const tickSpacingX = 1 / (normPhysicalSize.x * numTickMarks);
+    for (let x = -0.5; x <= 0.5; x += tickSpacingX) {
+      // prettier-ignore
+      vertices.push(x, 0.5, 0.5, x, tickEndY, 0.5, x, -0.5, -0.5, x, -tickEndY, -0.5, x, 0.5, -0.5, x, tickEndY, -0.5, x, -0.5, 0.5, x, -tickEndY, 0.5);
+    }
+    const tickEndX = TICK_LENGTH / normPhysicalSize.x + 0.5;
+    const tickSpacingY = 1 / (normPhysicalSize.y * numTickMarks);
+    for (let y = 0.5; y >= -0.5; y -= tickSpacingY) {
+      // prettier-ignore
+      vertices.push(-0.5, y, 0.5, -tickEndX, y, 0.5, -0.5, y, -0.5, -tickEndX, y, -0.5, 0.5, y, -0.5, tickEndX, y, -0.5, 0.5, y, 0.5, tickEndX, y, 0.5);
+    }
+    const tickSpacingZ = 1 / (normPhysicalSize.z * numTickMarks);
+    for (let z = 0.5; z >= -0.5; z -= tickSpacingZ) {
+      // prettier-ignore
+      vertices.push(-0.5, 0.5, z, -tickEndX, 0.5, z, -0.5, -0.5, z, -tickEndX, -0.5, z, 0.5, -0.5, z, tickEndX, -0.5, z, 0.5, 0.5, z, tickEndX, 0.5, z);
+    }
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new BufferAttribute(new Float32Array(vertices), 3));
+    return new LineSegments(geometry, new LineBasicMaterial({
+      color: BOUNDING_BOX_DEFAULT_COLOR
+    }));
+  }
+  cleanup() {
+    this.geometry.dispose();
+    this.geometryMesh.material.dispose();
+    this.channelData.cleanup();
+  }
+  doRender(renderer, camera, depthTexture) {
+    if (!this.geometryMesh.visible) {
+      return;
+    }
+    const depthTex = depthTexture ?? this.emptyPositionTex;
+    this.setUniform("textureDepth", depthTex);
+    this.setUniform("usingPositionTexture", depthTex.isDepthTexture ? 0 : 1);
+    this.setUniform("CLIP_NEAR", camera.near);
+    this.setUniform("CLIP_FAR", camera.far);
+    this.channelData.gpuFuse(renderer);
+    this.setUniform("textureAtlas", this.channelData.getFusedTexture());
+    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);
+  }
+  get3dObject() {
+    return this.geometryTransformNode;
+  }
+
+  //////////////////////////////////////////
+  //////////////////////////////////////////
+
+  setUniform(name, value) {
+    if (!this.uniforms[name]) {
+      return;
+    }
+    this.uniforms[name].value = value;
+  }
+
+  // channelcolors is array of {rgbColor, lut} and channeldata is volume.channels
+  updateActiveChannels(channelcolors, channeldata) {
+    this.channelData.fuse(channelcolors, channeldata);
+
+    // update to fused texture
+    this.setUniform("textureAtlas", this.channelData.getFusedTexture());
+    this.setUniform("textureAtlasMask", this.channelData.maskTexture);
+  }
+  setRenderUpdateListener(_listener) {
+    return;
+  }
+}

package/es/RenderToBuffer.js

@@ -0,0 +1,31 @@
+import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial } from "three";
+import { renderToBufferVertShader } from "./constants/basicShaders.js";
+
+/**
+ * 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) {
+    this.scene = new Scene();
+    this.geometry = new PlaneGeometry(2, 2);
+    this.material = new ShaderMaterial({
+      vertexShader: renderToBufferVertShader,
+      fragmentShader: fragmentSrc,
+      uniforms
+    });
+    this.material.depthWrite = false;
+    this.material.depthTest = false;
+    this.mesh = new Mesh(this.geometry, this.material);
+    this.scene.add(this.mesh);
+    this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  }
+
+  /** Renders this pass to `target` using `renderer`, or to the canvas if no `target` is given. */
+  render(renderer, target) {
+    renderer.setRenderTarget(target ?? null);
+    renderer.render(this.scene, this.camera);
+    // Reset the render target to the screen
+    renderer.setRenderTarget(null);
+  }
+}