Why do we use buffers?

I’m reading up WebGL from here :
http://learningwebgl.com/blog/?p=1008

The code for that particular lesson is here :
https://github.com/gpjt/webgl-lessons/b … index.html

The live page is :
http://learningwebgl.com/lessons/lesson09/index.html

In the 1st few lessons the author created an array of vertices of the object he wanted to create (like a square) in the initBuffers() function.
Here is how it was done in an eariler simpler example, where just one object was drawn and not the above one.


    var triangleVertexPositionBuffer;
    var triangleVertexColorBuffer;

    function initBuffers() {
        triangleVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
        var vertices = [
             0.0, 1.0, 0.0,
            -1.0, -1.0, 0.0,
             1.0, -1.0, 0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        triangleVertexPositionBuffer.itemSize = 3;
        triangleVertexPositionBuffer.numItems = 3;

        triangleVertexColorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
        var colors = [
            1.0, 0.0, 0.0, 1.0,
            0.0, 1.0, 0.0, 1.0,
            0.0, 0.0, 1.0, 1.0,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        triangleVertexColorBuffer.itemSize = 4;
        triangleVertexColorBuffer.numItems = 3;

    }

This I can understand, beacuse the vertices represent the corners of the triangle to be drawn.

But in this lesson,

 function initBuffers() {
        starVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
        vertices = [
            -1.0, -1.0, 0.0,
             1.0, -1.0, 0.0,
            -1.0, 1.0, 0.0,
             1.0, 1.0, 0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        starVertexPositionBuffer.itemSize = 3;
        starVertexPositionBuffer.numItems = 4;

        starVertexTextureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
        var textureCoords = [
            0.0, 0.0,
            1.0, 0.0,
            0.0, 1.0,
            1.0, 1.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
        starVertexTextureCoordBuffer.itemSize = 2;
        starVertexTextureCoordBuffer.numItems = 4;
    }


Ignore the textures and assume I just want to draw some plain old 2D shapes.
Now, I fail to see why this line exists:

 vertices = [
            -1.0, -1.0, 0.0,
             1.0, -1.0, 0.0,
            -1.0, 1.0, 0.0,
             1.0, 1.0, 0.0
        ];

That represents the corners of a square which he never draws.
Stars are drawn actually.

Can someone please clarify this for me?

And a general question,
should we put our vertices in the buffer everytime we draw something?
I mean if I were to draw 10 squares in different fixed points on the canvas,
should I put those coordinates into the buffer for each and every object?
In this tutorial, that isn’t done.
Please help.

They are stars because the sample is drawing “textured” rectangles.

The general guideline for WebGL is that you setup all your vertices during initialization. If you have more than 1 shape make more buffers.

To draw the same shape in more than one place you pass in uniform variables into your shader. A sample example might be to translate the values just by adding some constant as in


   uniform vec2
   gl_Position = a_vertexPosition + u_offset;

Then you can just change the u_offset before drawing to draw in a different location.

Most apps use 4x4 matrix math to tell WebGL where to draw stuff.

I’d suggest reading this set of articles
http://games.greggman.com/game/webgl-fundamentals/