WebGL 与 WebGPU比对[4] - Uniform

最新推荐文章于 2024-10-14 16:26:29 发布

李自提

最新推荐文章于 2024-10-14 16:26:29 发布

阅读量1k

点赞数

分类专栏： it 文章标签：人工智能线性代数

本文链接：https://blog.csdn.net/weixin_45566993/article/details/123013995

版权

本文详细对比了WebGL 1.0、2.0与WebGPU中Uniform的使用，包括寻址、赋值方法、纹理传递，以及WebGPU的资源绑定组和更新策略。通过例子展示了不同版本中UniformBlock、UniformBuffer的创建和使用，探讨了性能优化方面的差异。

摘要由CSDN通过智能技术生成

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. 传递纹理

众所周知，在 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)