2. 程式人生 > >【GLSL教程】（七）逐畫素的光照

【GLSL教程】（七）逐畫素的光照

阿新 • • 發佈：2018-11-22
逐畫素的方向光（Directional Light per Pixel）
這一節將把前面的shader程式碼改為逐畫素計算的方向光。我們需要將工作按照兩個shader拆分，以確定哪些是需要逐畫素操作的。
首先看看每個頂點接收到的資訊：
•法線
•半向量
•光源方向
我們需要將法線變換到視點空間然後歸一化。我們還需要將半向量和光源方向也歸一化，不過它們已經位於視點空間中了。這些歸一化之後的向量會進行插值，然後送入片斷shader，所以需要宣告易變變數儲存這些向量。
我們也可以在頂點shader中完成一些與光和材質相關的計算，這樣可以幫助平衡頂點shader和片斷shader的負載。
頂點shader程式碼可以寫成如下形式：
  1. varying vec4 diffuse,ambient;
  2. varying vec3 normal,lightDir,halfVector;
  4. void main()
  5. {
  6. /* first transform the normal into eye space and
  7. normalize the result */
  8. normal = normalize(gl_NormalMatrix * gl_Normal);
  9. /* now normalize the light's direction. Note that
  10. according to the OpenGL specification, the light
  11. is stored in eye space. Also since we're talking about
  12. a directional light, the position field is actually direction */
  13. lightDir = normalize(vec3(gl_LightSource[ 0].position));
  14. /* Normalize the halfVector to pass it to the fragment shader */
  15. halfVector = normalize(gl_LightSource[ 0].halfVector.xyz);
  16. /* Compute the diffuse, ambient and globalAmbient terms */
  17. diffuse = gl_FrontMaterial.diffuse * gl_LightSource[ 0].diffuse;
  18. ambient = gl_FrontMaterial.ambient * gl_LightSource[ 0].ambient;
  19. ambient += gl_FrontMaterial.ambient * gl_LightModel.ambient;
  21. gl_Position = ftransform();
  22. }
接下來在片斷shader中，首先要宣告同樣的易變變數。此外還要再次對法線進行歸一化，光線向量不需要進行歸一化了，因為方向光對所有頂點都是一致的，插值得到的結果自然也不會變。之後就是計算插值過的法線向量與光線向量的點積。
  1. varying vec4 diffuse,ambient;
  2. varying vec3 normal,lightDir,halfVector;
  4. void main()
  5. {
  6. vec3 n,halfV;
  7. float NdotL,NdotHV;
  8. /* The ambient term will always be present */
  9. vec4 color = ambient;
  10. /* a fragment shader can't write a varying variable, hence we need
  11. a new variable to store the normalized interpolated normal */
  12. n = normalize(normal);
  13. /* compute the dot product between normal and ldir */
  14. NdotL = max(dot(n,lightDir), 0.0);
  15. ...
如果點積結果NdotL大於0，我們就必須計算散射光，也就是用頂點shader傳過來的散射項乘以這個點積。我們還需要計算鏡面反射光，計算時首先對接收到的半向量歸一化，然後計算半向量和法線之間的點積。
  1. ...
  2. if (NdotL > 0.0)
  3. {
  4. color += diffuse * NdotL;
  5. halfV = normalize(halfVector);
  6. NdotHV = max(dot(n,halfV), 0.0);
  7. color += gl_FrontMaterial.specular *
  8. gl_LightSource[ 0].specular *
  9. pow(NdotHV, gl_FrontMaterial.shininess);
  10. }
  12. gl_FragColor = color;
  13. }
下圖顯示了逐畫素光照和逐頂點光照效果的區別：

本節內容Shader Designer的工程下載地址：
http://www.lighthouse3d.com/wp-content/uploads/2011/03/dirpixsd.zip

