[WIP] Different radius per point

src/hooks/usePointCanvas.ts

@@ -135,10 +135,12 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
         case ActionType.POINT_BRIGHTNESS:
             newCanvas.pointBrightness = action.brightness;
             newCanvas.resetPointColors();
+            newCanvas.updateSelectedPointIndices();
             break;
         case ActionType.POINTS_POSITIONS:
             newCanvas.setPointsPositions(action.positions);
             newCanvas.resetPointColors();
+            newCanvas.updateSelectedPointIndices();
             break;
         case ActionType.REMOVE_ALL_TRACKS:
             newCanvas.removeAllTracks();

src/lib/PointCanvas.ts

@@ -1,14 +1,14 @@
 import {
-    AdditiveBlending,
     AxesHelper,
     BufferGeometry,
     Color,
     Float32BufferAttribute,
     FogExp2,
+    NormalBlending,
     PerspectiveCamera,
     Points,
-    PointsMaterial,
     Scene,
+    ShaderMaterial,
     SRGBColorSpace,
     TextureLoader,
     Vector2,
@@ -19,10 +19,12 @@ import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
 import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
 import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
+// import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
 
 import { Track } from "@/lib/three/Track";
 import { PointSelector, PointSelectionMode } from "@/lib/PointSelector";
 import { ViewerState } from "./ViewerState";
+import { numberOfValuesPerPoint } from "./TrackManager";
 
 // TrackType is a place to store the visual information about a track and any track-specific attributes
 type TrackType = {
@@ -51,6 +53,7 @@ export class PointCanvas {
     readonly fetchedRootTrackIds = new Set<number>();
     // Needed to skip fetches for point IDs that been selected.
     readonly fetchedPointIds = new Set<number>();
+    selectedPointIndices: number[] = [];
 
     // All the point IDs that have been selected.
     // PointCanvas.selector.selection is the transient array of selected
@@ -80,16 +83,54 @@ export class PointCanvas {
         );
 
         const pointsGeometry = new BufferGeometry();
-        const pointsMaterial = new PointsMaterial({
-            size: 16.0,
-            map: new TextureLoader().load("/spark1.png"),
-            vertexColors: true,
-            blending: AdditiveBlending,
+        // const pointsMaterial = new PointsMaterial({
+        //     size: 100.0,
+        //     map: new TextureLoader().load("/spark1.png"),
+        //     vertexColors: true,
+        //     blending: NormalBlending,
+        //     depthTest: false,
+        //     alphaTest: 0.1,
+        //     depthWrite: true,
+        //     transparent: true,
+        // });
+        const pointVertexShader = `
+            attribute float size;
+            attribute vec3 color; //Declare the color attribute
+            varying vec3 vColor;
+
+            void main() {
+            vColor = color;
+            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+            gl_PointSize = size * (300.0 / -mvPosition.z); // Adjust scaling factor
+            gl_Position = projectionMatrix * mvPosition;
+            }
+        `;
+        const pointFragmentShader = `
+            varying vec3 vColor;
+            uniform sampler2D pointTexture;
+
+            void main() {
+            gl_FragColor = vec4(vColor, 1.0);
+            gl_FragColor = gl_FragColor * texture2D(pointTexture, gl_PointCoord);
+            if (gl_FragColor.a < .5) discard;
+            }
+        `;
+
+        const shaderMaterial = new ShaderMaterial({
+            uniforms: {
+                color: { value: new Color(0xffffff) },
+                pointTexture: { value: new TextureLoader().load("/spark1.png") },
+            },
+            vertexShader: pointVertexShader,
+            fragmentShader: pointFragmentShader,
+
+            blending: NormalBlending,
             depthTest: true,
-            alphaTest: 0.1,
-            transparent: true,
+            // alphaTest: 0.1, //no effect
+            depthWrite: true, // true by default
+            transparent: false,
         });
-        this.points = new Points(pointsGeometry, pointsMaterial);
+        this.points = new Points(pointsGeometry, shaderMaterial);
 
         this.scene.add(new AxesHelper(128));
         this.scene.add(this.points);
@@ -101,13 +142,15 @@ export class PointCanvas {
             new Vector2(width, height), // resolution
             0.4, // strength
             0, // radius
-            0, // threshold
+            0.2, // threshold
         );
         const outputPass = new OutputPass();
         this.composer = new EffectComposer(this.renderer);
         this.composer.addPass(renderModel);
         this.composer.addPass(this.bloomPass);
         this.composer.addPass(outputPass);
+        // const saoPass = new SAOPass( this.scene, this.camera, false, true );
+        // this.composer.addPass( saoPass );
 
         // Set up controls
         this.controls = new OrbitControls(this.camera, this.renderer.domElement);
@@ -165,6 +208,18 @@ export class PointCanvas {
         this.controls.update();
     };
 
+    updateSelectedPointIndices() {
+        const idOffset = this.curTime * this.maxPointsPerTimepoint;
+        this.selectedPointIndices = [];
+        for (const track of this.tracks.values()) {
+            if (this.curTime < track.threeTrack.startTime || this.curTime > track.threeTrack.endTime) continue;
+            const timeIndex = this.curTime - track.threeTrack.startTime;
+            const pointId = track.threeTrack.pointIds[timeIndex];
+            this.selectedPointIndices.push(pointId - idOffset);
+        }
+        this.highlightPoints(this.selectedPointIndices);
+    }
+
     highlightPoints(points: number[]) {
         const colorAttribute = this.points.geometry.getAttribute("color");
         const color = new Color();
@@ -211,18 +266,31 @@ export class PointCanvas {
         if (!geometry.hasAttribute("color") || geometry.getAttribute("color").count !== maxPointsPerTimepoint) {
             geometry.setAttribute("color", new Float32BufferAttribute(new Float32Array(3 * maxPointsPerTimepoint), 3));
         }
+        if (!geometry.hasAttribute("size") || geometry.getAttribute("size").count !== maxPointsPerTimepoint) {
+            geometry.setAttribute("size", new Float32BufferAttribute(new Float32Array(maxPointsPerTimepoint), 1));
+        }
         // Initialize all the colors immediately.
         this.resetPointColors();
     }
 
     setPointsPositions(data: Float32Array) {
-        const numPoints = data.length / 3;
+        const numPoints = data.length / numberOfValuesPerPoint;
         const geometry = this.points.geometry;
         const positions = geometry.getAttribute("position");
+        const sizes = geometry.getAttribute("size");
+        const num = numberOfValuesPerPoint;
         for (let i = 0; i < numPoints; i++) {
-            positions.setXYZ(i, data[3 * i], data[3 * i + 1], data[3 * i + 2]);
+            positions.setXYZ(i, data[num * i], data[num * i + 1], data[num * i + 2]);
+            if (num == 4) {
+                sizes.setX(i, 28 * data[4 * i + 3]);
+            } else {
+                sizes.setX(i, 30);
+            }
+            // factor of 21 used to match the desired size of the points
+            // console.log("plotted point %d on (%d,%d,%d) with size %d (=21 * %d)", i,data[4 * i], data[4 * i + 1], data[4 * i + 2],11*data[4 * i + 3],data[4 * i + 3]);
         }
         positions.needsUpdate = true;
+        sizes.needsUpdate = true;
         geometry.setDrawRange(0, numPoints);
         this.points.geometry.computeBoundingSphere();
     }

src/lib/TrackManager.ts

@@ -1,5 +1,6 @@
 // @ts-expect-error - types for zarr are not working right now, but a PR is open https://github.com/gzuidhof/zarr.js/pull/149
 import { ZarrArray, slice, Slice, openArray, NestedArray } from "zarr";
+export let numberOfValuesPerPoint = 3; // 3 if points=[x,y,z], 4 if points=[x,y,z,size]
 
 class SparseZarrArray {
     store: string;
@@ -83,7 +84,7 @@ export class TrackManager {
         this.tracksToPoints = tracksToPoints;
         this.tracksToTracks = tracksToTracks;
         this.numTimes = points.shape[0];
-        this.maxPointsPerTimepoint = points.shape[1] / 3;
+        this.maxPointsPerTimepoint = points.shape[1] / numberOfValuesPerPoint; // default is /3
     }
 
     async fetchPointsAtTime(timeIndex: number): Promise<Float32Array> {
@@ -97,9 +98,9 @@ export class TrackManager {
         let endIndex = points.findIndex((value) => value <= -127);
         if (endIndex === -1) {
             endIndex = points.length;
-        } else if (endIndex % 3 !== 0) {
-            console.error("invalid points - %d not divisible by 3", endIndex);
-            endIndex -= endIndex % 3;
+        } else if (endIndex % numberOfValuesPerPoint !== 0) {
+            console.error("invalid points - %d not divisible by %d", endIndex, numberOfValuesPerPoint);
+            endIndex -= endIndex % numberOfValuesPerPoint;
         }
         return points.subarray(0, endIndex);
     }
@@ -144,15 +145,45 @@ export class TrackManager {
 export async function loadTrackManager(url: string) {
     let trackManager;
     try {
+        // initialize variables
+        let pathName = "...";
+        let numValues = 0;
+
+        // very suboptimal way of checking whether the zarr store has a path "points" or "points_with_radius":
+        try {
+            await openArray({
+                store: url,
+                path: "points",
+                mode: "r",
+            });
+            pathName = "points";
+            numValues = 3;
+            console.log("succeeded - points loaded");
+        } catch (error) {
+            pathName = "points_with_radius";
+            numValues = 4;
+            console.log("not succeeded - point_with_radius loaded");
+        }
+
+        // set the global variable 'numberOfValuesPerPoint' to either 3 or 4, dependent on the data
+        numberOfValuesPerPoint = numValues;
+
+        // load the actual points, dependent on "pathName"
         const points = await openArray({
             store: url,
-            path: "points",
+            path: pathName,
             mode: "r",
         });
+
         const pointsToTracks = await openSparseZarrArray(url, "points_to_tracks", false);
         const tracksToPoints = await openSparseZarrArray(url, "tracks_to_points", true);
         const tracksToTracks = await openSparseZarrArray(url, "tracks_to_tracks", true);
+
+        // make trackManager, and reset "maxPointsPerTimepoint", because tm constructor does points/3
         trackManager = new TrackManager(url, points, pointsToTracks, tracksToPoints, tracksToTracks);
+        if (numberOfValuesPerPoint == 4) {
+            trackManager.maxPointsPerTimepoint = trackManager.points.shape[1] / numberOfValuesPerPoint;
+        }
     } catch (err) {
         console.error("Error opening TrackManager: %s", err);
         trackManager = null;

src/lib/ViewerState.ts

@@ -1,6 +1,10 @@
-export const DEFAULT_ZARR_URL =
-    "https://sci-imaging-vis-public-demo-data.s3.us-west-2.amazonaws.com" +
-    "/points-web-viewer/sparse-zarr-v2/ZSNS001_tracks_bundle.zarr";
+// export const DEFAULT_ZARR_URL =
+//     "https://sci-imaging-vis-public-demo-data.s3.us-west-2.amazonaws.com" +
+//     "/points-web-viewer/sparse-zarr-v2/ZSNS001_tracks_bundle.zarr";
+
+// public Ascidian dataset that contains radius:
+export const DEFAULT_ZARR_URL = "https://public.czbiohub.org/royerlab/zoo/Ascidian/tracks_withSize_bundle.zarr/";
+// export const DEFAULT_ZARR_URL = "https://public.czbiohub.org/royerlab/zoo/misc/tracks_withSize_3dots_bundle.zarr/";
 
 const HASH_KEY = "viewerState";
 

src/lib/three/Track.ts

@@ -16,6 +16,9 @@ export class Track extends Mesh {
     type = "Track";
     declare geometry: TrackGeometry;
     declare material: TrackMaterial;
+    pointIds: Int32Array = new Int32Array(0);
+    startTime: number = -1;
+    endTime: number = -1;
 
     static new(positions: Float32Array, pointIDs: Int32Array, maxPointsPerTimepoint: number) {
         const geometry = new TrackGeometry();
@@ -53,6 +56,12 @@ export class Track extends Mesh {
         track.geometry.setColors(colors);
         track.geometry.setTime(time);
         track.geometry.computeBoundingSphere();
+
+        track.pointIds = pointIDs;
+        if (time.length > 0) {
+            track.startTime = time[0];
+            track.endTime = time[time.length - 1];
+        }
         return track;
     }