1.canvas

WebGL采用HTML5中引入的元素,他定义了网页上的绘图区域。也就是提供了画布。

var canvas = document.getElementById('canvas');

2.为webGL获取绘图的上下文

通常来说，我们应该用canvas.getContex()来获取绘图的上下文，但是在获取webGL绘图上下文时，canvas.getContext()函数接受的参数，在不同浏览器中会不同，所以我们写一个函数getWebGLContext()来隐藏不同浏览器之间的差异。

var gl = getWebGLContext(canvas);

3. 设置背景色&清空canvas

gl.clearColor(0.0,0.0,0.0,1.0);//设置背景颜色
gl.clear(gl.COLOR_BUFFER_BIT);//清空canvas

用指定的背景色清空(即用背景色填充，擦除已经绘制的内容)绘图区域。

4.初始化着色器

着色器程序运行在WebGL系统（WebGL程序分为运行在javaScript系统（上面的部分）和webgl系统）。

//顶点着色程序
var VSHADER_SOURCE = 
'void main(){\n '+
' gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
' gl_PointSize = 10.0;\n' +
}\n';

//片元着色器
var FSHADER_SOURCE =
'void main(){\n '+
' gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
}\n';
    

function main(){
    ……
    if（!initShader(gl,VSHADER_SOURCE,FSHADER_SOURCE);
}