Matrices and ray tracing to transformed surfaces
CURSOR For your fun and convenience, with this week's package we've included information about the mouse cursor. You can use this to create work which responds interactively to the user's mouse.
You can access it from your fragment shader,
via uniform vec3 variable uniform vec3 uCursor; x: 1.0 ≤ uCursor.x ≤ 1.0 // left to right y: 1.0 ≤ uCursor.y ≤ 1.0 // bottom to top z: uCursor.z == 0.0 if mouse is up, 1.0 if mouse is down USING MATRICES TO TRANSFORM POINTS Our major use of 4x4 matrices will be to perform linear transformations. These are any geometric transformations that always keep straight lines straight. Internally, the 16 numerical values in a matrix can be stored in either column major order, as shown below, or row major order. For this course, you will be storing matrices in column major order, because that is consistent with how matrices are stored in shader programs on the GPU. The basic operation is multiplying a column vector on the left by a 4x4 matrix, thereby transforming that column vector. The operation itself is essentially four dot products, one for each row of the matrix:
MATRIX PRIMITIVES There are a few primitive matrix generating functions. The matrices returned by these functions can be used to generate all other matrices. Each of these matrices represents a simple geometric intuition:
In the chart below, "c" represents cos(θ) and "s" represents sin(θ), where θ is angle of rotation.
[ 1 0 0 0 0 1 0 0 0 0 1 0 x y z 1 ] MATRIX OPERATIONS
There are some basic operations for matrices:
In the course notes I will provide you with an
implementation of BUILDING MATRIX HIERARCHIES Not this week, but soon, you will be using 4x4 matrices to build hierarchical movement models. Any hierarchical structure with moving parts, such as an electric motor or a human body, is essentially a tree structure. Traversing such a structure therefore requires some sort of internal data stack. In our case, each element of that stack is a 4x4 matrix: save() stack[top+1] = copy(stack[top]); ++top; restore() top; SENDING MATRIX DATA FROM THE CPU TO THE GPU Eventually you will be using matrices on the CPU to model geometry that you create there. But for now, you will just be using them in our ray tracer on the GPU. In order to do this, you need to be able to send the 16 numerical values of a matrix from the CPU down to the GPU. You can do this as follows: // In the shader program on the GPU: uniform mat4 uMyMat; // In the Javascript program on the CPU  only once: state.uMyMatLoc = gl.getUniformLocation(program, 'uMyMat'); // In the Javascript program on the CPU  at every animation frame: gl.uniformMatrix4fv(state.uMyMatLoc, false, [ 16 numeric values ]); ACCESSING A MATRIX ON THE GPU You can directly specify the 16 values of a matrix variable in a shader program as follows: mat4 M = mat4(1.,0.,0.,0., 0.,1.,0.,0., 0.,0.,1.,0., 2.,3.,4.,1.);When you do the above, you get the following column major matrix: 1 0 0 2 0 1 0 3 0 0 1 4 0 0 0 1You can then access a single column of this matrix as follows: M[3] // == vec4(2.,3.,4.,1.)You can access a single element of this matrix in two different ways: M[3].y // == 3. M[3][1] // == 3. (this line and the previous line are equivalent)Accessing a row of this matrix is a little more awkward: vec4(M[0].y,M[1].y,M[2].y,M[3].y) // == vec4(0.,1.,0.,3.) RAY TRACING: TRANSFORMING A PLANE SURFACE To use a transformation matrix for ray tracing, you will really want to use its corresponding inverse matrix.
I suggest that in your definition of
struct Shape { ... mat4 matrix; mat4 imatrix; // this is just the inverse of the above };The associated code in your Javascript will be something like this: gl.uniformMatrix4fv(state.uShapesLoc[0].matrix , false, someArray); gl.uniformMatrix4fv(state.uShapesLoc[0].imatrix, false, inverse(someArray)); To use a 4x4 matrix to transform a ray traced polyhedron, in your fragment shader you can simply transform each of the planes that define one of its component halfspaces. For example, to ray trace to a transformed cube, you would transform each of its 6 defining planes as part of your fragment shader computation. Because the goal is to preserve the relationship between any halfspace S and any point V: S•V ≤ 0we need to transform S → S' so that
S'•(M•V) ≤ 0produces the same result. It is easy to see that this will be the case when: S' = S•M^{1}because: (S•M^{1})•(M•V) == S•(M^{1}•M)•V == S•VSo if you have a function that computes ray/halfspace intersection in your fragment shader program, you can just insert the following assignment right at the beginning of the function: S = S * uShapes[i].imatrix; RAY TRACING: TRANSFORMING A QUADRATIC SURFACE In the following section, we show how to do the same kind of transformation when ray tracing in your fragment shader to second order surfaces, such as spheres. In the data you pass down to your fragment shader, you can represent any general quadratic surface (eg: sphere, cylindrical tube, cone, parabaloid, etc) as a 4x4 matrix, where you actually use only 10 of the 16 available matrix slots:
mat4 S = mat4(a,b,c,d, 0.,e,f,g, 0.,0.,h,i, 0.,0.,0.,j);A key observation, which I learned from the great computer graphics pioneer Jim Blinn, is that the above matrix can be used to represent a general quadratic equation in three variables by expanding the following inequality: V^{T} S V ≤ 0Where:
V to V'= M•V .
This means you now need to find a different
(MV)^{T} S' MV == V^{T} S VNote also, by the way, that when you take the transpose, you need to reverse the order of the matrix/vector multiplication: (M V)^{T} == V^{T} M^{T}Following the same approach you used for half spaces, you will want to modify S as follows in your fragment shader: V^{T} M^{T} M^{1T} S M^{1} M V == V^{T} S VYou can implement this in your shader via the following code: S ⇐ transpose(M^{1}) * S * M^{1};After doing that, you need to rearrange the values in S to ensure all of the nonzero values end up in just those 10 slots:
S = mat4( S[0].x, S[0].y+S[1].x, S[0].z+S[2].x, S[0].w+S[3].x, 0., S[1].y , S[1].z+S[2].y, S[1].w+S[3].y, ... );You are really trying to intersect S with a ray V+tW, and your goal is to find the value of t where the resulting point is on the surface of S. Expanding out the expression (V+tW)^{T} S (V+tW):
(Note that the six numbers
a (v_{x} + t w_{x}) (v_{x} + t w_{x}) + b (v_{x} + t w_{x}) (v_{y} + t w_{y}) + c (v_{x} + t w_{x}) (v_{z} + t w_{z}) + d (v_{x} + t w_{x}) + e (v_{y} + t w_{y}) (v_{y} + t w_{y}) + f (v_{y} + t w_{y}) (v_{z} + t w_{z}) + g (v_{y} + t w_{y}) + h (v_{z} + t w_{z}) (v_{z} + t w_{z}) + i (v_{z} + t w_{z}) + jYour goal is to end up with a quadratic equation in t that you can then solve: A t^{2} + B t + C ≤ 0You can multiply out the large expression above and then regroup all of the terms to get the three coefficients of the quadratic equation: A = a w_{x} w_{x} + b w_{x} w_{y} + c w_{x} w_{z} + _{ } e w_{y} w_{y} + f w_{y} w_{z} + _{ } h w_{z} w_{z} B = a (v_{x} w_{x} + v_{x} w_{x}) + b (v_{x} w_{y} + v_{y} w_{x}) + c (v_{x} w_{z} + v_{z} w_{x}) + d w_{x} + _{ } e (v_{y} w_{y} + v_{y} w_{y}) + f (v_{y} w_{z} + v_{z} w_{y}) + g w_{y} + _{ } h (v_{z} w_{z} + v_{z} w_{z}) + i w_{z} C = a v_{x} v_{x} + b v_{x} v_{y} + c v_{x} v_{z} + d v_{x} + _{ } e v_{y} v_{y} + f v_{y} v_{z} + g v_{y} + _{ } h v_{z} v_{z} + i v_{z} + jNow that you have A, B and C, you can just solve quadratic equation for t, to find where the ray intersects the surface. To sum up the above steps  all of which should be done in your fragment shader:
FINDING THE SURFACE NORMAL You can now easily find the surface normal, because it's just the gradient of the polynomial. That means you can just take the partial derivatives in x,y,z and normalize the result: (x,y,z) = V + t W normal = normalize( [ 2ax + by + cz + d, 2ey + fz + g, 2hz + i ] )The next few sections show some convenient coefficient values for the original untransformed S, to make some standard useful shapes. SPHERE COEFFICIENTS
xx + yy + zz ≤ 1 ⟶ [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ] CYLINDRICAL TUBE COEFFICIENTS
xx + yy ≤ 1 ⟶ [ 1,0,0,0, 0,1,0,0, 0,0,0,0, 0,0,0,1 ] INTERSECT YOUR CYLINDRICAL TUBE WITH TWO HALFSPACES TO MAKE A UNIT CYLINDER
z ≥ 1 ⟶ z + 1 ≥ 0 _{ }⟶ _{ }z  1 ≤ 0 ⟶ [ 0, 0,1,1 ] z ≤ 1 ⟶ z  1 ≤ 0 ⟶ [ 0, 0, 1,1 ]
COOL VIDEO WE WATCHED At the end of class we watched World Builder.
HOMEWORK For your homework, which is due by class time on Monday October 7, do the following:
An updated library package that you can use, which also contains
a working
As a reference, the image on the right was created using the below code.
I set CYLINDER, SPHERE, OCTAHEDRON and CUBE to constant values
that correspond to matching constants in my fragment shader,
to choose the type of ray tracing logic to use.
