[HTML5] 关于HTML5(WebGL)的那点事

长平狐 发布于 2013/07/01 15:37
阅读 2K+
收藏 5
2013年新春伊始,HTML5的曝光率急速增加,可以预见的是今年HTML5必将随着移动互联网的扩张而大举入侵!作为互联网前沿工作者的我们怎能视而不见!赶紧来认识一下HTML5家族中的主要新成员。
  • WebSocket:定义了一套API, 允许网页能够使用WebSocket协议来和远程主机进行双工通信(之前已经介绍过,见《Netty Websocket Server Javascript Client》)。
  • WebStorage:定义了一套API, 能够在Web客户端以Key-Value的形式对数据进行持久化存储。
  • WebWorkers:定义了一套API,能够允许脚本运行于后台,进行类似于线程化的操作。
  • WebSQL:定义了一套API, 能够将数据存储在数据库,并使用类似SQL的方式进行查询。
  • WebGL:定义了一套API, 能够允许在网页中的canvas标签中使用类似于Open GL,实际上是一套基于OpenGL ES 2.0的3D图形API。
为了让大家对HTML5的新特性(特别是WebGL)有个比较具体的认识,这里推荐两个比较有趣的HTML5应用(游戏),大家有兴趣可以体验一下。

1、 http://nouvellevague.ultranoir.com/

该应用带领我们进入了一个奇幻的3D空间,大家还可以在底部的“CONTROLS”菜单中查看基本操作,还可以在“VIEWS”菜单中切换不同的视角(飞机、飞艇、气球),以下是截图。



2、 http://crystalin.dyndns.org:8080/GwtQuake.html

这是Quake2游戏的HTML5版,大家在这里可以体验到在浏览器里玩大型3D射击游戏的感觉(相信不久之后CS也会有HTML5版本了吧),以下是截图。



如果你无法运行以上的HTML5应用(游戏),请先确认你的浏览器是否支持WebGL,目前可用的浏览器有:
  • Google Chrome 9+
  • Mozilla Firefox 4+
  • Safari 5.1+(仅限于Mac OS X操作系统)
同时,你还需要有一块好的显卡,并安装了最新的显卡驱动;这只是使你能够运行WebGL的基本要求,如果想要在一些复杂的应用(游戏)中保证显示效果,那你需要一块更好的显卡。当然,如果你的机器使用的是板载的集成显卡,那么你需要在浏览器中强制开启WebGL支持,以下是开启方法:

1、Google Chrome开启方法

我们需要为Chrome加入一些启动参数(以下具体操作步骤以Windows操作系统为例)。先找到Chrome浏览器的快捷方式,如果没有就创建一个快捷方式(右键点击chrome.exe,选择“创建快捷方式”或者“发送到”→“桌面快捷方式”),右键点击快捷方式,选择属性。在目标框内,双引号的后边,加入以下内容:--enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files,以下是这几个命令的解释。

--enable-webgl:表示开启WebGL支持。
--ignore-gpu-blacklist:表示忽略GPU黑名单,由于一些显卡GPU因为过于陈旧等原因,系统不建议运行WebGL,这个参数可以让浏览器忽略这个黑名单。
--allow-file-access-from-files:表示允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,可以不添加这个参数。

2、Mozilla Firefox开启方法

Firefox的用户请在浏览器的地址栏输入“about:config”,回车后进行以下步骤:

步骤1:在过滤器(filter)中搜索“webgl”
将webgl.force-enabled设置为true
将webgl.disabled设置为false

步骤2:在过滤器(filter)中搜索“security.fileuri.strict_origin_policy”
将security.fileuri.strict_origin_policy设置为false

然后,关闭目前开启的所有Firefox窗口,重新启动Firefox。其中前两个设置是强制开启WebGL支持,最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源,如果你不是WebGL的开发者,不需要开发调试WebGL,只是想要看一下WebGL的Demo,可以不设置此项。

3、Safari开启方法

菜单中找到“属性”或“偏好设置”→“高级”,选中“显示开发菜单”,然后到“开发”菜单,选中“开启WebGL”。

虽然目前也有不少唱衰HTML5的言论,但是我相信这只是小部分保守派的担心,这点声音是完全无法阻止HTML5的蓬勃发展的!我们要知道,一个变革性技术的成熟岂是朝夕可以完成的?一旦时机成熟,HTML5必将给互联网带来革命性的升级,网民们也将体验到HTML5为我们带来的震撼体验!
原文链接:http://blog.csdn.net/shagoo/article/details/8595550
加载中
返回顶部
顶部