开发步骤
下面的代码只是简单总结一下相关的概念，它来源于参考中的中文教程，涉及较多的3D方面的知识。感兴趣的同学直接可以跳到实用参考中的中文教程中学习，比我这里讲解的要详细和准确的多。凑热闹的同学简单看看就可以了，不用深究每一行代码的含义。
准备工作
这个不用说了，就是在页面上添加一个canvas元素作为渲染的容器。例如：
<bodyonload="start()">
<canvasid="glcanvas"width="640"height="480">
Yourbrowserdoesn'tappeartosupporttheHTML5canvaselement.
</canvas>
</body>
下面就是正式开始写脚本的时候了，首先看一下程序入口以及整体结构：
functionstart(){
varcanvas=document.getElementById("glcanvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
这里的几个方法代表了典型的WebGL的绘制步骤：
步骤一：初始化WebGL工作环境 - initGL
这个方法的代码如下：
vargl;
functioninitGL(canvas){
gl=null;
try{
//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
catch(e){} //Ifwedon'thaveaGLcontext,giveupnow
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}
这个方法很简单，就是获取WebGL的绘制环境，需要把参数"webgl"传给canvas.getContext方法就行了，但是由于目前WebGL的标准没有最终定型，所以实验阶段用的参数都是"experimental-webgl"。当然你直接去调用canvas.getContext("experimental-webgl")也是可以的，等标准定下以后，你再修改一个代码。
步骤二：初始化着色器Shaders - initShaders
着色器Shader概念比较简单，说白了就是显卡运算指令。构造3D场景需要进行大量的颜色、位置等等信息的计算，如果这些计算由软件执行的话，速度会很慢。所以把这些运算让显卡去计算，速度就很快；如何去执行这些计算，就是由着色器指定的。着色器代码是用一种叫做GLSL的着色器语言编写的，这个我们不去讲述这个语言了。
着色器可以在html中定义，在代码中使用。当然了你在程序中用一个字符串去定义着色器也是一样的。
下面先看定义的部分：
<scriptid="shader-fs"type="x-shader/x-fragment">
precisionmediumpfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor=vColor;
}
</script>
<scriptid="shader-vs"type="x-shader/x-vertex">
attributevec3aVertexPosition;
attributevec4aVertexColor;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void){
gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
</script>
