Html5 webgl 初体验
对于支持WebGL的浏览器来说，它能够让网页使用一种基于OpenGL ES 2.0的API在canvas元素中完成3D图形的渲染工作。
注意：如果WebGL不能正常工作，确保选项webgl.enabled_for_all_sites设置为true。这是9月17日之后的nightly builds版本的默认设置，Firefox 4.0 beta 8 也如此。
本文将介绍有关WebGL的基础知识，并认为你已经了解3D图形学的数学知识。本文并不会教你OpenGL本身。
准备3D渲染
为了用WebGL渲染3D，你首先需要准备canvas元素。下面的HTML片段添加了一个canvas并在body上绑定了一个onload事件监听用来初始化WebGL环境。
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</body>
准备WebGL环境
上面的 start() 函数会在页面加载完被调用。它的任务是创建WebGL环境并准备渲染内容。
function start() {
var canvas = document.getElementById("glcanvas");
initWebGL(canvas); // 初始化GL环境
// 仅当WebGL可用时继续
if (gl) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 将颜色设置为黑色，完全不透明
gl.enable(gl.DEPTH_TEST); // 开启深度测试
gl.depthFunc(gl.LEQUAL); // 近处物体遮挡远处物体
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // 清除颜色和深度缓冲区
}
}
首先我们获取canvas元素的引用，保存在全局的（原文如此，但在上面的代码中，canvas是函数内的本地变量）canvas变量中。很明显如果你不需要重复使用这个canvas元素，也不用保存这个引用了，或者也可以保存为一个本地变量或对象的属性。
一旦有了canvas，我们调用initWebGL()函数；该函数稍后给出定义，它的任务是初始化WebGL环境。
如果环境初始化成功，就会保存在gl变量中。这里，我们设置清除颜色为黑色，然后让环境使用该颜色。之后，我们配置一些环境参数。本例中，我们开启深度测试并指定近处的物体将遮挡位于远处的物体。
初始化工作就这些，稍后我们会做更多的事情。
创建WebGL环境
函数 initWebGL() 内容如下：
function initWebGL(canvas) {
gl = null;
try {
gl = canvas.getContext("experimental-webgl");
}
catch(e) {
}
// 如果没有GL环境则进行提示
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
}
}
为了获取canvas的WebGL环境，我们获取canvas中名为“webgl”的环境。如果失败的话我们尝试使用“experimental-webgl”。如果还是失败的话就提示告知用户你的浏览器似乎不支持WebGL。这就是全部内容，此时gl要么是null（表示WebGL环境不可用）或者保存WebGL环境的引用，稍后我们会使用它进行渲染。
注意：环境名“experimental-webgl”是规范指定过程中使用的一个临时名称，一旦规范完成，“webgl”将会是正式名称。
此时，你已经完成初始化WebGL环境的工作，你将看到一个黑色的矩形框，准备显示内容。
