在 WebGL 中，属性、统一和可变变量之间有啥区别？

Posted 2023-02-14

【中文标题】在 WebGL 中，属性、统一和可变变量之间有啥区别？

【英文标题】：In WebGL what are the differences between an attribute, a uniform, and a varying variable?在 WebGL 中，属性、统一和可变变量之间有什么区别？

【发布时间】：2013-07-06 10:46:31

【问题描述】：

在比较这些不同的类型或这些东西的工作原理时，我能想到一个类比吗？

另外，统一矩阵是什么意思？

【参考方案1】：

在 WebGL 中，属性、统一和可变变量之间有什么区别？

在 OpenGL 中，“程序”是“着色器”（较小的程序）的集合，它们在管道中相互连接。

// "program" contains a shader pipeline:
//   vertex shader -> other shaders -> fragment shader
//
const program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);

着色器处理顶点（vertex shader）、几何（geometry shader）、曲面细分（tessellation shader）、片段（pixel shader）以及光栅化3D模型所需的其他批处理任务（compute shader）。

OpenGL (WebGL) 着色器是用 GLSL（一种在 GPU 上编译的基于文本的着色器语言）编写的。

// Note: As of 2017, WebGL only supports Vertex and Fragment shaders

<!-- Vertex Shader -->
<script id="shader-vs" type="x-shader/x-vertex">

  // <-- Receive from WebGL application
  uniform vec3 vertexVariableA;

  // attribute is supported in Vertex Shader only
  attribute vec3 vertexVariableB;

  // --> Pass to Fragment Shader
  varying vec3 variableC;

</script>

<!-- Fragment Shader -->
<script id="shader-fs" type="x-shader/x-fragment">

  // <-- Receive from WebGL application
  uniform vec3 fragmentVariableA;

  // <-- Receive from Vertex Shader
  varying vec3 variableC;

</script>

牢记这些概念：

着色器可以将数据传递给管道中的下一个着色器（out、inout），它们还可以接受来自 WebGL 应用程序或前一个着色器的数据（in）。

顶点和片段着色器（实际上是任何着色器）可以使用uniform 变量来接收来自 WebGL 应用程序的数据。

// Pass data from WebGL application to shader
const uniformHandle = gl.glGetUniformLocation(program, "vertexVariableA");
gl.glUniformMatrix4fv(uniformHandle, 1, false, [0.1, 0.2, 0.3], 0);

顶点着色器还可以使用 attribute 变量从 WebGL 应用程序接收数据，该变量可以根据需要启用或禁用。

// Pass data from WebGL application to Vertex Shader
const attributeHandle = gl.glGetAttribLocation(mProgram, "vertexVariableB");
gl.glEnableVertexAttribArray(attributeHandle);
gl.glVertexAttribPointer(attributeHandle, 3, gl.FLOAT, false, 0, 0);

顶点着色器可以使用varying 变量将数据传递给片段着色器。请参阅上面的 GLSL 代码 (varying vec3 variableC;)。

【参考方案2】：

uniform 是

每个基元

参数（在整个绘图调用期间保持不变）； attribute 是

per-vertex

参数（通常：位置、法线、颜色、UV ......）； varying 是

per-fragment

（或

per-pixel

）参数：它们

因像素而异

。

了解varying 如何对您自己的着色器进行编程非常重要。 假设您为 vertex shader 内的三角形的每个顶点定义了一个可变参数 v。当这个可变参数被发送到片段着色器时，它的值会根据要绘制的像素的位置自动插值。

在下图中，红色像素接收到可变参数v 的插值。这就是为什么我们称它们为“变化的”。

为简单起见，上面给出的示例使用双线性插值，它假设所有绘制的像素与相机的距离相同。为了获得准确的 3D 渲染，图形设备使用考虑像素深度的透视校正插值。

【讨论】：

答案的精神是正确的，但请记住，对于 variing，默认完成的插值称为透视正确插值，而不仅仅是双线性插值。当然，这可以通过 interpolation qualifier noperspective 更改以获得简单的双线性插值而不是透视正确插值（由默认限定符标识：smooth）。见this example。

谢谢，我将对此添加注释。

这应该是公认的答案。谢谢！

【参考方案3】：

Uniform 是将数据从 CPU 上的应用程序传递到 GPU 上的着色器的另一种方式，但与顶点属性相比，uniform 略有不同。首先，制服是全球性的。全局，这意味着统一变量对于每个着色器程序对象都是唯一的，并且可以在着色器程序的任何阶段从任何着色器访问。其次，无论你将 uniform 值设置为什么，uniform 都会保留它们的值，直到它们被重置或更新

我喜欢 https://learnopengl.com/Getting-started/Shaders 的描述，因为 per-primitive 这个词并不直观

【参考方案4】：

直接从http://www.lighthouse3d.com/tutorials/glsl-tutorial/data-types-and-variables/复制。实际网站有更详细的信息，值得一试。

变量限定符

限定符赋予变量特殊的含义。下列 限定符可用：

const – 声明是编译时常量。 attribute – 全局变量，每个顶点可能发生变化，从 OpenGL 应用程序传递到顶点着色器。这个预选赛 只能在顶点着色器中使用。对于着色器，这是一个 只读变量。请参阅属性部分。 uniform – 全局变量可能会根据图元 [...] 发生变化，从 OpenGL 传递 应用于着色器。此限定符可用于两个顶点 和片段着色器。对于着色器，这是一个只读变量。 请参阅制服部分。 varying – 用于顶点着色器和片段着色器之间的插值数据。可用于在顶点着色器中写入，并且 在片段着色器中只读。请参阅变化部分。

打个比方，const和uniform就像C/C++中的全局变量，一个是常量，一个是可以设置的。属性是伴随顶点的变量，如颜色或纹理坐标。可变变量可以由顶点着色器更改，但不能由片段着色器更改，因此实质上它们是在将信息传递到管道中。

【讨论】：

只是为了扩展一点属性：属性不必是数组属性（如果每个顶点的值可以不同，则需要数组属性）。它也可以是一个常量顶点属性，在这种情况下，该值在所有顶点之间共享。其实数组属性需要gl.enableVertexAttribArray主动开启。

很高兴这里有文字，因为网站已经死了

只是为了成为“那个人”，但我在网站上没有看到任何迹象表明在此处复制此内容是合法的。