逐畫素的點光（Point Light Per Pixel）
本節基於前面有關方向光的內容，大部分程式碼都相同。本節內容主要涉及方向光和點光的不同之處。方向光一般假設光源在無限遠的地方，所以到達物體時是平行光。相反，點光源有一個空間中的位置，並向四面八方輻射光線。此外，點光的強度會隨到達頂點的距離而衰弱。
對於OpenGL程式來說，這兩種光的區別主要有：
•光源的position域的w分量：對方向光來說它是0，表面這個position實際是一個方向（direction）；對點光來說，這個分量是1。
•點光源的衰減由三個係數決定：一個常數項，一個線性項和一個二次項。
對方向光來說，光線的方向對所有頂點相同，但是對點光來說，方向是從頂點指向光源位置的向量。因此對我們來說需要修改的就是在頂點shader中加入計算光線方向的內容。
在OpenGL中衰減是按照如下公式計算的：
式中k0是常數衰減係數，k1是線性衰減係數，k2是二次衰減係數，d是光源位置到頂點的距離。
注意衰減與距離是非線性關係，所以我們不能逐頂點計算衰減再在片斷shader中使用插值結果，不過我們可以在頂點shader中計算距離，然後在片斷shader中使用距離的插值計算衰減。
使用點光計算顏色值的公式為：
在上面公式中，環境光部分必須分解為兩項：使用光照模型的全域性環境光設定和光源中的環境光設定。頂點shader也必須分別計算這兩個環境光成分。新的頂點shader如下：
  1. varying vec4 diffuse,ambientGlobal,ambient;
  2. varying vec3 normal,lightDir,halfVector;
  3. varying float dist;
  5. void main()
  6. {
  7. vec4 ecPos;
  8. vec3 aux;
  9. normal = normalize(gl_NormalMatrix * gl_Normal);
  11. /* these are the new lines of code to compute the light's direction */
  12. ecPos = gl_ModelViewMatrix * gl_Vertex;
  13. aux = vec3(gl_LightSource[ 0].position-ecPos);
  14. lightDir = normalize(aux);
  15. dist = length(aux);
  16. halfVector = normalize(gl_LightSource[ 0].halfVector.xyz);
  18. /* Compute the diffuse, ambient and globalAmbient terms */
  19. diffuse = gl_FrontMaterial.diffuse * gl_LightSource[ 0].diffuse;
  20. /* The ambient terms have been separated since one of them */
  21. /* suffers attenuation */
  22. ambient = gl_FrontMaterial.ambient * gl_LightSource[ 0].ambient;
  23. ambientGlobal = gl_FrontMaterial.ambient * gl_LightModel.ambient;
  24. gl_Position = ftransform();
  25. }
在片斷shader中需要計算衰減，還需要將插值得到的光線方向向量歸一化，因為一般來說照到每個頂點的光線方向都不同。
  1. varying vec4 diffuse,ambientGlobal, ambient;
  2. varying vec3 normal,lightDir,halfVector;
  3. varying float dist;
  5. void main()
  6. {
  7. vec3 n,halfV,viewV,ldir;
  8. float NdotL,NdotHV;
  9. vec4 color = ambientGlobal;
  10. float att;
  11. /* a fragment shader can't write a varying variable, hence we need
  12. a new variable to store the normalized interpolated normal */
  13. n = normalize(normal);
  14. /* compute the dot product between normal and normalized lightdir */
  15. NdotL = max(dot(n,normalize(lightDir)), 0.0);
  16. if (NdotL > 0.0)
  17. {
  18. att = 1.0 / (gl_LightSource[ 0].constantAttenuation +
  19. gl_LightSource[ 0].linearAttenuation * dist +
  20. gl_LightSource[ 0].quadraticAttenuation * dist * dist);
  21. color += att * (diffuse * NdotL + ambient);
  22. halfV = normalize(halfVector);
  23. NdotHV = max(dot(n,halfV), 0.0);
  24. color += att * gl_FrontMaterial.specular * gl_LightSource[ 0].specular *
  25. pow(NdotHV,gl_FrontMaterial.shininess);
  26. }
  27. gl_FragColor = color;
  28. }
下圖顯示了固定功能的逐頂點與本節中逐畫素計算得到的點光效果：

本節內容Shader Designer工程下載地址：
http://www.lighthouse3d.com/wp-content/uploads/2011/03/pointlightsd.zip

逐畫素的聚光（Spot Light Per Pixel）
本節內容與上一節基本一致，唯一不同的就是聚光不同於點光，其發出的光線被限制在一個圓錐體中。
對於OpenGL程式來說，這兩種光的區別主要有：
•聚光包含一個方向向量spotDirection，表示圓錐體的軸。
•圓錐體包含一個角度，在GLSL中可以使用應用程式設定的角度值以及對應的餘弦值spotCosCutoff。
•最後還有一個衰減速率spotExponent，它表示從圓錐的中心軸向外表面變化時光強度的衰減。
聚光的頂點shader與點光完全相同，我們只需要對片斷shader進行一些修改。只有噹噹前片斷位於聚光的光錐內時，才需要對散射光、鏡面反射光和環境光成分進行著色。所以我們首先要檢查這個條件。
光源與某點連線向量以及聚光方向向量（spotDirection）之間夾角的餘弦值必須大於spotCosCutoff，否則此點位於聚光之外，只能接收到全域性環境光。
  1. ...
  3. n = normalize(normal);
  5. /* compute the dot product between normal and ldir */
  6. NdotL = max(dot(n,normalize(lightDir)), 0.0);
  8. if (NdotL > 0.0)
  9. {
  10. spotEffect = dot(normalize(gl_LightSource[ 0].spotDirection),
  11. normalize(-lightDir));
  12. if (spotEffect > gl_LightSource[ 0].spotCosCutoff)
  13. {
  14. /* compute the illumination in here */
  15. }
  16. }
  18. gl_FragColor = ...
