开发者学堂WebGL 2登陆Firefox

Posted 2021-04-25 火狐

在发表 Firefox 51 之后，Firefox 也就正式开始支持 WebGL 2 了！

WebGL 是能在 Web 中绘制 3D 图像的标准 API，并且是以移动版游戏（所谓的手游）所常用的 OpenGL ES 为基础的。

到目前为止，可用 WebGL 1（以 OpenGL ES 2.0 为基础）在 <canvas> 元素上绘制有趣的图像。但须注意：WebGL 2 却是以OpenGL ES 3.0 规格为其架构，因此导入了许多提高性能与视觉效果的新功能。

在此之前，必须通过某个设置开关才能开启 WebGL 2 功能，或只能用于开发者（Developer）或 Nightly 版本之中。但现在 Firefox 51 已开放给所有 Firefox 桌面版（Firefox for Windows, Mac OS,and Linux）的用户体验。

展示程序：「After the Flood」- by PlayCanvas

为了让你抢先体验 WebGL 2 的能耐，Mozilla 很高兴推出「After the Flood」这个由 PlayCanvas 所提供的交互式 WebGL 2 展示视频。（另请注意此展示视频效果目前仅支持电脑端，但很快就会登上移动设备。）现在就进入这个奇幻的世界吧！只要用浏览器就可以体验视频中的水面、树叶、建筑等唯美视觉盛宴。

如何使用 WebGL 2

若要请求 WebGL 2 的「文本（context）」，就只要从 <canvas> 元素要一组来用就好。这里我们使用「webgl2」这个字符串来请求 WebGL 2。

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');

WebGL 2 可能尚无法支持所有浏览器，所以需要输入某些支持程序代码：

let canvas =document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');
let isWebGL2 = !!ctx;
if (!isWebGL2) { // try to fallback to webgl 1
    ctx = canvas.getContext('webgl') ||
         canvas.getContext('experimental-webgl');
}
if (!ctx) {
    console.log('your browser does notsupport WebGL');
}

注意事项

敬请注意，虽然 WebGL 2 是以 OpenGL ES 3.0 为基础，但两者并非完全一样。举例来说，WebGL 2 并不支持着色器（Shader）程序的二进制格式，而且 OpenGL 中有一部分选择性的限制，将针对 WebGL 2 强制执行。两者不同之处均已列在 WebGL 2 规格之中。如果你已经很熟悉 OpenGL，也应该很快就能上手 WebGL 2。

另外必须说的是，WebGL 2 并无法完全向下兼容 WebGL 1。因此你的 WebGL 1 程序代码有可能无法在 WebGL 2 文本中达到应有的效果。但目前已经将两者之间的差异缩到最小，应该不会耗太多功夫就能移植既有的程序代码与着色器。可参阅规格中的〈backwards incompatibility list〉进一步了解；也可通过〈WebGL 2 Fundamentals〉中的快速指南部分，从 WebGL 移植程序代码到 WebGL 2。

还有，虽然 WebGL 2 可带来更多新功能，但若用户的显示适配器与驱动程序过于老旧，仍可能无法执行 WebGL 2。

先向大家提示了应注意的部分。身为图像开发者的你如果对此有强烈兴趣，请移驾到【原文】继续观看更多说明并尝试实际动手吧！

火狐

Mozilla Firefox

firefox.com.cn

下载Firefox移动版

戳原文，马上了解更多！