Merge pull request #48 from brown-ccv/fix-channels-support

Fix channels support
brown-ccv · Jan 24, 2022 · 950edf8 · 950edf8
2 parents b235bef + c97bf03
commit 950edf8
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-volume-viewer",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Aframe container with custom controls for use in react applications",
   "author": "brown-ccv",
   "license": "MIT",

diff --git a/src/Aframe/ccvLibVolumeShader.js b/src/Aframe/ccvLibVolumeShader.js
@@ -19,6 +19,7 @@ THREE.ShaderLib["ccvLibVolumeRenderShader"] = {
     grabMesh: { value: false },
     box_min: { value: new THREE.Vector3(0, 0, 0) },
     box_max: { value: new THREE.Vector3(1, 1, 1) },
+    intensity: { value: 1.0 },
   },
 
   vertexShader: [
@@ -182,6 +183,7 @@ THREE.ShaderLib["ccvLibVolumeRenderShader"] = {
     "uniform mat4 P_inv;",
     "uniform vec3 box_min;",
     "uniform vec3 box_max;",
+    "uniform float intensity;",
     "vec4 vFragColor;",
     "varying vec3 camPos;",
     //'in mat4 nClipPlane; ',
@@ -272,20 +274,23 @@ THREE.ShaderLib["ccvLibVolumeRenderShader"] = {
     "smple = sampleAs3DTexture(u_data, dataPos); ",
     "}else{ ",
     "smple = sampleAs3DTexture(u_data, dataPos);",
+    // as we dont have an alpha from the datasets,
+    //we initialized it as the max between the 3 channels
     "smple.a = max(smple.r, max(smple.g,smple.b)) ; ",
     "if(smple.a < 0.25)",
-    //'if(smple.a < 0.000001)',
     "{",
     "smple.a = 0.1*smple.a;",
-    //'discard;',
     "}",
 
     "}",
-
-    //'smple.a = max(smple.r, max(smple.g,smple.b)) ; ',
-    //'smple.a = 0.1*smple.a;',
+    // artifitially increasing pixel intensity
+    "smple.rgb = smple.rgb*intensity;",
     "if(useLut)",
+    "{",
+    //we lookup the density value in the transfer function and return the
+    //appropriate color value
     "smple = texture2D(u_lut, vec2(clamp(smple.a,0.0,1.0),0.5));",
+    "}",
 
     //assume alpha is the highest channel and gamma correction
     //"sample.a = pow(sample.a , multiplier); \n"  ///needs changing

diff --git a/src/Aframe/loader.js b/src/Aframe/loader.js
@@ -49,6 +49,8 @@ AFRAME.registerComponent("loader", {
     y_spacing: { type: "number", default: 2.0 },
     z_spacing: { type: "number", default: 1.0 },
     useTransferFunction: { type: "boolean", default: false },
+    channel: { type: "number", default: 1 },
+    intensity: { type: "number", default: 1.0 },
   },
 
   init: function () {
@@ -61,6 +63,7 @@ AFRAME.registerComponent("loader", {
     this.onClearCollide = this.onClearCollide.bind(this);
     this.loadModel = this.loadModel.bind(this);
     this.updateTransferTexture = this.updateTransferTexture.bind(this);
+    this.updateDataChannel = this.updateDataChannel.bind(this);
     this.updateColorMapping = this.updateColorMapping.bind(this);
     this.debugScene = this.debugScene.bind(this);
 
@@ -208,7 +211,6 @@ AFRAME.registerComponent("loader", {
           imageTransferData[i * 4 + 2] = colorTransfer[i * 3 + 2];
           imageTransferData[i * 4 + 3] = this.newAlphaData[i];
         }
-
         const transferTexture = new THREE.DataTexture(
           imageTransferData,
           256,
@@ -219,14 +221,25 @@ AFRAME.registerComponent("loader", {
 
         if (this.el.getObject3D("mesh") !== undefined) {
           let material = this.el.getObject3D("mesh").material;
+          // Shader script uses channel 6 for color mapping
+          material.uniforms.channel.value = 6;
           material.uniforms.u_lut.value = transferTexture;
-          material.uniforms.useLut.value = true;
+          material.uniforms.useLut.value = this.data.useTransferFunction;
           material.needsUpdate = true;
         }
       }
     }
   },
 
+  updateDataChannel: function () {
+    if (this.el.getObject3D("mesh") !== undefined) {
+      let material = this.el.getObject3D("mesh").material;
+      material.uniforms.channel.value = this.data.channel;
+      material.uniforms.useLut.value = this.data.useTransferFunction;
+      material.needsUpdate = true;
+    }
+  },
+
   bindMethods: function () {
     this.onEnterVR = bind(this.onEnterVR, this);
     this.onExitVR = bind(this.onExitVR, this);
@@ -275,8 +288,10 @@ AFRAME.registerComponent("loader", {
       const canvasHeight = this.canvas.height;
 
       const useTransferFunction = this.data.useTransferFunction;
+      const intensity = this.data.intensity;
 
       const updateColorMapping = this.updateColorMapping;
+      const updateDataChannel = this.updateDataChannel;
 
       //load as 2D texture
       new THREE.TextureLoader().load(
@@ -313,7 +328,8 @@ AFRAME.registerComponent("loader", {
             uniforms["channel"].value = 6;
             uniforms["useLut"].value = false;
           } else {
-            uniforms["useLut"].value = false;
+            uniforms["channel"].value = 1;
+            uniforms["useLut"].value = true;
           }
           uniforms["step_size"].value = new THREE.Vector3(
             1 / 100,
@@ -332,6 +348,7 @@ AFRAME.registerComponent("loader", {
           uniforms["grabMesh"].value = false;
           uniforms["box_min"].value = new THREE.Vector3(0, 0, 0);
           uniforms["box_max"].value = new THREE.Vector3(1, 1, 1);
+          uniforms["intensity"].value = intensity;
 
           const material = new THREE.ShaderMaterial({
             uniforms: uniforms,
@@ -348,7 +365,12 @@ AFRAME.registerComponent("loader", {
           data.modelLoaded = true;
           material.needsUpdate = true;
 
-          updateColorMapping();
+          //this steps needs the model to be uploaded first
+          if (useTransferFunction) {
+            updateColorMapping();
+          } else {
+            updateDataChannel();
+          }
         },
         function () {},
         function () {
@@ -412,6 +434,7 @@ AFRAME.registerComponent("loader", {
           colorTransfer[i * 3 + 2] = colorData[i * 4 + 2];
         }
         mappedColorMap.data = colorTransfer;
+
         updateTransferTexture();
       };
     } else {
@@ -424,23 +447,34 @@ AFRAME.registerComponent("loader", {
       return;
     }
 
-    // this part updates the opacity control points
-    if (
-      (this.data.alphaXDataArray !== undefined &&
-        oldData.alphaXDataArray !== this.data.alphaXDataArray) ||
-      (this.data.alphaYDataArray !== undefined &&
-        oldData.alphaYDataArray !== this.data.alphaYDataArray)
-    ) {
-      this.updateOpacityData(
-        this.data.alphaXDataArray,
-        this.data.alphaYDataArray
-      );
-      this.updateTransferTexture();
-    }
-
-    if (oldData.colorMap !== this.data.colorMap) {
-      this.currentColorMap = this.data.colorMap;
-      this.updateColorMapping();
+    if (this.data.useTransferFunction) {
+      // this part updates the opacity control points
+      //comparing javascript arrays
+      if (
+        (this.data.alphaXDataArray !== undefined &&
+          JSON.stringify(oldData.alphaXDataArray) !==
+            JSON.stringify(this.data.alphaXDataArray)) ||
+        (this.data.alphaYDataArray !== undefined &&
+          JSON.stringify(oldData.alphaYDataArray) !==
+            JSON.stringify(this.data.alphaYDataArray))
+      ) {
+        this.updateOpacityData(
+          this.data.alphaXDataArray,
+          this.data.alphaYDataArray
+        );
+        this.updateTransferTexture();
+      } else if (oldData.colorMap !== this.data.colorMap) {
+        this.currentColorMap = this.data.colorMap;
+        this.updateColorMapping();
+      }
+    } else {
+      // Data using channels
+      if (
+        this.data.channel !== undefined &&
+        oldData.channel !== this.data.channel
+      ) {
+        this.updateDataChannel();
+      }
     }
 
     if (oldData.path !== this.data.path) {

diff --git a/src/components/AframeScene.jsx b/src/components/AframeScene.jsx
@@ -85,6 +85,8 @@ function AframeScene({
           y_spacing: model.spacing.y,
           z_spacing: model.spacing.z,
           useTransferFunction,
+          channel: model.channel,
+          intensity: model.intensity,
         })}
         position={model.position}
         rotation={model.rotation}

diff --git a/src/components/VolumeViewer.jsx b/src/components/VolumeViewer.jsx
@@ -165,6 +165,10 @@ VolumeViewer.propTypes = {
       y: PropTypes.number,
       z: PropTypes.number,
     }),
+    /** Channel to load data from (R:1, G:2, B:3)*/
+    channel: PropTypes.number,
+    /** Increase/decrease voxels intensity */
+    intensity: PropTypes.number,
   }),
 
   /**

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -20,6 +20,8 @@ const DEFAULT_MODEL = {
   scale: "1 1 1",
   slices: 55,
   spacing: { x: 2, y: 2, z: 1 },
+  channel: 1,
+  intensity: 1.0,
 };
 
 const DEFAULT_TRANSFER_FUNCTION = [