@vitessce/spatial-accelerated 3.8.0

package/dist-tsc/shaders/VolumeVertexShader.d.ts

@@ -0,0 +1,2 @@
+export const volumeVertexShader: "//\n// Output: Unnormalized ray direction from camera to each vertex\n// Used by fragment shader for ray marching through the volume\nout vec3 rayDirUnnorm;\n\n// Output: Camera position transformed into volume's local coordinate system\n// Used to calculate ray origins in the fragment shader\nout vec3 cameraCorrected;\n\n// Volume scale uniform (likely for anisotropic voxels)\nuniform vec3 u_vol_scale;\n\n// Volume size uniform\nuniform vec3 u_size;\n\n// Output: Vertex positions normalized to [0,1] range within volume bounds\n// Standard coordinate system for volume sampling\nvarying vec3 worldSpaceCoords;\n\n// Output: Texture coordinates for sampling volume data\nvarying vec2 vUv;\n\n// Output: Final clip-space position (stored for fragment shader access)\nvarying vec4 glPosition;\n\n// Volume bounding box size uniform\nuniform highp vec3 boxSize;\n\nvoid main()\n{\n   // Transform vertex positions from [-0.5, 0.5] range to [0, 1] range\n   // This is the standard coordinate system for volume sampling\n   //\n   // Mathematical transformation:\n   // worldSpaceCoords = (position / boxSize) + 0.5\n   // \n   // Example:\n   // position = (-0.5, -0.5, -0.5) → worldSpaceCoords = (0, 0, 0)\n   // position = ( 0.0,  0.0,  0.0) → worldSpaceCoords = (0.5, 0.5, 0.5)\n   // position = ( 0.5,  0.5,  0.5) → worldSpaceCoords = (1, 1, 1)\n   worldSpaceCoords = position / boxSize + vec3(0.5, 0.5, 0.5); //move it from [-0.5;0.5] to [0,1]\n   \n   // Transform camera position into volume's local coordinate system\n   // This gives us the ray origin in volume space\n   cameraCorrected = (inverse(modelMatrix) * vec4(cameraPosition, 1.)).xyz;\n   \n   // Calculate unnormalized ray direction from camera to each vertex\n   // Used by fragment shader for ray marching through the volume\n   rayDirUnnorm = position - cameraCorrected;\n   \n   // Apply standard MVP transformation to get clip-space coordinates\n   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n   \n   // Store clip-space position for fragment shader access\n   glPosition = gl_Position;\n   \n   // Pass through texture coordinates for volume sampling\n   vUv = uv;\n}\n";
+//# sourceMappingURL=VolumeVertexShader.d.ts.map

package/dist-tsc/shaders/VolumeVertexShader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeVertexShader.d.ts","sourceRoot":"","sources":["../../src/shaders/VolumeVertexShader.js"],"names":[],"mappings":"AAmDA,oqEA2DE"}

package/dist-tsc/shaders/VolumeVertexShader.js

