Why do we use buffers?

#1

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.

#2

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/