一个基本的WebGL示例及注释

var canvas = document.getElementById("mycanvas");
// 获取上下文并初始化画布
var gl = canvas.getContext("webgl");
// 定义清除颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 通过COLOR_BUFFER_BIT把颜色清除为gl.clearColor()定义的颜色
gl.clear(gl.COLOR_BUFFER_BIT);

//　着色器源码
var vertexSource = `
        // 声明一个属性变量 a
        attribute vec3 a;
        void main(){
            // 顶点在作色器处理后的位置信息
            gl_Position = vec4(a, 1.0);
        }    
`;
var fragmentSource = `
        // 精度限定符, 最小精度为float
        precision mediump float;
        void main(){
            // 片段颜色
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
`;
// 创建定点和片段着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 将着色器源码附加到着色器上
gl.shaderSource(vertexShader, vertexSource);
gl.shaderSource(fragmentShader, fragmentSource);
// 编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 创建一个程序对象
var program = gl.createProgram();
// 将编译好的着色器附加到程序对象上
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
// 链接程序对象
gl.linkProgram(program);
// WebGL引擎使用该程序对象
gl.useProgram(program);


// 创建一个WebGLBuffer缓冲对象
var vertexBuffer = gl.createBuffer();
// 将该缓冲对象绑定为当前的数组缓冲
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 缓冲数据
var data = [
     0.0 ,  0.5 ,  0.0,
    -0.5 , -0.5 ,  0.0,
     0.5 , -0.5 ,  0.0
];
// 将缓冲数据添加到当前的数组缓冲中
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

// 获取着色器源码中属性的引用
var vertexAttribLocation = gl.getAttribLocation(program, "a"); 
// 设置属性ａ接收gl.ARRAY_BUFFER的数据
gl.vertexAttribPointer(vertexAttribLocation, 3, gl.FLOAT, false, 0, 0);
// 设置通过顶点着色器将缓冲的输入数据转换为一系列顶点数组
gl.enableVertexAttribArray(vertexAttribLocation);
// 绘制缓冲数组
gl.drawArrays(gl.TRIANGLES, 0, 3);