深入了解OpenGL Shader

一、Shader初探

OpenGL的渲染管線在早期是固定的功能，無法對渲染流程中的某個階段做任意定製，因此必須了解一份龐大的文檔來了解渲染效果。直到OpenGL 2.0之後，添加了可編程渲染管線（Programmable Pipeline）的概念。Programmable Pipeline包含著兩個關鍵功能：Shader和Buffer Object。Shader可以編寫出一份針對某個渲染階段的程序代碼，在管線中運行，以優化渲染效果。Buffer Object則是更高效的內存操作方式，可以允許程序將大量的數據從CPU傳到GPU。

Shader是可編程渲染管線的核心，它是一段程序代碼，由GPU來執行。由於OpenGL兼容性廣泛，使用的是GLSL編程語言。Shader以源代碼形式寫作，src文件中包含有GLSL代碼，可以被編譯並創建為渲染程序對象（PGO），並鏈接到渲染流程的某個階段。使用Shader可以修改OpenGL渲染管線的不同階段，包括頂點著色器(Vertex Shader)，片段著色器(Fragment Shader)等。在最終的渲染過程中，Shader將應用於所有基元的渲染中，以產生遵循應用特定演算法的結果。

// Vertex Shader代碼示例
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
out vec3 FragPos;
out vec3 Normal;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main()
{
    FragPos = vec3(model * vec4(aPos, 1.0));
    Normal = mat3(transpose(inverse(model))) * aNormal;
    gl_Position = projection * view * vec4(FragPos, 1.0);
}

二、頂點著色器(Vertex Shader)

頂點著色器，顧名思義，主要是處理在渲染管道的頂點階段，負責頂點坐標系和頂點屬性計算。在3D世界中，每個圖形都是由一系列的三角形描述而成。權衡了性能和良好渲染效果，所以3D圖形都是以三個頂點的坐標和屬性信息來描述的。頂點著色器負責將這些坐標和屬性轉換操作處理成渲染管道中的「想要的內容」。

通過對渲染流程的各個階段進行自定義的高效計算和渲染，頂點著色器能夠在場景中定製非常複雜且令人印象深刻的效果。在頂點著色器中，我們以vec4類型來存儲頂點位置，1.0代表這是一個位於世界坐標系中的頂點。

// Vertex Shader代碼示例
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
out vec3 FragPos;
out vec3 Normal;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main()
{
    FragPos = vec3(model * vec4(aPos, 1.0));
    Normal = mat3(transpose(inverse(model))) * aNormal;
    gl_Position = projection * view * vec4(FragPos, 1.0);
}

三、片段著色器(Fragment Shader)

片段著色器，通常也稱為像素著色器，用於在渲染管道最後階段處理渲染表面的每個像素。在只有頂點著色器的情況下，繪製的圖像將會是平坦，沒有明暗變化。片段著色器負責將處理後的頂點信息根據需要混合以增加圖像的複雜度，包括顏色、陰影和高亮等。

在片段著色器中，我們一般使用紋理貼圖或者顏色操作來決定著色器的輸出值。最終渲染的圖像可能需要根據紋理圖片或其他形式的輸入來產生遮罩，並在這些區域內嵌入更細緻的渲染效果，使整個圖像呈現出更加自然。

// Fragment Shader代碼示例
#version 330 core
out vec4 FragColor;
in vec3 Normal;
in vec3 FragPos;

void main()
{
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

四、著色器語法(Syntex)

GLSL即OpenGL著色語言，OpenGL著色語言是C語言的超集，這意味著它不僅可以使用基本的C語言結構和語法，還可以使用GLSL中特有的數據類型和函數等其他語言特性。直觀地理解著色器語法是比較困難的。因此，下面簡要介紹一下著色器中的常見語法。

數據類型:

int: 整數數據類型
float: 單精度浮點數數據類型
vec2: 包含二維向量的浮點數據類型
vec3: 包含三維向量的浮點數據類型
vec4: 包含四維向量的浮點數據類型
mat4: 一個4×4的矩陣，包含16個浮點數
bool: 布爾數據類型

變數類型:

uniform: 定義全局變數，值在渲染調用前/後被設置
attribute: 定義會被輸入到頂點著色器的變數
varying: 聲明在頂點著色器和片段著色器之間傳遞數據的變數

流控制:

if/else: 流程式控制制語句來檢測嵌入在渲染流程中的啟用狀態
for: 循環語句來處理需要進行中途過程的場景
while: 循環語句如同for一樣用於迭代

內置函數:

abs: 返回一個輸入的絕對值
cos/sin/tan: 計算輸入對應的三角函數值
radians/degrees: 計算輸入的弧度或角度值
clamp: 設置輸入的最小和最大值，以確保在指定範例內的正確性
mix: 根據提供的係數混合兩個值

五、常見應用場景

Shader的應用非常廣泛，最常見的應用場景包括計算機圖形、動畫和電影等視覺藝術。此外，它還廣泛應用於遊戲開發、科學計算、虛擬現實等領域。例如，在電影製作中，著色器可以用於模擬煙霧、火焰和水等視覺效果。在遊戲開發中，著色器可用於創建沉浸式的環境，如動態天氣和動態環境光照。

以下是一個以Shader為基礎實現的簡單例子，創建了一個簡單的環境。代碼示例如下：

// Vertex Shader代碼示例
#version 330 core
layout (location = 0) in vec3 position;
layout (location = 1) in vec2 textureCoord;
out vec2 outTextureCoord;

void main()
{
    gl_Position = vec4(position, 1.0);
    outTextureCoord = textureCoord;
}

// Fragment Shader代碼示例
#version 330 core
out vec4 fragColor;
in vec2 outTextureCoord;
uniform sampler2D textureSampler;

void main()
{
    vec4 texel = texture(textureSampler, outTextureCoord);
    fragColor = vec4(texel.xyz, 1.0);
}

六、總結

OpenGL Shader是一個非常強大的工具，可以允許程序定製高效的渲染流程。開發人員需要了解渲染器管道的不同階段以及在這些階段中發生的事情。頂點著色器和片段著色器是Shader的兩個常見類型，它們都有自己的任務和目標。掌握OpenGL Shader的基本編程語言和常用技術，才能夠在顯然的短時間內實現讓人瞠目的渲染效果。

原創文章，作者：FCZFE，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/331511.html