2b:null 2c:["$","title",null,{"children":"Volume Rendering | tiga1231 | Observable"}] 31:T4f5,mesh = { const texture = new THREE.Data3DTexture(data, size, size, size); texture.format = THREE.RedFormat; texture.type = THREE.FloatType; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; texture.unpackAlignment = 1; texture.needsUpdate = true; let geometry = new THREE.BoxGeometry(size, size, size); geometry.translate(size / 2, size / 2, size / 2); // Material const shader = VolumeRenderShader1; const uniforms = THREE.UniformsUtils.clone(shader.uniforms); uniforms["u_data"].value = texture; uniforms["u_size"].value.set(size, size, size); // uniforms["u_clim"].value.set(volconfig.clim1, volconfig.clim2); // uniforms["u_renderstyle"].value = volconfig.renderstyle == "mip" ? 0 : 1; // 0: MIP, 1: ISO // uniforms["u_renderthreshold"].value = volconfig.isothreshold; // For ISO renderstyle // uniforms["u_cmdata"].value = cmtextures[volconfig.colormap]; let material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, side: THREE.BackSide // The volume shader uses the backface as its "reference point" }); updateUniforms(material); let mesh = new THREE.Mesh(geometry, material); return mesh; }32:T29fd,VolumeRenderShader1 = ({ uniforms: { 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 } }, vertexShader: /* glsl */ ` out vec4 v_nearpos; out vec4 v_farpos; out 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; }`, fragmentShader: /* glsl */ ` precision highp float; precision mediump sampler3D; uniform vec3 u_size; uniform int u_renderstyle; uniform float u_renderthreshold; uniform vec2 u_clim; uniform sampler3D 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); void cast_avg(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray); float 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 (u_renderstyle == 2){ cast_avg(start_loc, step, nsteps, view_ray); } if (gl_FragColor.a < 0.05) discard; } float sample1(vec3 texcoords) { /* Sample float value from a 3D texture. Assumes intensity data. */ return texture(u_data, texcoords.xyz).r; } 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= nsteps) break; // Sample from the 3D texture float val = sample1(loc); // 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= 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 u_renderthreshold) { gl_FragColor = add_lighting(val, iloc, dstep, view_ray); return; } iloc += istep; } } // Advance location deeper into the volume loc += step; } } void cast_avg(vec3 start_loc, vec3 step, int nsteps, vec3 view_ray) { 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. float final_val = 0.0; float total_weight = 0.0; for (int iter=0; iter= nsteps) break; // Sample from the 3D texture float val = sample1(loc); // Accumulate value if (val > u_renderthreshold) { float p = float(iter)/float(nsteps); float weight = 1.0 - p*p; final_val += weight * val; total_weight += weight; } // Advance location deeper into the volume loc += step; } // Resolve final color final_val = final_val / float(total_weight); gl_FragColor = apply_colormap(final_val); } 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; }` })33:[{"id":"dd8cfb1d7c2ecebe06d2f9d6044960d0b61226fbe4d0ba62626d647dd7668167ffe1a20d134a081557828abe75820d55a235f92ba5585b61b2fdb7c864a0b823","href":"https://static.observableusercontent.com/files/dd8cfb1d7c2ecebe06d2f9d6044960d0b61226fbe4d0ba62626d647dd7668167ffe1a20d134a081557828abe75820d55a235f92ba5585b61b2fdb7c864a0b823","name":"ImprovedNoise.js","type":"application/javascript","lastModified":1697323926638.336,"size":2564},{"id":"696929db41fb69f786028e371dfe91de9d0be56f76be7b043450a9ac92945e7cfebb04045eb5b3b284598a69c7baae084052d22dab421d84e2611ad5813edc86","href":"https://static.observableusercontent.com/files/696929db41fb69f786028e371dfe91de9d0be56f76be7b043450a9ac92945e7cfebb04045eb5b3b284598a69c7baae084052d22dab421d84e2611ad5813edc86","name":"cm_gray.png","type":"image/png","lastModified":1697325388141.256,"size":75},{"id":"c3145476fa0a5dcfad70ec21442a727f3855c382d3b438f5ff835cc914e1246580c684bce1524a683bc4d1fbd57e6ff01b1e030816903929c5a7272604bc8fa4","href":"https://static.observableusercontent.com/files/c3145476fa0a5dcfad70ec21442a727f3855c382d3b438f5ff835cc914e1246580c684bce1524a683bc4d1fbd57e6ff01b1e030816903929c5a7272604bc8fa4","name":"cm_viridis.png","type":"image/png","lastModified":1697325388090.981,"size":238}] 2f:{"id":"2eb068b7162830e9","slug":null,"title":"Volume Rendering","thumbnail":"17b2ef8e4e8cbd6de143a96255e0e566592a034f4fa742c32cbaaf0bcf490b91","access_level":"public","create_time":"$D2023-10-14T22:52:06.638Z","update_time":"$D2025-11-17T22:38:20.750Z","view_time":null,"first_public_time":"$D2023-10-20T20:42:00.405Z","has_unpublished_edits":null,"fork":{"id":"2936e0bce1a946c7","slug":null,"title":"Volume Isosurface","owner":{"id":"7775d06948a95c4e","login":"tiga1231","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7775d06948a95c4e","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":"starter_2024"},"version":1087,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null}],"members":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Volume Rendering","cells":[{"id":0,"value":"# Volume Rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"view = renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"viewof volconfig = Inputs.form({\n clim1: Inputs.range([0, 1], {\n label: \"clim1\",\n step: 0.01,\n value: 0.5\n }),\n clim2: Inputs.range([0, 1], {\n label: \"clim2\",\n step: 0.01,\n value: 0.9\n }),\n isothreshold: Inputs.range([0, 1], {\n label: \"isothreshold\",\n value: 0.1\n }),\n renderstyle: Inputs.select([\"mip\", \"iso\", \"avg\"], { label: \"renderstyle\" }),\n colormap: Inputs.select([\"viridis\", \"gray\"], { label: \"colormap\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"---\n## Data, material","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"size = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"data = {\n let data = new Float32Array(size * size * size);\n // let data = new Uint8Array(size * size * size);\n let i = 0;\n const perlin = new ImprovedNoise();\n const vector = new THREE.Vector3();\n for (let z = 0; z < size; z++) {\n for (let y = 0; y < size; y++) {\n for (let x = 0; x < size; x++) {\n vector.set(x, y, z).divideScalar(size);\n const d = perlin.noise(vector.x * 6.5, vector.y * 6.5, vector.z * 6.5);\n data[i++] = d / 2 + 0.5;\n }\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"cmtextures = ({\n viridis: new THREE.TextureLoader().load(\n await FileAttachment(\"cm_viridis.png\").url()\n ),\n gray: new THREE.TextureLoader().load(\n await FileAttachment(\"cm_gray.png\").url()\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"---\n## Shaders\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":674,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"---\n## Scene, Camera, Renderer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"camera = {\n const h = size * 3; // frustum height\n let aspect = width / height;\n let camera = new THREE.OrthographicCamera(\n (-h * aspect) / 2,\n (h * aspect) / 2,\n h / 2,\n -h / 2,\n 0.00001,\n 1000\n );\n camera.position.set(1, 1, 1);\n camera.lookAt(new THREE.Vector3(size / 2, size / 2, size / 2));\n camera.up.set(0, 0, 1); // In our data, z is up;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"box = {\n const material = new THREE.LineBasicMaterial({\n color: 0x888888,\n linewidth: 2\n });\n\n let s = size;\n\n let [a, b, c, d] = [\n new THREE.Vector3(0, 0, 0),\n new THREE.Vector3(0, 0, s),\n new THREE.Vector3(0, s, s),\n new THREE.Vector3(0, s, 0)\n ];\n let [e, f, g, h] = [\n new THREE.Vector3(s, 0, 0),\n new THREE.Vector3(s, 0, s),\n new THREE.Vector3(s, s, s),\n new THREE.Vector3(s, s, 0)\n ];\n\n let points = [a, b, c, d, a, e, f, b, f, g, c, g, h, d, h, e];\n\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n const line = new THREE.Line(geometry, material);\n return line;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"scene = {\n let scene = new THREE.Scene();\n scene.background = new THREE.Color(0x333333);\n scene.add(mesh);\n // scene.add(box);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n let renderer = new THREE.WebGLRenderer();\n renderer.setSize(width, height);\n renderer.setPixelRatio(window.devicePixelRatio);\n\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.set(size / 2, size / 2, size / 2);\n // controls.minZoom = 0.1;\n // controls.maxZoom = 400;\n // controls.enablePan = true;\n controls.update();\n controls.addEventListener(\"change\", () => {\n renderer.render(scene, camera);\n });\n\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n\n // camera.updateProjectionMatrix();\n updateUniforms(mesh.material);\n renderer.render(scene, camera);\n console.log(\"renderer\");\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"function updateUniforms(material) {\n material.uniforms[\"u_clim\"].value.set(volconfig.clim1, volconfig.clim2);\n if (volconfig.renderstyle == \"mip\") {\n material.uniforms[\"u_renderstyle\"].value = 0;\n } else if (volconfig.renderstyle == \"iso\") {\n material.uniforms[\"u_renderstyle\"].value = 1;\n } else if (volconfig.renderstyle == \"avg\") {\n material.uniforms[\"u_renderstyle\"].value = 2;\n }\n material.uniforms[\"u_renderthreshold\"].value = volconfig.isothreshold; // For ISO renderstyle\n material.uniforms[\"u_cmdata\"].value = cmtextures[volconfig.colormap];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"---\n## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"THREE = {\n const THREE = await require(\"three@0.147.0/build/three.min.js\");\n\n //OrbitControl\n window.THREE = THREE; //neccessary for OrbitControl\n await require(\"three@0.147.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"ImprovedNoise = (await import(await FileAttachment(\"ImprovedNoise.js\").url()))\n .ImprovedNoise","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"// GUI = (await import(await FileAttachment(\"lil-gui.module.min.js\").url())).GUI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"