WebGL 与 WebGPU比对[4] - Uniform_webgpu和webgl区别

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
目录* 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
3
4
5
6
7
8
9
10
11
12

传值分三类，标量/向量、矩阵、采样纹理，见下文。

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
2
3
4
5
6
7
8
9

1.3. 标量与向量用 uniform[1234][fi][v]

对于普通标量和向量，使用 gl.uniform[1234][fi][v]() 方法即可传递，其中，1、2、3、4 代表标量或向量的维度（1就是标量啦），f/i 代表 float 或 int