下面的光照計算與點光非常相似，唯一區別是衰減必須乘以聚光效果（spotlight effect），這個值按如下公式計算：

上式中spotDirection來自OpenGL中設定的狀態，lightDir是光源到某點的向量，spotExp是聚光衰減率，這個值也是在OpenGL程式中設定的，它用來控制從聚光光錐中心到邊緣的衰減。spotExp越大衰減越快，如果為0表示在光錐內光強是常數。
  1. spotEffect = pow(spotEffect, gl_LightSource[ 0].spotExponent);
  2. att = spotEffect / (gl_LightSource[ 0].constantAttenuation +
  3. gl_LightSource[ 0].linearAttenuation * dist +
  4. gl_LightSource[ 0].quadraticAttenuation * dist * dist);
  6. color += att * (diffuse * NdotL + ambient);
  8. halfV = normalize(halfVector);
  9. NdotHV = max(dot(n,halfV), 0.0);
  10. color += att * gl_FrontMaterial.specular *
  11. gl_LightSource[ 0].specular *
  12. pow(NdotHV,gl_FrontMaterial.shininess);
下圖分別顯示了使用固定功能流水線的逐頂點光照計算，以及使用本節shader的逐畫素光照計算得到的聚光效果。

本節內容Shader Designer的工程下載地址：
http://www.lighthouse3d.com/wp-content/uploads/2011/03/spotlightsd.zip

相關推薦

【GLSL教程】（七）逐畫素的光照

逐畫素的方向光（Directional Light per Pixel）這一節將把前面的shader程式碼改為逐畫素計算的方向光。我們需要將工作按照兩個shader拆分，以確定哪些是需要逐畫素操作的。首先看看每個頂點接收到的資訊：•法線•半向量•光源方向我們需要將法線變換到視點空間然後歸一化。我們還

【GLSL教程】（六）逐頂點的光照

引言在OpenGL中有三種類型的光：方向光（directional）、點光（point）、聚光（spotlight）。本教程將從方向光講起，首先我們將使用GLSL來模仿OpenGL中的光。我們將向shader中逐漸新增環境光、散射光和高光效果。 後面的教程中我們將使用逐畫素

【GLSL教程】（八）紋理貼圖

簡單的紋理貼圖（Simple Texture）為了在GLSL中應用紋理，我們需要訪問每個頂點的紋理座標。GLSL中提供了一些屬性變數，每個紋理單元一個： attribute vec4 gl_MultiTexCoord0;

【GLSL教程】（九）其他說明

法線矩陣在很多頂點shader中都用到了gl_NormalMatrix。這裡將介紹這個矩陣是什麼，以及它的作用。大部分計算是在檢視空間內完成的，主要原因是光照的運算要放在這個空間內，否則一些依賴觀察點座標的效果，比如鏡面反射光就很難實現。所以我們需要將法線變換到檢視空間。變換一個頂點到檢視空間的方法

【GLSL教程】（五）卡通著色

引言卡通著色可能是最簡單的非真真實模式shader。它使用很少的顏色，通常是幾種色調（tone），因此不同色調之間是突變的效果。下圖顯示的就是我們試圖達到的效果：茶壺上的色調是通過角度的餘弦值選擇的，這個角度是指光線和麵的法線之間的夾角角度。如果法線和光的夾角比較小，我們使用較亮的色調，隨著夾角變大

【GLSL教程】（四）shder的簡單示例

GLSL的Hello World 這一節中包含一個最基本的shader，它提供如下功能：頂點變換然後使用單一的顏色渲染圖元。 頂點shader 前面已經說過，頂點shader負責完成頂點變換。這裡將按照固定功能的方程完成頂點變換。 固定功能流水線中一個頂點通過模型檢視矩陣以及投影矩陣進行變換

【GLSL教程】（三）在OpenGL中向shader傳遞資訊

