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

Opengl es 关于webGL中顶点着色器的简单IO,opengl-es,webgl,Opengl Es,Webgl,所以,在复制并粘贴到应用程序之前,我试图理解一些代码。在openGL中,我看到一些输入和输出的变量。我在下面的代码片段中没有看到这样的东西。据我所知,顶点着色器“神奇地”通过程序获得“in”类型变量的输入,顺便说一句,它可以附加一个片段和顶点着色器(程序)。代码如下: <script id="shader-vs" type="x-shader/x-vertex"> attribute vec2 aVertexPosition; attribute vec2 aPlotPosition

所以,在复制并粘贴到应用程序之前,我试图理解一些代码。在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>

属性向量2;
属性向量2定位;
可变vec2位置;
真空总管(真空){
gl_位置=vec4(1.0,1.0);
vPosition=aPlotPosition;
}

因此,我的问题是,通过在此处附加适当的程序,GPU和APLOTPOSION都将正确初始化,而且,VPOSION可以在我的应用程序中的其他地方使用,即碎片着色器?

让我尝试解释GPU管道I/O的工作原理:

每个顶点都有一组与其关联的属性。给出您的示例代码:

vertexAttribPointer(0, 2, FLOAT, false, 16, 0); // vertex position
vertexAttribPointer(1, 2, FLOAT, false, 16, 8); // plot position
属性向量2; 属性向量2定位

您的意思是每个顶点都有一个2D顶点位置和打印位置。如果您添加:

属性向量3 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

顶点着色器阶段的输出是“可变”变量。它们是“变化的”,因为它们是在顶点之间的基本体(三角形)曲面上插值的。写入每个顶点的值,但当三角形栅格化为片段时,每个片段将获得每个变量的插值。片段着色器将为draw调用“覆盖”的每个片段(像素)运行。如果绘制一个覆盖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.

在其他情况下,OpenGL的较新版本使用了比顶点和片段更多的着色器阶段,
In
out
,而不是
属性
变量

  • 属性
    对应于顶点着色器中的
  • variable
    对应于顶点着色器的
    out
  • variable
    对应于片段着色器中的

(我实际上没有在
中使用
,因此此描述可能不准确。请随时通过编辑来改进我的答案。我不知道如何适应
统一
s。)

附录:在GPU管道中,我读过:顶点着色器->片段着色器(省略另一个我不关心的着色器)。在我正在研究的示例中,vPosition实际上是在片段着色器中声明的。基本上,我对幕后发生的事情感到困惑。对我来说,在像素之间似乎有一个for循环。GPU似乎从本质上解决了这个问题。进一步补充:顶点着色器似乎自动循环通过顶点,而片段着色器循环通过像素。再次,我的问题的关键是;这是真的吗?GPU现在对我来说是个黑匣子。是的,听起来不错。谢谢!“简明”正是我在这一点上所寻找的。现在,我开始用这些胡说八道。基本上,当我提出这个问题时,你在这里所做的一切让我明白了。in和out类型在我看来比webGL实现的层次更低。虽然,我不确定这一点,属性和变化也有一个隐含的意义。例如,给定两个顶点,将封装您决定在两个顶点之间插入的任何通用数据。请原谅这里的措辞。