Question

所以，在我复制并粘贴到我的应用程序之前，我正试图理解一些代码。在openGL中，我看到一些变量输入和输出。我在下面的代码片段中看不到这样的事情。根据我的理解，顶点着色器“神奇地”通过程序获取“in”类型变量的输入，顺便提一下，它可以附加一个片段和顶点着色器（程序）。下面是代码：

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
attribute vec2 aPlotPosition;

varying vec2 vPosition;

void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0, 1.0);
    vPosition = aPlotPosition;
}
</script>

所以，我的问题是，通过在这里附加一个合适的程序，aVertexPosition和aPlotPosition都将被正确初始化，而且，vPosition可以在我的应用程序的其他地方使用，即片段着色器？

Answer 1

让我试着解释GPU管道I / O是如何工作的：

每个Vertex都有一组与之关联的属性。给出您的示例代码：

属性vec2 aVertexPosition; 属性vec2 aPlotPosition;

你说每个顶点都有一个2D顶点位置和绘图位置。如果您添加：

属性vec3 vNormal;

然后每个顶点也会有一个法线。您可以将这些视为顶点“属性”。

您必须告诉GPU在哪里获取每个属性的值。

编译着色器时，会为每个顶点属性分配一个属性数组索引。您必须启用着色器所需的每个属性数组索引

enableVertexAttribArray(int attributeIndex);

启用它后，您需要将属性数组绑定到顶点缓冲区。

bindBuffer(ARRAY_BUFFER, buffer);

现在，您将介绍如何通过此调用获取属性：

vertexAttribPointer(int attributeIndex, int count, int type, bool normalized, int stride, int offset);

给出您的示例代码：

vertexAttribPointer(0, 2, FLOAT, false, 16, 0); // vertex position
vertexAttribPointer(1, 2, FLOAT, false, 16, 8); // plot position

16或步幅是每个顶点之间的字节数。每个顶点由4个浮点组成，每个浮点数为4个字节宽。偏移是属性在顶点内开始的位置。顶点位置位于顶点的第0个字节，绘图位置位于第8个位置。

您可以将这些视为描述如何索引数组。第N个顶点：

aVertexPosition.x = BUFFER[offset + N * stride + sizeof(FLOAT) * 0];
aVertexPosition.y = BUFFER[offset + N * stride + sizeof(FLOAT) * 1];

GPU会自动为您提取顶点属性，并在执行顶点着色器功能之前填充。是的，您绘制的每个顶点都会调用一次顶点着色器main。

顶点着色器阶段的输出是“变化”变量。它们是“变化的”，因为它们在顶点之间的基元（三角形）的表面上进行插值。您为每个顶点写出值，但是当三角形被栅格化为片段时，每个片段都会获得每个变量变量的插值。片段着色器为绘制调用“覆盖”的每个片段（像素）运行。如果绘制一个覆盖4x4像素的小三角形，则片段着色器将执行16次。

简明扼要：

Vertex Shader Inputs: Vertex Attributes & Uniform values (not covered)
Vertex Shader Outputs: Varying Values at each vertex
Fragment Shader Inputs: Varying Values for a given fragment (pixel)
Fragment Shader Outputs: Color & Depth values which are stored in the color and depth buffer.

Vertex Shader is run for every vertex in the draw call.
Fragment shader is run for every "covered" or "lit" fragment (pixel) in the draw call.

Answer 2

在其他较新版本的OpenGL中，使用了比仅使用顶点和片段更多的着色器阶段in和out，而不是attribute和varying。< / p>

attribute对应于顶点着色器的in。
varying对应于顶点着色器的out。
varying对应于片段着色器的in。

（我实际上并未使用in和out，因此此描述可能不准确。请随时通过编辑来改进我的答案。我不知道如何uniform适合。）

简单，关于webGL中的顶点着色器的IO

2 个答案: