2e:null 2f:["$","title",null,{"children":"GLU lookAt in 3D PGA | Steven De Keninck | Observable"}] 34:Tf5b,md`# GLU lookAt in 3D PGA Over on the [bivector.net discord chat](https://discord.gg/GKH4zhvF), the question of how to build a PGA (Projective Geometric Algebra) version of the GLU lookat function popped up. In this notebook we'll build that function, making sure to do it in a way that maximizes the benefits gained by doing it in PGA. **Help! I've never heard of GLU lookAt** The GLU lookAt function is a helper function in the openGl Utility library that makes positioning your virtual camera easy. It allows you to specify a position, a target to look at, and a pole to align the camera's local up direction. Given those parameters it produces a transformation matrix that moves a camera from the origin, looking down the z-axis and with its local up axis aligned to the y-axis to the desired location/orientation. The below implementation is from MESA, and considered a reference. \`\`\`c++ void GLAPIENTRY gluLookAt(GLdouble eyex, GLdouble eyey, GLdouble eyez, GLdouble centerx, GLdouble centery, GLdouble centerz, GLdouble upx, GLdouble upy, GLdouble upz) { float forward[3], side[3], up[3]; GLfloat m[4][4]; forward[0] = centerx - eyex; forward[1] = centery - eyey; forward[2] = centerz - eyez; up[0] = upx; up[1] = upy; up[2] = upz; normalize(forward); /* Side = forward x up */ cross(forward, up, side); normalize(side); /* Recompute up as: up = side x forward */ cross(side, forward, up); __gluMakeIdentityf(&m[0][0]); m[0][0] = side[0]; m[1][0] = side[1]; m[2][0] = side[2]; m[0][1] = up[0]; m[1][1] = up[1]; m[2][1] = up[2]; m[0][2] = -forward[0]; m[1][2] = -forward[1]; m[2][2] = -forward[2]; glMultMatrixf(&m[0][0]); glTranslated(-eyex, -eyey, -eyez); } \`\`\` Note how this function is directly accessing coefficients of both vectors and matrices, and the constructed matrix only represents the orientation, with the final composition being done using the (old) openGL matrix stack. It is also clearly only valid in 3D (it uses the cross product), and has specific requirements on its inputs. (the position and target must be vectors representing points, while the pole is a vector representing a direction). **Help! I've never heard of PGA!** PGA is an alternative to vector-matrix algebra that is ideally suited for applications in computer graphics. For a quick introduction that focuses on the concepts used in this article see my [GAME2020 Lecture on youtube](https://youtu.be/ichOiuBoBoQ), or for a more general, motivational intro, my [SIGGRAPH 2019 lecture](https://www.youtube.com/watch?v=tX4H_ctggYo&ab_channel=Bivector). For a more detailed treatment, we recommend [the SIGGRAPH Course notes](https://bivector.net/PROJECTIVE_GEOMETRIC_ALGEBRA.pdf) and the [PGA4CS writeup](https://bivector.net/PGA4CS.html). As quick recap, PGA is a **graded algebra** (one that has vectors, bivectors, ..., k-vectors), that directly represent the elements of **Euclidean Geometry**. (planes,lines,points,reflections,translations,rotations,screws). PGA makes it easy and intuitive to combine these elements. Constructing elements and transformations between them happens in a coordinate-free, geometric, and dimension-independent fashion. Before we dive into the \`lookAt\` operation, we'll review some of those techniques - in particular those dealing with **motors**, the PGA equivalent of a transformation matrix. When you first learn about GA, it may be tempting to take an implementation like the \`lookAt\` above and try to convert it to Geometric Algebra by converting all of the data types over and changing cross products into wedge products etc. While you can probably arrive at some solution doing this, it is an approach that is unlikely to really be worthy of the 'geometric' moniker. We'll take instead a strictly geometric approach hoping to arrive at a more exciting result. `35:T1052,md` ## Motors, Composition and Conjugation in PGA, a **motor** is the term used for a general combination of an even number of reflections, i.e. a combination of rotations and translations. These elements are classically called *dual quaternions* or *screws*. ### General form of a motor. A motor ${tex`\mathbf m`} takes the general form:

${tex.block`\mathbf m = m_0 + m_1\mathbf e_{01} + m_2 \mathbf e_{02} + m_3 \mathbf e_{03} + m_4 \mathbf e_{12} + m_5\mathbf e_{13} + m_6\mathbf e_{23} + m_7\mathbf e_{0123} `}

The coefficients ${tex`m_i`} are all scalar real numbers, the basis elements ${tex`\mathbf e_{12},\mathbf e_{13},\mathbf e_{23}`} all square to ${tex`-1`}, while all other basis elements square to ${tex`0`}. When the ${tex`m_7`} coefficient is non-zero, the motor represents the combination of 4 reflections, when it is zero it is a combination of two reflections and called **simple**. ### General form of rotations and translations General motors combine rotations ${tex`\mathbf r`} and translations ${tex`\mathbf t`} :

${tex.block`\mathbf r = m_0 + m_1\mathbf e_{01} + m_2 \mathbf e_{02} + m_3 \mathbf e_{03} + m_4\mathbf e_{12} + m_5 \mathbf e_{13} + m_6 \mathbf e_{23}`}

A single rotation is a simple motor, the product of two intersecting reflections. If restricted to only rotations around the origin, the ${tex`\mathbf e_{01},\mathbf e_{02},\mathbf e_{03}`} coefficients will be zero and the rotor will be isomorphic to a **quaternion**.

${tex.block`\mathbf t = 1 + m_1\mathbf e_{01} + m_2 \mathbf e_{02} + m_3 \mathbf e_{03}`}

A single translation is a simple motor, the product of two parallel reflections. ### Exponential form of rotations and translations Rewritten in exponential form, translations and rotations reveal their similarities:

${tex.block` \begin{aligned} \mathbf r &= \cos \alpha + \sin \alpha \widehat {( m_1\mathbf e_{01} + m_2 \mathbf e_{02} + m_3 \mathbf e_{03} + m_4\mathbf e_{12} + m_5 \mathbf e_{13} + m_6 \mathbf e_{23})} \\ &= \cos \alpha + \sin \alpha \hat \mathbf B \\ &= e^{\alpha \hat \mathbf B} \end{aligned}`}

${tex.block` \begin{aligned} \mathbf t &= 1 + \alpha \widehat {( m_1\mathbf e_{01} + m_2 \mathbf e_{02} + m_3 \mathbf e_{03})} \\ &= 1 + \alpha \hat \mathbf B \\ &= e^{\alpha \hat \mathbf B} \end{aligned}`}

Where the hat denotes normalization. The exponential form also applies unmodified to the general motor:

${tex.block` \begin{aligned} \mathbf m &= e^{\alpha \hat \mathbf B} \end{aligned}`}

Note in particular that the bivector ${tex`\hat \mathbf B`} above is the **invariant** of the transformation represented by ${tex`\mathbf {m,r,t}`}. In other words, to generate a rotation around a line/screw axis represented by the normalized bivector ${tex`\hat \mathbf B`}, one simply scales it with the desired **angle** (Euclidean line), **distance** (infinite line) or **pitch** (screw axis) ${tex`\alpha`} and applies the exponential map. ### Composition of motors To compose motors we simply use the geometric product, the rightmost motor is applied first:

${tex.block`\mathbf m = \mathbf m_2 \mathbf m_1 \\~\\ \mathbf m(x) = \mathbf m_2(\mathbf m_1(x))`}

### Conjugation (sandwich) All elements and transformations ${tex` x`} of PGA transform by a motor ${tex`\mathbf m`} using conjugation:

${tex.block`\mathbf m(x) = \mathbf m x \tilde {\mathbf m}`}

Where the tilde represents the Clifford Conjugate (or reverse if only motors of even grade are considered). ### Square root of a simple motor. A simple motor (combination of exactly two reflections), admits a particularly easy square root :

${tex.block`\sqrt \mathbf m = \widehat{1 + \mathbf m}`}

### Square root of a general motor. For a general motor, the square root is not much more involved:

${tex.block`\sqrt \mathbf m = \widehat{(1 + \mathbf m)(1 + \langle \mathbf m \rangle - \frac 1 2 \langle \mathbf m \rangle_4)}`}

`36:T21bf,md` ## Finding Motors between elements. Apart from the elegant and simple direct constructions above (To find a transformation that keeps a line/screw axis invariant, simply exponentiate it), it is also remarkably easy to find motors that relate elements. ### Motor between points, lines, planes A motor that takes a point,line,plane ${tex`a`} to a point,line,plane ${tex`b`} is:

${tex.block` \begin{aligned} \mathbf m &= \sqrt {b a^{-1}} \end{aligned}`}

Where the elements should be of equal (not necessarily unit) norm. ### Aligning ${tex`k`} points simultaniously When aligning multiple points simultaniously, we can guarantee to always have simple motors, and repeatedly apply ${ref('mot')} and ${ref('sqrt')}. This results in the following algorithm:

${tex` \text{\bf{align}} \\ \quad\text{\bf{p}}_i \leftarrow \text {input points in frame 1} \\ \quad\text{\bf{q}}_i \leftarrow \text {input points in frame 2} \\ \quad\mathbf M \rightarrow \text {output motor between}\, \mathbf p_i\, \text{and}\, \mathbf q_i \\ \text{begin} \\ \quad\text{\bf{M}} \leftarrow 1,\, \text{\bf{P}} \leftarrow \mathbf I, \, \text{\bf{Q}} \leftarrow \mathbf I \\ \quad\text{for each}\, i \\ \quad\quad\text{\bf{P}} \leftarrow \mathbf Q \vee (\mathbf M\mathbf p_i \tilde \mathbf M) \\ \quad\quad\mathbf Q \leftarrow \mathbf Q \vee \mathbf q_i\\ \quad\quad\mathbf M \leftarrow \widehat {1 + {\hat \mathbf Q} {\hat \mathbf P}^{-1}}\, \mathbf M \\ \text{end} `}

Note that we start by initializing ${tex`P,Q`} to the pseudoscalar, which is the identity for the regressive product. This ensures that in the first iteration ${tex`P,Q`} will be equal to the first two points. The transformation between these points is constructed and stored in ${tex`M`}. In the next iteration the following two points are joined (resulting in two lines that both go through the camera position and the old and new target. The transformation between them is constructed and concatenated with ${tex`M`}. The procedure continues effectively aligning the first point, followed by the first line, followed by the first plane, etc .. For those that prefer a javascript version: \`\`\`javascript var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } \`\`\` This algorithm will align the first two points, then the two lines between the first two points, the plane between the first three points etc. There is no requirement for the input and output sets to be congruent, but if they are the resulting motor will be an **isometry**. #### Aligning one point By passing sets with just one point to the \`align\` function, we can trivially create the translator ${ref('tran')} between them, in any number of dimensions. \`\`\`javascript align([A],[B]); \`\`\` ${html`${ Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A = point(-1,-0.4); var B = point(1,0.4); var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", 0xFF0000, ...path(align([A],[B]),10,A), 0x224488, A, "A", B, "B", ] },{ grid:1, scale:1.5, fontSize:1.5, pointRadius:2, }); svg.style.width = '600px'; svg.style.height = '400px'; svg.style.background = 'white'; return svg }) }`} #### Aligning two points Aligning two points by aligning the first point, then the first line. When the source and destination points are equally far apart, this is an isometry. Play around with the points below to understand the behavior. \`\`\`javascript align([A0,A1],[B0,B1]); \`\`\` ${html`${ Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A1 = point(-1,-0.4), A2 = point(-1.2,-0.3); var B1 = point(1,0.4), B2 = point(1.15,0.2); var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", '', 0xFF0000, ...path(align([A1,A2],[B1,B2]),30,[A1,A2]), '', 0xFF0000, ...path(align([A1,A2],[B1,B2]),2,[A1,A2]), 0x224488, A1, "A1", A2, "A2", B1, "B1", B2, "B2" ] },{ grid:1, scale:1.5, fontSize:1.5, pointRadius:2, lineWidth:5, }); svg.style.width = '600px'; svg.style.height = '400px'; svg.style.background = 'white'; return svg }) }`} #### Aligning three points For three points, the same principle applies .. \`\`\`javascript align([A0,A1,A2],[B0,B1,B2]); \`\`\` ${html`${ Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A1 = point(-1,-0.4), A2 = point(-1.2,-0.3), A3 = point(-1.1,0); var [B1,B2,B3] = Math.E ** (1.5e12 + .5e03 + 5.2e13 + .2e02 - 1e01) >>> [A1,A2,A3]; var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i])).Normalized; Q = (Q & q[i]).Normalized; M = Q*(Q+P).Normalized * M; } return M } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", '', 0xFF0000, ...path(align([A1,A2,A3],[B1,B2,B3]),30,[[A1,A2],[A2,A3],[A3,A1]]).flat(), '', 0xFF0000, ...path(align([A1,A2,A3],[B1,B2,B3]),2,[[A1,A2],[A2,A3],[A3,A1]]).flat(), 0x224488, A1, "A1", A2, "A2", A3, "A3", B1, "B1", B2, "B2", B3, "B3" ] },{ grid:1, scale:1.5, fontSize:1.5, pointRadius:2, lineWidth:5, }); svg.style.width = '600px'; svg.style.height = '400px'; svg.style.background = 'white'; return svg }) }`} When you play around with this example, notice how 'b1' uniquely determines the final position of 'a1', while 'b2' only determines the orientation of the edge '12' and 'b3' only of the plane '123'. The target positions need not be congruent to the input positions, and in fact it is possible to use infinite points for 'b2' and 'b3'. #### Aligning Euclidean and infinite points. The first point passed to the align function should always be a Euclidean point. Any follow up points however may also be infinite points. \`\`\`javascript align([A0,A1,A2],[B0,!-1e3,!1e2]); \`\`\` ${html`${ Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A1 = point(-1,-0.4), A2 = point(-1.2,-0.3), A3 = point(-1.1,0); var [B1,B2,B3] = [point(1,0.5),!-1e3,!1e2]; var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", '', 0xFF0000, ...path(align([A1,A2,A3],[B1,B2,B3]),30,[[A1,A2],[A2,A3],[A3,A1]]).flat(), '', 0xFF0000, ...path(align([A1,A2,A3],[B1,B2,B3]),2,[[A1,A2],[A2,A3],[A3,A1]]).flat(), 0x224488, A1, "A1", A2, "A2", A3, "A3", B1, "B1", ] },{ grid:1, scale:1.5, fontSize:1.5, pointRadius:2, lineWidth:5, }); svg.style.width = '600px'; svg.style.height = '400px'; svg.style.background = 'white'; return svg }) }`} In the example above, we have 'b2' pointing down the 'z' axis, while 'b3' is pointing up the y axis. As a result the orientation of the destination is entirely fixed, and 'b1' simply controls the position. `37:T21f4,md` ## GLU LookAt ### The standard LookAt This brings us to the GLU \`lookAt\` implementation. Just as the previous examples, it is a simple application of the \`align\` function we have defined above. In this case, we will align the 'identity' camera orientation (we'll use a default camera at the origin (${tex`\mathbf e_0^*`}), looking down the z-axis (${tex`-\mathbf e_3^*`}), with the local up aligned to the y-axis (${tex`\mathbf e_2^*`})) to the desired position, target to look at and pole. In this implementation, and as per the previous example, both the target and the pole can be Euclidean or infinite points. \`\`\`javascript var lookAt = (pos, target, pole)=>align([!1e0,!-1e3,!1e2],[pos,target,pole]) \`\`\` In the example below we use : \`\`\`javascript lookAt(A, B, !1e2); \`\`\` ${html`${Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A = !(1e0+0.5e1+.3e2-.5e3), B = !(1e0-1e3); var cam_model = [ [!1e0,!(1e0-.2e3)], [!(1e0-.2e3+.1e1),!(1e0-.2e3-.1e1)], [!(1e0-.3e3),!(1e0-.2e3-.1e1)], [!(1e0-.3e3),!(1e0-.2e3+.1e1)], [!1e0,!(1e0+.1e2)] ] var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", '', 0xFF0000, ...path(align([!1e0,!-1e3,!1e2],[A,B,!1e2]),30,cam_model).flat(), '', 0xFF0000, ...align([!1e0,!-1e3,!1e2],[A,B,!1e2]) >>> cam_model, 0x224488, A,"A", B,"B" ] },{ grid:1, scale:1.5, fontSize:1, pointRadius:1, lineWidth:5, }); svg.style.width = '600px'; svg.style.height = '600px'; svg.style.background = 'white'; return svg })}`} ### But with more powers! In the standard GLU lookat function, the position and target are points, while the up vector is a direction. In the implementation we made above, and thanks to GA, our function accepts both finite and infinite points for both target and pole parameters. Here's an example with a Euclidean pole: \`\`\`javascript lookAt(A, B, P); \`\`\` ${html`${ Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A = !(1e0+0.5e1+.3e2-.5e3), B = !(1e0-1e3), P = !(1e0+0.5e1-1e2-.5e3); var cam_model = [ [!1e0,!(1e0-.2e3)], [!(1e0-.2e3+.1e1),!(1e0-.2e3-.1e1)], [!(1e0-.3e3),!(1e0-.2e3-.1e1)], [!(1e0-.3e3),!(1e0-.2e3+.1e1)], [!1e0,!(1e0+.1e2)] ] var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", '', 0xFF0000, ...path(align([!1e0,!-1e3,!1e2],[A,B,P]),30,cam_model).flat(), '', 0xFF0000, ...align([!1e0,!-1e3,!1e2],[A,B,P]) >>> cam_model, 0x224488, A,"A", B,"B",P,"P", // 0xAACCFF, (P|(A&B|A))^(A&B|A) // projected pole ] },{ grid:1, scale:1.5, fontSize:1, pointRadius:1, lineWidth:5, }); svg.style.width = '600px'; svg.style.height = '600px'; svg.style.background = 'white'; return svg })}`} This in fact brings up an interesting question - why would the target in the standard GLU lookat function be a point, while the pole is a direction? (it would make more sense for both to be directions..). Since our version can be called with any mix we'll hapily ignore this unhappy design choice. ### Camera pose-to-pose animation Our \`lookAt\` function was simply a call to \`align\` with a fixed reference camera position as the starting point. Of coruse, we can simply use the same technique to animate a smooth path between two different positions and targets. To do this we simply use the align function directly. \`\`\`javascript align([beginpos, begintarget, beginpole], [endpos, endtarget, endpole]); \`\`\` ** Click and drag to start the animation ** ${html`${ Algebra(3,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A = !(1e0+0.5e1+.3e2-.5e3), B = !(1e0-1e3), C = !(1e0-0.5e1), D = !(1e0+.2e3-.4e2); var cam_model = [ [!1e0,!(1e0-.2e3)], [!(1e0-.2e3+.1e1),!(1e0-.2e3-.1e1)], [!(1e0-.3e3),!(1e0-.2e3-.1e1)], [!(1e0-.3e3),!(1e0-.2e3+.1e1)], [!1e0,!(1e0+.1e2)] ] var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M } var Cayley = bv => (1-bv)**-1 * (1+bv), iCayley = mot => ((1-mot) * (1+mot)**-1).Grade(2); var olog = mot => mot.Grade(2) / mot.s, oexp = bv => { var bv2 = bv*bv, bv4 = bv2.Grade(4); return (1 + bv + 0.5*bv4) / (1 - bv2.s); }; var lerp = (m,t)=>((1 - t) + t * m).Normalized; var slerp = (m,t)=>m.Log().Scale(t).Exp(); var clerp = (m,t)=>~Cayley( iCayley(m) * t ); var olerp = (m,t)=>oexp( olog(m) * t ); var path = (m, steps, x, lerp=lerp)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var options = { grid:1, scale:1.5, fontSize:1, pointRadius:1, lineWidth:5, animate:0, h:0.4, p:-0.2 }; var start = performance.now(); var svg = this.graph(()=>{ var t = Math.abs( ((((performance.now()-start)/4000)+1) % 2) - 1 ); var camA = align([!1e0,!-1e3,!1e2],[A,B,!1e2]); var camAB = align([A,B,!1e2],[C,D,!1e2]); var camC = align([!1e0,!-1e3,!1e2],[A*(1-t) + t*C,B*(1-t) + t*D,!1e2]); console.log(lerp(camAB, 0.5)-slerp(camAB, 0.5)); return [ "Drag the points", 0x0000FF,"Lerp(motor) - Lie Group", 0x008800,"Slerp(motor) (log/exp) - Lie Algebra", 0x8800FF,"Lerp(parameters)", 0xFF8800,"Cayley map", 0x0088FF,"Outer Exponential map", 0x0000FF, ...lerp(camAB, t) * camA >>> cam_model, 0x008800, ...slerp(camAB, t) * camA >>> cam_model, 0xFF8800, ...clerp(camAB, t) * camA >>> cam_model, 0x0088FF, ...olerp(camAB, t) * camA >>> cam_model, '', 0x0000FF, ...path(camAB,32,camA>>>1e123,lerp).map((x,i,a)=>[x,a[i-1]||x]), 0x008800, ...path(camAB,32,camA>>>1e123,slerp).map((x,i,a)=>[x,a[i-1]||x]), 0xFF8800, ...path(camAB,32,camA>>>1e123,clerp).map((x,i,a)=>[x,a[i-1]||x]), 0x0088FF, ...path(camAB,128,camA>>>1e123,olerp).map((x,i,a)=>[x,a[i-1]||x]), 0x0, lerp(camAB, 0.5) * camA >>> 1e123, 0x8800FF, [A,C], '', 0x8800FF, ...camC >>> cam_model, 0xFF0000, ...camAB*camA >>> cam_model, 0xFF0000, ...camA >>> cam_model, 0x224488, A,"A", B,"B", C, "C", D, "D" ] },options); svg.style.width = '600px'; svg.style.height = '600px'; svg.style.background = 'white'; svg.addEventListener("mousedown",()=>{ if (options.animate) return; start=performance.now(); options.animate=true }); return svg })}`} In this image, the blue camera is the result of a linear interpolation, while the green camera shows the result of interpolating in the Lie algebra. Neither of these results are possible with the matrix representation of GLU. Instead there we can only interpolate the input parameters - resulting in the purple arrow. Also displayed are the results of interpolating bivectors generated with the Cayley and Outer exponential mapping respectively. Both these maps allow the translation from a bivector ${tex`b`} to and from a motor ${tex`m`} using : ** The Cayley Map ** ${tex.block`\begin{aligned} \exp_\text{Cayley} &= b \rightarrow (1 - b)^{-1}(1 + b)\\ \log_\text{Cayley} &= m \rightarrow (1 - m)(1 + m)^{-1} \end{aligned}`} ** The Outer Exponential Map ** ${tex.block`\begin{aligned} \exp_\text{outer} &= b \rightarrow \cfrac {1 + b + \frac 1 2 \langle b^2 \rangle_4} {1 - \langle b^2 \rangle_0}; \\ \log_\text{outer} &= m \rightarrow \cfrac {\langle m \rangle_2} {\langle m \rangle_0} \end{aligned}`} `38:T54f,Algebra(2,0,1,()=>{ const point = (x,y)=>!(1e0 + x*1e1 + y*1e2); var A1 = point(-1,-0.4), A2 = point(-1.2,-0.3), A3 = point(-1.1,0); var [B1,B2,B3] = Math.E ** (1.5e12 + .5e03 + 5.2e13 + .2e02 - 1e01) >>> [A1,A2,A3]; var align = (p,q)=>{ for (var i=0, M=1, P=!1, Q=!1; i>>p[i])*(Q&q[i])).s<0)?Q.Normalized*M:M; } P = Q & (M >>> p[i]); Q = Q & q[i]; M = (1 + Q.Normalized / P.Normalized).Normalized * M; } return M; // make sure its a multivector } var lerp = (m,t)=>((1 - t) + t * m).Normalized; var path = (m, steps, x)=>[...Array(steps)].map((e,i)=>lerp(m,i/(steps-1)) >>> x); var svg = this.graph(()=>{ var t = 0.5 + 0.5 * Math.sin(performance.now()/1000); return [ "Drag the points", '', 0xFF0000, ...path(align([A1,A2,A3],[B1,B2,B3]),30,[[A1,A2],[A2,A3],[A3,A1]]).flat(), '', 0xFF0000, ...path(align([A1,A2,A3],[B1,B2,B3]),2,[[A1,A2],[A2,A3],[A3,A1]]).flat(), 0x224488, A1, "A1", A2, "A2", A3, "A3", B1, "B1", B2, "B2", B3, "B3" ] },{ grid:1, scale:1.5, fontSize:1.5, pointRadius:2, lineWidth:5, }); svg.style.width = '600px'; svg.style.height = '400px'; svg.style.background = 'white'; return svg })39:T404,style = html``3a:[] 32:{"id":"255fc761ae8bf588","slug":"glu-lookat-in-3d-pga","title":"GLU lookAt in 3D PGA","thumbnail":"f17481057c2aa0a3b6ba396ca859f128e911d543f7156b3fe2978789b12c5632","access_level":"public","create_time":"$D2021-02-01T07:50:11.084Z","update_time":"$D2021-06-16T16:12:30.732Z","view_time":null,"first_public_time":"$D2021-02-04T12:35:21.140Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"679a6b4e77863c60","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":"starter_2024"},"version":766,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7e54611864321b4","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":null}],"members":[{"type":"individual","id":"f7e54611864321b4","login":"enkimute","name":"Steven De Keninck","avatar_url":"https://avatars-next.observableusercontent.com/75edf08e8548e6687838709326b27b1ad20835bbb277aca3370b72df3a466bd8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"GLU lookAt in 3D PGA","cells":[{"id":84,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`## Other dimensions\n\nIt is interesting to explore what other features this rewritten \\`lookAt\\` has on offer. For starters, nothing in the algorithm is dependend on the number of dimensions. As a result, here is example \\`2.2.c\\` with just a single \\`'3'\\` changed into a \\`'2'\\` : `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`Note that for the 2D version, the procedure has been augmented to include one final reflection depending on which side \\`B3\\` is on. (Drag \\`B3\\` above \\`B1,B2\\` to see).\n\nQuestions? Comments? [Ask them on the bivector discord!](https://discord.gg/GKH4zhvF)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"Algebra = require('https://unpkg.com/ganja.js@1.0.192')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"ref = id=>{\n var a = document.createElement('a');\n setTimeout(()=>{\n var nr = [...document.querySelectorAll('.formula')].indexOf(document.getElementById(id))+1;\n a.innerHTML = '('+nr+')';\n a.href='#'+nr;\n a.onclick = ()=> document.getElementById(id).scrollIntoView({behavior:'smooth',block:'center'})\n },1000);\n return a;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"