HTML5以及WebGL
注:【转载请注明文章来源、保持原样】
出处:http://www.cnblogs.com/jyli/archive/2010/07/25/1784902.html
作者:李嘉昱
首先来看下HTML5提供的新特性
- Web Socket 定义了一套API, 允许网页能够使用Web Socket协议来和远程主机进行双工通信。
- Web Storage 定义了一套API, 能够在Web客户端以key-value的形式对数据进行持久化存储。
- Web SQL 定义了一套API, 能够将数据存储在数据库,并使用类似SQL的方式进行查询。
- Web Workers 定义了一套API,能够允许脚本运行于后台,进行类似于线程化的操作。
- WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL,实际上是一套基于OpenGL ES 2.0的3d图形API。这些API是通过HTML 5的canvas标签来使用的。
从上面可以看出WebGl实际上是HTML5提供的新特征的一部分,通过Html5的canvas元素来展现。
这样页面开发人员利用canvas标签就可以开辟出一片类似于div的区域,从而能够在这块区域中实现3d渲染,使用方式类似于普通OpenGL的使用方式。
实际上,canvas标签也是在html5中出现的,最先开始支持的是2d图形绘制,现在又开始有了基于WebGl的3d绘制。
游戏Quake II实现了基于WebGL的移植,这样通过浏览器就能够玩Quake这样的较大型3d游戏。
实际上更确切的说Quake II是基于HTML5的游戏。
下面是WebGL版Quake使用的到的HTML5技术要素:
- WebGL用于3d渲染。
- HTML Audio用于音频。
- Local Storage API用于本地持久化存储。
- Web Socket用于网络通信。
当然,Quake能在Browser上运行,也是离不了JavaScript的。
目前,HTML5已经得到了很大程度上的推动,虽然还是在草案阶段,但主流浏览器均对其采取积极支持态度。
在最新的浏览器上已经可以看到很多HTML5的特性,Google和Apple是其中的重要推手。
从HTML5的新特征和以及使用上来看,不难看出为何Google和Apple如此的热衷于HTML5。
如果想亲自尝试一下在自己机子上Build,并且run一下的话,可以参考如下步骤
http://code.google.com/p/quake2-gwt-port/wiki/BuildingAndRunning
我在ubuntu上尝试了一下,并把步骤更清晰的记录如下:
step 1
sudo apt-get install mercurial
sudo apt-get install vorbis-tools
sudo apt-get install openjdk-6-jdk
sudo apt-get install lame
step 2
hg clone https://quake2-gwt-port.googlecode.com/hg/ quake2-gwt-port
cd quake2-gwt-port
step 3
./build-dedicated-server (will build the tools and the client and server code).
* If you run into memory issues, try export MAVEN_OPTS=-Xmx512m
step 4
./install-resources (will download, unpack, and convert the original Quake II demo resources).
cp -r maven-build/server/target/gwtquake/war/gwtquake war
* Due to a glitch in our maven build files, you currently also need cp -r maven-build/server/target/gwtquake/war/gwtquake war. We are fixing this.
step 5
./run-dedicated-server [port] (will run the local Quake II server).
step 6
./chromium --enable-webgl
step 7
http://localhost:8080/GwtQuake.html
Navigate to: http://localhost:8080/GwtQuake.html (or whatever port you specified to the server).
记得使用chromium。
另外不过不想这么麻烦的话,也可以直接去尝试在线版的,搜一下,应该有不少的,
比如这个:http://tatari.se:8080/GwtQuake.html
遇到什么问题,可参考http://playwebgl.com/games/quake-2-webgl/
最后share一个使用Browser玩的Quake视频
http://v.youku.com/v_show/id_XMTYyMzI0MzEy.html