2a:null 2b:["$","title",null,{"children":"Vox | nxrix | Observable"}] 30:T1b5f,canvas = { const canvas = document.createElement("canvas"); canvas.style.maxWidth = "100%"; canvas.style.imageRendering = "pixelated"; canvas.style.border = "1px solid #8884"; canvas.style.borderRadius = "8px"; const renderer = new THREE.WebGLRenderer({ context: canvas.getContext("webgl2", { preserveDrawingBuffer: true, antialias: false }) }); function handleSource(string, errorLine) { const lines = string.split("\n"); const lines2 = []; const from = Math.max(errorLine - 6, 0); const to = Math.min(errorLine + 6, lines.length); for (let i = from; i < to; i++) { const line = i + 1; lines2.push(`${line === errorLine ? ">" : " "} ${line}: ${lines[i]}`); } return lines2.join("\n"); } function getShaderErrors(gl, shader, type) { const status = gl.getShaderParameter(shader, gl.COMPILE_STATUS); const shaderInfoLog = gl.getShaderInfoLog(shader) || ""; const errors = shaderInfoLog.trim(); if (status && errors === "") return ""; const errorMatches = /ERROR: 0:(\d+)/.exec(errors); if (errorMatches) { const errorLine = parseInt(errorMatches[1]); return ( errors + "\n\n" + handleSource(gl.getShaderSource(shader), errorLine) ); } else { return errors; } } renderer.debug.onShaderError = ( gl, program, glVertexShader, glFragmentShader ) => { const programInfoLog = gl.getProgramInfoLog(program) || ""; const fragmentShaderInfoLog = gl.getShaderInfoLog(glFragmentShader) || ""; const programLog = programInfoLog.trim(); const fragmentLog = fragmentShaderInfoLog.trim(); if (gl.getProgramParameter(program, gl.LINK_STATUS) === false) { const fragmentErrors = getShaderErrors(gl, glFragmentShader, "fragment"); errors.innerText = fragmentErrors; errors.style.color = "red"; } }; const scene = new THREE.Scene(); const vs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; void main() { vP = position; vN = normal; vW = (modelMatrix*vec4(position,1)).xyz; vM = projectionMatrix*modelViewMatrix; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1); }`; const cube = new THREE.Mesh( new THREE.BoxGeometry(2, 2, 2), new THREE.ShaderMaterial({ vertexShader: vs, fragmentShader: "void main(){}", transparent: true, //depthWrite: false, side: THREE.DoubleSide, uniforms: { iPerspective: { value: state.perspective } } }) ); canvas.cube = cube; scene.add(cube); /*scene.add( new THREE.LineSegments( new THREE.EdgesGeometry(new THREE.BoxGeometry(2.05, 2.05, 2.05)), new THREE.LineBasicMaterial({ color: 0x111111 }) ) );*/ const perspectiveCamera = new THREE.PerspectiveCamera( state.fov, 1, 0.125, 64 ); const orthographicCamera = new THREE.OrthographicCamera( -2, 2, 2, -2, -8, 128 ); perspectiveCamera.position.set(2, 2, 4); orthographicCamera.position.set(2, 2, 4); let camera = state.perspective ? perspectiveCamera : orthographicCamera; canvas.resize = (w, h, r = 1) => { renderer.setSize(w, h, true); canvas.width = w * r; canvas.height = h * r; canvas.style.width = w + "px"; renderer.setPixelRatio(r); const aspect = w / h; perspectiveCamera.aspect = aspect; perspectiveCamera.zoom = aspect <= 1 ? aspect : 1; perspectiveCamera.updateProjectionMatrix(); if (aspect <= 1) { const visibleHeight = orthographicCamera.left - orthographicCamera.right; orthographicCamera.top = -visibleHeight / aspect / 2; orthographicCamera.bottom = visibleHeight / aspect / 2; } else { const visibleHeight = orthographicCamera.top - orthographicCamera.bottom; orthographicCamera.left = (-visibleHeight * aspect) / 2; orthographicCamera.right = (visibleHeight * aspect) / 2; } orthographicCamera.updateProjectionMatrix(); renderer.render(scene, camera); }; canvas.resizeEvent = () => { const z = Math.min(window.innerWidth, 512); canvas.resize(z, z, devicePixelRatio); }; window.addEventListener("resize", canvas.resizeEvent); canvas.resizeEvent(); let needsRender = state.s; state.s = false; const controls = new THREE.OrbitControls(camera, canvas); controls.addEventListener("change", () => { needsRender = true; }); let disposed = false; function animate(t) { if (disposed) return; if (needsRender) { renderer.render(scene, camera); needsRender = false; } requestAnimationFrame(animate); } animate(0); invalidation.then(() => { disposed = true; window.removeEventListener("resize", canvas.resizeEvent); renderer.dispose(); renderer.forceContextLoss(); }); canvas.update = () => { needsRender = true; }; canvas.setFOV = (v) => { perspectiveCamera.fov = v; perspectiveCamera.updateProjectionMatrix(); needsRender = true; }; canvas.setCamera = (e) => { const target = controls.target.clone(); const position = camera.position.clone(); const aspect = canvas.width / canvas.height; const halfFovRad = (perspectiveCamera.fov * Math.PI) / 360; if (e) { const visibleHeight = (aspect <= 1 ? orthographicCamera.right - orthographicCamera.left : orthographicCamera.top - orthographicCamera.bottom) / orthographicCamera.zoom; const newDistance = visibleHeight / (2 * Math.tan(halfFovRad)); const direction = new THREE.Vector3() .subVectors(position, target) .normalize(); const newPosition = target .clone() .add(direction.multiplyScalar(newDistance)); perspectiveCamera.position.copy(newPosition); perspectiveCamera.updateProjectionMatrix(); } else { const distance = position.distanceTo(target); const visibleHeight = 2 * distance * Math.tan(halfFovRad); orthographicCamera.position.copy(position); if (aspect <= 1) { orthographicCamera.top = visibleHeight / aspect / 2; orthographicCamera.bottom = -visibleHeight / aspect / 2; orthographicCamera.left = -visibleHeight / 2; orthographicCamera.right = visibleHeight / 2; } else { orthographicCamera.left = (-visibleHeight * aspect) / 2; orthographicCamera.right = (visibleHeight * aspect) / 2; orthographicCamera.top = visibleHeight / 2; orthographicCamera.bottom = -visibleHeight / 2; } orthographicCamera.zoom = 1; orthographicCamera.updateProjectionMatrix(); } camera = e ? perspectiveCamera : orthographicCamera; cube.material.uniforms.iPerspective.value = e; controls.object = camera; controls.target.copy(target); controls.update(); needsRender = true; }; canvas.uniforms = cube.material.uniforms; return canvas; }31:T15cd,viewof shader = { const shader = ` #define TAU 6.2831853 #define EPS 0.001 #define max3v(v) max(max(v.x,v.y),v.z) #define min3v(v) min(min(v.x,v.y),v.z) vec3 turbo(float x) { const vec4 r4 = vec4(0.13572138, 4.61539260, -42.66032258, 132.13108234); const vec4 g4 = vec4(0.09140261, 2.19418839, 4.84296658, -14.18503333); const vec4 b4 = vec4(0.10667330, 12.64194608, -60.58204836, 110.36276771); const vec2 r2 = vec2(-152.94239396, 59.28637943); const vec2 g2 = vec2(4.27729857, 2.82956604); const vec2 b2 = vec2(-89.90310912, 27.34824973); x = clamp(x,0.0,1.0); vec4 v4 = vec4(1,x,x*x,x*x*x); vec2 v2 = v4.zw*v4.z; return vec3( dot(v4,r4)+dot(v2,r2), dot(v4,g4)+dot(v2,g2), dot(v4,b4)+dot(v2,b2) ); } const vec3 l = normalize(vec3(1,3,2)); const vec3 size = vec3(${size}); const ivec3 isize = ivec3(size); const vec3 size2 = size/2.0; const vec3 size25 = size2-0.5; const int max_steps = int(max(max(size.x,size.y),size.z))*3+3; ${f} #define S ${shading} #define A ${ambient.toPrecision(2)} float shadow(vec3 p, vec3 n, vec3 rd) { vec3 ro = p + n * EPS; vec3 st = sign(rd); vec3 ir = 1.0/rd; vec3 td = abs(ir); vec3 v = floor(ro); vec3 tmax = (v + step(0.0, st) - ro) * ir; for (int i=0;i= 1.0) return 0.0; } vec3 m = step(tmax.xyz,tmax.yzx)*step(tmax.xyz,tmax.zxy); tmax += td*m; v += st*m; } return 1.0; } float transmittance(vec3 p, vec3 n, vec3 rd) { vec3 ro = p + n * EPS; vec3 st = sign(rd); vec3 ir = 1.0/rd; vec3 td = abs(ir); vec3 v = floor(ro); vec3 tmax = (v + step(0.0, st) - ro) * ir; float T = 1.0; for (int i = 0; i < max_steps; ++i) { if (any(lessThan(v,vec3(-1)))||any(greaterThanEqual(v,size+1.0))) break; if (all(greaterThanEqual(v,vec3(0)))&&all(lessThan(v,size))) { vec4 d = f(v); if (d.a > 0.0) { T *= (1.0 - clamp(d.a,0.0,1.0)); if (T < 0.01) return 0.0; } } vec3 m = step(tmax.xyz, tmax.yzx) * step(tmax.xyz, tmax.zxy); tmax += td * m; v += st * m; } return T; } float traverse(vec3 ro, vec3 rd, out vec4 vox, out vec3 nrm) { vec3 st = sign(rd); vec3 ir = 1.0/rd; //vec3 ir = 1.0/(rd+1.0-abs(st)); vec3 td = abs(ir); vec3 v = floor(ro); vec3 tmax = (v + step(0.0, st) - ro) * ir; float ct = -1.0; nrm = -st; for (int i=0;i 0.0) { #if S == 3 float t = transmittance(ro+rd*ct,nrm,l); d.rgb *= max(dot(nrm,l),0.0)*t*(1.0-A)+A; //if (t!=0.0&&d.a<1.0) d.a = 0.0; #elif S > 0 float diff = max(dot(nrm,l),0.0); #if S == 2 if (d.a >= 1.0) diff *= shadow(ro+rd*ct,nrm,l); #endif d.rgb *= diff*(1.0-A)+A; #endif float a = clamp(d.a, 0.0, 1.0); vox.rgb += d.rgb * a * (1.0 - vox.a); vox.a += a * (1.0 - vox.a); if (vox.a >= 1.0) return ct; } } vec3 m = step(tmax.xyz,tmax.yzx)*step(tmax.xyz,tmax.zxy); ct = dot(tmax,m); tmax += td*m; v += st*m; nrm = -st*m; } return ct; } void mainCube(out vec4 fragColor, vec3 ro, vec3 rd) { ro *= size2; ro += size2; vec3 ir = 1.0/rd; vec3 t1 = -ro *ir; vec3 t2 = (size-ro)*ir; vec3 n = min(t1,t2); vec3 f = max(t1,t2); float tmin = max(max(n.x,n.y),n.z); float tmax = min(min(f.x,f.y),f.z); vec3 e = ro+rd*(max(tmin,0.0)-EPS); vec4 col; vec3 nrm; float t = traverse(e,rd,col,nrm); e += rd*t; if (t==-1.0) { e = ro+rd*(tmax-EPS); vec3 abs_p = abs(e-size2); vec2 uv; if (abs_p.x > abs_p.y && abs_p.x > abs_p.z) { uv = e.yz; } else if (abs_p.y > abs_p.x && abs_p.y > abs_p.z) { uv = e.xz; } else { uv = e.xy; } vec3 m = step(f.xyz,f.yzx)*step(f.xyz, f.zxy); nrm = -sign(rd) * m; float check = mod(floor(uv.x/size.x*8.0)+floor(uv.y/size.z*8.0),2.0); float bg = (check*0.16+0.61); #if S > 0 float diff = max(dot(nrm,l),0.0); #if S == 2 diff *= shadow(e,nrm,l); #elif S == 3 diff *= transmittance(e,nrm,l); #endif bg *= diff*(1.0-A)+A; #endif col.rgb += bg * (1.0 - col.a); } fragColor = vec4(col.xyz,1); }`; const fs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; uniform bool iPerspective; ${shader} void main() { vec3 ro = cameraPosition; vec3 rd; if (iPerspective) { rd = normalize(vW - ro); } else { ro = vW; rd = normalize(vec3(vM[0][2],vM[1][2],vM[2][2])); } mainCube(gl_FragColor, ro, rd); } `; const material = canvas.cube.material; if (material.fragmentShader !== fs) { errors.innerText = "No errors :)"; errors.style.color = "green"; material.fragmentShader = fs; material.needsUpdate = true; canvas.update(); } return glsl("shader", shader); }32:[] 2e:{"id":"cf1324166549e1b2","slug":"vox","title":"Vox","thumbnail":"fbd2d2bb1ab8922e4e7101cf2658fd15e9330101fc442c5c8659f41aabc85e21","access_level":"public","create_time":"$D2026-07-24T18:21:38.637Z","update_time":"$D2026-09-10T07:05:24.580Z","view_time":null,"first_public_time":"$D2026-07-28T17:46:30.031Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":415,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}],"members":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null,"role":"editor"},{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024","role":"editor"}],"comments":[{"id":"e5ea393d0d541f8a","reply_to_id":null,"content":"Wow, I've used heat maps to understand Cayley tables, but this takes it to the next level. Without the 3D, I would have never realize XOR creates Skerpenski tetrahedrons like AND and OR does. And this is also an approachable tool for learning a little GLSL. Thanks for making, you've consistently been making some of my favorite notebooks lately!","create_time":"$D2026-09-08T20:55:36.738Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}},{"id":"b2dc68d8e11ad33d","reply_to_id":"e5ea393d0d541f8a","content":"Thank you! :)","create_time":"$D2026-09-10T07:04:56.240Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"ecfdcc558913fcce","slug":"fractals","title":"Fractals","owner":{"id":"d6840fab65eebcab","login":"nxrix","name":"nxrix"}},"type":"notebook","body":{"title":"Vox","cells":[{"id":0,"value":"# Vox\nA tool for rendering voxel shaders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof f = Inputs.textarea({\n rows: 12,\n value: `vec4 f(vec3 v) {\n ivec3 p = ivec3(v);\n return (p.x^p.z)==p.y?vec4(turbo(v.y/size.y),1):vec4(0);\n}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"errors = html`

