3D Game Programming Color, Material, and Lighting

Presentation on theme: "3D Game Programming Color, Material, and Lighting"— Presentation transcript:

1 3D Game Programming Color, Material, and Lighting
Ming-Te Chi Department of Computer Science,  National Chengchi University 2018

2 Outline Color, Material, and Lighting Unity Color ShadeModel
Material in Unity LightModel Unity

3

4 Your Personal Photon Detector
而人為何會感受到顏色的不同，則是因為視網膜中充滿著感光細胞，其中的錐狀細胞有三種，每一種會針對不同波長的光線做反應 這三種不同波長，也就是我們熟知的紅色，綠色和藍色，稱之為光的三原色 也由於人類感光細胞的構造，我們可以設計各式各樣的顯示器，調整每一個像素紅綠藍三色的強度，還原出顏色

5 Photon Generator Cathode ray tube from wiki
1. Three Electron guns (for red, green, and blue phosphor dots) 2. Electron beams 3. Focusing coils 4. Deflection coils 5. Anode connection 6. Mask for separating beams for red, green, and blue part of displayed image 7. Phosphor layer with red, green, and blue zones 8. Close-up of the phosphor-coated inner side of the screen 傳統的陰極射線管的構造如上圖，陰極電子槍發射出電子，經過在陽極高壓的作用下，射向螢光幕使螢光粉發光 彩色的陰極射線管透過紅綠藍三色的電子槍和對應的螢光粉，呈現色彩 Cathode ray tube from wiki

6 PC Display Modes Screen resolution Color Channel: Color Depth RGBA
( 0, 0, 0 ) Screen resolution Color Channel: RGBA Color Depth Each pixel can be represented by (red:0~255, green:0~255, blue:0~255) ( 0, 1, 0 ) Close look at LCD 顯示器一般有兩個基本組成 一是透過像素的排列，重現畫面。就是對應空間能呈現的精細度 二是每個像素中每個顏色能表現的深度，一般而言每個顏色以8bit表現，能各別表示256種色階，三原色加總的排列組合可表示2^24種不同顏色

7 The Color Cube Green Black (0, 0, 0) Red Blue
三原色可以對應到xyz三軸，離原點越遠，表示亮度越強，藉此以三度空間把三原色的色彩空間表示出來 除了RGB 色彩空間外，還有HSV, YUV, CIELAB色彩空間等，各有不同特性，可進一步搜索相關參考資料 Blue

8 Set color RGBA Ex: Red color Unsigned byte(255, 0, 0); Float (1.0f, 0.0f, 0.0f); Hex FF0000FF OpenGL以glColor<x><t>(…)指定後續頂點的顏色 值得留意的 當使用glColor3f() 每個浮點數值域在0~1之間 但是使用glColor3ub() 每個整數值域在0~255之間 也就是 glColor3f(1, 0, 0);等同於glColor3ub(255, 0, 0);

9 Shading The operation of determining the effect of a light on a material is known as shading Shading代表是不同的灰階(亮度)，用以呈現物體表面在空間中的深度或立體感 是光源和表面材質特性交互作用後產生的光影效果 先略過一些光影計算的複雜模型，假設一個物體的顏色是White(255, 255, 255)，在極亮的地方會呈現原來的顏色 但隨著外在光線的降低，顏色會逐漸降低至Black(0, 0, 0)

10 What is Shading Light as a Particle Light Surface A Surface B
顏色的呈現，可以想作由光源發射出光子，這些粒子將直線前進，遇到物質的表面再進行反彈， 如果光子進入眼睛就可以感知到顏色， Surface B

11 Lighting and Rendering
images from with ‘direct light’ only With no lighting with indirect 'global illumination'

12 Local illumination Only consider the light, the observer position, and the object material properties. N Light View P 在real time rendering中，由於要在有限的硬體，達到互動的效率且又能維護一定的品質 所使用的計算策略是，Local illumination 也就是僅考慮物體表面上單一位置P 與光源向量和視點向量的關聯 不考慮中間的遮蔽以及間接光源的影響

