2. 程式人生 > >【GLSL教程】（八）紋理貼圖

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

阿新 • • 發佈：2018-11-22
簡單的紋理貼圖（Simple Texture）
為了在GLSL中應用紋理，我們需要訪問每個頂點的紋理座標。GLSL中提供了一些屬性變數，每個紋理單元一個：
  1. attribute vec4 gl_MultiTexCoord0;
  2. attribute vec4 gl_MultiTexCoord1;
  3. attribute vec4 gl_MultiTexCoord2;
  4. attribute vec4 gl_MultiTexCoord3;
  5. attribute vec4 gl_MultiTexCoord4;
  6. attribute vec4 gl_MultiTexCoord5;
  7. attribute vec4 gl_MultiTexCoord6;
  8. attribute vec4 gl_MultiTexCoord7;
GLSL還為訪問每個紋理的紋理矩陣提供了一個一致變數陣列：

uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords];
頂點shader可以通過上面所示的內容訪問OpenGL程式中指定的紋理座標。然後必須為每個頂點計算紋理座標，並儲存在預先定義的易變變數gl_TexCoord[i]中，i表示紋理單元號。
下面這條語句直接複製OpenGL程式中指定的紋理座標，作為紋理單元0的頂點紋理座標。 
gl_TexCoord[0]  = gl_MultiTexCoord0;
下面是個簡單的例子，在頂點shader中設定紋理單元0的紋理座標。
  1. void
    main()
  2. {
  3. gl_TexCoord[ 0] = gl_MultiTexCoord0;
  4. gl_Position = ftransform();
  5. }
如果你想使用紋理矩陣，可以這樣操作：
  1. void main()
  2. {
  3. gl_TexCoord[ 0] = gl_TextureMatrix[ 0] * gl_MultiTexCoord0;
  4. gl_Position = ftransform();
  5. }
前面說過，gl_TexCoord是一個易變變數，所以在片斷shder中可以訪問經過插值的紋理座標。
為了訪問紋理的數值，在片斷shader中有必要宣告一個特殊的變數，對一個2D紋理可以可以這樣寫： 
uniform sampler2D tex;
如果是1D或者3D的紋理，可以改成sampler1D和sampler3D。
這個使用者定義的變數tex包含我們將會使用的紋理單元，通過texture2D函式我們可以得到一個紋素（texel），這是一個紋理圖片中的畫素。函式引數分別為simpler2D以及紋理座標： 
vec4 texture2D(sampler2D, vec2);
函式的返回值已經考慮了所有在OpenGL程式中定義的紋理設定，比如過濾、mipmap、clamp等。
我們的片斷shader可以寫成如下形式：
  1. uniform sampler2D tex;
  3. void main()
  4. {
  5. vec4 color = texture2D(tex,gl_TexCoord[ 0].st);
  6. gl_FragColor = color;
  7. }
注意訪問gl_TexCoord時選擇子st的使用。在本教程前面關於資料型別和變數的討論中說過，訪問紋理座標時可以使用如下選擇子：s、t、p、q。（r因為和rgb選擇子衝突而沒有使用）

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

組合紋理與片斷

OpenGL允許我們通過多種方式將紋理顏色和片斷顏色聯合到一起。下表顯示了RGBA模式時可用的聯合方式：

GL_REPLACE C = Ct A = At
GL_MODULATE C = Ct*Cf A = At*Af
GL_DECAL C = Cf * (1 – At) + Ct * At A = Af
表中Ct和At表示紋理的顏色和alpha值，Cf和Af表示片斷（fragment）的顏色和alpha值，C和A表示最終的顏色和alpha值。
上一節的例子就相當於使用了GL_REPLACE模式。下面我們我們準備在一個立方體上實現與GL_MODULATE等同的效果。兩個shader只計算使用一個白色方向光的散射以及環境光成分，關於材質的完整定義請參照光照有關的章節。
因為使用了光照，所以頂點shader中必須處理法線資訊。必須將法線變換到檢視空間然後歸一化，光線方向向量也必須歸一化（光線方向向量已經由OpenGL變換到了檢視空間）。現在新的頂點shader如下：
  1. varying vec3 lightDir,normal;
  3. void main()
  4. {
  5. normal = normalize(gl_NormalMatrix * gl_Normal);
  7. lightDir = normalize(vec3(gl_LightSource[ 0].position));
  8. gl_TexCoord[ 0] = gl_MultiTexCoord0;
  10. gl_Position = ftransform();
  11. }
在片斷shader中，光照得到的片斷的顏色和alpha值在cf和af中分別計算。shader中剩餘程式碼按照GL_MODULATE的公式計算：
  1. varying vec3 lightDir,normal;
  2. uniform sampler2D tex;
  4. void main()
  5. {
  6. vec3 ct,cf;
  7. vec4 texel;
  8. float intensity,at,af;
  10. intensity = max(dot(lightDir,normalize(normal)), 0.0);
  11. cf = intensity * (gl_FrontMaterial.diffuse).rgb +
  12. gl_FrontMaterial.ambient.rgb;
  13. af = gl_FrontMaterial.diffuse.a;
  15. texel = texture2D(tex,gl_TexCoord[ 0].st);
  16. ct = texel.rgb;
  17. at = texel.a;
  19. gl_FragColor = vec4(ct * cf, at * af);
  20. }

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

