1. WebGL 1.0 Uniform
- 1.1. 用 WebGLUniformLocation 尋址
- 1.2. 矩陣賦值用 uniformMatrix[234]fv
- 1.3. 標量與向量用 uniform[1234][fi][v]
- 1.4. 傳遞紋理
2. WebGL 2.0 Uniform
- 2.1. 標量/向量/矩陣傳值方法擴充
- 2.1. 什么是 UniformBlock 與 UniformBuffer 的創建
- 2.2. 狀態系結
- 2.3. 著色器中的 Uniform
- 2.4. 傳遞紋理
3. WebGPU Uniform
- 3.1. 三類資源的創建與打組傳遞
- 3.2. 更新 Uniform 與系結組的意義
- 3.3. 著色器中的 Uniform
4. 對比總結
5. 參考資料

眾所周知，在 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 = https://www.cnblogs.com/onsummer/archive/2022/02/19/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 我學識不精，若有錯誤請指出，

5. 參考資料

WebGL2Fundamentals - StateDiagram - UniformBuffers
Gist - A simple WebGL2 UniformBuffer Tutorial
CSDN - WebGL2 UniformBlock
Austin - WebGPUSamples

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/427435.html

標籤：其他

上一篇：【RSS醬】rsschan 全云端托管運行集合通知訂閱一體的rss訂閱器使用新手教程

下一篇：我，32歲，動力機械專業研究生，轉行到演算法工程師，完成薪資翻倍

WebGL 與 WebGPU比對[4] - Uniform