A complete pipeline for 3D graphics

3D Models (format) http://graphics.csie.ntu.edu.tw/~ming/courses/icg/models.html#For 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

3D Model format Triangle 126.000000   202.500000     0.000000    -0.902861    -0.429933 - 0.00000012 89.459999   202.500000    89.459999    -0.637936    -0.431364 - 0.63793612 88.211967   209.144516    88.211967    -0.703896     0.095197 - 0.70389512

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

3D Translation & Scaling

3D rotation

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

Two-point perspective

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

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

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

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

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

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

HW#2: expected results

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

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

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 }

Web presentation: WebGL programming

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

Complete WebGL code examples from the textbook Example WebGL codes https://www.cs.unm.edu/~angel/WebGL/7E/

Standard pipeline graphics: not for the following

Marching cubes (squares) Paper: Siggraph 1987