引言 一個OpenGL程式可以用多種方式和shader通訊。注意這種通訊是單向的，因為shader的輸出只能是渲染到某些目標，比如顏色和深度快取。 OpenGL的部分狀態可以被shader訪問，因此程式改變OpenGL某些狀態就可以與shader進行通訊了。例如一個程式想把光的顏色傳給shade

【GLSL教程】（二）在OpenGL中使用GLSL

設定GLSL 這一節講述在OpenGL中配置GLSL，假設你已經寫好了頂點shader和畫素shader。如果你還沒有準備好，可以從如下網址獲得相關內容： http://www.3dshaders.com/home/ http://www.opengl.org/sdk/tools/Shader

【GLSL教程】（一）圖形流水線

這是一些列來自 lighthouse3d 的GLSL教程，非常適合入門。我將邊學習邊翻譯該教程的內容，同時記錄在這裡，方便以後查詢。 流水線概述 下圖描述了一個簡化的圖形處理流水線，雖然簡略但仍然可以展示著色器程式設計（shader programming）的一些重要概念。 一

【TeeChart Pro ActiveX教程】（七）：使用函式（下）

下載TeeChart Pro ActiveX最新版本 在上一篇文章中，我們介紹到了在Teechart Pro ActiveX中的功能特點和新增功能，今天我們接著講定義資料來源、功能期間和週期樣式 （一）定義資料來源 上一節中的示例重點介紹如何使用Datasource通過程式碼填充Function.S

【TeeChart Pro ActiveX教程】（七）：使用函式（上）

下載TeeChart Pro ActiveX最新版本 功能型別 1 功能特點 TeeChart Pro功能是一個系列，幾乎可以是任何系列型別，應用代數函式，資料來源是另一個圖表系列。 所有函式都派生自Teefunction類並繼承TeeFunction的Period屬性。 TeeCh

【Unity Shader】（七） ------ 複雜的光照（下）

筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。 目錄 前言 二. 陰影 四. 總結 前言 本文承接上文【Unity Shader】（六） ------ 複雜的光照（上），

深度學習筆記——理論與推導之Structured Learning【Structured SVM】（七）

Separable case 1. 定義： 2. 用來計算weight的Structured Perceptron演演算法： 那麼面對很多個y，是否可以順利在有限次內找到weight呢？答案是可以的，況且只需要(R/δ)^2次，R是同一個x

【pycharm 教程】（一）安裝和首次使用

Opencv學堂 http://mp.weixin.qq.com/s?__biz=MzA4MDExMDEyMw==&mid=100000109&idx=1&sn=7540b49e869c3e27f87c84f6f3dfe9a8&chksm

【Pycharm教程】（二）設定字型大小

轉載：http://blog.csdn.net/chenggong2dm/article/details/8639318 pycharm 是很好的一個IDE，在windows下，和macOS下，都能很好的執行。唯一缺點是啟動慢。 預設字型太小，在mac下，需要瞪大24

【ROS學習】（七）ROS引數服務（1）

在任何機器人系統中，引數傳遞都是一個十分重要的功能，不論是感測器的設定，還是控制引數的調整，都需要留出方便的引數除錯介面，有的引數只在啟動程式啟動時更改，有的引數卻希望在執行時能夠被動態修改，在ROS中，可以通過引數服務來實現上面的想法。 首先熟悉一下rosp

【TeeChart Pro ActiveX教程】（四）：軸控制—附加軸和軸事件

下載TeeChart Pro ActiveX最新版本 （一）附加軸 1.1 複製軸 TeeChart提供5個軸與資料系列，Left，Right，Top，Bottom和Depth相關聯。向圖表新增新系列時，可以定義系列應與哪些軸相關（轉到“Series”選項卡“General”頁面）。您可以使用Axis

【TeeChart Pro ActiveX教程】（八）：ADO資料庫訪問（上）

下載TeeChart Pro ActiveX最新版本 介紹 將TeeChart控制元件連線到ADO.NET資料庫可以在設計時使用TeeChart編輯器完成，並在執行時使用幾行程式碼完成。 任何Series都可以使用TeeChart Editor連線到ADO.NET表或查詢。每個系列

【ElasticSearch】（七）淺析search_after 及 from&size，scroll，search_after效能分析

一、"search_after"是什麼？      “search_after”是用於查詢的dsl，可以起到類似"from & size"分頁作用的結構化查詢，程式碼展示如下： GET twitter/_search { "size": 10,

【TeeChart for Java教程】（十）圖表面板上的自定義繪圖

TeeChart Canvas 1 繪圖線 1.1 2D圖表 新增一個繪圖線： private void Load() { line1.fillSampleValues(20); line1.setVertAxis(Vertic