13 Global Effects shadow multiple reflection translucent surface
global illumination是考慮到光線在場景，每個表面間互相影響的可能性，因此能考慮到所有光學物理上的效果，呈現極為真實的效果 在傳統的real-time rendering，常因即時運算的要求，並受限於硬體的計算較少碰觸global illumination 的議題 但隨著GPU加速，已經有可能處理或利用其他方式產生近似的效果 translucent surface

14 Local versus Global Illumination
Local illumination global illumination To understand shading properly, we need to review some basic notions of physics…

15 Material in the world Material Properties ( 1, 0.5, 1 ) Intensity .6
( 1, 0.5, 1 ) Intensity .6 Intensity ( 1, 0.5, 1 ) X ( 0.8, 0.8, 0.8) = ( 0.8, 0.4, 0.8 ) .6 X .5 =.3 Shading的效果，也就是觀察者接受到的亮度 是由光源發出的亮度(左圖0.6)，照射到材質表面，根據材質不同反射係數(左圖0.5)，兩者相乘的結果(.6 X .5 =.35 ) 右圖呈現以(r, g, b)三原色 .5 Material ( 0.8, 0.8, 0.8 ) Material

16 Why we need shading Suppose we build a model using many polygons and color it with glColor. We get something like But we want Before: glColor() After: glEnable(GL_LIGHTING); Related lighting setup (glLightfv(); glMaterial();) glNormal();

17 Phong shading (1973) Diffuse Specular Ambient
A simple model that can be computed rapidly Has three components Diffuse Specular Ambient ^ B. T. Phong, Illumination for computer generated pictures, Communications of ACM 18 (1975), no. 6, 311–317. ^ University of Utah School of Computing,  Phong shading是目前常用的光影模型，由Bui Tuong Phong(裴祥風)在1973年提出， 他將最顯著三個光影效果分析出來，並提供計算的方法 Ambient: 瀰漫在空間中的光源，是無方向性的光源，用以提供基本亮度 Diffuse: 光線打到物體表面某點，受微小表面的起伏，而會向四面八方散射出去 Specular: 鏡射光 光線打到極為光滑的表面，極中在反射向量的方面反射出去，亮度非常極中，會在表面上呈現highlight

18 Using a Light Source Surface Normal Normal Reflect vector P
要瞭解phong shading的計算，要先瞭解光打到表面的可能變化，和相關向量的表現 如上圖，由光源出發的光線(也就是入射向量)，打到表面上的點， 通常在簡單的散射光計算模型，我們會假設會向四面八方均勻的散射出去，這時候光影的強度主要決定於光線和法向量的夾角 我們可以想像，日正當中時(光源和方向量的夾角很小)，感受的熱量比較高，同理亮度也比較高 關於鏡射光可以根據該點的法向量，依據入射角等於反射角，可以算出反射向量 P

19 Phong shading (1973) To source To viewer Normal Perfect reflector
Uses four vectors To source To viewer Normal Perfect reflector view vector Normal reflection vector 但實際上，要看到鏡射光的效果，我們還要加入觀察者，也就是view vector 鏡射光的亮度非常極中在反射向量上，我們可以從圖中發現，若是view vector和reflection vector相距越遠，觀察者看到的亮度就越低

20 Phong shading I = kd Id l · n + ks Is (v · r )a + ka Ia
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 ambient diffuse specular Distance ( 1/(a+bd+cd^2) )

