1. ICG 2018 Fall Homework1 Guidance 20181011
網媒所碩一 周家宇

2. Requirements (Due to )
Flat, Gouraud, and Phong shading with Phong reflection model in shaders. You can demonstrate the three shading computation in a single object.
Enable multiple shaders and transformation on multiple objects in a scene. You are free to use those provided model files and arrange them to form the scene on your own style. You must show the three shading simultaneously on different objects in your scene.
At least 3 objects & at least 3 light sources
Bonus: Special effects on shading / lighting / animation, …

3. Phong Reflection Model
Phong reflectionis is composed of three kinds of lights.
Specular light means reflecting a small part of the light hitting the surface to eyes
Diffuse is the most common light
Ambient means environment light

4. Shading Flat Shading: Constant normal on the whole surface
Gouraud Shading: Different vertex normal, interpolated vertex color on a fragment
Phong Shading: Different vertex normal, interpolated vertex normal on a fragment
Flat shading, use the same normal on the whole surface
Gouraud shading, use different vertex normal, and then interpolate vertex color on a fragment
Phong shading, use different vertex normal, and then interpolate vertex normal on a fragment and calculate color

5. Rendering Pipeline
Rendering pipeline is a procedure from scene description to image on the screen
First, there are many vertices(p, p1, p3), transfer to vertex processor to calculate their final positions(screen positions)
These points will move on next two steps.
After rasterization, the triangle(p, p1, p3) will be cut as fragments, and the attribute of each fragment is interpolated by origin three points (p, p1, p3)
So in this homework, you need to write these two processors (vertex shader & fragment shader)
Vertex shader will change vertex’s position
Fragment shader will calculate fragment(pixel) color

6. Shaders
// gl_FragColor is a built-in variable, it is the output of the fragment shader
It is an example framework we provide, you can modify these two shaders to show shadings
These two shaders are written by GLSL, you need to follow the rules.
There are some built-in variables, such as gl_Position and gl_FragColor, etc.
// gl_Position is a built-in variable, it is the output of the vertex shader
// another output pass to fragment shader

7. Shader data These are variables from CPU to GPU (to shader)
Uniform means each vertex has the same value
Attribute means each vertex has different value
Varying means value from vertex shader to fragment shader

8. Shader data Take vertex shader for example
Because each vertex has its own position, normal, or colors, we use Attribute to build these variables
There are some variables that each vertex have the same, such as transform matrix, we use Uniform to build these variables

9. You can search other built-in variables on the Internet

10. Load models
已經將大部分課程網的 tri 模型轉成 json 檔
Example Teapot.json

11. World transform y x z Model coordinates
Each model has its own model coordinates, it sets origin with itself.
Model data uses its own coordinates.
Model coordinates

12. World transform World coordinates
When you put a model in the scene, you need to transfer model coordinate to world coordinate
You need to product a ModelViewMatrix
If you want to do some transforms, such as translation, rotation, scale, shear, you need to modify this matrix
World coordinates

13. World transform Camera coordinates
Last, camera also has its own coordinate
So you need to more product a ProjectionMatrix
Camera coordinates

14. Transformations Homogeneous Coordinates
We use homogeneous coordinates to calculate transform matrix

15. Translation
It is translation matrix

16. Scale

17. Rotate

18. Shear
Different order of matrix product will produce different result

19. Requirements Again (Due to 20181108)
Flat, Gouraud, and Phong shading with Phong reflection model in shaders. You can demonstrate the three shading computation in a single object. (3pts)
Enable multiple shaders and transformation on multiple objects in a scene. You are free to use those provided model files and arrange them to form the scene on your own style. You must show the three shading simultaneously on different objects in your scene. (3pts)
At least 3 objects & at least 3 light sources
Bonus: Special effects on shading / lighting / animation, …

20. Requirements Again

21. Reference https://webglfundamentals.org/

22. TA Hours CSIE R506 周家宇 楊子由 r07944038@csie.ntu.edu.tw 星期五 10:00 ~ 12:00
星期二 10:00 ~ 12:00

23. Q & A