ICG 2018 Fall Homework1 Guidance

Presentation on theme: "ICG 2018 Fall Homework1 Guidance"— Presentation transcript:

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
Specular是指物體光滑的表面直接反射光線到我們的眼睛里的光 diffuse是指物體粗糙的表面反射回來的光線 Ambient是指場景中一些其他的光打到物體反射回來的光線

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 如果在渲染的時候每個三角形的面用同一個normal，那整個三角形就會是同一個顏色，我們稱為flat shading 如果三角形三個頂點用不同的normal的話，計算之後再經過webgl的interpolation之後就比較會有漸層的顏色變化 如果是三角形的面上每個pixel都有自己的normal的話，那麼最後的模型就會顯得很光滑，我們稱之為phong shading

5 Rendering Pipeline Rendering pipeline是指gpu如何將喂進來的場景描述轉換成熒幕上的圖像的
首先我們的場景會是一堆vertices，輸入之後會先進到vertex processor對每一個vertex進行處理。比如下圖的p1，p2，p3三個點，計算他們會在熒幕的哪個位置 然後這三個點會繼續進行後面的兩個過程 在rasterizer之後，這三個頂點圍起來的三角形就會被切成一格一格的fragment，每個fragment的性質（position和normal）都會根據原來這三個點（的position和normal）進行內插 每個fragment都會被送到fragment processor裡面進行最後的計算，來決定他們最終會是什麼顏色，然後他們就會變成螢幕上的pixel 在這個過程中大家要做的就是編輯這兩個processor，來決定每個vertex的性質或者是fragment的顏色

6 Shaders // gl_FragColor is a built-in variable, it is the output of the fragment shader 這是會給到大家的webgl的框架的一部分，最簡單的版本就是大家修改這兩個fragment shader和vertex shader中的內容，然後就能生成有光照的model 這兩個shader都需要按照webgl的語法來寫，它們各自會有一個main函式，也會有很多內建的變量，比如gl_FragColor決定那個fragment最終的顏色，gl_Position決定那個vertex最終的位置 // gl_Position is a built-in variable, it is the output of the vertex shader // another output pass to fragment shader

7 Shader data 這些是指外部傳給rendering pipeline的變量，或者是vertex shader和fragment shader之間互相傳遞的變量 Uniform是指每個vertex都相同的變量 Attribute是指每個vertex不相同的變量 Varying是vertex和fragment之間互相傳的變量

8 Shader data 以vertex shader舉例的話就是你可以傳幾乎任何cpu的數據到vertex shader裡面，
一般會有position，normal，colors等等，這些因為幾乎每個vertex都不同，所以會用attribute來聲明 另外還有一些變量是所有的vertex都一樣的，這些則會用uniform來聲明

9 關於內建變量的部分可以去網上查

10 Load models 已經將大部分課程網的 tri 模型轉成 json 檔 Example Teapot.json
電腦上的rendering loop大概會是這樣 首先會initialize一些窗口和變量 然後會把你寫的shader load到gpu裡面去 然後就是不停的進行： 清空buffer Update你場景的數據 然後繪製圖像

11 World transform y x z Model coordinates 另外一個比較重要的概念，world transform
每個model就像一塊積木，有自己的model coordinates，都是以自己為原點 那我們model數據裡面的每個頂點都是按照這個coordinates來定的 Model coordinates

12 World transform World coordinates
然後你要將model擺放到場景的某一個角落，場景有自己的world coordinates， 所以model裡面的vertex的坐標會轉換到world space的坐標系下面 World coordinates

13 World transform Camera coordinates
所以model的地點坐標還要賺到這個坐標系 那上述這些過程怎麼實現呢？就是讓每個頂點乘上一個轉換矩陣，這個MVMatrix就是modelviewmatrix的簡稱，它會把model的頂點一次性轉換到camera coordinates下 那如果你需要對model做一下平移、旋轉之類的操作，也是修改這個matrix Camera coordinates

14 Transformations Homogeneous Coordinates

15 Translation 這個是平移的矩陣， 需要注意的是webgl中所有的矩陣變換都是把矩陣乘在前面，需要變換幾次，就在前面乘多少個矩陣

16 Scale

17 Rotate

18 Shear 另外就是矩陣相乘的順序會影響model移動的方向，比如先平移后旋轉，還是先旋轉后平移，最終model的位置是不一樣的

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