WebGL起步

最新推荐文章于 2021-06-22 11:33:05 发布

weixin_30493401

最新推荐文章于 2021-06-22 11:33:05 发布

阅读量102

点赞数

原文链接：http://www.cnblogs.com/jz1108/archive/2011/08/03/2125310.html

版权

本系列文章翻译自：https://developer.mozilla.org/en/WebGL

本文地址：https://developer.mozilla.org/en/WebGL/Getting_started_with_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>&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环境的工作，你将看到一个黑色的矩形框，准备显示内容。

点击此处查看该示例（需要WebGL兼容的浏览器）

转载于:https://www.cnblogs.com/jz1108/archive/2011/08/03/2125310.html

weixin_30493401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL起步

本系列文章翻译自：https://developer.mozilla.org/en/WebGL本文地址：https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL翻译说明：水平有限并且不会逐字逐句翻译，只保证符合原文意思。对于支持WebGL的浏览器来说，它能够让网页使用一种基于OpenGL ES 2.0的A...
复制链接

扫一扫