Can anybody explain these WebGL snippets? - glsl

Question

I am learning webgl and fully confused now.
I am going through this website and the comments written with code half explains for a beginner like me.
For example:
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);
In the above snippet, the line
var positionLocation = gl.getAttribLocation(program, 'a_position');
indicates it got the position where the vertex needs to go , but I didn't find anything specific in vertex shaders
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
How can we say where is the position?
Also the Float32Array , why are we using that at all ,is there any scenario where we can use it in real time, I am totally confused with these shaders.
I also read GLSL essentials ,to get some shaders knowledge, but still confused with these things. Can somebody put some light on to it?

Answer 1

The Float32Array contains all the vertices that will go through the shading pipeline.
In your vertex shader you assign gl_Positionto be a 4-dimensional vector with x and y belonging to your inserted vertices. So a_Position contains the values you passed in your array and the vertex shader will be run for every single vertex out there.
So this shader hardly does anything. In a real application, you can do several transformations and lighting operations etc. here.
If you run this program you should see 2 triangles being drawn (1 rectangle). That's because the array contains 6 2d-values that assign to 2 triangles.
Check out more information on the openGL pipeline here.