javascript七基础学习系列二千三百六十八：WebGL

34 0 0

WebGL 是画布的3D 上下文。与其他Web 技术不同，WebGL 不是W3C 制定的标准，而是Khronos
Group 的标准。根据官网描述，“Khronos Group 是非营利性、会员资助的联盟，专注于多平台和设备下
并行计算、图形和动态媒体的无专利费开放标准”。Khronos Group 也制定了其他图形API，包括作为浏
览器中WebGL 基础的OpenGL ES 2.0。
OpenGL 这种3D 图形语言很复杂，本书不会涉及过多相关概念。不过，要使用WebGL 最好熟悉
OpenGL ES 2.0，因为很多概念可以照搬过来。
本节假设读者了解OpenGL ES 2.0 的基本概念，并简单介绍OpenGL ES 2.0 在WebGL 中实现的部分。
要了解关于OpenGL 的更多信息，可以访问OpenGL 网站。另外，推荐一个WebGL 教程网站：Learn WebGL。
WebGL 上下文
在完全支持的浏览器中，WebGL 2.0 上下文的名字叫”webgl2″，WebGL 1.0 上下文的名字叫
“webgl1”。如果浏览器不支持WebGL，则尝试访问WebGL 上下文会返回null。在使用上下文之前，
应该先检测返回值是否存在：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let gl = drawing.getContext(“webgl”);
if (gl){
// 使用WebGL
}
}
这里把WebGL context 对象命名为gl。大多数WebGL 应用和例子遵循这个约定，因为OpenGL ES
2.0 方法和值通常以”gl”开头。这样可以让JavaScript 代码看起来更接近OpenGL 程序。
WebGL 基础
取得WebGL 上下文后，就可以开始3D 绘图了。如前所述，因为WebGL 是OpenGL ES 2.0 的Web
版，所以本节讨论的概念实际上是JavaScript 所实现的OpenGL 概念。
可以在调用getContext()取得WebGL 上下文时指定一些选项。这些选项通过一个参数对象传入，
选项就是参数对象的一个或多个属性。
 alpha：布尔值，表示是否为上下文创建透明通道缓冲区，默认为true。
 depth：布尔值，表示是否使用16 位深缓冲区，默认为true。
 stencil：布尔值，表示是否使用8 位模板缓冲区，默认为false。
 antialias：布尔值，表示是否使用默认机制执行抗锯齿操作，默认为true。
 premultipliedAlpha：布尔值，表示绘图缓冲区是否预乘透明度值，默认为true。
 preserveDrawingBuffer：布尔值，表示绘图完成后是否保留绘图缓冲区，默认为false。
建议在充分了解这个选项的作用后再自行修改，因为这可能会影响性能。
可以像下面这样传入options 对象：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let gl = drawing.getContext(“webgl”, { alpha: false });
if (gl) {
// 使用WebGL
}
}
这些上下文选项大部分适合开发高级功能。多数情况下，默认值就可以满足要求。
如果调用getContext()不能创建WebGL 上下文，某些浏览器就会抛出错误。为此，最好把这个
方法调用包装在try/catch 块中：
Insert IconMargin [download]let drawing = document.getElementById(“drawing”),
gl;
// 确保浏览器支持
if (drawing.getContext) {
try {
gl = drawing.getContext(“webgl”);
} catch (ex) {
// 什么也不做
}
if (gl) {
// 使用WebGL
} else {
alert(“WebGL context could not be created.”);
}
}