Sunday, December 30, 2012

WebGL: creating a plane


function initQuadBuffer(){
triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = initPlaneArray(1, 1, 10, 10);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3; // (x, y, z)
    triangleVertexPositionBuffer.numItems = 6*10*10; // number of vertices
}
function initPlaneArray(w, h, rows, cols){
var vertices = new Array();
var dx = w / cols;
var dy = h / rows;
var idx = 0;
var x = 0, y = 0;
for(var k = 0; k < rows; k++){
x = 0;
for(var i = 0; i<cols; i++){

vertices[idx] = x;  vertices[idx+1] = y;  vertices[idx+2] = 0.0;
vertices[idx+3] = x+dx;  vertices[idx+4] = y+dy;  vertices[idx+5] = 0.0;
vertices[idx+6] = x;  vertices[idx+7] = y+dy;  vertices[idx+8] = 0.0;

vertices[idx+9] = x;  vertices[idx+10] = y;  vertices[idx+11] = 0.0;
vertices[idx+12] = x+dx;  vertices[idx+13] = y;  vertices[idx+14] = 0.0;
vertices[idx+15] = x+dx;  vertices[idx+16] = y+dy;  vertices[idx+17] = 0.0;

idx += 18;
x += dx;
}
y += dy;
}

return vertices;
}

No comments: