SH SH
SH
SH
Shear
• Helpful to add one more basic transformation
• Equivalent to pulling faces in opposite directions
Angel and Shreiner: Interactive
Rotation by shearing,
a 2D example
Transformation Matrix
Any number of rotating, scaling, and transition c an be multiplied together!
Post-multiplication vs. pre-multiplication
A
Tz y
z x y x
A [ 1 ]
1
Concatenation of transformations
Let
• In OpenGL, the syntax are
• The Rule in OpenGL/WebGL:
• The transformation specified most recently is the one applied first
Transformation OpenGL Syntax Examples
Rotation glRotatef(angle, vx, vy, vz) glRotatef(45.0, 1.0, 0.0, 0.0)
Translation glTranslatef(dx, dy, dz) glTranslatef(-4.0, -5.0, -6.0) Scaling glScalef(sx, sy, sz) glScalef(2.0, 1.0, 1.0)
p CBA q
))) (
(
(
C B A p q
MP q
CBA
M ,
Transformations: the syntax in WebGL are
• Var a = rotate (angle, direction)
• Var b = rotateX(angle) angle: in degrees
• Var e = scale(scaleVector)
• Var f = translate(translateVector) a, b, e, f: matrix type
Rotations are around a fixed point at the origin.
61
Concatenation
• We can form arbitrary affine transformation matrices b y multiplying together rotation, translation, and scaling matrices
• Because the same transformation is applied to many ve rtices, the cost of forming a matrix M=ABCD is signific ant compared to the cost of computing Mp for many v ertices p
• The difficult part is how to form a desired transformati on from the specifications in the application
Angel and Shreiner: Interactive Computer Graphics 7E ©
Addison-Objectives
• Learn how to carry out transformations in We bGL
– Rotation
– Translation – Scaling
• Introduce MV.js transformations
– Model-view – Projection
Angel and Shreiner: Interactive
63
Current Transformation Matrix (CTM)
• Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline
• The CTM is defined in the user program and loaded int o a transformation unit
CTM
vertices vertices
p C p’=Cp
Angel and Shreiner: Interactive Computer Graphics 7E ©
Addison-CTM operations
• The CTM can be altered either by loading a new CTM o r by postmutiplication
Load an identity matrix: C I Load an arbitrary matrix: C M Load a translation matrix: C T Load a rotation matrix: C R Load a scaling matrix: C S
Postmultiply by an arbitrary matrix: C CM Postmultiply by a translation matrix: C CT Postmultiply by a rotation matrix: C C R Postmultiply by a scaling matrix: C C SAngel and Shreiner: Interactive
65
Rotation About a Fixed Point other than the Origin
Move fixed point to origin Rotate
Move fixed point back M = T(pf) R(q) T(-pf)
Angel and Shreiner: Interactive Computer Graphics 7E ©
Addison-Reversing the Order
We want C = T –1 R T
so we must do the operations in the following order C I
C CT -1 C CR C CT
Each operation corresponds to one function call in the program.
Note that the last operation specified is the first executed in the program
Angel and Shreiner: Interactive
67
CTM in WebGL
• OpenGL had a model-view and a projection matrix in the pipeline which were concatenat ed together to form the CTM
• We will emulate this process
Angel and Shreiner: Interactive Computer Graphics 7E ©
Addison-Using the ModelView Matrix
• In WebGL, the model-view matrix is used to – Position the camera
• Can be done by rotations and translations but is often ea sier to use the lookAt function in MV.js
– Build models of objects
• The projection matrix is used to define the view volum e and to select a camera lens
• Although these matrices are no longer part of the Ope nGL state, it is usually a good strategy to create them i n our own applications
q = P*MV*pAngel and Shreiner: Interactive
69
Rotation, Translation, Scaling
var r = rotate(theta, vx, vy, vz) m = mult(m, r);
var s = scale( sx, sy, sz)
var t = translate(dx, dy, dz);
m = mult(s, t);
var m = mat4();
Create an identity matrix:
Multiply on right by rotation matrix of theta in degrees where (vx, vy, vz) define axis of rotation
Also have rotateX, rotateY, rotateZ Do same with translation and scaling:
Angel and Shreiner: Interactive Computer Graphics 7E ©
Example
• Rotation about z axis by 30 degrees with a fixed point o f (1.0, 2.0, 3.0)
• Remember that last matrix specified in the program is t he first applied
var m = mult(translate(1.0, 2.0, 3.0), rotate(30.0, 0.0, 0.0, 1.0));
m = mult(m, translate(-1.0, -2.0, -3.0));
Angel and Shreiner: Interactive
71
Rotation About a Fixed Point other than the Origin
Move fixed point to origin Rotate
Move fixed point back M = T(pf) R(q) T(-pf)
Angel and Shreiner: Interactive Computer Graphics 7E ©
Addison-Execution in Browser
Angel and Shreiner: Interactive
Home demo: WebGL
• Homework demo provided by our TA DEMO
• Homework demo by previous students DEMO1
DEMO2
The Window-to-Viewport transformation
• World coordinate v.s. Screen coordinate
Viewing in 3D
• CW:
– Center of the window
• VRP:
– View Reference Point
• VPN:
– View-Plane Normal
• DOP:
– Direction of Projection
Viewing in 3D (eye at 0,0,-d)
0 ,
, ,
p p
p
p p
z Z Y y
z X x
d z
y d
Y d
z x d
X
Viewing in 3D: in matrix form
.
1 1
) ,
0 , ,
( )
, ,
(
1 1 1 1
0 0
0 0
0 0
0 0
1 0
0 0
0 1
'' '' ''
' '
' ''
'' '
' '
' ' '
ely perspectiv
Z Y
X to
d transforme is
z y
x So
w w w
y w
Z x Y
X Let
Z Y X z
y x
w d z y x
p p
p p
p p
p p
p
Clipping Lines
(see building walkthrough video)
Why clipping? inside building, closer view Cohen-Sutherland Line - Clipping algorithm
• Trivial rejection:
if logical AND of the codes of the endpoints is not zero
• New segments created:
replacement by intersection
Clipping Lines, line U = (A, B) to (C,D)
• Conditions to set a bit to 1, when input value A is:
Larger than Xmax
Smaller than Xmin, when input value B is Larger than Ymax
Smaller than Ymin,
Clipping line: calculate intersection points
Clipping of 3D polygons
(see 3D clipping powerpoint)
• Scissoring ----> draw only those lying within th e rasterized clip region
• Practical: If we are within a building with many rooms, how to reduce the polygons to be proc essed? (video)
Animation: double buffer
• If left ready, then show left, draw right buffer n ow therefore, no flickering
One Point Perspective VS. Two Point Perspective VS. Three Point Perspective
Perspective projections are categorized by their number of principal vanishing points.
--> Number of axes the projection plane cuts
Two Point Perspective
Two-point perspective
Moving Point Perspective( 北宋 , 張擇端 ,
見 DEMO)
• Aseem Agarwala. Maneesh Agrawala, Michael Cohen, David Salesin, Richard Szeliski, “Photo graphing Long Scenes with Multi-Viewpoint Pa noramas”, SIGGRAPH 2006
One example
• Ordinary pictures are 3 point perspectives.
New graphics programming:
WebGL self-learning
• How?
WebGL demo and codes
• Using Google to search for the key words: “WebGL experimen ts”
• Chrome WebGL experiments
• Run on your Android/iOS phones, iPad, Windows NB etc. usin g native browser, or Chrome.
• Try “newest” selections Jelly fish
• Try “oldest” selection -> Field (1000 grass blades blowing by wind). Speed measurements: iPad Air plus, is running at 30 fr ames while my Android smartphone HTC M8x is running at 20 frames per second.
Source codes
• Learning WebGL (WebGL lessons, Tony Parisi editor in chief )
• It also has Chinese version!
• DEMO of WebGL codes for homework 1
https://www.csie.ntu.edu.tw/~ming/courses/icg/WebGL_DEM O/DEMO1
/
https://www.csie.ntu.edu.tw/~
ming/courses/icg/WebGL_DEMO/DEMO2/
https://www.csie.ntu.edu.tw/~
Starting point: Simple triangles
• Triangle
vertex1_X vertex1_Y vertex1_Z normal1_X n ormal1_Y normal1_Z
vertex2_X vertex2_Y vertex2_Z normal2_X n ormal2_Y normal2_Z
vertex3_X vertex3_Y vertex3_Z normal3_X n ormal3_Y normal3_Z
• COLOR
• Triangle
frontcolor_R frontcolor_G frontcolor_B backcolor_
R backcolor_G backcolor_B
vertex1_X vertex1_Y vertex1_Z normal1_X normal 1_Y normal1_Z
vertex2_X vertex2_Y vertex2_Z normal2_X normal 2_Y normal2_Z
vertex3_X vertex3_Y vertex3_Z normal3_X normal 3_Y normal3_Z
One real example
Triangle
255 255 255 250 0 0
595.000000 453.000000 40.000000 0.000000 1.000000 0.000000
482.000000 453.000000 0.000000 0.000000 1.000000 0.000000
482.000000 453.000000 40.000000 0.000000 1.000000 0.000000
COLOR
To save space, Winged Edge Representation
• In computer graphics, the winged edge data structure is a way to represent
polygon meshes in computer memory. It is a ty pe of boundary representation and describes both the geometry and topology of a model. T hree types of records are used: vertex records, edge records, and face records.
Representation
How to draw (render) triangles
Standard Graphics Pipeline
Advanced rendering methods that usually cannot b e easily implemented by standard graphics pipeline
• Ray Tracing ( 光線追蹤法 )
• Volume Rendering
• Radiosity ( 熱輻射法 )
• Photon Mapping
Volume Rendering: result images
What is still missing in ray-traced images?
• Diffuse to diffuse reflection?