VolumeShader.js 12 KB

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