頂點（VS）vs 片段（FS）：OpenGL紋理滾動著色器的性能博弈與設計哲學

一個微妙的選擇，影響整個應用性能表現

在實時圖形渲染中，實現紋理滾動效果是一種常見需求。但當我們在頂點著色器和片段著色器之間做出不同實現選擇時，會對性能產生顯著影響。今天，我們將深入探討這兩種實現的差異，幫助你在設計和優化著色器時做出更明智的決策。

1 紋理滾動效果的基本原理

紋理滾動效果是通過持續改變紋理坐標來實現的視覺動畫。其核心原理是在每個渲染幀中，根據時間變化調整UV坐標，創造出紋理在物體表面移動的視覺效果。

實現紋理滾動的數學公式簡單而直觀：

newUV = originalUV + time * speed

其中time是持續增加的 uniform 變量，speed是控制滾動速度的向量。這個計算可以在頂點著色器完成，也可以在片段著色器完成，正是這個選擇上的差異導致了性能和效果上的不同。

2 頂點著色器與片段著色器的根本差異

要理解兩種實現的性能差異，首先需要了解頂點著色器和片段著色器在渲染管線中的不同角色和執行特性。

2.1 執行頻率差異

頂點著色器和片段著色器的核心區別在于它們的??執行頻率??：

??頂點著色器??：每個頂點執行一次
執行次數 = 網格頂點數量
??片段著色器??：每個像素執行一次
執行次數 = 屏幕覆蓋像素數

這種執行頻率的差異是性能差異的根本原因。對于高分辨率屏幕（如4K：3840×2160≈8百萬像素），片段著色器的執行次數通常遠高于頂點著色器（典型模型頂點數：1萬-50萬）。這就是片段著色器更容易成為性能瓶頸的原因。

2.2 計算負載和內存訪問差異

兩種著色器在處理任務上也有明顯不同：

??特性??	??頂點著色器??	??片段著色器??
??典型任務??	坐標變換、骨骼動畫、頂點位移	光照計算、紋理采樣、復雜材質
??計算復雜度??	相對較低（線性計算為主）	通常較高（非線性/分支操作多）
??內存訪問??	頂點緩沖區數據	紋理采樣（高帶寬消耗）
??并行性??	高（頂點間無依賴）	受限（紋理依賴/分支降低并行效率）

片段著色器通常需要處理更復雜的計算任務，如紋理采樣，這是一種高帶寬消耗的操作。此外，片段著色器中的分支操作（if-else語句）會顯著降低并行效率，進一步影響性能。

3 頂點著色器（VS）實現方案分析

現在讓我們深入分析在頂點著色器中實現紋理滾動方案的特點和優勢。

3.1 實現原理

在頂點著色器實現中，我們會在頂點級別計算紋理坐標偏移：

// 頂點著色器代碼
#version 410layout(location=0) in vec3 position;
layout(location=3) in vec2 uv;uniform float time;out vec2 fragUV;void main() {gl_Position = vec4(position, 1.0);fragUV = uv + vec2(time * 0.3, 0.0);
}

// 片段著色器代碼
#version 410in vec2 fragUV;
uniform sampler2D tex;
out vec4 color;void main() {color = texture(tex, fragUV);
}

在這種方案中，UV坐標的偏移計算在頂點階段完成，然后通過插值傳遞給片段著色器。這意味著每個頂點只計算一次偏移，然后光柵化階段會對這些計算后的UV坐標進行插值，為每個片段生成平滑過渡的紋理坐標。

3.2 性能優勢

頂點著色器方案的性能優勢主要體現在以下幾個方面：

??計算量大幅減少??：對于一個典型的網格，頂點數量通常比像素數量少幾個數量級。在頂點著色器中計算UV偏移，可以顯著減少重復計算。
??更好的并行性??：頂點著色器中的計算通常具有高度并行性，因為頂點之間的處理是相互獨立的。
??減少內存訪問??：避免了在片段著色器中進行額外的紋理坐標計算，減少了寄存器使用和內存訪問壓力。

3.3 適用場景

頂點著色器實現方案特別適合以下場景：

??大型網格和低多邊形模型??：頂點數量相對較少，計算量優勢明顯
??移動設備和性能受限環境??：需要盡量減少片段著色器的負擔
??簡單線性動畫效果??：如滾動、縮放等不需要逐像素變形的效果

4 片段著色器（FS）實現方案分析

現在讓我們轉向在片段著色器中實現紋理滾動的方案，探究其特點和適用場景。

4.1 實現原理

在片段著色器實現中，我們將時間計算放在片段著色器中進行：

// 頂點著色器代碼
#version 410layout(location=0) in vec3 position;
layout(location=3) in vec2 uv;out vec2 fragUV;void main() {gl_Position = vec4(position, 1.0);fragUV = uv;
}

// 片段著色器代碼
#version 410in vec2 fragUV;
uniform sampler2D tex;
uniform float time;out vec4 color;void main() {vec2 scrolledUV = fragUV + vec2(time * 0.3, 0.0);color = texture(tex, scrolledUV);
}

在這種方案中，頂點著色器只是簡單傳遞UV坐標，實際的滾動計算在片段著色器中對每個像素進行。