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视频

posted on 2010-07-25 23:08  李嘉昱  阅读(16627)  评论(6)  编辑  收藏  举报

导航