Loading...

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"viewof size = Inputs.radio([32, 64, 128, 256, 512, 1024], { value: 128 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"{\n const i = Inputs.number({ placeholder: \"Size\", value: 512, min: 1, step: 1 });\n const d = Inputs.button(\"Download PNG\", {\n reduce() {\n const a = document.createElement(\"a\");\n const s = Number(i.value) || 512;\n canvas.resize(s, s, 1);\n a.href = canvas.toDataURL(\"image/png\");\n canvas.resizeEvent();\n a.download = `vox.png`;\n a.click();\n }\n });\n i.style.width = \"100px\";\n return html`

${i}${d}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"{\n const p = Inputs.toggle({ label: \"Perspective\", value: state.perspective });\n const f = Inputs.range([30, 90], { label: \"FOV\", value: state.fov, step: 5 });\n const u = p.addEventListener(\"input\", () => {\n state.perspective = p.value;\n f.style.display = p.value ? \"flex\" : \"none\";\n canvas.setCamera(p.value);\n });\n f.addEventListener(\"input\", () => {\n state.fov = f.value;\n canvas.setFOV(f.value);\n });\n f.style.display = p.value ? \"flex\" : \"none\";\n return Inputs.form({ p, f });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"viewof shading = Inputs.radio([0, 1, 2, 3], {\n label: \"Shading\",\n value: 2,\n format: (i) =>\n [\"Flat\", \"Diffuse\", \"Simple Shadows\", \"Volumetric (Dangerous!)\"][i]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"viewof ambient = Inputs.range([0, 1], {\n label: \"Ambient\",\n step: 0.01,\n value: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"state = {\n return {\n perspective: false,\n fov: 45,\n s: true\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"glsl = (l = \"\", t) => {\n return Object.assign(md`\\`${l} = glsl(~)\\``, { value: t });\n const c = md`\\`\\`\\`glsl\\n${t.trim()}\\n\\`\\`\\``;\n c.style.margin = \"0\";\n c.style.padding = \"8px\";\n const e = html`

${c}

`;\n e.style.width = \"fit-content\";\n e.style.maxWidth = \"100%\";\n e.style.maxHeight = \"400px\";\n e.style.overflow = \"auto\";\n e.style.borderRadius = \"4px\";\n e.style.border = \"1px solid #8884\";\n e.value = t;\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"THREE = {\n try {\n const THREE = await import(\"three@0.184.0\");\n const { OrbitControls } = await import(\n \"three@0.184.0/examples/jsm/controls/OrbitControls.js\"\n );\n return { ...THREE, OrbitControls };\n } catch (e) {\n // IOS 15 issue\n const THREE = await import(\"https://esm.sh/three@0.184.0?target=es2020\");\n const { OrbitControls } = await import(\n \"https://esm.sh/three@0.184.0/examples/jsm/controls/OrbitControls.js?target=es2020\"\n );\n return { ...THREE, OrbitControls };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}} 2f:"$2e:body"