zincjs 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "main": "build/zinc.js",
   "directories": {
@@ -13,7 +13,8 @@
     "build/zinc.js",
     "build/zinc.frontend.js",
     "build/zinc.js.map",
-    "webpack.config.js"
+    "webpack.config.js",
+    "src/shaders"
   ],
   "scripts": {
     "build-bundle": "webpack --config webpack.frontend.js; webpack --config webpack.backend.js",

package/src/shaders/rgbVolumeRender.js

@@ -0,0 +1,118 @@
+const THREE = require('three');
+
+const glslVersion = null;
+
+const fs =
+`
+uniform sampler3D texture0;
+uniform sampler3D texture1;
+uniform vec4 lookup_offsets, lookup_scales;
+uniform vec4 texture_scaling, normal_scaling;
+varying vec4 diffuse, ambientGlobal, ambient;
+
+void main()
+{
+  vec4 color;
+  vec3 n, reflV, viewV, ldir;
+  float NdotL, NdotHV, len;
+  float att;
+
+  n = normalize(gl_TexCoord[3].xyz);
+  vec3 tex = vec3(texture3D(texture0, vec3(gl_TexCoord[0])));
+  color.xyz = tex.xyz;
+  color.w = gl_FrontMaterial.diffuse.w;
+  //Offset and scale to counteract effect of linear interpolation
+  //starting at the middle of the first texel and finishing in the
+  //middle of the last texel
+  vec4  offsetcolour = color.rgbr * lookup_scales + lookup_offsets;
+  vec4  dependentlookup = texture3D(texture1, vec3(offsetcolour));
+  color.w = color.w * dependentlookup.r;
+  vec4 unlitColour = color;
+//Calculate a finite difference normal based on the magnitude of texture components used.
+  vec4 position_up, position_down, tex_up, tex_down;
+  vec4 stencil_xup = vec4(1, 0, 0, 0);
+  position_up = stencil_xup * texture_scaling + gl_TexCoord[0];
+  tex_up = texture3D(texture0, vec3(position_up));
+  vec4 stencil_xdown = vec4(-1, 0, 0, 0);
+  position_down = stencil_xdown * texture_scaling + gl_TexCoord[0];
+  tex_down =  texture3D(texture0, vec3(position_down));
+  n.x = sqrt(dot(vec3(tex_up - tex_down), vec3(tex_up - tex_down)));
+  vec4 stencil_yup = vec4(0, 1, 0, 0);
+  position_up = stencil_yup * texture_scaling + gl_TexCoord[0];
+  tex_up = texture3D(texture0, vec3(position_up));
+  vec4 stencil_ydown = vec4(0, -1, 0, 0);
+  position_down = stencil_ydown * texture_scaling + gl_TexCoord[0];
+  tex_down =  texture3D(texture0, vec3(position_down));
+  n.y = sqrt(dot(vec3(tex_up - tex_down), vec3(tex_up - tex_down)));
+  vec4 stencil_zup = vec4(0, 0, 1, 0);
+  position_up = stencil_zup * texture_scaling + gl_TexCoord[0];
+  tex_up = texture3D(texture0, vec3(position_up));
+  vec4 stencil_zdown = vec4(0, 0, -1, 0);
+  position_down = stencil_zdown * texture_scaling + gl_TexCoord[0];
+  tex_down =  texture3D(texture0, vec3(position_down));
+  n.z = sqrt(dot(vec3(tex_up - tex_down), vec3(tex_up - tex_down)));
+  n = n * vec3(normal_scaling);
+  vec3 eyeNormal = gl_NormalMatrix * n;
+  if (!gl_FrontFacing)
+    eyeNormal.z = -1.0 * eyeNormal.z;
+  float normalMag = dot (eyeNormal, eyeNormal);
+  eyeNormal = normalize(eyeNormal);
+  len = length(vec3(gl_TexCoord[1]));
+  att = 1.0 / (gl_LightSource[0].constantAttenuation +
+    gl_LightSource[0].linearAttenuation * len +
+    gl_LightSource[0].quadraticAttenuation * len * len);
+  //Calculate attenuation.
+  NdotL = (dot(eyeNormal, normalize(gl_TexCoord[1].xyz)));
+  if (!gl_FrontFacing)
+    NdotL = abs(NdotL);
+  color += att * (diffuse *NdotL + ambient);
+  reflV = reflect(-normalize(gl_TexCoord[1].xyz), eyeNormal);
+  NdotHV = max(dot(reflV, normalize(gl_TexCoord[2].xyz)),0.0);
+  color += att * gl_FrontMaterial.specular * gl_LightSource[0].specular *
+    pow(NdotHV, gl_FrontMaterial.shininess);
+  //Alpha value;
+  color.w = unlitColour.w * normalMag;
+  gl_FragColor = color;
+}
+`;
+
+const vs = 
+`
+varying vec4 diffuse, ambientGlobal, ambient;
+uniform vec4 texture_scaling;
+
+void main()
+{
+  vec3 pos;
+  diffuse = gl_FrontMaterial.diffuse * gl_LightSource[0].diffuse;
+  ambient = gl_FrontMaterial.ambient * gl_LightSource[0].ambient;
+  ambientGlobal = gl_LightModel.ambient * gl_FrontMaterial.ambient;
+  vec4 ecPos = gl_ModelViewMatrix * gl_Vertex;
+  vec3 aux = gl_LightSource[0].position.xyz - ecPos.xyz;
+  gl_TexCoord[0] = texture_scaling * gl_MultiTexCoord0;
+  gl_TexCoord[3].xyz = normalize(gl_NormalMatrix * gl_Normal);
+  gl_TexCoord[2].xyz = vec3(normalize(-ecPos));
+  gl_TexCoord[1].xyz = aux;
+  gl_FrontColor = gl_Color;
+  gl_BackColor = gl_Color;
+  gl_FrontSecondaryColor = vec4(1.0);
+  gl_BackSecondaryColor = vec4(0.0);
+  gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
+}
+`;
+
+const getUniforms = function() {
+  return {
+		u_size: { value: new THREE.Vector3( 1, 1, 1 ) },
+		u_renderstyle: { value: 0 },
+		u_renderthreshold: { value: 0.5 },
+		u_clim: { value: new THREE.Vector2( 1, 1 ) },
+		u_data: { value: null },
+		u_cmdata: { value: null },
+  }
+};
+
+exports.fs = fs;
+exports.vs = vs;
+exports.glslVersion = glslVersion;
+exports.getUniforms = getUniforms;

package/src/shaders/textureArray.js

@@ -0,0 +1,51 @@
+const THREE = require('three');
+
+const glslVersion = THREE.GLSL3;
+
+const fs =
+`
+precision highp float;
+precision highp int;
+precision highp sampler2DArray;
+
+uniform sampler2DArray diffuse;
+in vec3 vUw;
+
+out vec4 outColor;
+
+void main() {
+
+  vec4 color = texture( diffuse, vUw );
+
+  // lighten a bit
+  outColor = vec4( color.rgb + .2, 0.2 );
+
+}
+`;
+
+const vs = 
+`
+out vec3 vUw;
+uniform float depth;
+
+void main() {
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+  vUw.xyz = vec3(position.x, position.y, position.z * depth);
+
+}
+`;
+
+const getUniforms = function() {
+  return {
+    diffuse: { value: undefined },
+    depth: { value: 1 },
+  };
+}
+
+
+exports.fs = fs;
+exports.vs = vs;
+exports.glslVersion = glslVersion;
+exports.getUniforms = getUniforms;

package/src/shaders/textureSlide.js

@@ -0,0 +1,61 @@
+const THREE = require('three');
+
+const glslVersion = THREE.GLSL3;
+
+const fs =
+`
+precision highp float;
+precision highp int;
+precision highp sampler2DArray;
+
+uniform sampler2DArray diffuse;
+in vec3 vUw;
+
+out vec4 outColor;
+
+void main() {
+
+  vec4 color = texture( diffuse, vUw );
+
+  // lighten a bit
+  outColor = vec4( color.rgb + .2, 1.0 );
+
+}
+`;
+
+const vs = 
+`
+out vec3 vUw;
+uniform float depth;
+uniform vec3 slide;
+
+void main() {
+
+  vec3 slidePos = position.xyz;
+
+  if (slide.x > 0.0)
+    slidePos = vec3(slide.x, position.x, position.y);
+  if (slide.y > 0.0)
+    slidePos = vec3(position.x, slide.y, position.y);
+  if (slide.z > 0.0)
+    slidePos = vec3(position.x, position.y, slide.z);
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( slidePos, 1.0 );
+
+  vUw.xyz = vec3(slidePos.x, slidePos.y, slidePos.z * depth);
+
+}
+`;
+
+const getUniforms = function() {
+  return {
+    diffuse: { value: undefined },
+    depth: { value: 1 },
+    slide: { value: new THREE.Vector3( 0, 0, 1 ) }
+  };
+}
+
+exports.fs = fs;
+exports.vs = vs;
+exports.glslVersion = glslVersion;
+exports.getUniforms = getUniforms;

package/src/shaders/volumeRender.js

@@ -0,0 +1,287 @@
+const THREE = require('three');
+
+const glslVersion = null;
+
+const fs =
+`
+  precision highp float;
+  precision highp sampler2DArray;
+  precision highp sampler2D;
+
+  uniform vec3 u_size;
+  uniform int u_renderstyle;
+  uniform float u_renderthreshold;
+  uniform vec2 u_clim;
+
+  uniform sampler2DArray u_data;
+  uniform sampler2D u_cmdata;
+
+  varying vec3 v_position;
+  varying vec4 v_nearpos;
+  varying vec4 v_farpos;
+
+  // The maximum distance through our rendering volume is sqrt(3).
+  const int MAX_STEPS = 887;	// 887 for 512^3, 1774 for 1024^3
+  const int REFINEMENT_STEPS = 4;
+  const float relative_step_size = 1.0;
+  const vec4 ambient_color = vec4(0.2, 0.4, 0.2, 1.0);
+  const vec4 diffuse_color = vec4(0.8, 0.2, 0.2, 1.0);
+  const vec4 specular_color = vec4(1.0, 1.0, 1.0, 1.0);
+  const float shininess = 40.0;
+
+  void cast_mip(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray);
+  void cast_iso(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray);
+
+  vec3 sample1(vec3 texcoords);
+  vec4 apply_colormap(float val);
+  vec4 add_lighting(float val, vec3 loc, vec3 step, vec3 view_ray);
+
+
+  void main() {
+      // Normalize clipping plane info
+      vec3 farpos = v_farpos.xyz / v_farpos.w;
+      vec3 nearpos = v_nearpos.xyz / v_nearpos.w;
+
+      // Calculate unit vector pointing in the view direction through this fragment.
+      vec3 view_ray = normalize(nearpos.xyz - farpos.xyz);
+
+      // Compute the (negative) distance to the front surface or near clipping plane.
+      // v_position is the back face of the cuboid, so the initial distance calculated in the dot
+      // product below is the distance from near clip plane to the back of the cuboid
+      float distance = dot(nearpos - v_position, view_ray);
+      distance = max(distance, min((-0.5 - v_position.x) / view_ray.x,
+                                  (u_size.x - 0.5 - v_position.x) / view_ray.x));
+      distance = max(distance, min((-0.5 - v_position.y) / view_ray.y,
+                                  (u_size.y - 0.5 - v_position.y) / view_ray.y));
+      distance = max(distance, min((-0.5 - v_position.z) / view_ray.z,
+                                  (u_size.z - 0.5 - v_position.z) / view_ray.z));
+
+      // Now we have the starting position on the front surface
+      vec3 front = v_position + view_ray * distance;
+
+      // Decide how many steps to take
+      int nsteps = int(-distance / relative_step_size + 0.5);
+      if ( nsteps < 1 )
+          discard;
+
+      // Get starting location and step vector in texture coordinates
+      vec3 step = ((v_position - front) / u_size) / float(nsteps);
+      vec3 start_loc = front / u_size;
+
+      // For testing: show the number of steps. This helps to establish
+      // whether the rays are correctly oriented
+      //gl_FragColor = vec4(0.0, float(nsteps) / 1.0 / u_size.x, 1.0, 1.0);
+      //return;
+
+      if (u_renderstyle == 0)
+          cast_mip(start_loc, step, nsteps, view_ray);
+      else if (u_renderstyle == 1)
+          cast_iso(start_loc, step, nsteps, view_ray);
+
+      if (gl_FragColor.a < 0.05)
+          discard;
+  }
+
+
+  vec3 sample1(vec3 texcoords) {
+      /* Sample float value from a 3D texture. Assumes intensity data. */
+      return texture(u_data, texcoords.xyz).rgb;
+  }
+
+
+  vec4 apply_colormap(float val) {
+      val = (val - u_clim[0]) / (u_clim[1] - u_clim[0]);
+      return texture2D(u_cmdata, vec2(val, 0.5));
+  }
+
+
+  void cast_mip(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) {
+
+      float max_val = -1e6;
+      int max_i = 100;
+      vec3 loc = start_loc;
+
+      // Enter the raycasting loop. In WebGL 1 the loop index cannot be compared with
+      // non-constant expression. So we use a hard-coded max, and an additional condition
+      // inside the loop.
+      for (int iter=0; iter<MAX_STEPS; iter++) {
+          if (iter >= nsteps)
+              break;
+          // Sample from the 3D texture
+          vec3 val = sample1(loc);
+          float avg = (val.x + val.y + val.z) / 3.0;
+          // Apply MIP operation
+          if (val > max_val) {
+              max_val = val;
+              max_i = iter;
+          }
+          // Advance location deeper into the volume
+          loc += step;
+      }
+
+      // Refine location, gives crispier images
+      vec3 iloc = start_loc + step * (float(max_i) - 0.5);
+      vec3 istep = step / float(REFINEMENT_STEPS);
+      for (int i=0; i<REFINEMENT_STEPS; i++) {
+          max_val = max(max_val, sample1(iloc));
+          iloc += istep;
+      }
+
+      // Resolve final color
+      gl_FragColor = apply_colormap(max_val);
+  }
+
+
+  void cast_iso(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) {
+
+      gl_FragColor = vec4(0.0);	// init transparent
+      vec4 color3 = vec4(0.0);	// final color
+      vec3 dstep = 1.5 / u_size;	// step to sample derivative
+      vec3 loc = start_loc;
+
+      float low_threshold = u_renderthreshold - 0.02 * (u_clim[1] - u_clim[0]);
+
+      // Enter the raycasting loop. In WebGL 1 the loop index cannot be compared with
+      // non-constant expression. So we use a hard-coded max, and an additional condition
+      // inside the loop.
+      for (int iter=0; iter<MAX_STEPS; iter++) {
+          if (iter >= nsteps)
+              break;
+
+          // Sample from the 3D texture
+          float val = sample1(loc);
+
+          if (val > low_threshold) {
+              // Take the last interval in smaller steps
+              vec3 iloc = loc - 0.5 * step;
+              vec3 istep = step / float(REFINEMENT_STEPS);
+              for (int i=0; i<REFINEMENT_STEPS; i++) {
+                  val = sample1(iloc);
+                  if (val > u_renderthreshold) {
+                      gl_FragColor = add_lighting(val, iloc, dstep, view_ray);
+                      return;
+                  }
+                  iloc += istep;
+              }
+          }
+
+          // Advance location deeper into the volume
+          loc += step;
+      }
+  }
+
+
+  vec4 add_lighting(float val, vec3 loc, vec3 step, vec3 view_ray)
+  {
+    // Calculate color by incorporating lighting
+
+      // View direction
+      vec3 V = normalize(view_ray);
+
+      // calculate normal vector from gradient
+      vec3 N;
+      float val1, val2;
+      val1 = sample1(loc + vec3(-step[0], 0.0, 0.0));
+      val2 = sample1(loc + vec3(+step[0], 0.0, 0.0));
+      N[0] = val1 - val2;
+      val = max(max(val1, val2), val);
+      val1 = sample1(loc + vec3(0.0, -step[1], 0.0));
+      val2 = sample1(loc + vec3(0.0, +step[1], 0.0));
+      N[1] = val1 - val2;
+      val = max(max(val1, val2), val);
+      val1 = sample1(loc + vec3(0.0, 0.0, -step[2]));
+      val2 = sample1(loc + vec3(0.0, 0.0, +step[2]));
+      N[2] = val1 - val2;
+      val = max(max(val1, val2), val);
+
+      float gm = length(N); // gradient magnitude
+      N = normalize(N);
+
+      // Flip normal so it points towards viewer
+      float Nselect = float(dot(N, V) > 0.0);
+      N = (2.0 * Nselect - 1.0) * N;	// ==	Nselect * N - (1.0-Nselect)*N;
+
+      // Init colors
+      vec4 ambient_color = vec4(0.0, 0.0, 0.0, 0.0);
+      vec4 diffuse_color = vec4(0.0, 0.0, 0.0, 0.0);
+      vec4 specular_color = vec4(0.0, 0.0, 0.0, 0.0);
+
+      // note: could allow multiple lights
+      for (int i=0; i<1; i++)
+      {
+            // Get light direction (make sure to prevent zero devision)
+          vec3 L = normalize(view_ray);	//lightDirs[i];
+          float lightEnabled = float( length(L) > 0.0 );
+          L = normalize(L + (1.0 - lightEnabled));
+
+          // Calculate lighting properties
+          float lambertTerm = clamp(dot(N, L), 0.0, 1.0);
+          vec3 H = normalize(L+V); // Halfway vector
+          float specularTerm = pow(max(dot(H, N), 0.0), shininess);
+
+          // Calculate mask
+          float mask1 = lightEnabled;
+
+          // Calculate colors
+          ambient_color +=	mask1 * ambient_color;	// * gl_LightSource[i].ambient;
+          diffuse_color +=	mask1 * lambertTerm;
+          specular_color += mask1 * specularTerm * specular_color;
+      }
+
+      // Calculate final color by componing different components
+      vec4 final_color;
+      vec4 color = apply_colormap(val);
+      final_color = color * (ambient_color + diffuse_color) + specular_color;
+      final_color.a = color.a;
+      return final_color;
+  }
+`;
+
+const vs = 
+`
+  varying vec4 v_nearpos;
+  varying vec4 v_farpos;
+  varying vec3 v_position;
+
+  void main() {
+      // Prepare transforms to map to "camera view". See also:
+      // https://threejs.org/docs/#api/renderers/webgl/WebGLProgram
+      mat4 viewtransformf = modelViewMatrix;
+      mat4 viewtransformi = inverse(modelViewMatrix);
+
+      // Project local vertex coordinate to camera position. Then do a step
+      // backward (in cam coords) to the near clipping plane, and project back. Do
+      // the same for the far clipping plane. This gives us all the information we
+      // need to calculate the ray and truncate it to the viewing cone.
+      vec4 position4 = vec4(position, 1.0);
+      vec4 pos_in_cam = viewtransformf * position4;
+
+      // Intersection of ray and near clipping plane (z = -1 in clip coords)
+      pos_in_cam.z = -pos_in_cam.w;
+      v_nearpos = viewtransformi * pos_in_cam;
+
+      // Intersection of ray and far clipping plane (z = +1 in clip coords)
+      pos_in_cam.z = pos_in_cam.w;
+      v_farpos = viewtransformi * pos_in_cam;
+
+      // Set varyings and output pos
+      v_position = position;
+      gl_Position = projectionMatrix * viewMatrix * modelMatrix * position4;
+  }
+`;
+
+const getUniforms = function() {
+  return {
+		u_size: { value: new THREE.Vector3( 1, 1, 1 ) },
+		u_renderstyle: { value: 0 },
+		u_renderthreshold: { value: 0.5 },
+		u_clim: { value: new THREE.Vector2( 1, 1 ) },
+		u_data: { value: null },
+		u_cmdata: { value: null },
+  }
+};
+
+exports.fs = fs;
+exports.vs = vs;
+exports.glslVersion = glslVersion;
+exports.getUniforms = getUniforms;

package/src/shaders/volumeTexture copy.js

@@ -0,0 +1,64 @@
+const THREE = require('three');
+
+const glslVersion = THREE.GLSL3;
+
+const fs =
+`
+precision highp float;
+precision highp int;
+precision highp sampler2DArray;
+
+uniform sampler2DArray diffuse;
+in vec3 vUw;
+
+out vec4 outColor;
+
+float boneMag(vec4 color);
+
+void main() {
+
+  vec4 color = texture( diffuse, vUw );
+  float noneBone = boneMag(color);
+
+  float alpha = 1;
+  if (noneBone > 0.2)
+    alpha = 0.0;
+  // lighten a bit
+  outColor = vec4( color.rgb + .2, alpha );
+  //outColor.rgb = vec3(noneBone);
+  //outColor.a = 1.0;
+}
+
+
+float boneMag(vec4 color) {
+  vec3 offsetColor = color.rgb - vec3(0.9, 0.75, 0.6);
+  return length(offsetColor);
+}
+`;
+
+const vs = 
+`
+out vec3 vUw;
+uniform float depth;
+
+void main() {
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+  vUw.xyz = vec3(position.x, position.y, position.z * depth);
+
+}
+`;
+
+const getUniforms = function() {
+  return {
+    diffuse: { value: undefined },
+    depth: { value: 1 },
+  };
+}
+
+
+exports.fs = fs;
+exports.vs = vs;
+exports.glslVersion = glslVersion;
+exports.getUniforms = getUniforms;

package/src/shaders/volumeTexture.js

@@ -0,0 +1,106 @@
+const THREE = require('three');
+
+const glslVersion = THREE.GLSL3;
+
+const fs =
+`
+precision highp int;
+precision highp float;
+
+uniform highp sampler2DArray diffuse;
+uniform ivec3 volume_dims;
+uniform float depth;
+
+in vec3 vray_dir;
+flat in vec3 transformed_eye;
+
+out vec4 color;
+
+vec2 intersect_box(vec3 orig, vec3 dir) {
+	const vec3 box_min = vec3(0);
+	const vec3 box_max = vec3(1);
+	vec3 inv_dir = 1.0 / dir;
+	vec3 tmin_tmp = (box_min - orig) * inv_dir;
+	vec3 tmax_tmp = (box_max - orig) * inv_dir;
+	vec3 tmin = min(tmin_tmp, tmax_tmp);
+	vec3 tmax = max(tmin_tmp, tmax_tmp);
+	float t0 = max(tmin.x, max(tmin.y, tmin.z));
+	float t1 = min(tmax.x, min(tmax.y, tmax.z));
+	return vec2(t0, t1);
+}
+
+void main(void) {
+	// Step 1: Normalize the view ray
+	vec3 ray_dir = normalize(vray_dir);
+
+	// Step 2: Intersect the ray with the volume bounds to find the interval
+	// along the ray overlapped by the volume.
+	vec2 t_hit = intersect_box(transformed_eye, ray_dir);
+	if (t_hit.x > t_hit.y) {
+		discard;
+	}
+	// We don't want to sample voxels behind the eye if it's
+	// inside the volume, so keep the starting point at or in front
+	// of the eye
+	t_hit.x = max(t_hit.x, 0.0);
+
+	// Step 3: Compute the step size to march through the volume grid
+	vec3 dt_vec = 1.0 / (vec3(volume_dims) * abs(ray_dir));
+	float dt = min(dt_vec.x, min(dt_vec.y, dt_vec.z));
+
+	// Step 4: Starting from the entry point, march the ray through the volume
+	// and sample it
+	vec3 p = transformed_eye + t_hit.x * ray_dir;
+  p.z = p.z * depth; 
+	for (float t = t_hit.x; t < t_hit.y; t += dt) {
+		// Step 4.1: Sample the volume, and color it by the transfer function.
+		// Note that here we don't use the opacity from the transfer function,
+		// and just use the sample value as the opacity
+		vec3 tex = texture(diffuse, p).rgb;
+		vec4 val_color = vec4(tex.rgb, 0.02);
+
+		// Step 4.2: Accumulate the color and opacity using the front-to-back
+		// compositing equation
+		color.rgb += (1.0 - color.a) * val_color.a * val_color.rgb;
+		color.a += (1.0 - color.a) * val_color.a;
+
+		// Optimization: break out of the loop when the color is near opaque
+		if (color.a >= 0.95) {
+			break;
+		}
+		p += ray_dir * dt;
+	}
+}
+`;
+
+const vs = 
+`
+uniform vec3 volume_scale;
+
+out vec3 vray_dir;
+flat out vec3 transformed_eye;
+
+void main(void) {
+	// Translate the cube to center it at the origin.
+	vec3 volume_translation = vec3(0.5) - volume_scale * 0.5;
+	gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position * volume_scale + volume_translation, 1);
+
+	// Compute eye position and ray directions in the unit cube space
+	transformed_eye = (cameraPosition - volume_translation) / volume_scale;
+	vray_dir = position - transformed_eye;
+}
+`;
+
+const getUniforms = function() {
+  return {
+		volume_scale: { value: new THREE.Vector3( 1, 1, 1 ) },
+    diffuse: { value: undefined },
+    volume_dims: { value: [ 1, 1, 1 ] },
+    depth: { value: 1 },
+  }
+};
+
+exports.fs = fs;
+exports.vs = vs;
+exports.glslVersion = glslVersion;
+exports.getUniforms = getUniforms;