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.