31:T4a7,{ const { app, drawCall } = step2a; const { canvas } = app; const { width, height } = canvas; const arcball = new Arcball(canvas); const refresh = () => { app.clear(); const { z, tf } = viewof step2aSettings.value; const colors = d3 .range(256) .map((i) => { let v = -1.0 + (2 * i) / 255; for (let { x1, x2, y, color } of tf) { if (v >= x1 && v < x2) { let { r, g, b, opacity } = d3.color(palette[color]); return [r / 255, g / 255, b / 255, y]; } } return [0, 0, 0, 0]; }) .flat(); drawCall .uniform("Z", viewof step2aSettings.value.z) .uniform("transform", arcball.transform) .uniform("color[0]", colors) .draw(); }; canvas.onmousedown = (e) => arcball.mousedown(e.offsetX, height - e.offsetY); canvas.onmousemove = (e) => { arcball.mousemove(e.offsetX, height - e.offsetY); refresh(); }; canvas.onmouseup = (e) => arcball.mouseup(); viewof step2aSettings.addEventListener("input", refresh); invalidation.then(() => viewof step2aSettings.removeEventListener("input", refresh) ); refresh(); return canvas; }32:T529,{ const { app, drawCall } = step3; const { canvas } = app; const { width, height } = canvas; const arcball = new Arcball(canvas); const refresh = () => { app.clear(); const { nSlices, sliceAlpha, tf } = viewof step3Settings.value; const colors = d3 .range(256) .map((i) => { let v = -1.0 + (2 * i) / 255; for (let { x1, x2, y, color } of tf) { if (v >= x1 && v < x2) { let { r, g, b, opacity } = d3.color(palette[color]); return [r / 255, g / 255, b / 255, y]; } } return [0, 0, 0, 0]; }) .flat(); drawCall .uniform("sliceAlpha", sliceAlpha / nSlices) .uniform("transform", arcball.transform) .uniform("color[0]", colors); for (let i = 0; i < nSlices; i++) { const z = -1 + (i * 2) / (nSlices - 1); drawCall.uniform("Z", z).draw(); } }; canvas.onmousedown = (e) => arcball.mousedown(e.offsetX, height - e.offsetY); canvas.onmousemove = (e) => { arcball.mousemove(e.offsetX, height - e.offsetY); refresh(); }; canvas.onmouseup = (e) => arcball.mouseup(); viewof step3Settings.addEventListener("input", refresh); invalidation.then(() => viewof step3Settings.removeEventListener("input", refresh) ); refresh(); return canvas; }33:T52c,{ const { app, drawCall } = step4; const { canvas } = app; const { width, height } = canvas; const arcball = new Arcball(canvas); const refresh = () => { app.clear(); const { nSlices, sliceAlpha, tf, illumination, sharpen } = viewof step4Settings.value; const colors = tfToColors(tf, { sharpen, xdomain: [-1, 1], n: 512 }) .map(({ color, y }) => { if (y == 0) return [0, 0, 0, 0]; let { r, g, b } = d3.color(palette[color]); return [r / 255, g / 255, b / 255, y]; }) .flat(); drawCall .uniform("sliceAlpha", sliceAlpha / nSlices) .uniform("illumination", illumination) .uniform("transform", arcball.transform) .uniform("color[0]", colors); for (let i = 0; i < nSlices; i++) { const z = -1.4 + (i * 2.8) / (nSlices - 1); drawCall.uniform("Z", z).draw(); } }; canvas.onmousedown = (e) => arcball.mousedown(e.offsetX, height - e.offsetY); canvas.onmousemove = (e) => { arcball.mousemove(e.offsetX, height - e.offsetY); refresh(); }; canvas.onmouseup = (e) => arcball.mouseup(); viewof step4Settings.addEventListener("input", refresh); invalidation.then(() => viewof step4Settings.removeEventListener("input", refresh) ); refresh(); return canvas; }34:T4fb,viewof fragShader4 = glsl`#version 300 es precision highp float; out vec4 fragColor; vec2 size = vec2(${canvasSize.width}, ${canvasSize.height}); float aspect = float(${canvasSize.width})/float(${canvasSize.height}); const int n = 512; // Color table size float nminus1 = 511.; uniform float Z; uniform float sliceAlpha; uniform mat4 transform; uniform bool illumination; uniform vec4 color[n]; ${step4Field} vec3 gradient (vec3 pos) { return vec3(field(pos+vec3(0.01,0.,0.))-field(pos-vec3(0.01,0.,0.)), field(pos+vec3(0.,0.01,0.))-field(pos-vec3(0.,0.01,0.)), field(pos+vec3(0.,0.,0.01))-field(pos-vec3(0.,0.,0.01))); } vec3 lightDir = normalize(vec3(1,1,1)); void main() { vec3 pos = (transform*vec4((gl_FragCoord.xy/size*2.0-vec2(1.0,1.0))*vec2(aspect,1.), Z,1.0)).xyz; float f = field(pos); float i = clamp((f+1.)/2.*nminus1, 0., nminus1); //fragColor = color[uint(floor(i))]; vec4 color1 = color[uint(floor(i))]; vec4 color2 = color[uint(ceil(i))]; fragColor = mix(color1, color2, fract(i)); if (fragColor.w == 0.) discard; vec3 grad = gradient(pos); float intensity = illumination ? 0.2 + 0.8* max(0.,dot(lightDir,normalize(grad))) : 1.; fragColor.xyz *= intensity; fragColor.w *= sliceAlpha; } `35:T61e,{ const { app, drawCall } = step4a; const { canvas } = app; const { width, height } = canvas; const arcball = new Arcball(canvas); const refresh = () => { app.clear(); const { nSlices, sliceAlpha, tf, sharpen, illumination, gradDelta } = viewof step4aSettings.value; const colors = tfToColors(tf, { sharpen, xdomain: [0, 1], n: 512 }) .map(({ color, y }) => { if (y == 0) return [0, 0, 0, 0]; let { r, g, b } = d3.color(palette[color]); return [r / 255, g / 255, b / 255, y]; }) .flat(); drawCall .uniform("sliceAlpha", Math.min(sliceAlpha / nSlices, 1)) .uniform("transform", arcball.transform) .uniform("illumination", illumination) .uniform("delta", gradDelta) .uniform("color[0]", colors); // for (let i = 0; i < nSlices; i++) { // const z = -1.4 + (i * 2.8) / (nSlices - 1); // drawCall.uniform("Z", z).draw(); // } for (let i = 0; i < nSlices; i++) { const z = -1 + (i * 2) / (nSlices - 1); drawCall.uniform("Z", z).draw(); } }; canvas.onmousedown = (e) => arcball.mousedown(e.offsetX, height - e.offsetY); canvas.onmousemove = (e) => { if (e.buttons) { arcball.mousemove(e.offsetX, height - e.offsetY); refresh(); } }; canvas.onmouseup = (e) => arcball.mouseup(); viewof step4aSettings.addEventListener("input", refresh); invalidation.then(() => viewof step4aSettings.removeEventListener("input", refresh) ); refresh(); return canvas; }36:T607,viewof fragShader4a = glsl`#version 300 es precision highp float; precision highp sampler3D; out vec4 fragColor; vec2 size = vec2(${canvasSize.width}, ${canvasSize.height}); float aspect = float(${canvasSize.width})/float(${canvasSize.height}); const int n = 512; // Color table size float nminus1 = 511.; uniform float Z; uniform float sliceAlpha; uniform mat4 transform; uniform bool illumination; uniform vec4 color[n]; uniform sampler3D tex; uniform vec3 texAspect; uniform float delta; float field (vec3 pos) { vec3 texCoord = (pos+vec3(1,1,1))*0.5; return texture(tex, texCoord).r; } vec3 gradient (vec3 pos) { return vec3(field(pos+vec3(0.02,0.,0.))-field(pos-vec3(0.02,0.,0.)), field(pos+vec3(0.,0.02,0.))-field(pos-vec3(0.,0.02,0.)), field(pos+vec3(0.,0.,0.02))-field(pos-vec3(0.,0.,0.02))); } vec3 lightDir = normalize(vec3(1,1,1)); void main() { vec3 pos = (transform*vec4((gl_FragCoord.xy/size*2.0-vec2(1.0,1.0))*vec2(aspect, 1.), Z,1.0)).xyz/texAspect; if (any (lessThan(pos,vec3(-1.))) || any (greaterThan(pos,vec3(1.0)))) discard; float f = field(pos); float i = clamp((f+1.)/2.*nminus1, 0., nminus1); //fragColor = color[uint(floor(i))]; vec4 color1 = color[uint(floor(i))]; vec4 color2 = color[uint(ceil(i))]; fragColor = mix(color1, color2, fract(i)); vec3 grad = gradient(pos); if (fragColor.w > 0.) { if (length(grad) > 0.02) fragColor.xyz *= 0.1+vec3(abs(dot(lightDir,normalize(grad)))); } else discard; fragColor.w *= sliceAlpha; } `37:T458,class Arcball { constructor(canvas) { this.canvas = canvas; this.center = [canvas.width / 2, canvas.height / 2]; this.radius = (Math.min(canvas.width, canvas.height) / 2) * 0.9; this.prev = []; this.transform = mat4.create(); this.mouseIsDown = false; } ballPos(p) { let u = vec2.sub([], p, this.center); if (vec2.len(u) >= this.radius) return vec3.normalize([], [...u, 0]); let z = Math.sqrt(this.radius ** 2 - u[0] ** 2 - u[1] ** 2); return vec3.normalize([], [...u, z]); } mousedown(x, y) { this.mouseIsDown = true; this.prev = [x, y]; } mousemove(x, y) { if (!this.mouseIsDown) return this.transform; let mouse = [x, y]; let u = this.ballPos(this.prev); let v = this.ballPos(mouse); this.prev = mouse; let axis = vec3.cross([], v, u); let ang = Math.asin(vec3.len(axis)); let rot = mat4.fromRotation([], ang, vec3.normalize([], axis)); [this.u, this.v, this.ang, this.axis] = [u, v, ang, axis]; return mat4.mul(this.transform, this.transform, rot); } mouseup(x, y) { this.mouseIsDown = false; } }38:[{"id":"08377e283c6d02379c83e014716efaa6445b02b5b67daa9b36d54ab3aad4d45ba4006c2d3a85097468868c95c299341c1010f0dd7bf7956cbe05f9c5db284f6d","href":"https://static.observableusercontent.com/files/08377e283c6d02379c83e014716efaa6445b02b5b67daa9b36d54ab3aad4d45ba4006c2d3a85097468868c95c299341c1010f0dd7bf7956cbe05f9c5db284f6d","name":"head256x256x109.zip","type":"application/zip","lastModified":1641853132149.514,"size":4127257}] 2f:{"title":"Volume rendering with slice compositing","cells":[{"id":0,"value":"# Volume rendering with slice compositing\n\nSlice compositing is a relatively simple technique for rendering 3d scalar fields. The idea is \nto composite semi-transparent slices of the volume from back to front. It can be applied\nto scalar fields expressed as [Signed Distance Functions](https://en.wikipedia.org/wiki/Signed_distance_function) or textures.\n\nHere we show step-by-step how to implement it with webgl 2, using [picogl](https://tsherif.github.io/picogl.js/) as a helper library. \n","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"## Step 1\n\nJust draw a single 2D SDF (signed distance function). A circle of radius 0.5 centered at the origin in this case","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"{\n step1.app.clear();\n step1.drawCall.draw();\n return step1.app.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"step1 = {\n const { width: w, height: h } = canvasSize;\n const canvas = htl.html`