Question

我正在学习webgl并且现在完全糊涂了。我正在通过this website，用代码编写的注释为我这样的初学者解释。

例如：

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);

在上面的代码段中，行

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

表示它到达了顶点所需的位置，但我没有在顶点着色器中找到任何特定内容

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

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

Float32Array，我们为什么要使用它，是否有任何我们可以实时使用的场景，我对这些着色器完全混淆。

我还阅读了GLSL要点，以获得一些着色器知识，但仍然对这些事情感到困惑。有人可以对它有所了解吗？

Answer 1

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

所以这个着色器几乎没有做任何事情。在实际应用中，您可以在此处进行多次转换和照明操作等。

如果你运行这个程序，你应该看到2个三角形被绘制（1个矩形）。这是因为数组包含6个2d值，分配给2个三角形。查看有关openGL管道here.

的更多信息

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

1 个答案: