任何人都可以解释这些 WebGL 片段吗？

Question

我正在学习 webgl，现在完全糊涂了。 我正在浏览this website，用代码编写的 cmets 为像我这样的初学者解释了。

例如：

var canvas = document.getElementById('canvas');
var gl = getWebGLContext(canvas);
if(!gl) {
    return;
}

//Setup GLSL
var program = createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
gl.useProgram(program);

//Look up where the vertex data needs to go
var positionLocation = gl.getAttribLocation(program, 'a_position');     

//create a buffer and put a single CLIPSPACE rectangle in it.
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0,
                                                 1.0, -1.0,
                                                 -1.0, 1.0,
                                                 -1.0, 1.0,
                                                 1.0, -1.0,
                                                 1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
//draw
gl.drawArrays(gl.TRIANGLES, 0, 6);

在上面的sn-p中，一行

var positionLocation = gl.getAttribLocation(program, 'a_position');

表示它得到了顶点需要去的位置，但我没有在顶点着色器中找到任何特定的东西

attribute vec2 a_position;
void main() {
    gl_Position = vec4(a_position, 0, 1);
}

我们怎么能说位置在哪里？

还有 Float32Array ，我们为什么要使用它，有没有我们可以实时使用它的场景，我完全对这些着色器感到困惑。

我还阅读了 GLSL Essentials 以获得一些着色器知识，但仍然对这些东西感到困惑。有人可以解释一下吗？

Answer 1

Float32Array 包含将通过着色管道的所有顶点。 在您的顶点着色器中，您将 gl_Position 指定为一个 4 维向量，其中 x 和 y 属于您插入的顶点。因此 a_Position 包含您在数组中传递的值，并且顶点着色器将为那里的每个顶点运行。

所以这个着色器几乎没有任何作用。在实际应用中，您可以在此处进行多种变换和光照操作等。

如果您运行该程序，您应该会看到正在绘制的 2 个三角形（1 个矩形）。这是因为该数组包含 6 个分配给 2 个三角形的 2d 值。 查看更多关于 openGL 管道的信息here.