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

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/