Lights——惊人的WebGL显示技术

案例
2014-12-05
如果你不知道 WebGL 是什么和能做哪些东西,先来和 Lights来一段互动体验吧,相信你会知道 WebGL 技术是多么强大。
标签: WebGL html5 ccs3

Lights——惊人的WebGL显示技术

如果你不知道 WebGL 是什么和能做哪些东西,先来和 Lights来一段互动体验吧,相信你会知道 WebGL 技术是多么强大。

点击这里进行互动Lights看起来像是一段 Flash 视频,但实际上并不是,它无需插件就能在你的浏览器上顺利运行(需支持 WebGL,Chrome、Safari、Firefox 都可以),甚至可以在手机上运行。
简单地说,WebGL 是一套用于渲染 2D 和 3D 图形的标准图形库,其标准是由 Khronos、AMD、爱立信、谷歌、Mozilla、Nvidia 以及 Opera 等共同制定,目前已出现在 Mozilla Firefox、Apple Safari 及 Google Chrome 等浏览器中,同时这种高质量的 3D 表现不需借助任何插件便可通过提供硬件图形加速来达到。

在 Lights 中,黄色的“闪光线”会随着鼠标的左右点击而左右摆动,当“气泡”出现时,点击它们会出现焰火般的炫丽景象。而其背景音乐是英国歌手 Ellie Goulding 制作的一个互动音乐体验,同时随着音乐节拍界面会有呼吸状的闪光。


另外推荐一些 WebGL 的 3D 小游戏:

经典鱼缸测试:这是一个经典的网页速度测试,电脑网速越快,鱼游的速度就越快,另外有多个场景可以切换,鱼的数量也可以设置。

Cycleblob:该游戏场景类似基于贪吃蛇游戏,可以通过上下左右键移动,并有多个关卡。

3D水母:该游戏有点单调,展示的是水底 3D 水母,并可以用鼠标来调整视角。

小提示:对于 Safari 用户来说,WebGL 默认状态下是关闭的,你可以通过设置里面的高级选项来开启开发者选项。开启之后,在菜单栏就会多出一个开发者菜单,选中它即可。