1. A complete pipeline for 3D graphics

2. 3D Models (format)
mat
Color (Red, Green , Blue) (Foreground, background)
3 Vertices, 3 Vertex normal vectors
Triangle frontcolor_R  frontcolor_G  frontcolor_B  backcolor_R  backcolor_G  backcolor_B vertex1_X  vertex1_Y  vertex1_Z  normal1_X  normal1_Y normal1_Z vertex2_X  vertex2_Y  vertex2_Z  normal2_X  normal2_Y normal2_Z vertex3_X  vertex3_Y  vertex3_Z  normal3_X  normal3_Y normal3_Z
For example:
SIMPLE

3. 3D Model format
Triangle                                               

4. Normal for Triangle n p2 plane n ·(p - p0 ) = 0
n = (p2 - p0 ) ×(p1 - p0 ) p p1
normalize n  n/ |n| p0
Note that right-hand rule determines outward face
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

5. 3D Translation & Scaling

6. 3D rotation

7. Viewing in 3D (eye at 0,0,-d)

8. Two-point perspective

9. 3D Viewing Process
Transform into viewport in 2D device coordinates for display
Project onto projection plane
Clip against view volume
2D device coordinates
Clipped world coordinates
3D world-coordinate output primitives

10. Truncated View Volume for an Perspective Projection (how to do 3D clipping?)
VPN
VRP
View
plane
Front
Clipping
Back F B

11. Illumination model Ambient light (漫射) I = la * ka * Obj(r, g, b)
la : intensity of ambient light
ka : 0.0 ~ 1.0, Obj(r, g, b): object color
Diffuse reflection (散射)
I = Ip (r, g, b) * Kd * Obj(r, g, b) * COS(θ )
Ip (r, g, b): light color
Light source attenuation

12. Adding up the Components
For each light source and each color component, the Phong model can be written (without the distance terms) as
I =kd Id l · n + ks Is (v · r )a + ka Ia
For each color component
we add contributions from
all sources
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

13. Polygon shading : linear interpolation
flat shading : constant surface shading.
Gouraud shading: color interpolation shading.
Phong shading: vertex normal interpolation shading

14. Bi-linear interpolation
. Linear interpolation: A (x1, y1, z1) with color (r1, g1, b1); B (x2, y2, z2) with color (r2, g2, b2) What is the color of point C (x3, y3, z3) located on the line AB. C = color of A + t * (color of B- color of A), where t is | (C-A) |/ |(B-A)| Similarly, we can process Bi-linear interpolation

15. HW#2: expected results

16. Pipeline View modelview transformation projection transformation
perspective
division
4D  3D
nonsingular
clipping
projection
3D  2D
against default cube
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

17. Determine the depth order! 1. Mountain, 2. bridge, 3. people 4. Hat

18. Visibility determination(2): Z-buffer algorithm
Initialize a Z-buffer to infinity (depth_very_far) { Get a Triangle, calculate one point's depth from three vertices by linear interpolation If the one point's depth depth_P(x,y) is smaller than Z- Buffer(x,y) Z-Buffer (x,y) = depth_P(x,y), Color_at(x,y) = Color_of_P(x,y) else DO_NOTHING }

19. Web presentation: WebGL programming

21. Rasterization Scan conversion After perspective projection
In device coordinates.
A 3D line is mapped into 2D line in device cords.

22. Complete WebGL code examples from the textbook
Example WebGL codes

23. Standard pipeline graphics: not for the following

24. Marching cubes (squares) Paper: Siggraph 1987