WebGL 2登陆Firefox

内容简介：WebGL 2登陆Firefox

本帖最后由 yingliu 于 2017-2-23 16:54 编辑

在发表 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');

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。

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

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

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

原文博客： WebGL 2 lands in Firefox

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。