眾所周知，在 GPU 跑可編程管線的時候，着色器是並行運行的，每個着色器入口函數都會在 GPU 中並行執行。每個着色器對一大片統一格式的數據進行沖鋒，體現 GPU 多核心的優勢，可以小核同時處理數據；不過，有的數據對每個着色器都是一樣的，這種數據的類型是“uniform”，也叫做統一值。
這篇文章羅列了原生 WebGL 1/2 中的 uniform 資料，以及 WebGPU 中的 uniform 資料，有一些例子供參考，以用來比對它們之間的差異。
1. WebGL 1.0 Uniform
1.1. 用 WebGLUniformLocation 尋址
在 WebGL 1.0 中，通常是在 JavaScript 端保存 WebGLUniformLocation 以向着色器程序傳遞 uniform 值的。
使用 gl.getUniformLocation() 方法獲取這個 location，有如下幾種方式
- 全名：
gl.getUniformLocation(program, 'u_someUniformVar') - 分量：通常是向量的一部分，譬如
gl.getUniformLocation(program, 'u_someVec3[0]')是獲取第 0 個元素（元素類型是 vec3）的 location - 結構體成員：
gl.getUniformLocation(program, 'u_someStruct.someMember')
上面三種情況與之對應的着色器代碼：
// 全名
uniform float u_someUniformVar;
// 分量
uniform vec3 u_someVec3[3]; // 注意，這里是 3 個 vec3
// 結構體成員
struct SomeStruct {
bool someMember;
};
uniform SomeStruct u_someStruct;
傳值分三類，標量/向量、矩陣、采樣紋理，見下文。
1.2. 矩陣賦值用 uniformMatrix[234]fv
對於矩陣，使用 gl.uniformMatrix[234]fv() 方法即可傳遞，其中，f 代表 float，v 代表 vector，即傳入參數要是一個向量（即數組）；
以傳遞一個 4×4 的矩陣為例：
// 獲取 location（初始化時）
const matrixLocation = gl.getUniformLocation(program, "u_matrix")
// 創建或更新列主序變換矩陣（渲染時）
const matrix = [/* ... */]
// 傳遞值（渲染時）
gl.uniformMatrix4fv(matrixLocation, false, matrix)
1.3. 標量與向量用 uniform[1234][fi][v]
對於普通標量和向量，使用 gl.uniform[1234][fi][v]() 方法即可傳遞，其中，1、2、3、4 代表標量或向量的維度（1就是標量啦），f/i 代表 float 或 int，v 代表 vector（即你傳遞的數據在着色器中將解析為向量數組）。
舉例：
- 語句1，
gl.uniform1fv(someFloatLocation, [4.5, 7.1]) - 語句2，
gl.uniform4i(someIVec4Location, 5, 2, 1, 3) - 語句3，
gl.uniform4iv(someIVec4Location, [5, 2, 1, 3, 2, 12, 0, 6]) - 語句4，
gl.uniform3f (someVec3Location, 7.1, -0.8, 2.1)
上述 4 個賦值語句對應的着色器中的代碼為：
// 語句 1 可以適配 1~N 個浮點數
// 只傳單元素數組時，可直接聲明 uniform float u_someFloat;
uniform float u_someFloat[2];
// 語句 2 適配一個 ivec4
uniform ivec4 u_someIVec4;
// 語句 3 適配 1~N 個 ivec4
// 只傳單元素數組時，可直接聲明 uniform float u_someIVec4;
uniform ivec4 u_someIVec4[2];
// 語句 4 適配一個 vec3
uniform vec3 u_someVec3;
到了 WebGL 2.0，在組分值類型會有一些擴充，請讀者自行查閱相關文檔。
1.4. 傳遞紋理
在頂點着色器階段，可以使用頂點的紋理坐標對紋理進行采樣：
attribute vec3 a_pos;
attribute vec2 a_uv;
uniform sampler2D u_texture;
varying vec4 v_color;
void main() {
v_color = texture2D(u_texture, a_uv);
gl_Position = a_pos; // 假設頂點不需要變換
}
那么，在 JavaScript 端，可以使用 gl.uniform1i() 來告訴着色器我把紋理剛剛傳遞到哪個紋理坑位上了：
const texture = gl.createTexture()
const samplerLocation = gl.getUniformLocation(/* ... */)
// ... 設置紋理數據 ...
gl.activeTexture(gl[`TEXTURE${5}`]) // 告訴 WebGL 使用第 5 個坑上的紋理
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.uniform1i(samplerLocation, 5) // 告訴着色器待會讀紋理的時候去第 5 個坑位讀
2. WebGL 2.0 Uniform
2.1. 標量/向量/矩陣傳值方法擴充
WebGL 2.0 的 Uniform 系統對非方陣類型的矩陣提供了支持，例如
const mat2x3 = [
1, 2, 3,
4, 5, 6,
]
gl.uniformMatrix2x3fv(loc, false, mat2x3)
上述方法傳遞的是 4×3 的矩陣。
而對於單值和向量，額外提供了無符號數值的方法，即由 uniform[1234][fi][v] 變成了 uniform[1234][f/ui][v]，也就是下面 8 個新增方法：
gl.uniform1ui(/* ... */) // 傳遞數據至 1 個 uint
gl.uniform2ui(/* ... */) // 傳遞數據至 1 個 uvec2
gl.uniform3ui(/* ... */) // 傳遞數據至 1 個 uvec3
gl.uniform4ui(/* ... */) // 傳遞數據至 1 個 uvec4
gl.uniform1uiv(/* ... */) // 傳遞數據至 uint 數組
gl.uniform2uiv(/* ... */) // 傳遞數據至 uvec2 數組
gl.uniform3uiv(/* ... */) // 傳遞數據至 uvec3 數組
gl.uniform4uiv(/* ... */) // 傳遞數據至 uvec4 數組
對應 GLSL300 中的 uniform 為：
#version 300 es
#define N ? // N 取決於你的需要，JavaScript 傳遞的數量也要匹配
uniform uint u_someUint;
uniform uvec2 u_someUVec2;
uniform uvec3 u_someUVec3;
uniform uvec4 u_someUVec4;
uniform uint u_someUintArr[N];
uniform uvec2 u_someUVec2Arr[N];
uniform uvec3 u_someUVec3Arr[N];
uniform uvec4 u_someUVec4Arr[N];
需要額外注意的是，uint/uvec234 這些類型在高版本的 glsl 才能使用，也就是說不向下兼容 WebGL 1.0 及 GLSL100.
然而，WebGL 2.0 帶來的不單單只是這些小修小補，最重要的莫過於 UBO 了，馬上開始。
2.1. 什么是 UniformBlock 與 UniformBuffer 的創建
在 WebGL 1.0 的時候，任意種類的統一值一次只能設定一個，如果一幀內 uniform 有較多更新，對於 WebGL 這個狀態機來說不是什么好事，會帶來額外的 CPU 至 GPU 端的傳遞開銷。
在 WebGL 2.0，允許一次發送一堆 uniform，這一堆 uniform 的聚合體，就叫做 UniformBuffer，具體到代碼中：
先是 GLSL 300
uniform Light {
highp vec3 lightWorldPos;
mediump vec4 lightColor;
};
然后是 JavaScript
const lightUniformBlockBuffer = gl.createBuffer()
const lightUniformBlockData = new Float32Array([
0, 10, 30, 0, // vec3, 光源位置, 為了 8 Byte 對齊填充一個尾 0
1, 1, 1, 1, // vec4, 光的顏色
])
gl.bindBuffer(gl.UNIFORM_BUFFER, lightUniformBlockBuffer);
gl.bufferData(gl.UNIFORM_BUFFER, lightUniformBlockData, gl.STATIC_DRAW);
gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, lightUniformBlockBuffer)
先別急着問為什么，一步一步來。
首先你看到了，在 GLSL300 中允許使用類似結構體一樣的塊狀語法聲明多個 Uniform 變量，這里用到了光源的坐標和光源的顏色，分別使用了不同的精度和數據類型（vec3、vec4）。
隨后，在 JavaScript 端，你看到了用新增的方法 gl.bindBufferBase() 來綁定一個 WebGLBuffer 到 0 號位置，這個 lightUniformBlockBuffer 其實就是集合了兩個 Uniform 變量的 UniformBufferObject (UBO)，在着色器中那塊被命名為 Light 的花括號區域，則叫 UniformBlock.
其實，創建一個 UBO 和創建普通的 VBO 是一樣的，綁定、賦值操作也幾乎一致（第一個參數有不同）。只不過 UBO 可能更需要考慮數值上的設計，例如 8 字節對齊等，通常會在設計着色器的時候把相同數據類型的 uniform 變量放在一起，達到內存使用上的最佳化。
2.2. 狀態綁定
在 WebGL 2.0 中，JavaScript 端允許你把着色器程序中的 UniformBlock 位置綁定到某個變量中：
const viewUniformBufferIndex = 0;
const materialUniformBufferIndex = 1;
const modelUniformBufferIndex = 2;
const lightUniformBufferIndex = 3;
gl.uniformBlockBinding(prg, gl.getUniformBlockIndex(prg, 'View'), viewUniformBufferIndex);
gl.uniformBlockBinding(prg, gl.getUniformBlockIndex(prg, 'Model'), modelUniformBufferIndex);
gl.uniformBlockBinding(prg, gl.getUniformBlockIndex(prg, 'Material'), materialUniformBufferIndex);
gl.uniformBlockBinding(prg, gl.getUniformBlockIndex(prg, 'Light'), lightUniformBufferIndex);
這里，使用的是 gl.getUniformBlockIndex() 獲取 UniformBlock 在着色器程序中的位置，而把這個位置綁定到你喜歡的數字上的是 gl.uniformBlockBinding() 方法。
這樣做有個好處，你可以在你的程序里人為地規定各個 UniformBlock 的順序，然后用這些 index 來更新不同的 UBO.
// 使用不同的 UBO 更新 materialUniformBufferIndex (=1) 指向的 UniformBlock
gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, redMaterialUBO)
gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, greenMaterialUBO)
gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, blueMaterialUBO)
當然，WebGL 2.0 對 Uniform 還有別的擴充，此處不再列舉。
bindBufferBase 的作用類似於 enableVertexAttribArray，告訴 WebGL 我馬上就要用哪個坑了。
2.3. 着色器中的 Uniform
着色器使用 GLSL300 語法才能使用 UniformBlock 和 新的數據類型，除此之外和 GLSL100 沒啥區別。當然，GLSL300 有很多新語法，這里只撿一些關於 Uniform 的來寫。
關於 uint/uvec234 類型，在 2.1 節已經有例子了，這里不贅述。
而關於 UniformBlock，還有一點需要補充的，那就是“命名”問題。
UniformBlock 的語法如下：
uniform <BlockType> {
<BlockBody>
} ?<blockName>;
// 舉例：具名定義
uniform Model {
mat4 world;
mat4 worldInverseTranspose;
} model;
// 舉例：不具名定義
uniform Light {
highp vec3 lightWorldPos;
mediump vec4 lightColor;
};
如果使用具名定義，那么訪問 Block 內的成員就需要使用它的 name 了，例如 model.world、model.worldInverseTranspose 等。
舉完整的例子如下：
#version 300 es
precision highp float;
precision highp int;
// uniform 塊的布局控制
layout(std140, column_major) uniform;
// 聲明 uniform 塊：Transform，命名為 transform 供主程序使用
// 也可以不命名，就直接用 mvpMatrix 即可
uniform Transform
{
mat4 mvpMatrix;
} transform;
layout(location = 0) in vec2 pos;
void main() {
gl_Position = transform.mvpMatrix * vec4(pos, 0.0, 1.0);
}
注意，即使給 UniformBlock 命名為 transform，但是立面的 mvpMatrix 是不能與其它 Block 里面的成員共名的，transform 沒有命名空間的作用。
再看 JavaScript：
//#region 獲取着色器程序中的 uniform 位置並綁定
const uniformTransformLocation = gl.getUniformBlockIndex(program, 'Transform')
gl.uniformBlockBinding(program, uniformTransformLocation, 0)
//endregion
//#region 創建 ubo
const uniformTransformBuffer = gl.createBuffer()
//#endregion
//#region 創建矩陣所需的 ArrayBufferView，列主序
const transformsMatrix = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
])
//#endregion
//#region 傳遞數據給 WebGLBuffer
gl.bindBuffer(gl.UNIFORM_BUFFER, uniformTransformBuffer)
gl.bufferData(gl.UNIFORM_BUFFER, transformsMatrix, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.UNIFORM_BUFFER, null)
//#endregion
// ---------- 在你需要繪制時 ----------
//#region 綁定 ubo 到 0 號索引上的 uniformLocation 以供着色器使用
gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uniformTransformBuffer)
// ... 渲染
// -------------
2.4. 傳遞紋理
紋理與 WebGL 1.0 一致，但是 GLSL300 的紋理函數有變，讀者請自行查找資料比對。
3. WebGPU Uniform
WebGPU 有三個類型的 Uniform 資源：標量/向量/矩陣、紋理、采樣器。
各自有各自的容器，第一種統一使用 GPUBuffer，也就是所謂的 UBO；第二和第三種使用 GPUTexture 和 GPUSampler.
3.1. 三類資源的創建與打組傳遞
上述三類資源，把它們通過打成一組，也就是 GPUBindGroup，我叫它資源綁定組，進而傳遞給組織了着色器模塊（GPUShaderModule）的各種管線（GPURenderPipeline、GPUComputePipeline）。
統一起來好辦事，這里為節約篇幅，數據傳遞就不再細說，着重看看它們的打組成綁定組的代碼：
const someUbo = device.createBuffer({ /* 注意 usage 要有 UNIFORM */ })
const texture = device.createTexture({ /* 創建常規紋理 */ })
const sampler = device.createSampler({ /* 創建常規采樣器 */ })
// 布局對象聯系管線布局和綁定組本身
const bindGroupLayout = device.createBindGroupLayout({
entries: [
{
binding: 0, // <- 綁定在 0 號資源
visibility: GPUShaderStage.FRAGMENT,
sampler: {
type: 'filtering'
}
},
{
binding: 1, // <- 綁定在 1 號資源
visibility: GPUShaderStage.FRAGMENT,
texture: {
sampleType: 'float'
}
},
{
binding: 2,
visibility: GPUShaderStage.FRAGMENT,
buffer: {
type: 'uniform'
}
}
]
})
const bindGroup = device.createBindGroup({
layout: bindGroupLayout,
entries: [
{
binding: 0,
resource: sampler, // <- 傳入采樣器對象
},
{
binding: 1,
resource: texture.createView() // <- 傳入紋理對象的視圖
},
{
binding: 2,
resource: {
buffer: someUbo // <- 傳入 UBO
}
}
]
})
// 管線
const pipelineLayout = device.createPipelineLayout({
bindGroupLayouts: [bindGroupLayout]
})
const renderingPipeline = device.createRenderPipeline({
layout: pipelineLayout
// ... 其它配置
})
// ... renderPass 切換 pipeline 和 bindGroup 進行繪制 ...
3.2. 更新 Uniform 與綁定組的意義
更新 Uniform 資源其實很簡單。
如果是 UBO，一般會更新前端修改的燈光、材質、時間幀參數以及單幀變化的矩陣等，使用 device.queue.writeBuffer 即可：
device.queue.writeBuffer(
someUbo, // 傳給誰
0,
buffer, // 傳遞 ArrayBuffer，即當前幀中的新數據
byteOffset, // 從哪里開始
byteLength // 取多長
)
使用 writeBuffer 就可以保證用的還是原來創建那個 GPUBuffer，它與綁定組、管線的綁定關系還在；不用映射、解映射的方式傳值是減少 CPU/GPU 雙端通信成本
如果是紋理，那就用 圖像拷貝操作 中的幾個方法進行紋理對象更新；
一般不直接對采樣器和紋理的更新，而是在編碼器上切換不同的綁定組來切換管線所需的資源。尤其是紋理，若頻繁更新數據，CPU/GPU 雙端通信成本會增加的。
延遲渲染、離屏繪制等需要更新顏色附件的，其實只需要創建新的 colorAttachments 對象即可實現“上一幀繪制的下一幀我能用”，不需要直接從 CPU 內存再刷入數據到 GPU 中。
更新 Uniform 需要對每一幀幾乎都要改的、幾乎不變的資源進行合理分組，分到不同的綁定組中，這樣就可以有針對性地更新，而無需把管線、綁定組重設一次，僅僅在通道編碼器上進行切換即可。
3.3. 着色器中的 Uniform
此處不涉及太多 WGSL 語法。
與 UniformBlock 類似，需要指定“一塊東西”，WGSL 直接使用的結構體。
首先，是 UBO：
// -- 頂點着色器 --
// 聲明一個結構體類型
struct Uniforms {
modelViewProjectionMatrix: mat4x4<f32>;
};
// 聲明指定其綁定ID是0，綁定組序號是0
@binding(2)
@group(0)
var<uniform> myUniforms: Uniforms;
// —— 然后這個 myUniforms 變量就可以在函數中調用了 ——
然后是紋理和采樣器：
@group(0)
@binding(1)
var mySampler: sampler;
@group(0)
@binding(2)
var myTexture: texture_2d<f32>;
// ... 片元着色器主函數中進行紋理采樣
textureSample(myTexture, mySampler, fragUV);
4. 對比總結
WebGL 以 2 為比對基准，它與 WebGPU 相比，沒有資源綁定組，沒有采樣器對象（采樣參數通過另外的方法設置）。
比起 WebGPU 的傳 descriptor 式的寫法，使用一條條方法切換 UniformBlock、紋理等資源可能會有所遺漏，這是全局狀態寫法的特點之一。當然，上層封裝庫會幫我們屏蔽這些問題的。
與語法風格相比，其實 WebGPU 改進的更多的是這些 uniform 在每一幀更新時 CPU 到GPU 的負載問題，它是事先由編碼器編碼成指令緩沖最后一次性發送的，比起 WebGL 一條一條發送是更優的，在圖形渲染、GPU運算這種地方，積少成多，性能就高了起來。
關於 WebGL 2.0 的 Uniform 和 GLSL300 我學識不精，若有錯誤請指出。