多重紋理
在GLSL中實現多重紋理十分容易，我們只需要訪問所有紋理即可。因為我們打算給每個紋理使用相同的紋理座標，所以頂點shader不需要改動。片斷shader中只需要進行些許改動，加上多個紋理的顏色值。
  1. varying vec3 lightDir,normal;
  2. uniform sampler2D tex;
  4. void main()
  5. {
  6. vec3 ct,cf;
  7. vec4 texel;
  8. float intensity,at,af;
  10. intensity = max(dot(lightDir,normalize(normal)), 0.0);
  11. cf = intensity * (gl_FrontMaterial.diffuse).rgb +
  12. gl_FrontMaterial.ambient.rgb;
  13. af = gl_FrontMaterial.diffuse.a;
  15. texel = texture2D(tex,gl_TexCoord[ 0].st) +
  16. texture2D(l3d,gl_TexCoord[ 0].st);
  17. ct = texel.rgb;
  18. at = texel.a;
  20. gl_FragColor = vec4(ct * cf, at * af);
  21. }
效果如下：

下面新增點不同的效果：在黑暗中發光。我們希望第二個紋理能在黑暗中發光，在沒有光照時達到最亮，在有光照時變暗。
我們通過兩步計算最終的顏色：首先將第一個紋理與片斷顏色進行modulate計算，然後根據光照強度（indensity）加上第二個紋理單元。
如果indensity是0，第二個紋理單元取最大值，如果indensity為1，只取第二個紋理單元顏色的10%，當indensity在0和1之間時按這兩個大小進行插值。可以使用smoothstep函式實現這個要求：
 
genType smoothStep(genType edge0, genType edge1, genType x);
如果x <= edge0結果是0，如果x >= edge1結果為1，如果edge0 < x < edge1結果在0和1之間進行Hermite插值。在本例中我們按如下方式呼叫：
coef = smoothStep(1.0, 0.2, intensity);
下面的片斷shader實現了需要的效果：
  1. varying vec3 lightDir,normal;
  2. uniform sampler2D tex,l3d;
  4. void main()
  5. {
  6. vec3 ct,cf,c;
  7. vec4 texel;
  8. float intensity,at,af,a;
  10. intensity = max(dot(lightDir,normalize(normal)), 0.0);
  12. cf = intensity * (gl_FrontMaterial.diffuse).rgb +
  13. gl_FrontMaterial.ambient.rgb;
  14. af = gl_FrontMaterial.diffuse.a;
  16. texel = texture2D(tex,gl_TexCoord[ 0].st);
  18. ct = texel.rgb;
  19. at = texel.a;
  21. c = cf * ct;
  22. a = af * at;
  24. float coef = smoothstep( 1.0, 0.2,intensity);
  25. c += coef * vec3(texture2D(l3d,gl_TexCoord[ 0].st));
  27. gl_FragColor = vec4(c, a);
  28. }
Shader Designer的工程下載地址：
http://www.lighthouse3d.com/wp-content/uploads/2011/03/textureGlow.zip

相關推薦

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

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

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

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

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

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

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

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

【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）的一些重要概念。 一

【Unity Shader】（八） ------ 高階紋理之立方體紋理及光線反射、折射的實現

筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。      【Unity Shader】（三） ------ 光照模型原理及漫反射和

【Unity Shader】（八） ------ 高級紋理之立方體紋理及光線反射、折射的實現

int rap 原理 src 靜態 toc lighting ati orm 筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。 【Unity Shade

【Unity Shader】（八） ------ 高級紋理（上）

向量 sdn 定義 紋理 天空 get main .com 而是 筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。 【Unity Shader】（三） -

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

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

【Unity Shader】（八） ------ 高階紋理（上）

筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。 前言 關於紋理，之前在 【Unity Shader】（四） ------ 紋理之法線紋理、單張紋理及遮罩紋理的實現 已經解釋過相關原理，不過那些是屬

【Unity Shader】（四） ------ 紋理之法線紋理、單張紋理及遮罩紋理的實現

相對 ctx mali 通過 dir con 真的 dpi spa 筆者使用的是 Unity 2018.2.0f2 + VS2017，建議讀者使用與 Unity 2018 相近的版本，避免一些因為版本不一致而出現的問題。 【Unity Shader】（三） ---

【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

Windows 8 Directx 開發學習筆記（十）紋理貼圖實現旋轉的木箱

紋理貼圖對映（texturemapping）是可以顯著提高場景細節和真實感的一種技術，基本原理是將影象資料對映到3D三角形表面（之前的文章提到過，三維模型其實是由很多個三角形拼接而成）。當使用紋理資源時，只要將每個3D三角形與紋理資源上的三角形對應，就可以實現貼圖效果。如圖

【Android個人理解（八）】跨應用調用不同組件的方法

返回 使用 turn 數字 現實 rpc 文件夾 cas rgb 如果情景： 創建兩個應用appA和appB,appA包括一個Service,此Service有一個堵塞方法每隔10秒鐘產生一個隨機數字,例如以下: public int getRandom

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

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