内容简介: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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。