21 Find normal N w v Normal = cross_product(v, w)
m3dFindNormal() 輸入一個三角型的三個頂點，以三角型的兩邊做為向量，算出法向量 void m3dFindNormal(M3DVector3f result, const M3DVector3f point1, const M3DVector3f point2, const M3DVector3f point3) { M3DVector3f v1,v2; // Temporary vectors // Calculate two vectors from the three points. Assumes counter clockwise // winding! v1[0] = point1[0] - point2[0]; v1[1] = point1[1] - point2[1]; v1[2] = point1[2] - point2[2]; v2[0] = point2[0] - point3[0]; v2[1] = point2[1] - point3[1]; v2[2] = point2[2] - point3[2]; // Take the cross product of the two vectors to get // the normal vector. m3dCrossProduct(result, v1, v2); }

22 Ambient + Diffuse 從靜態畫面中，可看出不同表面，隨著和光源的方向不同，而有不同的亮度，這個亮度的變化而形塑了物體的立體感
更進一步

23 Phong Reflection small Diffuse Kd large Specular Ks large
這張圖表呈現出diffuse和specular兩者係數對於shading的影響 Diffuse: 在這個例子只作用在紅色上面，沿著橫軸，越右邊越強 Specular:在這個例子只作用在綠色上面，沿著縱軸，越下方越強 large

24 Add specular ShinyJet

25 Examples Only differences in these teapots are the parameters
in the modified Phong model 這張圖呈現不同係數呈現的效果

26 Normal Average Face normal Vertex normal 法向量影響
同一個表面，但設定不同的法向量，就會呈現不同的效果 假設我們較少的三角型構成一個球體，如左圖。如果我們將三角型的頂點都設成面法向量，這樣每個平面的shading顏色相近，感覺是一片片的表面構成球 但如果我們對每個頂點求出平滑的法向量(對於球體，為球心到頂點的連線)，這樣shading的效果就很平滑

27 Material in Unity 新增資料夾存放材質以方便管理 在Project畫面空白處[右鍵]→[Create]→[Folder]

28 Material in Unity 建立新材質，準備套用到物件上
在Project畫面中剛剛新增的資料夾上按[右鍵]→[Create]→[Material]

29 Material in Unity 可在Inspector畫面中調整材質類型及顏色
之後把材質拖到Hierarchy畫面的物件中，或直接拖到畫面中的物件，可直接套用材質

30 Standard Metallic

31 Specular specular

32 Lighting a Scene

33 Lighting in Unity Type: 光源種類 Color: 光源顏色 Intensity: 光源強度(亮度)
Shadow Type: 產生的影子類型(Pro版才可使用) [Point/Spot]Range: 光線可照到的最大範圍(黃圈) [Spot]Spot Angle: 聚光燈的展開角度(黃圈)

34 Point light Ex: light bulb Position Range Intensity OpenGL內建的光源模型有三種
點光源 光源從一點往四面八方射出，(像燈泡)，就是給定(x, y, z 1)做為光源所在位置 平行光 太陽光從很遠的地方設出，故在地球上可視為同方向的平行光(dx, dy, dz, 0) OpenGL利用齊次座標的第四維度，分別出GL_POSITION是點還是向量，這點要特別留意 最後一種是聚光燈，在舞台上常使用的效果，光會集中在一個角錐上

35 Directional Light Ex: Sun Direction (forward (+Z) direction)

36 Spot light angle Light source forward (+Z) direction
因此我們需設定聚光燈所在的位置GL_POSITION，投射的向量GL_SPOT_DIRECTION，張角GL_SPOT_CUTOFF以及衰減係數

37 Emissive Materials

38 Ambient light Ambient light is light that is present all around the scene and doesn’t come from any specific source object Set in Lighting window

39 Skybox

40 Skybox 一個包覆場景的巨大靜態圖片 沒有打光(沒有光源仍然看的到) 用靜態圖片展示遠景
Cube使用6張圖片，分別是上、下、左、右、前、後

41 Skybox 創立Skybox建立一個material Shader → Skybox → 6 Sided

42 Skybox 將天空圖片加進Unity專案內 圖片的Warp Mode要改成Clamp 設定Skybox material六面的圖片
避免天空盒在邊界時會產生顏色不match 設定Skybox material六面的圖片

43 Skybox 設定Skybox 功能表列 Window → Lighting 將剛剛建好的material套用進Skybox