PDA

View Full Version : Why do we use buffers?



nerdinator
10-12-2012, 10:51 PM
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 (https://github.com/gpjt/webgl-lessons/blob/master/lesson09/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.

greggman
10-15-2012, 10:36 AM
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/