WebGL VAO

VBO

var vertexBuffer1 = null;
var indexBuffer1 = null;
function setupBuffer1(){
    var vertex = [
        -50, -30,  0,
        -5,  -30,  0,
        -5,   30,  0,
        -50,  30,  0
    ];
    vertexBuffer1 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer1);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);
 
    var index = [
        0, 1, 2,
        0, 2, 3
    ];
    indexBuffer1 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer1);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index), gl.STATIC_DRAW);
 
    aVertexPosition = gl.getAttribLocation(glProgram, 'aPos');
    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(aVertexPosition);
}

• 重新启用时,bindBuffer,bindBuffer,vertexAttribPointer

function animate() {
    requestAnimationFrame(animate);
 
    // update uniform
    updateModelViewMatrix();
    setAllUniforms();
 
    gl.clear(gl.COLOR_BUFFER_BIT);
    // draw first one
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer1);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer1);
    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
 
    draw();
    // draw second one
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer2);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer2);
    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
 
    draw();
}

VAO

• 除了reateVertexArrayOES,bindVertexArrayOES,其他都一致

var ext = gl.getExtension("OES_vertex_array_object");
var vertex = [
    -50, -30,  0,
    -5,  -30,  0,
    -5,   30,  0,
    -50,  30,  0
];
vertexBuffer1 = gl.createBuffer();
vao1 = ext.createVertexArrayOES(); // create vao
ext.bindVertexArrayOES(vao1);// bind vao
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer1);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);
 
var index = [
    0, 1, 2,
    0, 2, 3
];
indexBuffer1 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer1);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index), gl.STATIC_DRAW);
 
aVertexPosition = gl.getAttribLocation(glProgram, 'aPos');
 
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);
 
// unbind
ext.bindVertexArrayOES(null);

• 一个bindVertexArrayOES即可

requestAnimationFrame(animate);
 
// update uniform
updateModelViewMatrix();
setAllUniforms();
 
gl.clear(gl.COLOR_BUFFER_BIT);
// draw first one
ext.bindVertexArrayOES(vao1);
 
drawArray();
 
// draw second one
ext.bindVertexArrayOES(vao2);
 
draw();