WebGL 2登陆Firefox

栏目: 编程工具 · 发布时间: 6年前

内容简介: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登陆Firefox

如何使用 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


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

查看所有标签

猜你喜欢:

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

Scalable Internet Architectures

Scalable Internet Architectures

Theo Schlossnagle / Sams Publishing / 2006-7-31 / USD 49.99

As a developer, you are aware of the increasing concern amongst developers and site architects that websites be able to handle the vast number of visitors that flood the Internet on a daily basis. Sc......一起来看看 《Scalable Internet Architectures》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具