VolumeShader.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. ( function () {
  2. /**
  3. * Shaders to render 3D volumes using raycasting.
  4. * The applied techniques are based on similar implementations in the Visvis and Vispy projects.
  5. * This is not the only approach, therefore it's marked 1.
  6. */
  7. const VolumeRenderShader1 = {
  8. uniforms: {
  9. 'u_size': {
  10. value: new THREE.Vector3( 1, 1, 1 )
  11. },
  12. 'u_renderstyle': {
  13. value: 0
  14. },
  15. 'u_renderthreshold': {
  16. value: 0.5
  17. },
  18. 'u_clim': {
  19. value: new THREE.Vector2( 1, 1 )
  20. },
  21. 'u_data': {
  22. value: null
  23. },
  24. 'u_cmdata': {
  25. value: null
  26. }
  27. },
  28. vertexShader:
  29. /* glsl */
  30. `
  31. varying vec4 v_nearpos;
  32. varying vec4 v_farpos;
  33. varying vec3 v_position;
  34. void main() {
  35. // Prepare transforms to map to "camera view". See also:
  36. // https://threejs.org/docs/#api/renderers/webgl/WebGLProgram
  37. mat4 viewtransformf = modelViewMatrix;
  38. mat4 viewtransformi = inverse(modelViewMatrix);
  39. // Project local vertex coordinate to camera position. Then do a step
  40. // backward (in cam coords) to the near clipping plane, and project back. Do
  41. // the same for the far clipping plane. This gives us all the information we
  42. // need to calculate the ray and truncate it to the viewing cone.
  43. vec4 position4 = vec4(position, 1.0);
  44. vec4 pos_in_cam = viewtransformf * position4;
  45. // Intersection of ray and near clipping plane (z = -1 in clip coords)
  46. pos_in_cam.z = -pos_in_cam.w;
  47. v_nearpos = viewtransformi * pos_in_cam;
  48. // Intersection of ray and far clipping plane (z = +1 in clip coords)
  49. pos_in_cam.z = pos_in_cam.w;
  50. v_farpos = viewtransformi * pos_in_cam;
  51. // Set varyings and output pos
  52. v_position = position;
  53. gl_Position = projectionMatrix * viewMatrix * modelMatrix * position4;
  54. }`,
  55. fragmentShader:
  56. /* glsl */
  57. `
  58. precision highp float;
  59. precision mediump sampler3D;
  60. uniform vec3 u_size;
  61. uniform int u_renderstyle;
  62. uniform float u_renderthreshold;
  63. uniform vec2 u_clim;
  64. uniform sampler3D u_data;
  65. uniform sampler2D u_cmdata;
  66. varying vec3 v_position;
  67. varying vec4 v_nearpos;
  68. varying vec4 v_farpos;
  69. // The maximum distance through our rendering volume is sqrt(3).
  70. const int MAX_STEPS = 887; // 887 for 512^3, 1774 for 1024^3
  71. const int REFINEMENT_STEPS = 4;
  72. const float relative_step_size = 1.0;
  73. const vec4 ambient_color = vec4(0.2, 0.4, 0.2, 1.0);
  74. const vec4 diffuse_color = vec4(0.8, 0.2, 0.2, 1.0);
  75. const vec4 specular_color = vec4(1.0, 1.0, 1.0, 1.0);
  76. const float shininess = 40.0;
  77. void cast_mip(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray);
  78. void cast_iso(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray);
  79. float sample1(vec3 texcoords);
  80. vec4 apply_colormap(float val);
  81. vec4 add_lighting(float val, vec3 loc, vec3 step, vec3 view_ray);
  82. void main() {
  83. // Normalize clipping plane info
  84. vec3 farpos = v_farpos.xyz / v_farpos.w;
  85. vec3 nearpos = v_nearpos.xyz / v_nearpos.w;
  86. // Calculate unit vector pointing in the view direction through this fragment.
  87. vec3 view_ray = normalize(nearpos.xyz - farpos.xyz);
  88. // Compute the (negative) distance to the front surface or near clipping plane.
  89. // v_position is the back face of the cuboid, so the initial distance calculated in the dot
  90. // product below is the distance from near clip plane to the back of the cuboid
  91. float distance = dot(nearpos - v_position, view_ray);
  92. distance = max(distance, min((-0.5 - v_position.x) / view_ray.x,
  93. (u_size.x - 0.5 - v_position.x) / view_ray.x));
  94. distance = max(distance, min((-0.5 - v_position.y) / view_ray.y,
  95. (u_size.y - 0.5 - v_position.y) / view_ray.y));
  96. distance = max(distance, min((-0.5 - v_position.z) / view_ray.z,
  97. (u_size.z - 0.5 - v_position.z) / view_ray.z));
  98. // Now we have the starting position on the front surface
  99. vec3 front = v_position + view_ray * distance;
  100. // Decide how many steps to take
  101. int nsteps = int(-distance / relative_step_size + 0.5);
  102. if ( nsteps < 1 )
  103. discard;
  104. // Get starting location and step vector in texture coordinates
  105. vec3 step = ((v_position - front) / u_size) / float(nsteps);
  106. vec3 start_loc = front / u_size;
  107. // For testing: show the number of steps. This helps to establish
  108. // whether the rays are correctly oriented
  109. //'gl_FragColor = vec4(0.0, float(nsteps) / 1.0 / u_size.x, 1.0, 1.0);
  110. //'return;
  111. if (u_renderstyle == 0)
  112. cast_mip(start_loc, step, nsteps, view_ray);
  113. else if (u_renderstyle == 1)
  114. cast_iso(start_loc, step, nsteps, view_ray);
  115. if (gl_FragColor.a < 0.05)
  116. discard;
  117. }
  118. float sample1(vec3 texcoords) {
  119. /* Sample float value from a 3D texture. Assumes intensity data. */
  120. return texture(u_data, texcoords.xyz).r;
  121. }
  122. vec4 apply_colormap(float val) {
  123. val = (val - u_clim[0]) / (u_clim[1] - u_clim[0]);
  124. return texture2D(u_cmdata, vec2(val, 0.5));
  125. }
  126. void cast_mip(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) {
  127. float max_val = -1e6;
  128. int max_i = 100;
  129. vec3 loc = start_loc;
  130. // Enter the raycasting loop. In WebGL 1 the loop index cannot be compared with
  131. // non-constant expression. So we use a hard-coded max, and an additional condition
  132. // inside the loop.
  133. for (int iter=0; iter<MAX_STEPS; iter++) {
  134. if (iter >= nsteps)
  135. break;
  136. // Sample from the 3D texture
  137. float val = sample1(loc);
  138. // Apply MIP operation
  139. if (val > max_val) {
  140. max_val = val;
  141. max_i = iter;
  142. }
  143. // Advance location deeper into the volume
  144. loc += step;
  145. }
  146. // Refine location, gives crispier images
  147. vec3 iloc = start_loc + step * (float(max_i) - 0.5);
  148. vec3 istep = step / float(REFINEMENT_STEPS);
  149. for (int i=0; i<REFINEMENT_STEPS; i++) {
  150. max_val = max(max_val, sample1(iloc));
  151. iloc += istep;
  152. }
  153. // Resolve final color
  154. gl_FragColor = apply_colormap(max_val);
  155. }
  156. void cast_iso(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) {
  157. gl_FragColor = vec4(0.0); // init transparent
  158. vec4 color3 = vec4(0.0); // final color
  159. vec3 dstep = 1.5 / u_size; // step to sample derivative
  160. vec3 loc = start_loc;
  161. float low_threshold = u_renderthreshold - 0.02 * (u_clim[1] - u_clim[0]);
  162. // Enter the raycasting loop. In WebGL 1 the loop index cannot be compared with
  163. // non-constant expression. So we use a hard-coded max, and an additional condition
  164. // inside the loop.
  165. for (int iter=0; iter<MAX_STEPS; iter++) {
  166. if (iter >= nsteps)
  167. break;
  168. // Sample from the 3D texture
  169. float val = sample1(loc);
  170. if (val > low_threshold) {
  171. // Take the last interval in smaller steps
  172. vec3 iloc = loc - 0.5 * step;
  173. vec3 istep = step / float(REFINEMENT_STEPS);
  174. for (int i=0; i<REFINEMENT_STEPS; i++) {
  175. val = sample1(iloc);
  176. if (val > u_renderthreshold) {
  177. gl_FragColor = add_lighting(val, iloc, dstep, view_ray);
  178. return;
  179. }
  180. iloc += istep;
  181. }
  182. }
  183. // Advance location deeper into the volume
  184. loc += step;
  185. }
  186. }
  187. vec4 add_lighting(float val, vec3 loc, vec3 step, vec3 view_ray)
  188. {
  189. // Calculate color by incorporating lighting
  190. // View direction
  191. vec3 V = normalize(view_ray);
  192. // calculate normal vector from gradient
  193. vec3 N;
  194. float val1, val2;
  195. val1 = sample1(loc + vec3(-step[0], 0.0, 0.0));
  196. val2 = sample1(loc + vec3(+step[0], 0.0, 0.0));
  197. N[0] = val1 - val2;
  198. val = max(max(val1, val2), val);
  199. val1 = sample1(loc + vec3(0.0, -step[1], 0.0));
  200. val2 = sample1(loc + vec3(0.0, +step[1], 0.0));
  201. N[1] = val1 - val2;
  202. val = max(max(val1, val2), val);
  203. val1 = sample1(loc + vec3(0.0, 0.0, -step[2]));
  204. val2 = sample1(loc + vec3(0.0, 0.0, +step[2]));
  205. N[2] = val1 - val2;
  206. val = max(max(val1, val2), val);
  207. float gm = length(N); // gradient magnitude
  208. N = normalize(N);
  209. // Flip normal so it points towards viewer
  210. float Nselect = float(dot(N, V) > 0.0);
  211. N = (2.0 * Nselect - 1.0) * N; // == Nselect * N - (1.0-Nselect)*N;
  212. // Init colors
  213. vec4 ambient_color = vec4(0.0, 0.0, 0.0, 0.0);
  214. vec4 diffuse_color = vec4(0.0, 0.0, 0.0, 0.0);
  215. vec4 specular_color = vec4(0.0, 0.0, 0.0, 0.0);
  216. // note: could allow multiple lights
  217. for (int i=0; i<1; i++)
  218. {
  219. // Get light direction (make sure to prevent zero devision)
  220. vec3 L = normalize(view_ray); //lightDirs[i];
  221. float lightEnabled = float( length(L) > 0.0 );
  222. L = normalize(L + (1.0 - lightEnabled));
  223. // Calculate lighting properties
  224. float lambertTerm = clamp(dot(N, L), 0.0, 1.0);
  225. vec3 H = normalize(L+V); // Halfway vector
  226. float specularTerm = pow(max(dot(H, N), 0.0), shininess);
  227. // Calculate mask
  228. float mask1 = lightEnabled;
  229. // Calculate colors
  230. ambient_color += mask1 * ambient_color; // * gl_LightSource[i].ambient;
  231. diffuse_color += mask1 * lambertTerm;
  232. specular_color += mask1 * specularTerm * specular_color;
  233. }
  234. // Calculate final color by componing different components
  235. vec4 final_color;
  236. vec4 color = apply_colormap(val);
  237. final_color = color * (ambient_color + diffuse_color) + specular_color;
  238. final_color.a = color.a;
  239. return final_color;
  240. }`
  241. };
  242. THREE.VolumeRenderShader1 = VolumeRenderShader1;
  243. } )();