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

Requirements (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. 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, …

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

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

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

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

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

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

You can search other built-in variables on the Internet

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

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

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

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

Transformations Homogeneous Coordinates We use homogeneous coordinates to calculate transform matrix

Translation It is translation matrix

Scale

Rotate

Shear Different order of matrix product will produce different result

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, …

Requirements Again

Reference https://webglfundamentals.org/ http://learningwebgl.com/blog/?page_id=1217 https://learnopengl.com/

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

Q & A