webgl编程指南学习——02

在跟随书本编写基础的webgl程序时，会需要引入三个函数库：webgl-utils、webgl-debug、cuon-utils等 我们可以直接到github上下载就行，下面是下载地址webgl编程指南所需函数库

继续上一章的 学习

书本继续介绍了清空绘图区也就是将canvas画布使用某一种颜色填充背景色代码如下

function main() {
    //获取canvas元素
    var canvas = document.getElementById("webgl");
    if(!canvas){
        //如果获取不到canvas对象则输出提示语句
        console.log('Failed to retrieve the <canvas> exement');
        return;
    }
    //获取绘制二维图形的绘图上下文，该函数即为外部函数库cuon-utils.js内定义的使用script标签引入即可
    var gl = getWebGLContext(canvas);
    //指定清空canvas的颜色
    gl.clearColor(0.0,0.0,0.0,1.0);
    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);
    //背景色一旦指定之后，在下一次调用gl.clear（）方法之前不会改变
}

gl.COLOR_BUFFER_BIT 指定颜色缓存

gl.DEPTH_BUFFER_BIT指定深度缓冲区

gl.STENCIL_BUFFER_BIT指定模板缓冲区

绘制一个点HelloPoint1.js（着色器使用）

//顶点着色器
var VSHADER_SOURCE = `void main（）{
    gl.Position = vec4(0.0,0.0,0.0,1.0)//设置所绘制点的坐标
    gl.PointSize = 10.0//设置点的尺寸
}`
//片元着色器
var FSHADER_SOURCE = 
`void main(){
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}`
function main(){
    var canvas = document.getElementById("webgl");
    
    var gl = getWebGLContext(canvas);
    if(!initShader(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
           
    }

    //指定清空canvas的颜色
    gl.clearColor(0.0,0.0,0.0,1.0);

    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制一个点
    gl.drawArrays(gl.POINTS,0,1);
}