Perspective on blog https://jpcharalambosh.co/tags/perspective/ Recent content in Perspective on blog blog https://jpcharalambosh.co/papermod-cover.png https://jpcharalambosh.co/papermod-cover.png Hugo en Tue, 24 Mar 2026 10:28:01 -0500 Visualizing Perspective Transformation to NDC https://jpcharalambosh.co/posts/ndc/ Tue, 24 Mar 2026 10:28:01 -0500 https://jpcharalambosh.co/posts/ndc/ <blockquote> <p><a href="https://jsantell.com/3d-projection/#perspective-projection">Perspective projection</a> is a fundamental concept in 3D graphics. The transformation maps a view frustum — a truncated pyramid — into a cube of Normalized Device Coordinates (NDC), producing the foreshortening effect that makes 3D scenes look convincing. The sketch below morphs a set of <code>cajas</code> (boxes) continuously from world space into NDC space, rendered from a third-person camera that also displays the frustum being transformed.</p> </blockquote> <iframe id='p5-0' style='border:none; display:block; width:0; height:0;' srcdoc=" <!DOCTYPE html> <html> <head> <style>body{margin:0;padding:0;overflow:hidden}</style> <script src='https://cdn.jsdelivr.net/npm/p5@2.2.3/lib/p5.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/p5.tree/dist/p5.tree.min.js'></script> <script> &#39;use strict&#39; // NDC morph — p5.js v2 &#43; p5.tree v0.0.25 // original: https://jpcharalambosh.co/posts/ndc/ let mainCam, frustumCam let fillMorph, outlineMorph let frustumProj // p5.Matrix(4) — frustum projection, updated each frame let vBuf, eBuf // Float32Array(16) — frustum view / eye matrices let cajas, panel const N = 81 // near plane const NDC = 0.5 // NDC morph offset const FOVY = 0.75 // frustum vertical fov const Z = 158 // frustum camera distance // ── setup ───────────────────────────────────────────────────────────────────── function setup() { createCanvas(600, 400, WEBGL) strokeWeight(0.8) colorMode(RGB, 1) frustumProj = createMatrix(4) vBuf = new Float32Array(16) eBuf = new Float32Array(16) panel = createPanel({ d: { min: 0, max: 1, value: 0, step: 0.01 }, animate: { value: true }, }, { title: &#39;NDC morph&#39;, collapsible: true, labels: true, color: &#39;white&#39;, x: width - 130, y: 10, }) // Morph body is identical for fill and stroke; only the struct type differs: // fill → &#39;Vertex&#39; (struct: position, normal, texCoord, color) // stroke → &#39;StrokeVertex&#39; (struct: position, tangentIn, tangentOut, color, weight) const morphBody = `{ vec4 fPos = uViewFrustumMatrix * vec4(inputs.position, 1.0); vec2 xy = -(fPos.xy / fPos.z) * (1.0 &#43; ndc) * n; fPos.xy = mix(fPos.xy, xy, d); inputs.position = (uEyeFrustumMatrix * fPos).xyz; return inputs; }` const morphUniforms = { uniforms: { &#39;mat4 uViewFrustumMatrix&#39;: () =&gt; vBuf, &#39;mat4 uEyeFrustumMatrix&#39;: () =&gt; eBuf, &#39;float d&#39;: () =&gt; panel.d.value(), &#39;float ndc&#39;: () =&gt; NDC, &#39;float n&#39;: () =&gt; N, }, } fillMorph = buildColorShader({ ...morphUniforms, &#39;Vertex getWorldInputs&#39;: `(Vertex inputs) ${morphBody}`, }) outlineMorph = buildStrokeShader({ ...morphUniforms, &#39;StrokeVertex getWorldInputs&#39;: `(StrokeVertex inputs) ${morphBody}`, }) cajas = Array.from({ length: 40 }, () =&gt; ({ position: createVector(random(-50, 50), random(-50, 50), random(-25, 75)), size: random(5, 20), col: color(random(), random(), random()), })) mainCam = createCamera() mainCam.camera( -250.56, -257.35, 181.54, -249.9, -256.75, 181.2, -0.57, 0.745, 0.34 ) frustumCam = createCamera() setCamera(mainCam) const f = 7 / 30 ortho(-width * f, width * f, -height * f, height * f, 1, 10000) } // ── draw ────────────────────────────────────────────────────────────────────── function draw() { background(&#39;#138d75&#39;) if (panel.animate.value()) { panel.d.set(map(sin(frameCount / 60), -1, 1, 0, 1)) } updateFrustum() // grid push() rotateX(HALF_PI) strokeWeight(0.2) stroke(&#39;#FFC300&#39;) grid({ subdivisions: 20, size: 240 }) pop() // single scene pass — fill, stroke, and frustum gizmo all morphed together push() shader(fillMorph) strokeShader(outlineMorph) strokeWeight(0.8) stroke(&#39;magenta&#39;) scene() fill(1, 0, 1, 0.3) viewFrustum({ mat4Eye: eBuf, mat4Proj: frustumProj, bits: p5.Tree.NEAR | p5.Tree.FAR, viewer: () =&gt; { push() resetShader() axes({ size: 50, bits: p5.Tree.X | p5.Tree._Y | p5.Tree._Z }) pop() }, }) pop() } // ── updateFrustum ───────────────────────────────────────────────────────────── function updateFrustum() { frustumCam.camera(0, 0, Z, ...p5.Tree.k, ...p5.Tree.j) frustumCam.mat4View(vBuf) frustumCam.mat4Eye(eBuf) const far = N * (1 &#43; 2 * tan(FOVY / 2) * (1 &#43; NDC)) frustumProj.perspective(FOVY, 1, N, far) } // ── scene ───────────────────────────────────────────────────────────────────── function scene() { cajas.forEach(({ position: pos, size, col }) =&gt; { push() fill(col) translate(pos.x, pos.y, pos.z) box(size) pop() }) } </script> <script> (function() { var t = setInterval(function() { var c = document.querySelector('canvas') if (c && c.offsetWidth > 0) { clearInterval(t) window.parent.postMessage({ type: 'p5resize', id: 'p5-0', w: c.offsetWidth, h: c.offsetHeight }, '*') } }, 100) })() </script> </head> <body></body> </html> " ></iframe> <script> window.addEventListener('message', function(e) { if (e.data && e.data.type === 'p5resize' && e.data.id === 'p5-0') { var f = document.getElementById('p5-0') if (f) { f.style.width = e.data.w + 'px'; f.style.height = e.data.h + 'px' } } }) </script> <h1 id="shaders">Shaders</h1> <p>The morph lives in a single GLSL hook injected into p5&rsquo;s base shaders through <a href="https://beta.p5js.org/reference/p5/buildColorShader/"><code>buildColorShader</code></a> and <a href="https://beta.p5js.org/reference/p5/buildStrokeShader/"><code>buildStrokeShader</code></a> — no shader files needed.</p>