2d:null 2e:["$","title",null,{"children":"Perspective transform | Tom Larkworthy | Observable"}] 33:T784,{ // Projection function for isometric projection. function proj(x, y, z) { const scale = 100; const cos30 = 0.9; const sin30 = 0.3; const offsetX = 200; const offsetY = 200; return { sx: offsetX + scale * (x - z) * cos30, sy: offsetY + scale * ((x + z) * sin30 - y) }; } const faceCenters = [ { id: "p1", x: 0.5, y: 0, z: 0.5 }, { id: "p2", x: 0.5, y: 1, z: 0.5 }, { id: "p3", x: 0.5, y: 0.5, z: 0 }, { id: "p4", x: 0.5, y: 0.5, z: 1 }, { id: "p5", x: 0, y: 0.5, z: 0.5 }, { id: "p6", x: 1, y: 0.5, z: 0.5 } ]; // Precompute projected positions for vertices. const projVertices = new Map(); unitVertices.forEach((v) => { projVertices.set(v.id, proj(v.x, v.y, v.z)); }); return htl.svg``; }34:T536,rotationMatrix = { // Convert degrees to radians. const degToRad = Math.PI / 180; // Extract rotation angles (in degrees) from the rotation UI form. // Assuming the order: [Rotation X, Rotation Y, Rotation Z] const rx = rotation[0] * degToRad; const ry = rotation[1] * degToRad; const rz = rotation[2] * degToRad; // Rotation matrix around X-axis. const Rx = [ [1, 0, 0], [0, Math.cos(rx), -Math.sin(rx)], [0, Math.sin(rx), Math.cos(rx)] ]; // Rotation matrix around Y-axis. const Ry = [ [Math.cos(ry), 0, Math.sin(ry)], [0, 1, 0], [-Math.sin(ry), 0, Math.cos(ry)] ]; // Rotation matrix around Z-axis. const Rz = [ [Math.cos(rz), -Math.sin(rz), 0], [Math.sin(rz), Math.cos(rz), 0], [0, 0, 1] ]; // Helper function to multiply two 3x3 matrices. function multiply3(A, B) { const result = []; for (let i = 0; i < 3; i++) { result[i] = []; for (let j = 0; j < 3; j++) { let sum = 0; for (let k = 0; k < 3; k++) { sum += A[i][k] * B[k][j]; } result[i][j] = sum; } } return result; } // Assume the rotation order is: first rotate around X, then Y, then Z. // Composite rotation matrix: R = Rz * Ry * Rx const Rzy = multiply3(Rz, Ry); const R = multiply3(Rzy, Rx); return R; }35:T913,md` # Perspective Camera Model In a perspective camera model, 3D points in the camera’s coordinate system (expressed in homogeneous coordinates as ${tex`[x, y, z, 1]^T`}) are projected onto the 2D image plane using a projection matrix. This projection matrix is often referred to as the **homography matrix** in the context of transforming points from 3D camera space to 2D screen space, although strictly speaking it involves a perspective divide. ## Projection Matrix A common form of the 4×4 perspective projection matrix is: ${tex` [ P = \begin{bmatrix} \frac{f}{a} & 0 & 0 & 0 \\ 0 & f & 0 & 0 \\ 0 & 0 & \frac{(f_{far}+n)}{(n - f_{far})} & \frac{2 f_{far} n}{(n - f_{far})} \\ 0 & 0 & -1 & 0 \end{bmatrix} ] `} Where: - **fov** is the field of view in degrees. - ${tex`f = \frac{1}{\tan(\frac{fov}{2})}`} serves as a focal length in normalized units. - ${tex`a`} is the aspect ratio (width/height) of the image. - ${tex`n`} is the distance to the **near plane**. - ${tex`f_{far}`} is the distance to the **far plane**. ## Numerical Example For our parameters from the Perspective Camera UI: - fov = \`${perspectiveCamera.fov.toFixed(0)}°\` - aspect = \`${perspectiveCamera.aspect.toFixed(2)}\` - near = \`${perspectiveCamera.near.toFixed(1)}\` - far = \`${perspectiveCamera.far.toFixed(0)}\` Let’s compute: 1. **Focal length:** ${tex` f = \frac{1}{\tan\Big(\frac{${perspectiveCamera.fov.toFixed( 0 )}}{2}\text{°}\Big)} \approx ${(1 / Math.tan((perspectiveCamera.fov * Math.PI) / 360)).toFixed(3)} `} 2. **Third row, first element:** ${tex` \frac{(f_{far}+n)}{(n - f_{far})} = \frac{${perspectiveCamera.far.toFixed( 0 )} + ${perspectiveCamera.near.toFixed(1)}}{${perspectiveCamera.near.toFixed( 1 )} - ${perspectiveCamera.far.toFixed(0)}} \approx ${( (perspectiveCamera.far + perspectiveCamera.near) / (perspectiveCamera.near - perspectiveCamera.far) ).toFixed(4)} `} 3. **Third row, second element:** ${tex` \frac{2 f_{far} n}{(n - f_{far})} = \frac{2 \cdot ${perspectiveCamera.far.toFixed( 0 )} \cdot ${perspectiveCamera.near.toFixed(1)}}{${perspectiveCamera.near.toFixed( 1 )} - ${perspectiveCamera.far.toFixed(0)}} \approx ${( (2 * perspectiveCamera.far * perspectiveCamera.near) / (perspectiveCamera.near - perspectiveCamera.far) ).toFixed(4)} `} `36:T781,md` ### Symbolic projection ${tex` \quad \underbrace{ \begin{pmatrix} \dfrac{f}{a} & 0 & 0 & 0 \\[8pt] 0 & f & 0 & 0 \\[8pt] 0 & 0 & \dfrac{f_{far}+n}{n-f_{far}} & \dfrac{2 f_{far} n}{n-f_{far}} \\[8pt] 0 & 0 & -1 & 0 \end{pmatrix} }_{\displaystyle M} \quad \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} = \begin{pmatrix} x^{ndc}_1 \\ y^{ndc}_1 \\ z^{ndc}_1 \\ w_1 \end{pmatrix} `} ### Live Values Projection (for vertex ${tex`(v_{100})`}): ${tex` \quad \underbrace{ \begin{pmatrix} ${( 1 / Math.tan((perspectiveCamera.fov * Math.PI) / 360) / perspectiveCamera.aspect ).toFixed(3)} & 0 & 0 & 0 \\[8pt] 0 & ${(1 / Math.tan((perspectiveCamera.fov * Math.PI) / 360)).toFixed( 3 )} & 0 & 0 \\[8pt] 0 & 0 & ${( (perspectiveCamera.far + perspectiveCamera.near) / (perspectiveCamera.near - perspectiveCamera.far) ).toFixed(3)} & ${( (2 * perspectiveCamera.far * perspectiveCamera.near) / (perspectiveCamera.near - perspectiveCamera.far) ).toFixed(3)} \\[8pt] 0 & 0 & -1 & 0 \end{pmatrix} }_{\displaystyle M_{live}} \quad \begin{pmatrix} ${vertices.find((v) => v.id === "v100").x.toFixed(3)} \\ ${vertices.find((v) => v.id === "v100").y.toFixed(3)} \\ ${vertices.find((v) => v.id === "v100").z.toFixed(3)} \\ 1 \end{pmatrix} = \begin{pmatrix} ${( (1 / Math.tan((perspectiveCamera.fov * Math.PI) / 360) / perspectiveCamera.aspect) * vertices.find((v) => v.id === "v100").x ).toFixed(3)} \\[8pt] ${( (1 / Math.tan((perspectiveCamera.fov * Math.PI) / 360)) * vertices.find((v) => v.id === "v100").y ).toFixed(3)} \\[8pt] ${( ((perspectiveCamera.far + perspectiveCamera.near) / (perspectiveCamera.near - perspectiveCamera.far)) * vertices.find((v) => v.id === "v100").z + (2 * perspectiveCamera.far * perspectiveCamera.near) / (perspectiveCamera.near - perspectiveCamera.far) ).toFixed(3)} \\[8pt] ${(-vertices.find((v) => v.id === "v100").z).toFixed(3)} \end{pmatrix} `} `37:T626,display = () => { return Plot.plot({ title: "camera 1 with highlighted face edges", grid: true, inset: 20, aspectRatio: 1, x: { label: "Normalized Device X (x_ndc)", domain: [-1, 1] }, y: { label: "Normalized Device Y (y_ndc)", domain: [-1, 1] }, marks: [ Plot.dot([rayCastPoint], { r: 10, stroke: "blue" }), Plot.dot(projectedPoints, { x: "x_ndc", y: "y_ndc", r: 5, fill: "steelblue" }), Plot.text(projectedPoints, { x: "x_ndc", y: "y_ndc", text: (d) => `${d.id}: (${d.x_ndc.toFixed(2)}, ${d.y_ndc.toFixed(2)})`, dx: 8, dy: -4, fontSize: 10 }), Plot.arrow( edges.map((edge) => { const source = projectedPoints.find((d) => d.id === edge[0]); const target = projectedPoints.find((d) => d.id === edge[1]); return { x1: source.x_ndc, y1: source.y_ndc, x2: target.x_ndc, y2: target.y_ndc, // Highlight edge if both endpoints are part of the face. highlight: faceSet.has(source.id) && faceSet.has(target.id) }; }), { x1: (d) => d.x1, y1: (d) => d.y1, x2: (d) => d.x2, y2: (d) => d.y2, bend: false, strokeWidth: 2, strokeLinejoin: "miter", headLength: 12, inset: 0, stroke: (d) => (d.highlight ? "red" : "grey") } ) ] }); }38:T405,unprojectRay = (rayCastPoint, depth) => { // Given a 2D rayCastPoint in normalized device coordinates [ndc_x, ndc_y] // and a depth value (assumed to be the camera space z coordinate), // return the corresponding world space coordinate. // // In our projection: // ndc_x = (f/aspect * x) / (-z) // ndc_y = (f * y) / (-z) // Thus, inverting these relations (noting z = depth): // x = -ndc_x * depth * aspect / f // y = -ndc_y * depth / f // z = depth // // Note: This assumes that the projection matrix has no additional view transform, // meaning that the camera coordinate system aligns with world space. // // Retrieve the camera parameters from the perspectiveCamera interactive cell. const { fov, aspect } = perspectiveCamera; // Compute focal length from field-of-view (in degrees). const f = 1 / Math.tan((fov * Math.PI) / 360); const [ndc_x, ndc_y] = rayCastPoint; const x = (-ndc_x * depth * aspect) / f; const y = (-ndc_y * depth) / f; return { x, y, z: depth }; }39:T671,intersectionPoint = { // Identify the three vertices defining the face. // v000: (0,0,0), v100: (1,0,0), v110: (1,1,0) (after applying rotation and translation). const A = vertices.find((v) => v.id === "v000"), B = vertices.find((v) => v.id === "v100"), C = vertices.find((v) => v.id === "v110"); // Compute two edge vectors of the plane. const edge1 = { x: B.x - A.x, y: B.y - A.y, z: B.z - A.z }; const edge2 = { x: C.x - A.x, y: C.y - A.y, z: C.z - A.z }; // Compute the normal of the plane via cross product. const n = { x: edge1.y * edge2.z - edge1.z * edge2.y, y: edge1.z * edge2.x - edge1.x * edge2.z, z: edge1.x * edge2.y - edge1.y * edge2.x }; // Define the ray: // The camera is at the origin (0,0,0). // Compute a point along the ray using unprojectRay with an arbitrary depth (here 1) to determine its direction. const p1 = unprojectRay(rayCastPoint, 1); const dMag = Math.hypot(p1.x, p1.y, p1.z); const rayDir = { x: p1.x / dMag, y: p1.y / dMag, z: p1.z / dMag }; // Ray equation: R(t) = origin + t * rayDir, where origin is (0,0,0). // Find t such that the point lies on the plane defined by A and normal n. // The plane equation is (P - A) · n = 0. For the ray, P = t * rayDir. // Solve: (t * rayDir - A) · n = 0 => t = (A · n) / (rayDir · n). const numerator = A.x * n.x + A.y * n.y + A.z * n.z; const denominator = rayDir.x * n.x + rayDir.y * n.y + rayDir.z * n.z; const t = numerator / denominator; // The intersection point: return { x: rayDir.x * t, y: rayDir.y * t, z: rayDir.z * t, t }; }3a:T672,viewMatrix = { // Fixed implementation of a lookAt view matrix. const degToRad = Math.PI / 180; const orbit = orbit_angle * degToRad; // Define orbit parameters. const orbitRadius = 10; // distance from cube center // Define the center of the cube (average of vertices, after translation) const center = [0.5, 0.5, 10.5]; // Compute the eye (camera) position on the orbit (in XZ plane, keeping y constant) const eye = [ center[0] + orbitRadius * Math.cos(orbit), center[1], center[2] + orbitRadius * Math.sin(orbit) ]; // Define the up vector. const up = [0, 1, 0]; // Helper functions. function subtract(a, b) { return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; } function normalize(v) { const len = Math.hypot(v[0], v[1], v[2]); return [v[0] / len, v[1] / len, v[2] / len]; } function cross(a, b) { return [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0] ]; } function dot(a, b) { return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; } // Compute the forward, right, and true up vectors. // Notice: in a standard lookAt, the forward vector z is defined as normalize(eye - center) const zAxis = normalize(subtract(eye, center)); const xAxis = normalize(cross(up, zAxis)); const yAxis = cross(zAxis, xAxis); // Build the view matrix in row-major order. // The matrix transforms world coordinates into camera space. return [ [xAxis[0], xAxis[1], xAxis[2], -dot(xAxis, eye)], [yAxis[0], yAxis[1], yAxis[2], -dot(yAxis, eye)], [zAxis[0], zAxis[1], zAxis[2], -dot(zAxis, eye)], [0, 0, 0, 1] ]; }3b:T5e5,Plot.plot({ title: "camera 2", grid: true, inset: 20, aspectRatio: 1, x: { label: "Normalized Device X (x_ndc)", domain: [-1, 1] }, y: { label: "Normalized Device Y (y_ndc)", domain: [-1, 1] }, marks: [ Plot.arrow([secondRayPoints], { x1: (d) => d[0].x_ndc, x2: (d) => d[1].x_ndc, y1: (d) => d[0].y_ndc, y2: (d) => d[1].y_ndc, stroke: "blue" }), Plot.dot(secondProjectedPoints, { x: "x_ndc", y: "y_ndc", r: 5, fill: "steelblue" }), Plot.text(secondProjectedPoints, { x: "x_ndc", y: "y_ndc", text: (d) => `${d.id}: (${d.x_ndc.toFixed(2)}, ${d.y_ndc.toFixed(2)})`, dx: 8, dy: -4, fontSize: 10 }), Plot.arrow( edges.map((edge) => { const source = secondProjectedPoints.find((d) => d.id === edge[0]); const target = secondProjectedPoints.find((d) => d.id === edge[1]); return { x1: source.x_ndc, y1: source.y_ndc, x2: target.x_ndc, y2: target.y_ndc, // Highlight edge if both endpoints are part of the face. highlight: faceSet.has(source.id) && faceSet.has(target.id) }; }), { x1: (d) => d.x1, y1: (d) => d.y1, x2: (d) => d.x2, y2: (d) => d.y2, bend: false, strokeWidth: 2, strokeLinejoin: "miter", headLength: 12, inset: 0, stroke: (d) => (d.highlight ? "red" : "grey") } ) ] })3c:[] 31:{"id":"643d3a7b9cab18ed","slug":"perspective-transform","title":"Perspective transform","thumbnail":"f5bbbf43dfedb5c55771c01d94f799cb9aa5c8da3742859c7fc9e284e9f8629b","access_level":"public","create_time":"$D2025-03-06T20:43:47.656Z","update_time":"$D2025-03-09T11:17:58.295Z","view_time":null,"first_public_time":"$D2025-03-07T21:18:47.074Z","fork":{"id":"ae2987be1d73ac7e","slug":"robocoop-blank-slate","title":"Roboco-op: Blank Slate ","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":9,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":3411,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Perspective transform","cells":[{"id":0,"value":"# Perspective transform\n## homogeneous coordinates and the camera matrix\n\nAn interactive toy that is meant to provide numerical verification of correctly operating homogeneous coordinates multiplication through a camera matrix (world to pixel conversion) and ray intersections (pixel to world picking).\n\nThe code for each step is in the burger menu on the left.\n\nHomogeneous coordinates are a key concept in computer graphics and vision, allowing you to correctly represent perspective transformation using just linear algebra.\n\nOften developers without a computer graphics background assume that graphics is done with 3x3 transforms and 3d points, its 3d space after all! However, this is an affine transform that cannot represent translations of the camera or perspective. The trick of homogeneous coordinates is to append an extra 1, and use a 4x4 matrix to get some extra expressivity to overcome the limitations of 3x3 transforms, whilst still being linear algebra. \n\n```\n[ x\n y * M = [u/w v/w 1]\n z\n 1 ]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3292,"value":"## Unit cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2920,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3024,"value":"Inputs.bind(\n Inputs.form([\n Inputs.range([-180, 180], { label: \"Rotation X (deg)\", value: -4 }),\n Inputs.range([-180, 180], { label: \"Rotation Y (deg)\", value: 4 }),\n Inputs.range([-180, 180], { label: \"Rotation Z (deg)\", value: 0 })\n ]),\n viewof rotation\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2961,"value":"display()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2984,"value":"viewof perspectiveCamera = view`

Perspective Camera Parameters

\n Field of View (degrees)
\n ${[\"fov\", Inputs.range([10, 120], { value: 30, step: 1 })]}\n

\n Aspect Ratio
\n ${[\"aspect\", Inputs.range([0.5, 2.0], { value: 1.0, step: 0.01 })]}\n

\n Near Plane
\n ${[\"near\", Inputs.range([0.1, 10], { value: 0.1, step: 0.1 })]}\n

\n Far Plane
\n ${[\"far\", Inputs.range([10, 1000], { value: 1000, step: 10 })]}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3034,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2939,"value":"unitVertices = [\n { id: \"v000\", x: 0, y: 0, z: 0 },\n { id: \"v100\", x: 1, y: 0, z: 0 },\n { id: \"v110\", x: 1, y: 1, z: 0 },\n { id: \"v010\", x: 0, y: 1, z: 0 },\n { id: \"v001\", x: 0, y: 0, z: 1 },\n { id: \"v101\", x: 1, y: 0, z: 1 },\n { id: \"v111\", x: 1, y: 1, z: 1 },\n { id: \"v011\", x: 0, y: 1, z: 1 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3037,"value":"vertices = unitVertices.map((v) => {\n const R = rotationMatrix;\n const newX = R[0][0] * v.x + R[0][1] * v.y + R[0][2] * v.z;\n const newY = R[1][0] * v.x + R[1][1] * v.y + R[1][2] * v.z;\n const newZ = R[2][0] * v.x + R[2][1] * v.y + R[2][2] * v.z;\n return { ...v, x: newX, y: newY, z: newZ + 10 };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2946,"value":"edges = [\n [\"v000\", \"v100\"],\n [\"v100\", \"v110\"],\n [\"v110\", \"v010\"],\n [\"v010\", \"v000\"],\n [\"v001\", \"v101\"],\n [\"v101\", \"v111\"],\n [\"v111\", \"v011\"],\n [\"v011\", \"v001\"],\n [\"v000\", \"v001\"],\n [\"v100\", \"v101\"],\n [\"v110\", \"v111\"],\n [\"v010\", \"v011\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2990,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3409,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3316,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3338,"value":"Inputs.bind(\n Inputs.form([\n Inputs.range([-180, 180], {\n label: \"Rotation X (deg)\",\n value: -4,\n disabled: true\n }),\n Inputs.range([-180, 180], { label: \"Rotation Y (deg)\", value: 4 }),\n Inputs.range([-180, 180], { label: \"Rotation Z (deg)\", value: 0 })\n ]),\n viewof rotation\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2986,"value":"perspectiveCameraMatrix = {\n // Extract perspective camera parameters from the UI cell.\n const { fov, aspect, near, far } = perspectiveCamera;\n // Compute focal length from the fov (in degrees)\n const f = 1 / Math.tan((fov * Math.PI) / 360);\n // Construct the 4x4 perspective projection matrix:\n // [ f/aspect 0 0 0 ]\n // [ 0 f 0 0 ]\n // [ 0 0 (far+near)/(near-far) (2*far*near)/(near-far) ]\n // [ 0 0 -1 0 ]\n return [\n [f / aspect, 0, 0, 0],\n [0, f, 0, 0],\n [0, 0, (far + near) / (near - far), (2 * far * near) / (near - far)],\n [0, 0, -1, 0]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3245,"value":"// Multiply each vertex (in homogeneous coordinates) by the 4x4 perspectiveCameraMatrix.\n// Each vertex is represented as [x, y, z, 1] and perspectiveCameraMatrix is a 4x4 matrix.\n// The result is a vector [xp, yp, zp, wp] for each vertex.\nfunction multiplyMatrixAndVector(matrix, vector) {\n const result = [];\n for (let i = 0; i < 4; i++) {\n let sum = 0;\n for (let j = 0; j < 4; j++) {\n sum += matrix[i][j] * vector[j];\n }\n result.push(sum);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3010,"value":"projectedPoints = {\n return vertices.map((v) => {\n const vec = [v.x, v.y, v.z, 1];\n const result = multiplyMatrixAndVector(perspectiveCameraMatrix, vec);\n const [x, y, z, w] = result;\n // NDC coordinates after perspective division:\n return {\n id: v.id,\n homogeneous: result,\n x_ndc: x / w,\n y_ndc: y / w,\n z_ndc: z / w\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2959,"value":"display()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2953,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3083,"value":"## Ray casting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3367,"value":"// Define the face (the plane that intersects the ray) using the appropriate vertices.\n// In this example, we assume the intersected face is the one with vertices: v000, v100, v110, v010.\nfaceSet = new Set([\"v000\", \"v100\", \"v110\", \"v010\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3085,"value":"Inputs.bind(\n Inputs.form([\n Inputs.range([-1, 1], { label: \"ray x_ndc\", value: 0, step: 0.01 }),\n Inputs.range([-1, 1], { label: \"ray y_ndc\", value: 0, step: 0.01 })\n ]),\n viewof rayCastPoint\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3188,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3207,"value":"we find where our ray cast hits the v000, v100, v110 face (without consideration to boundary)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3195,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3205,"value":"By projecting our intersection back through the camera projection, we can check it matches the original ray cast position (it does)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3197,"value":"projectedIntersection = {\n // Compute homogeneous coordinate for the intersection point:\n // Create a 4D vector (x, y, z, 1) from intersectionPoint.\n const vec = [\n intersectionPoint.x,\n intersectionPoint.y,\n intersectionPoint.z,\n 1\n ];\n\n // Multiply by the perspectiveCameraMatrix.\n function multiplyMatrixVector(matrix, vector) {\n const result = [];\n for (let i = 0; i < 4; i++) {\n let sum = 0;\n for (let j = 0; j < 4; j++) {\n sum += matrix[i][j] * vector[j];\n }\n result.push(sum);\n }\n return result;\n }\n const result = multiplyMatrixVector(perspectiveCameraMatrix, vec);\n const [x, y, z, w] = result;\n\n // Compute normalized device coordinates (NDC) by performing perspective division.\n const ndc_x = x / w;\n const ndc_y = y / w;\n return { x: ndc_x, y: ndc_y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3230,"value":"## Movable second camera\n\nWe can't really see the ray intersection with the cube face because the ray is parallel with the view.\n\nSo lets add a second camera that can orbit around the cube at (0, 0, 10). This camera will also demonstrate how the homograph matrix is capable to representing repositioning of the camera (translation).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3267,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3241,"value":"secondCameraHomographyMatrix = {\n \n\n // Build the perspective projection matrix using current camera parameters.\n // Using the standard OpenGL-style perspective projection.\n const { fov, aspect, near, far } = perspectiveCamera;\n const f = 1 / Math.tan((fov * Math.PI) / 360);\n const projMatrix = [\n [f / aspect, 0, 0, 0],\n [0, f, 0, 0],\n [0, 0, (far + near) / (near - far), (2 * far * near) / (near - far)],\n [0, 0, -1, 0]\n ];\n\n // Multiply the projection matrix by the view matrix to obtain the homograph matrix.\n function multiplyMatrices(a, b) {\n const result = [];\n for (let i = 0; i < 4; i++) {\n result[i] = [];\n for (let j = 0; j < 4; j++) {\n let sum = 0;\n for (let k = 0; k < 4; k++) {\n sum += a[i][k] * b[k][j];\n }\n result[i][j] = sum;\n }\n }\n return result;\n }\n\n const homographMatrix = multiplyMatrices(projMatrix, viewMatrix);\n return homographMatrix;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3250,"value":"secondProjectedPoints = {\n return vertices.map((v) => {\n const vec = [v.x, v.y, v.z, 1];\n const result = multiplyMatrixAndVector(secondCameraHomographyMatrix, vec);\n const [x, y, z, w] = result;\n // NDC coordinates after perspective division:\n return {\n id: v.id,\n homogeneous: result,\n x_ndc: x / w,\n y_ndc: y / w,\n z_ndc: z / w\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"secondRayPoints = {\n return [{ id: \"ray_s\", x: 0, y: 0, z: 0 }, intersectionPoint].map((v) => {\n const vec = [v.x, v.y, v.z, 1];\n const result = multiplyMatrixAndVector(secondCameraHomographyMatrix, vec);\n const [x, y, z, w] = result;\n // NDC coordinates after perspective division:\n return {\n id: v.id,\n homogeneous: result,\n x_ndc: x / w,\n y_ndc: y / w,\n z_ndc: z / w\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3279,"value":"unprojectRay(rayCastPoint, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3237,"value":"viewof orbit_angle = Inputs.range([-180, 180], {\n label: \"Orbit angle (degrees)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3351,"value":"Inputs.bind(\n Inputs.form([\n Inputs.range([-1, 1], { label: \"ray x_ndc\", value: 0, step: 0.01 }),\n Inputs.range([-1, 1], { label: \"ray y_ndc\", value: 0, step: 0.01 })\n ]),\n viewof rayCastPoint\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3342,"value":"Inputs.bind(\n Inputs.form([\n Inputs.range([-180, 180], { label: \"Rotation X (deg)\", value: -4 }),\n Inputs.range([-180, 180], { label: \"Rotation Y (deg)\", value: 4 }),\n Inputs.range([-180, 180], { label: \"Rotation Z (deg)\", value: 0 })\n ]),\n viewof rotation\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3329,"value":"viewof rotation = Inputs.input([0, 0, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3345,"value":"viewof rayCastPoint = Inputs.input([-0.18, -0.1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2844,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3270,"value":"highlight(viewMatrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof prompt","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"Inputs.button(\"copy code\", {\n reduce: () => {\n navigator.clipboard.writeText(suggestion);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof suggestion","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1463,"value":"## Current Chat context\ncode is automatically added to the context. Use `highlight()` to selectively bring runtime values into the context as well","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1252,"value":"viewof context_viz","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"### AI Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"viewof OPENAI_API_KEY","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"viewof api_endpoint","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2163,"value":"viewof settings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2193,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2114,"value":"import {\n ask,\n excludes,\n cells,\n on_prompt,\n variables,\n api_call_response,\n background_tasks as _background_tasks,\n _ndd,\n instruction,\n highlight,\n mutable context,\n viewof prompt,\n viewof suggestion,\n viewof settings,\n viewof OPENAI_API_KEY,\n viewof api_endpoint,\n viewof context_viz\n} from \"@tomlarkworthy/robocoop\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2179,"value":"background_tasks = _background_tasks","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"