初识 WebGL

Posted H5技术社区

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识 WebGL相关的知识，希望对你有一定的参考价值。

WebGL 使得在支持html 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。WebGL程序包括用 javascript 写的控制代码，以及在图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码（shader code，渲染代码）。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和网页其他部分或者网页背景结合起来。

本文将向您介绍 WebGL 的基础使用。此处假定您对三维图形方面的数学知识已经有一定的理解，本文也不会试图向您教授 OpenGL 本身。

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

准备 3D 渲染

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

  1. <body onload="start()">

  2.   <canvas id="glcanvas" width="640" height="480">

  3.     Your browser doesn't appear to support the HTML5 <code><canvas></code> element.

  4.   </canvas>

  5. </body>

复制代码

准备 WebGL 上下文

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

  1. var gl; // WebGL的全局变量


  3. function start() {

  4.   var canvas = document.getElementById("glcanvas");


  6.   // 初始化 WebGL 上下文

  7.   gl = initWebGL(canvas);   

  8.   

  9.   // 只有在 WebGL 可用的时候才继续

  10.   

  11.   if (gl) {

  12.     // 设置清除颜色为黑色，不透明

  13.     gl.clearColor(0.0, 0.0, 0.0, 1.0);    

  14.     // 开启“深度测试”, Z-缓存

  15.     gl.enable(gl.DEPTH_TEST); 

  16.     // 设置深度测试，近的物体遮挡远的物体

  17.     gl.depthFunc(gl.LEQUAL); 

  18.     // 清除颜色和深度缓存

  19.     gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);     

  20.   }

  21. }

复制代码

我们所要做的第一件事就是是获取 canvas 的引用，把它保存在 ‘canvas’ 变量里。很显然，如果你不需要重复引用 canvas，你应该避免将它保存为全局变量，而是将它保存为局部变量或者一个对象成员变量。

当我们获取到 canvas之后，我们调用了一个叫做 initWebGL() 的函数。我们将马上介绍这个函数，它的作用是初始化WebGL上下文。

如果WebGL上下文创建成功，变量 ‘gl’ 会用来保存它的引用。在这个例子里，我们将清除色设为黑色，然后用该颜色清除上下文。接下来，用指定的参数设置上下文。在这里，我们开启“深度测试”，使得近的物体遮挡远的物体。

通过以上代码，我们已经完成初始化。我们将在后面开始真正做一些东西。

创建 WebGL 上下文

initWebGL() 函数代码实现如下：

  1. function initWebGL(canvas) {

  2.   // 创建全局变量

  3.   window.gl = null;

  4.   

  5.   try {

  6.     // 尝试获取标准上下文，如果失败，回退到试验性上下文

  7.     gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

  8.   }

  9.   catch(e) {}

  10.   

  11.   // 如果没有GL上下文，马上放弃

  12.   if (!gl) {

  13.     alert("WebGL初始化失败，可能是因为您的浏览器不支持。");

  14.     gl = null;

  15.   }

  16.   return gl;

  17. }

复制代码

为了获取 canvas 的 WebGL 上下文，我们请求来自 canvas 的名为 "webgl" 的上下文。如果失败，我们尝试请求 "experimental-webgl"（试验性的webgl）。如果同样失败，我们将显示一个警告来告诉用户，浏览器不支持WebGL。这是创建 WebGL 上下文的所有步骤。现在，‘gl’ 可能为null（浏览器不支持 WebGL ），或者是我们即将用于渲染的 WebGL 上下文的引用。

[size=1.125]Note: “experimental-webgl” 上下文是一个临时名称的上下文，用于处于开发中的标注实现，当标准制定下来后，将会使用 "WebGL" 

现在，你已经完成 “WebGL” 初始化的代码，下一步你应该会看到一个大大的黑色盒子，它已经准备好接受内容。

如果你正在使用一个支持WebGL的浏览器，可以点击查看这个例子

调整 WebGL 上下文尺寸

一个新的 WebGL 上下文，会在它被获得时设置它自己的视窗分辨率为 canvas 元素的高度和宽度，而不是根据其 CSS 样式。修改 canvas 元素的样式将改变它的显示大小，但不会改变它的渲染分辨率。在上下文创建后，修改 canvas 元素的宽度和高度，也不会改变上下文绘画的像素数量。要改变 WebGL 渲染的分辨率，例如当用户重新调整一个完全由 canvas 元素覆盖的窗口的大小，又或者你希望嵌入到App中的页面能够自适应，你就需要调用 WebGL 上下文的 viewport() 函数来调整设置。

使用上面例子中用到的 ‘gl’ 和 ‘canvas’ 修改 WebGL 的渲染分辨率：

  1. gl.viewport(0, 0, canvas.width, canvas.height);

复制代码

当 canvas 在渲染与它所设定的 CSS 显示不同的分辨率，它会经过缩放处理。CSS 缩放在大部分情况下，能够为渲染低分辨情景节省资源，并提升浏览器的效率。缩小尺寸可能会产生 超级采样抗锯齿(Super Sampling Anti Aliasing) 的效果（尽管会有原生本地应用的效果，但是会占用极高的性能花费）。最好采用多重采样反锯齿（Multi-Sample Anti-Aliasing）和用户浏览器实现的纹理过滤器，如果可用的话，相对于强制缩放，使用浏览器图像规约算法（browser's image reduction algorithm）会有一个更好的效果。


以上是关于初识 WebGL的主要内容，如果未能解决你的问题，请参考以下文章

webgl 初识2

初识webgl--我的webgl学习第一课

WebGL入门教程-webgl绘制三角形

cesium学习--初识

WebGL入门教程-webgl颜色

shader编程-RayMarching与SDF结合开始三维探索（WebGL-Shader开发基础07）