对于支持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>&lt;canvas&gt;</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环境的工作,你将看到一个黑色的矩形框,准备显示内容。