API on

Generate buffer object

let buffer = context.createBuffer();
Copy the code

Bind buffer object

context.bindBuffer(type, buffer);
Copy the code

Add data

context.bufferData(type, new Float32Array(srcData), usage||context.STATIC_DRAW);
Copy the code

The complete code

class Buffer {

    constructor(context, type, srcData, usage) {
        let buffer = context.createBuffer();
        context.bindBuffer(type, buffer);
        context.bufferData(type, new Float32Array(srcData), usage || context.STATIC_DRAW);
        this.m_type = type;
        this.m_buffer = buffer;
        this.m_context = context;
    }
    bindBuffer() {
        this.m_context.bindBuffer(this.m_type, this.m_buffer); }}class ArrayBuffer extends Buffer {

    constructor(context, srcData, usage) {
        super(context, context.ARRAY_BUFFER, srcData, usage)
    }
}
Copy the code

Draw a triangle

The complete code is as follows:

let a_position = 0;
let shaderProgram = new ShaderProgram(context,
    [createVertexShader(context, 
     `attribute vec3 a_position; Void main(void){gl_Position = vec4(a_position, 1.0); } `), 
        createFragmentShader(context, 
        'void main(void){gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0); } `)])
shaderProgram.bindAttribLocation(a_position, "a_position");
shaderProgram.useProgram();

let jsArrayData = [
    0.0.1.0.0.0,
    -1.0, -1.0.0.0.1.0, -1.0.0.0
];
let buffer = new ArrayBuffer(context, jsArrayData);
webgl.clearColor(0.0.0.0.0.0.1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
buffer.bindBuffer();
webgl.enableVertexAttribArray(a_position);
webgl.vertexAttribPointer(a_position, 3, webgl.FLOAT, false.0.0);
webgl.drawArrays(webgl.TRIANGLES, 0.3);
Copy the code