the graphics pipeline and opengl i · the graphics pipeline! • monolithic graphics workstations...
TRANSCRIPT
![Page 1: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/1.jpg)
The Graphics Pipeline and OpenGL I: Transformations!
Gordon Wetzstein!Stanford University!
!
EE 267 Virtual Reality!Lecture 2!
stanford.edu/class/ee267/!!
![Page 2: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/2.jpg)
Albrecht Dürer, “Underweysung der Messung mit dem Zirckel und Richtscheyt”, 1525!
![Page 3: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/3.jpg)
Lecture Overview!
• what is computer graphics?!• the graphics pipeline!• primitives: vertices, edges, triangles!!• model transforms: translations, rotations, scaling!
• view transform !• perspective transform!• window transform!
![Page 4: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/4.jpg)
blender.org!
![Page 5: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/5.jpg)
Modeling 3D Geometry!
Courtesy of H.G. Animations!https://www.youtube.com/watch?v=fewbFvA5oGk!
![Page 6: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/6.jpg)
blender.org!
![Page 7: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/7.jpg)
What is Computer Graphics?!
• at the most basic level: conversion from 3D scene description to 2D image!
• what do you need to describe a static scene?!• 3D geometry and transformations!
• lights!• material properties!
• most common geometry primitives in graphics:!• vertices (3D points) and normals (unit-length vector associated with vertex)!• triangles (set of 3 vertices, high-resolution 3D models have M or B of triangles)!
![Page 8: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/8.jpg)
The Graphics Pipeline!
• geometry + transformations!• cameras and viewing!• lighting and shading!• rasterization!
• texturing!!
blender.org!
![Page 9: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/9.jpg)
• Stanford startup in 1981!• computer graphics goes hardware!• based on Jim Clark’s geometry engine!
Some History!
![Page 10: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/10.jpg)
Some History!
![Page 11: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/11.jpg)
The Graphics Pipeline!
• monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major companies: NVIDIA, AMD, Intel!
• early versions of these GPUs implemented fixed-function rendering pipeline in
hardware !
• GPUs have become programmable starting in the late 90s !• e.g. in 2001 Nvidia GeForce 3 = first programmable shaders!
• now: GPUs = programmable (e.g. OpenGL, CUDA, OpenCL) processors !
![Page 12: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/12.jpg)
The Graphics Pipeline!
GPU = massively!parallel processor!
![Page 13: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/13.jpg)
The Graphics Pipeline!• OpenGL is our interface to the GPU!!
• right: “old-school” OpenGL state machine!
• today’s lecture: vertex transforms!
I had this poster hanging on my dorm wall during undergrad!
![Page 14: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/14.jpg)
WebGL!
• JavaScript application programmer interface (API) for 2D and 3D graphics!
• OpenGL ES 2.0 running in the browser, implemented by all modern browsers!
• overview, tutorials, documentation: see lab 1!!
![Page 15: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/15.jpg)
three.js!
• cross-browser JavaScript library/API !
• higher-level library that provides a lot of useful helper functions, tools, and abstractions around WebGL – easy and convenient to use!
• https://threejs.org/!• simple examples: https://threejs.org/examples/!
• great introduction (in WebGL):!http://davidscottlyons.com/threejs/presentations/frontporch14/!
![Page 16: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/16.jpg)
The Graphics Pipeline!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 17: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/17.jpg)
The Graphics Pipeline!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Vertex Processing: Process and transform individual vertices & normals.!2. Rasterization: Convert each primitive (connected vertices) into a set of fragments. A fragment can
be interpreted as a pixel with attributes such as position, color, normal and texture.!3. Fragment Processing: Process individual fragments.!4. Output Merging: Combine the fragments of all primitives (in 3D space) into 2D color-pixel for the
display.!
![Page 18: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/18.jpg)
The Graphics Pipeline!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Vertex Processing: Process and transform individual vertices & normals.!2. Rasterization: Convert each primitive (connected vertices) into a set of fragments. A fragment can
be interpreted as a pixel with attributes such as position, color, normal and texture.!3. Fragment Processing: Process individual fragments.!4. Output Merging: Combine the fragments of all primitives (in 3D space) into 2D color-pixel for the
display.!
![Page 19: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/19.jpg)
The Graphics Pipeline!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
vertex shader! fragment shader!
• transforms & (per-vertex) lighting!
• texturing !• (per-fragment) lighting!
![Page 20: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/20.jpg)
Coordinate Systems!
• right hand coordinate system!
• a few different coordinate systems:!• object coordinates!
• world coordinates!• viewing coordinates!• also clip, normalized device, and
window coordinates!
wikipedia!
![Page 21: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/21.jpg)
Primitives!
• vertex = 3D point v(x,y,z)!
• triangle = 3 vertices!
• normal = 3D vector per vertex describing surface orientation n=(nx,ny,nz)!
v1
v3v2
n2
n3
n1
![Page 22: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/22.jpg)
Pixels v Fragments!
• fragments have rasterized 2D coordinates on screen but a lot of other attributes too (texture coordinates, depth value, alpha value, …)!
• pixels appear on screen!• won’t discuss in more detail today!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 23: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/23.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 24: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/24.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
vertex/normal!transforms!
![Page 25: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/25.jpg)
![Page 26: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/26.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
![Page 27: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/27.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
![Page 28: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/28.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
![Page 29: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/29.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
![Page 30: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/30.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
![Page 31: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/31.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
![Page 32: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/32.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
![Page 33: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/33.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
![Page 34: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/34.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
3. Select a camera lens (wide angle, normal or telescopic), adjust the focus length and zoom factor to set the camera's field of view (Projection transform).!
![Page 35: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/35.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
3. Select a camera lens (wide angle, normal or telescopic), adjust the focus length and zoom factor to set the camera's field of view (Projection transform).!
![Page 36: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/36.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
3. Select a camera lens (wide angle, normal or telescopic), adjust the focus length and zoom factor to set the camera's field of view (Projection transform).!
![Page 37: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/37.jpg)
Vertex Transforms!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
1. Arrange the objects (or models, or avatar) in the world (Model Transform).!
2. Position and orientation the camera (View transform).!
3. Select a camera lens (wide angle, normal or telescopic), adjust the focus length and zoom factor to set the camera's field of view (Projection transform).!
![Page 38: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/38.jpg)
Model Transform!
• transform each vertex from object coordinates to world coordinates!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
v =xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
![Page 39: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/39.jpg)
Model Transform - Scaling!
• transform each vertex from object coordinates to world coordinates!v =xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
1. scaling as 3x3 matrix!
S(sx , sy , sz ) =sx 0 00 sy 0
0 0 sz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
Sv =
sx 0 00 sy 0
0 0 sz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟=
sxxsyy
szz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
scaled vertex = matrix-vector product:!
![Page 40: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/40.jpg)
Model Transform - Rotation!
• transform each vertex from object coordinates to world coordinates!v =xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
2. rotation as 3x3 matrix!
Rz (θ ) =cosθ −sinθ 0sinθ cosθ 00 0 1
⎛
⎝
⎜⎜
⎞
⎠
⎟⎟
Rzv =cosθ −sinθ 0sinθ cosθ 00 0 1
⎛
⎝
⎜⎜
⎞
⎠
⎟⎟
xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟=
xcosθ − ysinθxsinθ + ycosθ
z
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
rotated vertex = matrix-vector product, e.g. !
Rx (θ ) =1 0 00 cosθ −sinθ0 sinθ cosθ
⎛
⎝
⎜⎜
⎞
⎠
⎟⎟
Ry(θ ) =cosθ 0 sinθ0 1 0
−sinθ 0 cosθ
⎛
⎝
⎜⎜
⎞
⎠
⎟⎟
![Page 41: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/41.jpg)
Model Transform - Translation!
• transform each vertex from object coordinates to world coordinates!v =xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
3. translation cannot be represented as 3x3 matrix!!
xyz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟+
dxdydz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟=
x + dxy + dyz + dz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
that’s unfortunate L !
![Page 42: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/42.jpg)
Model Transform - Translation!
• solution: use homogeneous coordinates, vertex is! v =
xyz1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
3. translation is 4x4 matrix!
T (d) =
1 0 0 dx0 1 0 dy0 0 1 dz0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
better J !
Tv =
1 0 0 dx0 1 0 dy0 0 1 dz0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
xyz1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
=
x + dxy + dyz + dz1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
![Page 43: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/43.jpg)
Summary of Homogeneous Matrix Transforms!
• translation!
!• scale!
!
• rotation!
!
Rx =
1 0 0 00 cosθ −sinθ 00 sinθ cosθ 00 0 0 1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
Ry =
cosθ 0 sinθ 00 1 0 0
−sinθ 0 cosθ 00 0 0 1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
Read more: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
T (d) =
1 0 0 dx0 1 0 dy0 0 1 dz0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
S(s) =
sx 0 0 00 sy 0 0
0 0 sz 00 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
Rz (θ ) =
cosθ −sinθ 0 0sinθ cosθ 0 00 0 1 00 0 0 1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
![Page 44: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/44.jpg)
Summary of Homogeneous Matrix Transforms!
• translation inverse translation!
!• scale inverse scale!
!
• rotation inverse rotation!
!
T (d) =
1 0 0 dx0 1 0 dy0 0 1 dz0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
S(s) =
sx 0 0 00 sy 0 0
0 0 sz 00 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
Rz (θ ) =
cosθ −sinθ 0 0sinθ cosθ 0 00 0 1 00 0 0 1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
Read more: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
T −1(d) = T (−d) =
1 0 0 −dx0 1 0 −dy0 0 1 −dz0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
S−1(s) = S 1s
⎛⎝⎜
⎞⎠⎟ =
1/ sx 0 0 00 1/ sy 0 0
0 0 1/ sz 00 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
Rz−1(θ ) = Rz −θ( ) =
cos−θ −sin−θ 0 0sin−θ cos−θ 0 00 0 1 00 0 0 1
⎛
⎝
⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟
![Page 45: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/45.jpg)
Summary of Homogeneous Matrix Transforms!
• successive transforms:!!• inverse successive transforms:!
!
v ' = T ⋅S ⋅Rz ⋅Rx ⋅T ⋅v
Read more: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
v = T ⋅S ⋅Rz ⋅Rx ⋅T( )−1 ⋅v '= T −1 ⋅Rx
−1 ⋅Rz−1 ⋅S−1 ⋅T −1 ⋅v '
![Page 46: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/46.jpg)
Vector and Normal Transforms!
• homogeneous representation of a vector t, i.e. pointing from v1 to v2 : !
• successive transforms:!
!• this works!!
t ' = M ⋅ t = M ⋅ v2 − v1( ) = M ⋅v2 −M ⋅v1
t =
(v2 − v1)x(v2 − v1)y(v2 − v1)z(1−1)
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
txtytz0
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
Mt
v2
v1
t '
v '2
v '1
![Page 47: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/47.jpg)
Vector and Normal Transforms!
• homogeneous representation of a normal (unit length, perpendicular to surface)!
• successive transforms ???!
!• this does NOT work! (non-uniform scaling
is a problem)!
n ' = M ⋅n
n =
nxnynz0
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
Mt
v2
v1
t '
v '2
v '1
n
n '
![Page 48: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/48.jpg)
Vector and Normal Transforms!
• homogeneous representation of a normal (unit length, perpendicular to surface)!
• need to use normal matrix = transpose of
inverse for transformation! !!
n ' = M −1( )T ⋅n
n =
nxnynz0
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
Mt
v2
v1
t '
v '2
v '1
nn '
![Page 49: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/49.jpg)
Vector and Normal Transforms!
• homogeneous representation of a normal (unit length, perpendicular to surface)!
• need to use normal matrix = transpose of
inverse for transformation!!n ' = M −1( )T ⋅n
n =
nxnynz0
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
• fine print: only use upper left 3x3 part of modelview matrix for inverse transpose (no homogeneous normal representation) OR drop w component from n’ after multiplying 4x4 inverse transpose (i.e. don’t use w for normalization of n’!)!
![Page 50: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/50.jpg)
Attention!!
• rotations and translations (or transforms in general) are not commutative!!• make sure you get the correct order!!!
![Page 51: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/51.jpg)
View Transform!
• so far we discussed model transforms, e.g. going from object or model space to world space !
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 52: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/52.jpg)
View Transform!
• so far we discussed model transforms, e.g. going from object or model space to world space !
• one simple 4x4 transform matrix is sufficient to go from world space to camera or view space!!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 53: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/53.jpg)
View Transform!
specify camera by!!• eye position!!
• reference position!!!• up vector!
eye =
eyexeyeyeyez
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
up =
upxupyupz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
center =
centerxcenterycenterz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
![Page 54: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/54.jpg)
View Transform!
specify camera by!!• eye position!!
• reference position!!!• up vector! up =
upxupyupz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
center =
centerxcenterycenterz
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
compute 3 vectors:!
eye =
eyexeyeyeyez
⎛
⎝
⎜⎜⎜
⎞
⎠
⎟⎟⎟
xc = up × zc
up × zc
yc = zc × xc
zc = eye− centereye− center
![Page 55: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/55.jpg)
View Transform!
view transform is translation into eye position, !followed by rotation!!!
xc = up × zc
up × zc
yc = zc × xc
compute 3 vectors:!M
zc = eye− centereye− center
![Page 56: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/56.jpg)
View Transform!
view transform is translation into eye position, !followed by rotation!!!
xc = up × zc
up × zc
yc = zc × xc
compute 3 vectors:!M
zc = eye− centereye− center
M = R ⋅T (−e) =
xxc xy
c xzc 0
yxc yy
c yzc 0
zxc zy
c zzc 0
0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
1 0 0 −eyex0 1 0 −eyey0 0 1 −eyez0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
![Page 57: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/57.jpg)
View Transform!
view transform is translation into eye position, !followed by rotation!!!
M
M = R ⋅T (−e) =
xxc xy
c xzc − xx
ceyex + xyceyey + xz
ceyez( )yxc yy
c yzc − yx
ceyex + yyceyey + yz
ceyez( )zxc zy
c zzc − zx
ceyex + zyceyey + zz
ceyez( )0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟⎟
![Page 58: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/58.jpg)
View Transform – Attention!!
• many graphics APIs have a function called lookat that automatically computes the view matrix for you!
• Three.js also has such a function, but that only computes the rotation, not the
translation, of the view matrix. So best implement the view matrix yourself!!!!
![Page 59: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/59.jpg)
View Transform!
• in camera/view space, the camera is at the origin, looking into negative z!• modelview matrix is combined model (rotations, translations, scaling) and view
matrix!!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 60: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/60.jpg)
View Transform!
• in camera/view space, the camera is at the origin, looking into negative z!
vodacek.zvb.cz!
x
xz
z
up
e
![Page 61: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/61.jpg)
Projection Transform!
• similar to choosing lens and sensor of camera – specify field of view and aspect!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 62: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/62.jpg)
Projection Transform - Perspective Projection!• have symmetric view frustum!• fovy: vertical angle in degrees!• aspect: ratio of width/height!• zNear: near clipping plane (relative from cam)!
• zFar: far clipping plane (relative from cam)!
Mproj =
faspect
0 0 0
0 f 0 0
0 0 − zFar + zNearzFar − zNear
− 2 ⋅ zFar ⋅ zNearzFar − zNear
0 0 −1 0
⎛
⎝
⎜⎜⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟⎟⎟
f = cot( fovy / 2)
projection matrix!(symmetric frustum)!
![Page 63: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/63.jpg)
Projection Transform - Perspective Projection!
more general: a perspective “frustum” (truncated, possibly sheared pyramid)!• left (l), right (r), bottom (b), top (t): corner coordinates
on near clipping plane (at zNear)!
Mproj =
2 ⋅ zNearr − l
0 r + lr − l
0
0 2 ⋅ zNeart − b
t + bt − b
0
0 0 − zFar + zNearzFar − zNear
− 2 ⋅ zFar ⋅ zNearzFar − zNear
0 0 −1 0
⎛
⎝
⎜⎜⎜⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟⎟⎟⎟
projection matrix!(asymmetric frustum)!
perspective frustum!
![Page 64: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/64.jpg)
Projection Transform - Orthographic Projection!
Mproj =
2r − l
0 0 − r + lr − l
0 2t − b
0 − t + bt − b
0 0 −2f − n
− f + nf − n
0 0 0 1
⎛
⎝
⎜⎜⎜⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟⎟⎟⎟
projection matrix!(orthographic)!
more general: a “box frustum” (no perspective, objects don’t get smaller when farther away)!• left (l), right (r), bottom (b), top (t): corner coordinates
on near clipping plane!
![Page 65: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/65.jpg)
Orth
ogra
phic!
Pers
pect
ive!
[Song Ho Ahn]!
![Page 66: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/66.jpg)
Projection Transform!
• possible source of confusion for zNear and zFar:!!• Marschner & Shirley define it as absolute z coordinates, thus zNear>zFar and
both values are always negative !
• OpenGL and we define it as positive values, i.e. the distances of the near and far clipping plane from the camera (zFar > zNear)!
![Page 67: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/67.jpg)
Modelview Projection Matrix!
• put it all together with 4x4 matrix multiplications!!
projection matrix! modelview matrix!vertex in clip space!
vclip = Mproj ⋅Mview ⋅Mmodel ⋅v = Mproj ⋅Mmv ⋅v
![Page 68: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/68.jpg)
Clip Space!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
![Page 69: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/69.jpg)
Normalized Device Coordinates (NDC)!
• not shown in previous illustration!• get to NDC by perspective division!
from: OpenGL Programming Guide!
vclip =
xclipyclipzclipwclip
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
vNDC =
xclip /wclip
yclip /wclip
zclip /wclip
1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
vertex in clip space! vertex in NDC!
∈ −1,1( )∈ −1,1( )∈ −1,1( )
![Page 70: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/70.jpg)
Viewport Transform!define (sub)window as viewport(x,y,width,height),!!
• x,y lower left corner of viewport rectangle (default is (0,0))!
• width, height size of viewport rectangle in pixels !
from: OpenGL Programming Guide!
vNDC =
xclip /wclip
yclip /wclip
zclip /wclip
1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
vertex in NDC!
vwindow =
xwindow
ywindow
zwindow
1
⎛
⎝
⎜⎜⎜⎜⎜
⎞
⎠
⎟⎟⎟⎟⎟
∈ 0,width( )∈ 0,height( )
∈ 0,1( )
vertex in window coords!
xwindow = width2
xNDC +1( ) + x
ywindow = height2
yNDC +1( ) + y
zwindow = 12zNDC +
12
![Page 71: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/71.jpg)
The Graphics Pipeline – Another Illustration!
![Page 72: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/72.jpg)
The Graphics Pipeline!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
all vertex transforms from today!!
![Page 73: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/73.jpg)
The Graphics Pipeline!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
!
• assign fixed color (e.g. red) to each vertex in window coordinates (fragment)!• interpolate (i.e. rasterize) lines between vertices (as defined by user)!
![Page 74: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/74.jpg)
Nintendo Virtual Boy Game “Red Alarm”!
… and we can almost do this …!
![Page 75: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/75.jpg)
Summary!
• graphics pipeline is a series of operations that takes 3D vertices/normals/triangles as input and generates fragments and pixels !
• today, we only discussed a part of it: vertex and normal transforms!
• transforms include: rotation, scale, translation, perspective projection, perspective division, and viewport transform!
• most transforms are represented as 4x4 matrices in homogeneous coordinates à know your matrices & be able to create, manipulate, invert them!!
![Page 76: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/76.jpg)
Next Lecture: Lighting and Shading, Fragment Processing!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
vertex shader! fragment shader!
• transforms & (per-vertex) lighting!
• texturing !• (per-fragment) lighting!
![Page 77: The Graphics Pipeline and OpenGL I · The Graphics Pipeline! • monolithic graphics workstations of the 80s have been replaced by modular GPUs (graphics processing units); major](https://reader030.vdocument.in/reader030/viewer/2022040110/5eccf8ce7f03df4e9b7be405/html5/thumbnails/77.jpg)
Further Reading!• course notes on transforms (see course website)!
• good overview of OpenGL (deprecated version) and graphics pipeline (missing a few things) :!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!!
• textbook: Shirley and Marschner “Fundamentals of Computer Graphics”, AK
Peters, 2009!
• definite reference: “OpenGL Programming Guide” aka “OpenGL Red Book”!!• WebGL / three.js tutorials: https://threejs.org/!