@@ -0,0 +1,110 @@
+// Attribution: Originally written by @alexandrairger
+// Moved from .glsl file to .js file in this commit: https://github.com/vitessce/vitessce/pull/2264/commits/7f17fc003674a4ed1a8de6140db802781871cf88
+/*
+
+============================================================================
+VOLUME RENDERING PIPELINE OVERVIEW
+============================================================================
+
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Vertex Shader │───▶│ Fragment Shader │───▶│   Final Image   │
+│  (this shader)  │    │ (ray marching)  │    │                 │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+    │ rayDirUnnorm           │ sample volume
+    │ cameraCorrected        │ blend voxels
+    │ worldSpaceCoords       │ apply lighting
+
+============================================================================
+COORDINATE TRANSFORMATIONS
+============================================================================
+
+1. Volume Space Normalization:
+Original: [-0.5, 0.5]     Normalized: [0, 1]
+┌─────────────┐           ┌─────────────┐
+│   -0.5      │           │     0       │
+│             │           │             │
+│      0      │──────────▶│    0.5      │
+│             │           │             │
+│    0.5      │           │     1       │
+└─────────────┘           └─────────────┘
+
+2. Camera Position Transformation:
+World Space:     Volume Space:
+┌─────────────┐   ┌─────────────┐
+│   Camera    │   │   Camera    │
+│  Position   │──▶│  Position   │
+└─────────────┘   └─────────────┘
+     (x,y,z)         (x',y',z')
+
+3. Ray Direction Calculation:
+    Camera (cameraCorrected)
+       │
+       │ rayDirUnnorm = position - cameraCorrected
+       ▼
+   Vertex (position)
+
+4. MVP Transformation Pipeline:
+Model Space → View Space → Projection Space → Clip Space
+   (x,y,z)  →   (x',y',z')  →    (x",y",z")   →  (x"',y"',z"')
+ */
+// lang: glsl
+export const volumeVertexShader = `//
+// Output: Unnormalized ray direction from camera to each vertex
+// Used by fragment shader for ray marching through the volume
+out vec3 rayDirUnnorm;
+
+// Output: Camera position transformed into volume's local coordinate system
+// Used to calculate ray origins in the fragment shader
+out vec3 cameraCorrected;
+
+// Volume scale uniform (likely for anisotropic voxels)
+uniform vec3 u_vol_scale;
+
+// Volume size uniform
+uniform vec3 u_size;
+
+// Output: Vertex positions normalized to [0,1] range within volume bounds
+// Standard coordinate system for volume sampling
+varying vec3 worldSpaceCoords;
+
+// Output: Texture coordinates for sampling volume data
+varying vec2 vUv;
+
+// Output: Final clip-space position (stored for fragment shader access)
+varying vec4 glPosition;
+
+// Volume bounding box size uniform
+uniform highp vec3 boxSize;
+
+void main()
+{
+   // Transform vertex positions from [-0.5, 0.5] range to [0, 1] range
+   // This is the standard coordinate system for volume sampling
+   //
+   // Mathematical transformation:
+   // worldSpaceCoords = (position / boxSize) + 0.5
+   // 
+   // Example:
+   // position = (-0.5, -0.5, -0.5) → worldSpaceCoords = (0, 0, 0)
+   // position = ( 0.0,  0.0,  0.0) → worldSpaceCoords = (0.5, 0.5, 0.5)
+   // position = ( 0.5,  0.5,  0.5) → worldSpaceCoords = (1, 1, 1)
+   worldSpaceCoords = position / boxSize + vec3(0.5, 0.5, 0.5); //move it from [-0.5;0.5] to [0,1]
+   
+   // Transform camera position into volume's local coordinate system
+   // This gives us the ray origin in volume space
+   cameraCorrected = (inverse(modelMatrix) * vec4(cameraPosition, 1.)).xyz;
+   
+   // Calculate unnormalized ray direction from camera to each vertex
+   // Used by fragment shader for ray marching through the volume
+   rayDirUnnorm = position - cameraCorrected;
+   
+   // Apply standard MVP transformation to get clip-space coordinates
+   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+   
+   // Store clip-space position for fragment shader access
+   glPosition = gl_Position;
+   
+   // Pass through texture coordinates for volume sampling
+   vUv = uv;
+}
+`;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@vitessce/spatial-accelerated",
+  "version": "3.8.0",
+  "author": "HIDIVE Lab at HMS",
+  "homepage": "http://vitessce.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitessce/vitessce.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "src",
+    "dist",
+    "dist-tsc"
+  ],
+  "dependencies": {
+    "@react-three/fiber": "^8.15.19",
+    "@react-three/drei": "^9.99.7",
+    "@react-three/xr": "^5.7.1",
+    "d3-array": "^2.4.0",
+    "internmap": "^2.0.3",
+    "lodash-es": "^4.17.21",
+    "math.gl": "^3.5.6",
+    "mathjs": "^9.2.0",
+    "plur": "^5.1.0",
+    "short-number": "^1.0.6",
+    "three": "^0.154.0",
+    "zarrita": "0.5.3",
+    "@vitessce/constants-internal": "3.8.0",
+    "@vitessce/gl": "3.8.0",
+    "@vitessce/legend": "3.8.0",
+    "@vitessce/sets-utils": "3.8.0",
+    "@vitessce/spatial-utils": "3.8.0",
+    "@vitessce/tooltip": "3.8.0",
+    "@vitessce/utils": "3.8.0",
+    "@vitessce/vit-s": "3.8.0",
+    "@vitessce/styles": "3.8.0",
+    "@vitessce/globals": "3.8.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.154.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "vite": "^7.0.0",
+    "vitest": "^3.1.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.mjs",
+    "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  }
+}

package/src/SpatialWrapper.js

@@ -0,0 +1,60 @@
+import React from 'react';
+// Note: need to be careful about versions of RTF, Three, React, and React DOM in package.json
+// to avoid multiple copies of RTF, since the Canvas depends on a React Context.
+// Otherwise you may see errors such as "useThree can only be used inside the Canvas component!".
+import { Canvas } from '@react-three/fiber';
+import { VolumeView } from './VolumeView.js';
+
+export function SpatialWrapper(props) {
+  // const [renderingStats, setRenderingStats] = useState({ fps: 0 });
+  // const [zarrStoreInfo, setZarrStoreInfo] = useState(null);
+  // const [deviceLimits, setDeviceLimits] = useState(null);
+  // const volumeViewRef = useRef(null);
+
+  // Handle initialization completion from VolumeView
+  /*
+  const handleInitComplete = (initData) => {
+    if (initData.zarrStoreInfo) {
+      setZarrStoreInfo(initData.zarrStoreInfo);
+    }
+    if (initData.deviceLimits) {
+      setDeviceLimits(initData.deviceLimits);
+    }
+  };
+  */
+
+  return (
+    <Canvas
+      frameloop="always"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        padding: 0,
+        margin: 0,
+        // backgroundColor: 'white',
+      }}
+      camera={{
+        fov: 50,
+        up: [0, 1, 0],
+        position: [0, 0, 4],
+        near: 0.01,
+        far: 15,
+      }}
+      gl={{
+        antialias: true,
+        logarithmicDepthBuffer: false,
+        preserveDrawingBuffer: false,
+        autoClear: false,
+      }}
+    >
+      <VolumeView
+        {...props}
+        // forwardRef={volumeViewRef}
+        // onInitComplete={handleInitComplete}
+      />
+    </Canvas>
+  );
+}