WEBGL学习笔记记录之画三角形

/**
 * 顶点着色器 定义一个vec4变量接受顶点信息
 */
var VSHADER_SOURCE = 
'attribute vec4 a_Position;\n'+
'void main() {\n'+
'gl_Position = a_Position;\n'+
'}\n'
/**
 * 片元着色器 默认返回颜色
 */
var FSHEADER_SOURCES = 
'void main() {\n'+
'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n'+
'}\n'

function main() {
    let canvas = document.getElementById('webgl');
    let gl = getWebGLContext(canvas);

    if(!gl){
        console.log("main gl error");
        return;
    }
    if(!initShaders(gl,VSHADER_SOURCE,FSHEADER_SOURCES)){
        console.log("main VSHADER_SOURCE FSHEADER_SOURCES error")
        return;
    }


    let n=initVertexBuffers(gl);
    gl.clearColor(0.0,0.0,0.0,1.0);
   
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES,0,n);

}

function initVertexBuffers(gl){
    //定义数组用来记录顶点信息坐标
    var vertices = new Float32Array([
        0.0,0.5,
        -0.5,-0.5,
        0.5,-0.5
    ]);

    var n=3;
    //创建缓冲区
    var vertexBuffer = gl.createBuffer();
    if(!vertexBuffer){
        console.log("initVertexBuffers vertexBuffer");
        return;
    }
    //绑定缓冲区到ARRAY_BUFFER上面 ARRAY_BUFFER表示缓冲区包含顶点数据
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
    //向缓冲区注入顶点数据 STATIC_DRAW表示一次传入，多次绘制
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
    //获取顶点着色器的a_Position变量的存储位置
    var a_Position = gl.getAttribLocation(gl.program,'a_Position');
    if(a_Position<0){
        console.log("initVertexBuffers a_Position");
        return;
    }
    //将缓冲区的对象分配给 顶点着色器a_Position变量
    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
    //开启变量（就是讲缓冲区的数据与变量进行连接）
    gl.enableVertexAttribArray(a_Position);

    return n;
}