在WebGL中，属性，统一和variables之间有什么区别？

在比较这些不同的types时，我能想到一个比喻，或者说这些东西是如何工作的？

另外，统一matrix是什么意思？

Answer 1

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

variables限定符

限定词赋予variables特殊的含义。 以下限定符可用：

• const – 声明是一个编译时间常量。
• 属性 – 可能会改变每个顶点，从OpenGL应用程序传递到顶点着色器的全局variables。 该限定符只能用于顶点着色器。 对于着色器，这是一个只读variables。 请参阅属性部分。
• uniform – 从OpenGL应用程序传递给着色器的全局variables。 该限定符可用于顶点着色器和片段着色器。 对于着色器，这是一个只读variables。 请参阅统一部分。
• 变化 – 用于顶点着色器和片段着色器之间的插值数据。 可用于在顶点着色器中写入，以及在片段着色器中只读。 请参阅不同部分。

至于类比，const和uniform就像C / C ++中的全局variables，一个是常量，另一个是可以设置的。 属性是伴随顶点的variables，如颜色或纹理坐标。 变化的variables可以被顶点着色器改变，但是不能被片段着色器改变，所以实质上它们将信息传递给pipe道。

Answer 2

• uniform是每个原始参数（在整个绘制调用期间不变）;
• attribute是每个顶点参数（通常：位置，法线，颜色，紫外线，…）;
• varying是每个片段 （或每个像素 ）参数：它们随着像素而变化 。

理解varying是着色器编程必不可less的。
假设您为顶点着色器内的三angular形的每个顶点定义了变化的参数v 。 当变化参数到达片段着色器时 ，将通过基于要绘制的像素的双线性插值进行插值。

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

Answer 3

在OpenGL中，“程序”是一个“着色器”（较小的程序）的集合，它们在stream水线中相互连接。

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

着色器处理光栅化3D模型所需的顶点（顶点着色器），几何（几何着色器），镶嵌（镶嵌着色器），片段（像素着色器）以及其他批处理任务（计算着色器）。

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> 

牢记这些概念：

着色器可以将数据传递到stream水线中的下一个着色器（ out ， inout ），也可以接受来自WebGL应用程序或之前着色器（ in ）的数据。

• 顶点和片段着色器（真正的任何着色器）都可以使用uniformvariables来从WebGL应用程序接收数据。

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

• 顶点着色器也可以从WebGL应用程序接收具有attributevariables的数据，该数据可以根据需要启用或禁用。

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

• 顶点着色器可以使用variablesvariables将数据传递给片段着色器。 参见上面的GLSL代码（ varying vec3 variableC; ）。