HTML5以及WebGL和Canvas

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

标签: HTML5WebGl
阅读更多

没有更多推荐了,返回首页