2e:null 2f:["$","title",null,{"children":"An explanation of the viewing matrix | Riccardo | Observable"}] 34:Tb5f,md` The code below defines the **viewing matrix** ${tex`W`} from the vantage point (eye vector), the focus point (at vector) and the up direction (up vector). The vector ${tex`v_c`} with respect the camera coordinate system can be found from the vector ${tex`v_w`} in world coordinates system by means of the *affine transformation* ${tex`W`}: ${tex`v_c = W v_w`}. Say vectors ${tex`e`}, ${tex`a`} and ${tex`u`} are the eye, at and up vectors in world coordinates, then we define a new orthonormal basis ${tex`i, j, k`} as follow. ${tex`k = (a - e)/\lVert (a - e) \rVert`} Vector ${tex`k`} has the same orientation and direction as the vector from the eye to the focus point. In other words, if we imagine ourself at the camera (eye) position looking at the focus point (at), then the ${tex`k`} axis goes forward. ${tex`i = (u / \lVert u \rVert) \times k`} Vector ${tex`i`} is perpendicular the plane formed by vectors ${tex`u`} and ${tex`k`}. ${tex`j = k \times i`} Vector ${tex`j`} has the same direction of vector ${tex`u`} and it is a unit vector. Note that the new basis ${tex`\{i, j, k\}`} generates a coordinate system with the same handedness of the original one. On the contrary, changing the order of the entries in the cross products (i.e. setting ${tex`i = k \times (u / \lVert u \rVert)`} and ${tex`j = i \times k`}) has the affect to flip the handedness of the coordinate system of choice, keeping ${tex`j`} with the same direction of ${tex`u`}. The effect is visible by looking at the handedness of the coordinate system generated by the basis ${tex`\{i, j, k\}`}. Vectors ${tex`i, j, k`} form an orthonormal basis, they are expressed in world coordinates and, in general, their components are different than zero. The change of basis can be represented by the linear tranformation ${tex`v_w = R v_c`} with ${tex` R = \begin{matrix} i_x & j_x & k_x & 0 \\ i_y & j_y & k_y & 0 \\ i_z & j_z & k_z & 0 \\ 0 & 0 & 0 & 1 \\ \end{matrix} `} For example vector ${tex`v_c = (1,0,0,1)`} tranforms to ${tex`v_w = R v_c = (i_x, i_y, i_z, 1)`}, as expected. Here we used homogeneous coordinates, which allows us to perform translation as well as the linear transformations as a matrix operations. A linear tranformations followed by a translation of vector ${tex`e`} describes the affine transformation ${tex`v_w=TRv_c`}, where ${tex` T = \begin{matrix} 1 & 0 & 0 & e_x \\ 0 & 1 & 0 & e_y \\ 0 & 0 & 1 & e_z \\ 0 & 0 & 0 & 1 \\ \end{matrix} `} The affine transformation ${tex`W`} we are looking for is ${tex`W = (TR)^{-1} = R^{-1}T^{-1} = R^T T^{-1}`}, where we use the fact that matrix ${tex`R`} is orthogonal. The **viewing matrix** ${tex`W`} is ${tex` W = \begin{matrix} i_x & i_y & i_z & -i \cdot e \\ j_x & j_y & j_z & -j \cdot e \\ k_x & k_y & k_z & -k \cdot e \\ 0 & 0 & 0 & 1 \\ \end{matrix} `} `35:Td93,setupScene = gl4.regl({ uniforms: { aspect: ctx => [ctx.viewportWidth / ctx.viewportHeight, 1], eye:[0,0,0.3], // Vantage point, i.e. the eye position expressed in world coordinates. // Note that eye is the origin of the Camera coordinte system. at: [0,0,0], // Focus point, i.e. the look-at position expressed in world coordinates /* Up direction. We need a vector to use it in a cross product. Up cannot be proportional to eye. */ up: [ Math.cos(camera_angle), Math.sin(camera_angle), 0 ], // I suppose regl uses column-major notation for matrices, because the OpenGL Specification // and the OpenGL Reference Manual both use column-major notation (see matrix "translate" below). // https://www.khronos.org/opengl/wiki/General_OpenGL:_Transformations /* Array "rotateX" describes matrix [ 1, 0, 0, 0, 0, Math.cos(ax), -Math.sin(ax), 0, 0, Math.sin(ax), Math.cos(ax), 0, 0, 0, 0, 1, ], which with the right-multiplication (M*v) describes a counterclockwise rotation in a right-handed coordinate system, or a clockwise rotation in a left-handed system. */ rotateX: [ 1, 0, 0, 0, 0, Math.cos(ax), Math.sin(ax), 0, 0, -Math.sin(ax), Math.cos(ax), 0, 0, 0, 0, 1, ], /* Array "rotateY" describes matrix [ Math.cos(ay), 0, Math.sin(ay), 0, 0, 1, 0, 0, -Math.sin(ay), 0, Math.cos(ay), 0, 0, 0, 0, 1, ], which with the right-multiplication (M*v) describes a counterclockwise rotation in a right-handed coordinate system, or a clockwise rotation in a left-handed system. */ rotateY: [ Math.cos(ay), 0, -Math.sin(ay), 0, 0, 1, 0, 0, Math.sin(ay), 0, Math.cos(ay), 0, 0, 0, 0, 1, ], /* Array "rotateZ" describes matrix [ Math.cos(az), -Math.sin(az), 0, 0, Math.sin(az), Math.cos(az), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ], which with the right-multiplication (M*v) describes a counterclockwise rotation in a right-handed coordinate system, or a clockwise rotation in a left-handed system. */ rotateZ: [ Math.cos(az), Math.sin(az), 0, 0, -Math.sin(az), Math.cos(az), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ], // This matrix is compatible with the column-major notation and // the right-multiplication M*v used in the vertex shader. translate: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ], // Orthographic projection (column major order) // Note that there is symmetry between x, y and the z direction. Setting entry [2,2] to -2/(far-near), // as suggested in the wikipedia, has the effect to flip the system handedness, but the camera eye // position seems not consistent anymore (probably the camere basis has to change as well). projection: [ 2/(right-left), 0, 0, 0, 0, 2/(top-bottom), 0, 0, 0, 0, 2/(far-near), 0, -(right+left)/(right-left), -(top+bottom)/(top-bottom), -(far+near)/(far-near), 1, ], }, })36:T401,drawAxis = gl4.regl({ frag: ` precision mediump float; varying vec4 viewPos; void main() { gl_FragColor = vec4(normalize(viewPos.xyz), 1.); }`, vert: ` precision mediump float; uniform mat4 projection, rotateX, rotateY, rotateZ, translate; attribute vec3 position; uniform vec3 eye, at, up; varying vec4 viewPos; ${viewMat} void main() { // Model transformation matrix. It transforms from object coordinates to world coordinates. mat4 model = translate * rotateX * rotateY * rotateZ; // Viewing Matrix. It transforms from the world coordinates into tege eye coordinate system. mat4 view = viewMat(eye, at, up); viewPos = vec4(position, 1); gl_Position = projection * view * model * vec4(position, 1); }`, attributes: { position: [ [0, 0, 0], [1, 0, 0], [0, 1, 0], [0, 0, 1] ] }, elements: [ [0, 1], [0, 2], [0, 3] ], lineWidth: 1, count: 6, // 3 lines with 2 vertices each primitive: "lines" })37:T658,cmd4 = gl4.regl({ frag:` #extension GL_OES_standard_derivatives : enable precision mediump float; varying vec4 viewPos; bool isBorder (vec3 p, float e) { return ((p.x < e || p.x > (1. - e)) && (p.y < e || p.y > (1. - e))) || ((p.x < e || p.x > (1. - e)) && (p.z < e || p.z > (1. - e))) || ((p.y < e || p.y > (1. - e)) && (p.z < e || p.z > (1. - e))); } vec3 normal(vec3 pos) { vec3 fdx = dFdx(pos); vec3 fdy = dFdy(pos); return normalize(cross(fdx, fdy)); } void main() { vec3 n = normal(viewPos.xyz); // gl_FragColor = vec4(n * 0.5 + 0.5, 1); // rescale [-1, 1] in [0, 1.] vec4 c = (viewPos + vec4(1.)) / 2.; gl_FragColor = isBorder(c.xyz, ${s} + 0.053) ? vec4(1.) : vec4(1., c.x, c.y, 1.); }`, vert: ` precision mediump float; uniform vec2 aspect; uniform mat4 projection, rotateX, rotateY, rotateZ, translate; attribute vec3 position; uniform vec3 eye, at, up; varying vec4 viewPos; ${viewMat} void main() { // Model transformation matrix. It transforms from object coordinates to world coordinates. mat4 model = translate * rotateX * rotateY * rotateZ; // Viewing Matrix. It transforms from the world coordinates into tege eye coordinate system. mat4 view = viewMat(eye, at, up); viewPos = vec4(position, 1); gl_Position = projection * view * model * vec4(position, 1); }`, attributes: { position: position, }, elements: elements, count: 36 // We have 6 faces and 2 triangles in each face. // Each triangle has 3 vertices, for a total of 6⋅2⋅3 = 36 vertices. });38:[] 32:{"id":"a18901a22b183fe5","slug":"an-explanation-of-the-viewing-matrix","title":"An explanation of the viewing matrix","thumbnail":"47f46b6853058e4269dc55c3b6821d8abdc11af037fcdc996aa54308aa0677ba","access_level":"public","create_time":"$D2021-03-01T09:42:01.059Z","update_time":"$D2022-02-23T09:18:35.738Z","view_time":null,"first_public_time":"$D2021-03-01T11:18:30.166Z","has_unpublished_edits":null,"fork":{"id":"7602643a8b5909de","slug":"regl-experiments","title":"Regl experiments","owner":{"id":"14c4c06675a63cf8","login":"riccardoscalco","name":"Riccardo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"14c4c06675a63cf8","login":"riccardoscalco","name":"Riccardo","avatar_url":"https://avatars-next.observableusercontent.com/1afa8fde2f7c6fcf35bffb69c3ce041ab63dd066dffb08b10cbdc8fa60cc301b","tier":"starter_2024"},"version":1448,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"545aa796d4ecc313","login":"riccardoscalco","name":"Riccardo","avatar_url":"https://avatars-next.observableusercontent.com/1afa8fde2f7c6fcf35bffb69c3ce041ab63dd066dffb08b10cbdc8fa60cc301b","tier":null}],"members":[{"type":"individual","id":"545aa796d4ecc313","login":"riccardoscalco","name":"Riccardo","avatar_url":"https://avatars-next.observableusercontent.com/1afa8fde2f7c6fcf35bffb69c3ce041ab63dd066dffb08b10cbdc8fa60cc301b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"An explanation of the viewing matrix","cells":[{"id":0,"value":"md`\n# An explanation of the viewing matrix\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`\nIn the 3D scene below, the positive ${tex`x`} axis is red, the positive ${tex`y`} axis is green and the positive ${tex`z`} axis is blu.\n\nNote that the visible coordinate system is left-handed. Matrix trasformations are applied with the pruduct ${tex`M \\cdot v`}.\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"gl4.canvas;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"md`Let's explore some trasformations of the world coordinates. Note that rotations are applied in the following order:\n1. rotate around axis *z* by *az*\n2. rotate around axis *y* by *ay*\n3. rotate around axis *x* by *ax*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"md`Rotation around the x axis: *ax* = ${(ax / Math.PI).toFixed(4)} ${tex`\\pi`}. Positive angles moves the cube clockwise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"viewof ax = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`Rotation around the y axis: *ay* = ${(ay / Math.PI).toFixed(4)} ${tex`\\pi`}. Positive angles moves the cube clockwise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"viewof ay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`Rotation around the z axis: *az* = ${(az / Math.PI).toFixed(4)} ${tex`\\pi`}. Positive angles moves the cube clockwise. If the visible rotation in counterclockwise probably the camera is positiones at negative z.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"viewof az = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"md`### Exploring view coordinate transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"viewMat = `\nmat4 viewMat (vec3 eye, vec3 at, vec3 up) {\n vec3 k = normalize(at - eye);\n vec3 i = normalize(cross(up, k));\n vec3 j = cross(k, i);\n\n // Matrices are expressed in column-major order\n return mat4(\n vec4(i.x, j.x, k.x, 0.),\n vec4(i.y, j.y, k.y, 0.),\n vec4(i.z, j.z, k.z, 0.),\n vec4(-dot(eye, i), -dot(eye, j), -dot(eye, k), 1.)\n );\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"md`\n#### Camera up direction\n\nPositive camera rotation are clockwise in a left-handed world system and the object will rotate counterclockwise in the camera coordinates.\nOn the contrary, positive camera rotation are counterclockwise in a right-handed world system and the object will rotate clockwise in the camera coordinates.\n\n*up* = [${Math.cos(camera_angle).toFixed(3)},${Math.sin(camera_angle).toFixed(3)},0]\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"viewof camera_angle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"md`### Exploring othographic projection transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"md`Note that there is symmetry between x, y and the z direction. Setting entry [2,2] to *-2/(far-near)*, as suggested in the wikipedia, has the effect to flip the system handedness, but the camera eye position seems not consistent anymore (probably the camere basis has to change as well).\n\n${tex`\nO_p = \\begin{matrix}\n \\frac{2}{right-left} & 0 & 0 & 0\\\\\n 0 & \\frac{2}{top-bottom}& 0 & 0\\\\\n 0 & 0 & \\frac{2}{far-near}& 0\\\\\n -\\frac{right+left}{right-left} & -\\frac{top+bottom}{top-bottom} & -\\frac{far+near}{far-near} & 1\\\\\n \\end{matrix}\n`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"md`\nVariables *left*, *right*, *bottom* and *top* are proportional to *delta*. Changing *delta* the visible space encreases, keeping *near* and *far* constant.\n\n*delta* = ${delta}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"viewof delta = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"md`### Exploring perspective projection transformations\n\nTo do.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"left = delta * -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"right = delta * 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"bottom = delta * -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"top = delta * 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"viewof near = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"viewof far = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"{\n gl4.regl.clear({color: [0.9, 0.9, 0.9, 1]})\n setupScene({}, cmd4);\n setupScene({}, drawAxis)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"position = [\n [-s, +s, +s], [+s, +s, +s], [+s, -s, +s], [-s, -s, +s], // positive z face.\n [+s, +s, +s], [+s, +s, -s], [+s, -s, -s], [+s, -s, +s], // positive x face\n [+s, +s, -s], [-s, +s, -s], [-s, -s, -s], [+s, -s, -s], // negative z face\n [-s, +s, -s], [-s, +s, +s], [-s, -s, +s], [-s, -s, -s], // negative x face.\n [-s, +s, -s], [+s, +s, -s], [+s, +s, +s], [-s, +s, +s], // top face\n [-s, -s, -s], [+s, -s, -s], [+s, -s, +s], [-s, -s, +s] // bottom face\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"elements = [\n [2, 1, 0], [2, 0, 3], // positive z face.\n [6, 5, 4], [6, 4, 7], // positive x face.\n [10, 9, 8], [10, 8, 11], // negative z face.\n [14, 13, 12], [14, 12, 15], // negative x face.\n [18, 17, 16], [18, 16, 19], // top face.\n [20, 21, 22], [23, 20, 22] // bottom face\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"createREGL = require('https://unpkg.com/regl');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function createGL (opts) {\n var h = 380;\n var w = h * 1.;\n var dpr = window.devicePixelRatio || 1; // Use dpr for a high DPI canvas\n var canvas = html`