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

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 是如何工作的:

每个顶点都有一组与之关联的属性。鉴于您的示例代码:

属性vec2 aVertexPosition；属性 vec2 aPlotPosition;

你是说每个顶点都有一个二维顶点位置和绘图位置。如果您添加了:

属性 vec3 vNormal;

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

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

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

enableVertexAttribArray(int attributeIndex);

启用它后，您希望将属性数组绑定(bind)到顶点缓冲区。

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 或者 stride 是每个顶点之间的字节数。每个顶点由 4 个 float 组成，每个 float 为 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 像素 block 的小三角形，则片段着色器将执行 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.