WebGL 使得在支持HTML 的 canvas 标签的浏览器中,不需要安装任何插件,便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行2D和3D渲染。WebGL程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU, Graphics Processing Unit)中执行的着色代码(GLSL,注:GLSL为OpenGL着色语言)。WebGL 元素可以和其他 HTML 元素混合使用,并且可以和网页其他部分或者网页背景结合起来。

本文将向您介绍 WebGL 的基础使用此处假定您对三维图形方面的数学知识已经有一定的理解,本文也不会试图向您教授 3D图像概念本身。在我们的学习空间 Learn WebGL for 2D and 3D graphics有一个面向初学者的指南、以及完整的代码例子。

本文的代码也可以在这里下载 webgl-examples GitHub repository 。

准备 3D 渲染

为了使用 WebGL 进行 3D 渲染,你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文 。

<body onload="main()">
  <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 上下文

我们的 JavaScript 代码中的 main() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。


//
// start here
//
function main() {
  const canvas = document.querySelector("#glcanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
    return;
  }

  // Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

我们所要做的第一件事就是是获取 canvas 的引用,把它保存在 ‘canvas’ 变量里。

当我们获取到 canvas之后,我们会试着通过调用一个getContext 的函数并传递给它一个"webgl"字符串来获取WebGLRenderingContext。如果浏览器不支持webgl,getContext将会返回null,我们就可以显示一条消息给用户然后退出。

 

如果WebGL上下文成功初始化,变量 ‘gl’ 会用来引用该上下文。在这个例子里,我们将清除色设为黑色,然后用该颜色清除上下文。(用背景颜色重绘canvas)。

 

View the complete code | Open this demo on a new page

 

 

参见

  • WebGL介绍: 由Luz Caballero所著, 发布在dev.opera.com。 这篇文章说明WebGL是什么, 解释了WebGL是如何工作的 (介绍了渲染管线的概念),并且介绍了一些WebGL库。
  • WebGL基础
  • 现代OpenGL介绍: 由Joe Groff写的一系列关于OpenGL的不错的文章,提供了一个清晰的介绍,从OpenGL的历史到图形管线概念,也包括一些说明OpenGL如何工作的例子,如果你对OpenGL没有任何概念的话,这是不错的出发点。

 

文档标签和贡献者

标签: 
最后编辑者: Kongwsh,