Chapter 4 Part 1 CS-396
Jeff Bush
¡ Scalars are a single value, either real or complex
¡ Vectors have direction and magnitude
¡ Points are a location in space
¡ Note: in GLSL and glMatrix.js vec2, vec3, or vec4 are simply
the storage types and can hold anything with 2, 3, or 4 values (like points, vectors, colors, …)
¡ These form the minimum set of primitives necessary to build any object
¡ They all have well-defined properties in n- dimensional space but we only care about 3D versions
§ Actually 4D homogeneous versions
¡ Fundamentally require:
§ Addition and multiplication
§ Associativity, commutativity, inverses
¡ We will use real and complex numbers with all
their usual rules
¡ Scalars alone have no geometric properties
¡ A quantity with two attributes:
§ Direction
§ Magnitude
¡ In the physical world:
§ Force
§ Velocity
¡ We usually draw them as a directed line
segment
¡ These vectors are all identical
§ Same direction and magnitude
§ Vectors do not include location information
¡ A single zero vector: zero magnitude, undefined direction
¡ Inverse: same magnitude but opposite direction
! = −$
V
U
• scalar-vector multiplication: same direction and multiply magnitude by scalar
! = #$
V
U
¡ vector-vector addition: use head-to-tail axiom
!=#+% !
W U
¡ Since we have the basics of scalar-vector multiplication and vector-vector addition we can use expressions like:
! = # + 2& − 3)
¡ Vectors spaces are insufficient for geometry since they lack location
§ Need points
¡ Represent a location in space
¡ Several operations allowed between vectors
and points, but none between scalars and points
¡ Point-point subtraction yields a vector !=#−%
#
! %
¡ Point-vector addition is reverse of point-point
subtraction
#=!+%
¡ Point plus a vector space is an affine space ¡ Operations:
§ Vector-vector addition
§ Scalar-vector multiplication
§ Point-vector addition (and point-point subtraction)
§ Scalar-scalar operations
§ Homogenous coordinates operations
!×#
¡ Results in a vector that is orthogonal to both vectors (if they are non-parallel vectors)
¡ Helps define linearly independent vector spaces (soon)
¡ Can be used to get the sine of the angle
between two vectors:
!×# !#
sin ‘ =
! ⋅ # = !% #% + !’ #’ + ⋯ + !) #)
¡ Results in a scalar value
¡ If ! ⋅ # = 0 then the vectors are orthogonal
¡!=!⋅!
¡ Can be used to get the cosine of the angle
between two vectors:
!⋅# !#
cos . =
¡ A set of vectors !”, !#, …, !$ is linearly
independent if
%”!” +%#!# +⋯+%$!$ =)*++
%” =⋯=%$ =0
¡ If a set of vectors is linearly independent we cannot represent one vector in terms of the others
§ Conversely, if a set of vectors is linearly dependent at least one can be written in terms of the others
¡ In a vector space, the maximum number of linearly independent vectors is fixed and is called the dimension of the space
¡ In an n-dimensional space, any set of n linearly independent vectors form a basis for the space
¡ Given a basis !”, !#, …, !$ any vector ! can be written as:
! = & ” !” + & # !# + ⋯ + & $ !$
¡ In 3D our basis is formed from 3 linearly independent vectors
¡ If our basis is !”, !#, !$ then every possible vector can be written as:
! = &”!” + &#!# + &$!$
§ The unique set of scalars &”, &#, &$ is the representation
of ) with respect to the given basis
¡ We can write the representation as an array of scalars:
&”
*=&” &# &$+=&# &$
§ We will use boldface letters for representations
¡ The standard/natural basis for 3 dimensions is:
!” = 1,0,0 !’ = 0,1,0 !( = 0,0,1
§ We can check that they are linearly independent by using the cross product:
!”×!’ ≠ 0,!”×!( ≠ 0,!’×!( ≠ 0
¡ In this basis the representation of a vector is simply the x, y, and z components:
+= ,-,,.,,/ =,-!”+,.!’+,/!(
1=,- ,. ,/
2
¡ Other bases are possible though! Example: !” = 1,0,0
!’ = 0,0,−1 !) = 0,1,0
¡ What is the representation of the following
vectors in this basis?
1,0,0 0,1,0 0,0,1 1,2,3
¡ Other bases are possible though! Example:
!” = 1,0,0 !’ = 0,0,−1 !) = 0,1,0
¡ What is the representation of the following vectors in this basis?
100*
1,0,0
0,1,0
0,0,1
1,2,3 1 −3 2*
001* 0 −1 0*
¡ Each coordinate system has its own basis
¡ Converting between coordinate systems is
the same as transforming between bases
§ The last slide had the rotation 90° around the $- axis basis
¡ A coordinate system is an array of basis
vectors:
%=
‘( ‘) ‘*
+
If green vectors are the basis, which is correct?
!
!
¡ A coordinate system is insufficient to represent points
¡ If we work in an affine space we can add a single point, the origin, to the basis vectors to form a frame
#$ !”
#&
#%
¡ We need an array of 3 basis vectors plus 1 point for the
origin:
¡ Within this frame:
!” !# !$ %&
§ Every vector can be written as:
! = (“!” + (#!# + ($!$
§ Every point can be written as:
% = %& + *”!” + *#!# + *$!$
¡ They have identical representations:
+ = (” (# ($ , – = *” *# *$ ,
But then how do we distinguish them? We need to be able to since vectors don’t have a position…
¡ If we define 0 ∗ # = % and 1 ∗ # = # then: ‘=()’)+(+’++(,’,+0∗#-= () (+ (, #=0)’)+0+’++0,’,+1∗#-= 0) 0+ 0,
where the frame is given by:
‘) ‘+ ‘, #-
¡ And now we obtain our 4D homogeneous
coordinate representation:
/ 1./
0.
.=
() (+ (, 0 2=0) 0+ 0, 1
1=
¡ Homogeneous coordinates are key to all computer graphics systems
¡ All standard transformations like rotation, translation, and scaling can be implemented with matrix multiplications using 4 x 4 matrices
¡ Hardware pipeline works with 4 dimensional representations
¡ For orthographic viewing, we can maintain ! = 0 for vectors and ! = 1 for points
§E.g. %,’,(,0 isavectorand %,’,(,1 isapoint
¡ For perspective we need a perspective division
¡ Do all of our basic formulas for vectors and points work out when using homogeneous coordinates?
§ Vector Inverse?
§ Scalar-Vector Multiplication? § Vector Addition?
§ Point-Point Subtraction?
§ Point-Vector Addition?
¡ How about other things not on the list that don’t
make sense – do they still not make sense? § Scalar-Point Multiplication?
§ Point-Point Addition?
Consider two representations of a the same vector with respect to two different bases. The representations are:
#$ #% #&
!=
‘=($ (% (&
where ###)))+ ) = #$)$ + #%)% + #&)& = $ % & $ % & +
=($,$ +(%,% +(&,& = ($ (% (& ,$ ,% ,&
Each of the basis vectors !”, !#, and !$ are vectors that can be represented in another basis
!” = &””‘” + &”#’# + &”$’$ !# = &#”‘” + &##’# + &#$’$ !$ = &$”‘” + &$#’# + &$$’$
)
¡ The coefficients define a 3×3 matrix #$$ #$% #$&
#%$ #%% #%&
!=
#&$ #&% #&&
¡ Then the equation for converting from one
basis to another can be written as:
‘ = !()
¡ That only allows the coordinate system to be changed but not the frame
¡ We can apply a similar process in homogeneous coordinates to the representations of both points and vectors
¡ Consider two frames:
#$ #% #& ‘(
!=
)=*$ *% *& +(
¡ Any point/vector can be represented in either frame
¡ We can also represent ) in terms of !
!” = $””%” + $”‘%’
!’ = $'”%” + $”%’
!( = $(“%” + $(‘%’
)* = $+”%” + $+’%’
+ $”(%(
+ $'(%(
+ $((%(
+ $+(%( + ,*
Or in matrix form:
$”” $”‘ $'” $” $(” $(‘ $+” $+’
$”( 0 $'( 0 $(( 0 $+( 1
-=
¡ Within the two frames any point or vector has a representation of the same form
!= #$ #% #& #’ inthefirstframe
(= )$ )% )& )’ inthesecondframe ¡Where#’ =)’ =1forpointsand#’ =)’ =0for
vectors and
! = ,-(
performs an affine transformation on homogeneous
coordinates using a 4×4 matrix ,
¡ Every point and vector is given by:
§ 3 scalar values, 0 or 1 for indicating type, and the frame it is represented in
¡ Changes in frames are defined by a 4×4 transformation matrix which is the transpose of the matrix we have been working with (! = #$)
¡ We start the world frame and eventually need everything in the camera frame
§ Accomplished by multiplying the points and vectors by the “model-view matrix”
¡ So far these frames have been the same and the transformation has been the identity matrix:
1000 0100 0010 0001
! = #$ =
¡ Every linear transformation is equivalent to a change in frames
¡ Every affine transformation preserves lines
¡ Affine transformations have 12 degrees of freedom
§ Even though it uses a 4×4 (16 element) matrix, the bottom row is fixed and thus only a subset of all 4D linear transformations are possible
¡ Characteristic of many physically important transformations:
§ Rigid body: translation and rotation
§ Scaling and shear
¡ Importance in graphics is that we need to only transform
endpoints of line segments and let implementation draw line segment between the transformed endpoints
¡ As scenes get more complex every object will likely have its own frame of reference and those will be grouped in other frames of reference, which are grouped into other frames, …
§ For example: this screen is 4 inches from the west wall of the room, this room is on the second floor in the south- east corner of the building, the building is in the south- east corner of the campus, the campus is in the middle of the city, the city is in the southeast corner of the state…
§ Called a scene graph
§ We will end up having several transformation matrices applied to every point
¡ What is the difference between moving the viewer and moving the object?
¡ What is the difference between moving the viewer and moving the objects/world?
§ Just reversed, moving objects/world:
▪ forward is the same as moving the camera backwards ▪ right is the same as moving the camera left
▪ up is the same as moving the camera down
“!
”
#(!) #(“)
#(“)
frame buffer
#(“)
#(!)
#
(from application program)
transformation
rasterizer
!
vertices
#(!)
vertices
pixels
Viewport
¡ Sometimes we want vectors and points in homogeneous coordinates
§ 4D with ! = 0 is a vector and ! = 1 is a point
¡ Sometimes we want vectors and point in Euclidean
coordinates
§ 3D and have to guess at vectors vs points
¡ Can convert between the two. In GLSL, how do we get
a…
§ homogeneous version of a Euclidean vector? § homogeneous version of a Euclidean point? § Euclidean version of a homogeneous vector? § Euclidean version of a homogeneous point?
¡ Sometimes we want vectors and points in homogeneous coordinates
§ 4D with ! = 0 is a vector and ! = 1 is a point
¡ Sometimes we want vectors and point in Euclidean
coordinates
§ 3D and have to guess at vectors vs points
¡ Can convert between the two. In GLSL, how do we get a… § homogeneous version of a Euclidean vector? vec4(v, 0.0) § homogeneous version of a Euclidean point? vec4(v, 1.0) § Euclidean version of a homogeneous vector? v.xyz
§ Euclidean version of a homogeneous point? p.xyz
¡ Move/displace/translate a point to a new
location
“# &
¡ Displacement determined by a vector ! “# = ” + &
§ 3 degrees of freedom (x, y, and z displacement)
”
¡ Use the homogeneous coordinate representation in some frame
!=#$%1′
!( = #( $( %( 1 ‘
*+ *, *- 0′ !( = ! + )
#( = # + *+ $( = $ + *, %( = % + *-
With: Or:
vector-point addition in 4D
)=
Can also express using a 4×4 matrix so that:
!” = $!
using the following transformation matrix:
$%&,%(,%) =
0001
1 0 0 %& 0 1 0 %(
0 0 1 %)
Using a transformation matrix here is technically more computations but the GPU has built-in 4×4 matrix multiplication and all affine transforms can be done in this form and can be concatenated together
¡ Before adding translation we need to add the model-view matrix to our setup:
§ What data type is the variable?
§ What kind of variable in which shader?
▪ What other things do we need to when adding this kind of variable to make it usable?
§ Which values do we need to apply it to? ▪ How do we apply it to each of them?
▪ Is it applied to each the same way?
¡ In translation example:
§ Add the uniform 4×4 matrix uModelView to vertex shader
▪ ApplyittoaPositionandaNormal ▪ For aNormal just get the 3×3 matrix by doing
mat3(uModelView)
▪ “Applying it” means which math operation? The matrix must be the first operand
§ Make sure to get access to it from JS
¡ To get a translation matrix:
§ Function is glMatrix.mat4.fromTranslation()
§ Takes two arguments:
▪ Thematrixwearesavingto
▪ Thearraywiththex,y,ztranslation
§ To create a matrix use glMatrix.mat4.create()
§ Make sure to call your variable mv so my code after it
works
¡ Update the uniform with your new model-view
matrix:
§ gl.uniformMatrix4fv(LOC, false, mv);
¡ What happens if you translate too far to the right or left?
¡ What happens if you translate too far up or down?
¡ What happens if you translate too far forward or backward?
¡ What doesn’t the teapot change size when further away?
¡ Are we translating the camera or the model? § How would we translate the other one?
¡ Rotation about the origin by ! radians § Radius stays the same, angle increases by !
“# =-cos .+! )# =-sin(.+!)
” = – cos . ) = – sin .
“#=”cos! −)sin! )# =”sin ! +)cos !
¡ Rotation about the !-axis in 3D leaves all points with the same z value
§ Equivalent to rotation in 2D keeping constant z “#=”cos( −*sin(
*#=”sin( +*cos( !# = !
§ Or as a transformation matrix:
.# = /0 ( . with /0 ( =
cos(() −sin(() 0 0 sin(() cos(() 0 0 0010 0001
¡ Repeat process that we did for z-axis
§ For rotation about !-axis leaves x values unchanged
§ For rotation about “-axis leaves y values unchanged 1000
0 cos(%) −sin(%) 0
0 sin(%) cos(%) 0
0001 cos(%) 0 sin(%) 0
0100 −sin(%) 0 cos(%) 0 0001
#$ % =
#1 % =
¡ We can perform any rotation as a single rotation around an arbitrary axis
§ Rotation matrix is fairly ugly…
$&’)̇ + ) $&$+)̇ + $-. $&$-)̇ − $+.
$&$+)̇ − $-. $+’)̇ + ) $+$-)̇ + $&.
$&$-)̇ + $+. 0 $+$-)̇ − $&. 0
!”,$ =
where $ is the axis to rotate around (a unit vector), . = sin ” ,
)=cos ” ,and)̇=1−)
¡ Figuring out the axis to rotate around can be a
bit tricky as well
$-‘)̇ + ) 0 0001
¡ Do we need to adjust the shaders at all from the translation example to make this work?
§ Why or why not?
¡ Let’s first do rotation using the x, y, and z axes
¡ Use rotate(), rotateY(), and rotateZ()
functions of glMatrix to compute the model- view matrix
§ First argument is the output
§ Second argument is the matrix to start from
▪ Your first and second arguments will be the same variable
§ Third argument is angle in radians
▪ Weneedtouseandcompletedeg2rad()function
§ Need to build up the model-view matrix one rotation at a time
¡ You probably setup your code to do X first, then Y, then Z
§ This actually performs them in the opposite order, but we will learn about that later
¡ What happens if you do them in a different order?
¡ Let’s do rotation around an arbitrary axis § Different example files then the last one
¡ Using the fromRotation() function of glMatrix compute the model-view matrix
§ First argument is the output
§ Second argument is angle in radians
▪ We need to use and complete deg2rad() function
§ Third argument is the axis as an array like [0, 1, 1] § Only one call this time!
¡ Can you get (non-trivial) same results with the XYZ rotation and the angle-axis rotation?
¡ What symmetries do you see in the model- view matrix?
Expand/contract along each axis with a fixed origin point
!” = $%! &” = $’& (” = $)(
*” = +*
$% 0 0 0
+ $%,$’,$) =
0001
0 $’ 0 0
0 0 $) 0
¡ Just scaling with negative parameters !” = −1
!& = 1
!” = −1 !” = 1 !& = −1 !& = −1
¡ Using the fromScaling() function of glMatrix compute the model-view matrix
§ First argument is the output
§ Second argument is the scaling vector (i.e. array)
¡ Play around with values including reflections
Pulling faces of an object in opposite directions
Shear along the !-axis: !” =!+%cot(*)
%” = %
,” = ,
1 cot(*) 0 0 0100
-. * =
0001
0010
Rotation – Need 3×3 matrix to describe rotations in 3D
!”# %&’
)h+
$ (
,
Scaling –
Along diagonal, overlapping with rotation
Fixed – last row always 0, 0, 0, 1
Translation – effects points but not vectors which is why it must be in last column
0001
¡ How to reverse effects of a transformation?
¡ We could compute inverse matrices, or we
could use geometric observations: § Translation?
§ Rotation?
§ Scaling?
§ Shearing?
¡ Translation: !”# $%, $’, $( = ! −$%, −$’, −$( ¡ Rotation: +”# , = + −,
§ Works for rotation around any axis
§Also+”# , =+- , sincecos −, =cos(,)and
sin−, =−sin,
¡Scaling:5″# 6 ,6 ,6 =5 #⁄ ,# ,#⁄
%'(
89 :8; 8<
¡ We can form arbitrary affine transformation matrices my multiplying together translation, rotation, and scaling matrices
¡ Because the same transformation is applied to several vertices the cost of forming the complete transformation matrix ! = #$%& is not significant compare to computing !' for each '
¡ The difficult part is how to form a desired complete transformation matrix from the what is going on in the application
¡ Matrix multiplication is not generally commutative so the order of application is critical
¡ Works from right-to-left:
!" =$%&!=$ % &!
¡ This assumes row-matrices to represent points, if using column matrices then needs lots of transposes and to reverse the order:
!"' = !'&'%'$'
¡ Two general “compound” transforms: § Rotation about the origin
▪ Concatenation of rotations around each axis § Rotation about a fixed point
▪ Concatenation of translation with rotation
¡ A rotation of ! about an arbitrary axis can be decomposed into the concatenation of rotations about the "/#/$-axes
% ! = %' !( %) !* %+ !, ¡ !, , !* , !( are called the Euler angles
¡ Note: the rotations do not commute, we could reorder them but would need different values for the thetas
¡ The rotation transformations rotate the world around the origin
¡ How do we rotate around a different location?
To rotate around a fixed point other than the origin:
1. Translate fixed point to origin 2. Rotate
3. Translate fixed point back
!=#$% &'#−p*