一款基于Webgl实现的3D类网页游戏

标签: 前端技术 webgl | 发表时间:2012-07-02 20:46 | 作者:editor
出处:http://stblog.baidu-tech.com

摘要:本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏。主要内容包括介绍three.js,如何运用three.js摆放相机,设置相机角度,相机视觉角度转移,场景中物体的位置摆放和贴皮,在3d世界中的直线运动,碰撞检测等。

关键词:3d数学, webgl, three.js,

技术领域:前端开发,游戏开发,3d,webgl

一.   背景

作为 HTML5 大家庭中的一员,相比 CSS3 和 WebSocket 等大家早已熟知的新技术,WebGL 可以说是其中最神秘的一员。长久以来很多人——包括这个圈子里的技术人,对 WebGL 都不是很了解,甚至有很多的误解,但实际上去年一年到现在 WebGL 正在以爆炸般的速度发展着,很多情况都发生了变化。WebGL 就像一只丑小鸭,正在慢慢从土肥圆成长为白富美的公主。实际上,相对于国外,国内这方面的探索还是比较少,因为万恶的喝了三鹿奶粉长大的ie系列占据浏览器半壁江山,决定不可能在短期内大范围运用该技术,即使你做了一个很炫很酷的3D网站,做到逛网站好像第一人称逛商店那样具有3d真是的立体感,上线后pm肯定跟你拼了,因为过半的国内用户无法访问。弹出类似以下的对话框

这样,再好再炫的技术也是没用,因为用户关心的不是背后的技术,而是直接的用户体验。就好像实现同样的页面效果,有人用纯CSS3实现(包括所有图片),也有人直接切图。这显得用CSS3的人很geek,但是上线后根本看不到原有效果,圆形变方形,方形还是畸形,畸形的什么都看不到。说这些无非是想说明webgl其实并不是一个新鲜的概念,而是一门技术而已。没有webgl的,unity3D,flash的stage3D一样可以做到,甚至有过之而无不及,兼容所有浏览器,直接可以商用,给用户就一个字,酷。

那不就是说webgl没用,拼不过flash吗?那还花那么多时间精力去写博客,做demo干嘛。实际上,WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。这样用户就可以不用安装各种各样的插件就可以访问3D型网页了。

PS,上面那段话是摘自百度百科的webgl词条,不相信可以去查一下,一模一样的。不过话说回来,个人鄙见,webgl在pc端是赢不了flash的,起码在未来十年。因为现在98.919%的浏览器都支持flash,用户情愿去装一个flash player,也不愿意改用浏览器(尤其是我们很有爱的ie6 ^_^)。所以pc端的话webgl有点尴尬。不过在移动端方面还是值得期待的,尽管刚刚发布的ios6没有说支持webgl,但是随着HTML5的web app在移动端的普及和硬件的升级,相信webgl还是可以打下移动端的半壁江山的。现在玩webgl相当于玩玩具,实属是各位技术发烧友和Geek打发周末无聊时间的必备良药。

吐槽了大半天,无非是介绍一下背景而已,下面正式开始我们的webgl之旅。

二.Three.js 简介

国外有一位叫mrdoob的哥们,写了一个three.js的框架,对底层的webgl进行封装,极大方便了我们写webgl程序。关于这个框架,详情( https://github.com/mrdoob/three.js/)。

更多精彩的Demo,详见( http://mrdoob.github.com/three.js/) ,更多的基于three.js的第三方游戏框架可参见chandlerprall大牛写的一个插件,详情可见

http://chandler.prallfamily.com/2012/04/physijs-a-physics-plugin-for-three-js/)。

说了这么多,还是有不少人不清楚three.js有什么便利,举个例子,要在场景中画一个立方体,以下代码足够了

 

如果是用原生的GLSL语言(可以理解为一种对底层图形硬件编程的语言),需要手工定义定点着色器,片元着色器,然后定义所有顶点数组,需要比较恐怖的代码量。

最核心的代码也需要以下这些。

以上的代码,其实我也看不明白,大意就是定义一个顶点数组,然后通过顶点着色器把顶点信息传给底层GLSL处理,光是大路货代码就要敲老半天,试问用这种方式还有心情去写具体的业务逻辑吗?

其实物体可以用其各个顶点坐标表示,顶点通过模型视图矩阵转换为视觉坐标,然后通过投影矩阵转换为裁剪坐标,接着通过透视除法规范化设备坐标,最后通过视口变换转变为窗口坐标。这就是一般的顶点变换过程。

所以一般要写webgl程序,都是用现成的封装好的框架,站在巨人的肩膀上。Three.js算是当前一个最流行最好的框架。

三. 游戏的具体实现原理

1. 游戏简介

说了这么多,还没有见到真正的游戏demo,很多童鞋估计要吐槽了。不用急,其实demo是次要,本文最重要的是通过demo去介绍如何使用一些基本的webgl的api和一些思想算法。

Demo的地址页 http://www.bimcad.org/bomber3d/ 源码也在里面,不另外附带。

游戏截图如下

相信不少80后都会记得那个红白机的炸弹人,没错,其实这个demo就是那个游戏的3D版。

2. 摆放相机

为了简化,游戏主要是用第一人称视觉,而不是生化危机那种介于第一和第三人称之间的视觉角度。下面是用Three.js设置相机的代码

其实相机就是相当于人的眼睛,人的眼睛看到的世界相当于一个视景体,如下图。

在计算机中,人能看到的东西其实就只有上图的近平面和远平面之间的东西。

PerspectiveCamera的第一个参数就是上图的视觉,第二第三个参数就是上图的W和H,第四第五个参数分别是近平面距离和远平面距离。至于camera.position.x,y,z这个就是相机在3D世界中的摆放位置。游戏中要移动人物是,只需要改变这三个值就可以了。

3.设置观看点

光是有当前的相机点还是不能确定要观看的东西的,还要设置观看点,例如你在(0,0,0)看(1,1,1)和(-1,-1,-1)是截然不同的两个世界。可以通过下面的代码实现观看点的设置。

大家如果在大一时有过被高数折磨的历史的话,那么恭喜你,下面的内容你应该很快能接受。

 

有人可能会问,为什么上面的公式中每一个后面都“+camera.position”?很明显,这个是因为相对于原点的平移。把当前点作为平移后球面的球心。

4. 如何运动

先看下面的公式

怎样,是不是很熟悉,再次勾起各位的青葱岁月的回忆?其实大学里学的理论知识是有用的。只不过很多人不知道怎样用而已(当然包括我自己,还不能充分运用各种理论知识)。FE们如果不想一辈子做页面,不想成为二八原则中的那80%,不想整天写点高中生就能懂的业务逻辑的话,就马上拾起高数,线代,概率课本复习吧。啊,说错了,上面这个是高中知识点。

如上图,以二维为例,三维一样的道理。假设有当前点是P1(x1,y1),观看点是P2(x2,y2),那么,λ表示的是起点P1到P与P到末点P2的比值。这样通过确定λ,我们就可以得到单位时间移动后的到达的点。程序的核心代码是如下

因为本demo是只在x,z平面,所以不涉及y的运算。当然y的运算一样的道理。

5. 如何确定当前相机所在的区块

见上图,相信有过acm经历的童鞋肯定会对线段树的大路货代码情有独钟。没错线段树的确可以把O(n)效率化成O(logn)效率。由于本demo的特殊性,把整个地图划分为一个一个的正方形区域,有些区域放置木箱,有些区域是道路。所以可以通过二维线段树快速寻找出移动后相机点是否处于木箱区域,从而能够检测碰撞。具体做法如上图把一个正方形划分为四个区域块,如果当前点落在左上方,就递归到左上方继续寻找,需要注意的是“线段”边界的确定,如果中点处不是单位长度的两个端点,那么需要取到线段的两端,然后再继续划分。最后截止划分的结束条件是,划分的区域是“单位长度”。核心代码如下。

关于材质纹理贴图

一个游戏,给玩家的第一感受是美术设计,而不是程序的geek程度。所以即使程序很牛,很复杂,美术UE不过关,也是一个失败品。从这个意义上来说,本demo绝对可以称得上是失败品中的战斗机。

其实运用three.js贴图就好像打字一样简单,如下代码就可以给地面贴图了。

同样,给木箱贴图

本人在3D方面的功力有限,因为没有系统地学习过3D计算机图形学,所以上面的贴图方式在商业中是绝对不能直接采用的,否则效果是巨卡,这里只不过是给大家一个认识而已。

7. 关于键盘按键

    相信做过canvas游戏的童鞋都知道,按键的处理方式了吧。这里就顺便啰嗦一下。按键的处理方式有两种。一种是立即做出反应。比如发射激光枪!按键后,按某种固定速率自动重复,比如每秒发射两次。另一种是根据按键时间长短期发生作用。例如,按方向键向前走,直到松手之后,才会停下。本demo按照第二种方式处理按键。设置一个按键数组,按下某个按键后改变数组中相对应的布尔值为1,表示正在按下该键,这样就可以同时允许按下多个按键,当放开按键,就把对应的数组的布尔值改为0。这样只需要在requestAnimationFrame()中轮询检测键盘数组的各个布尔值做出相应的动作。

四. 结束语

本文简单地介绍了运用Three.js基本的api做出自己的3D游戏。当然Three.js博大精深,很多其他的api都没有用到,例如光照等。只用到了最基本的几个。其实现在有很多很好的three.js物理引擎,例如ammo.js,相机的移动更是应该有现成的框架和方法,本demo都没有用上,而是自己写原生程序,所以疏忽之处在所难免。欢迎各位大神吐槽指教。另外,如果做得深入点的话还可以用nodejs + websocket+ socket.io搭建起在线对抗,类似于泡泡堂。还有添加AI功能等。

 by Wuyaoquan

相关 [webgl 3d 网页游戏] 推荐:

一款基于Webgl实现的3D类网页游戏

- - 搜索研发部官方博客
摘要:本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏. 主要内容包括介绍three.js,如何运用three.js摆放相机,设置相机角度,相机视觉角度转移,场景中物体的位置摆放和贴皮,在3d世界中的直线运动,碰撞检测等. 关键词:3d数学, webgl, three.js,.

Google 用 WebGL 打造 Bookcase 3D 书架

- mike - 谷奥——探寻谷歌的奥秘
Google开发了一个叫做Bookcase的3D书架网页应用,可展示超过一万本图书,被分了28个分类,用鼠标即可让书架一直滚动下去,找到你想要的书. 在你选择了一本书之后,该应用会直接引导你到Google Books在线阅读. 选取图书时还会显示出一个二维码,利用手机扫描也可直接快速在手机上阅读. Bookcase的效果如果将来移植到Android平板上就爽了.

Google Maps WebGL最新版嘗鮮3D建築物地圖效果

- Felix - 電腦玩物
Google地圖的Android版本在很早之前就有3D地圖效果,並且還能讓用戶以45度斜角自由旋轉,在3D建築物之間找路導航. 而現在網頁版的Google Maps也開始嘗試3D地圖模式,雖然效果離Android版本還有段距離,但也是有趣的玩法. 切換到Google地圖MapsGL版本,就可以在拉近到一定距離後,看到支援城市裡的3D建築物模型,如果切換到「衛星」檢視模式,還可以在特定世界名景前採用45度斜角、360度旋轉的檢視模式.

Google 推出3D 書櫃,採用WebGL技術,Chrome用戶獨享

- Roger - 海芋小站
Google Book我想這個服務大家應該對它比較陌生,它是Google的圖書館,主要是讓Google用戶可以線上預覽書籍、雜誌的部份或是全部的內容,進而引發你消費購買此書. 而在Google Books中,有許多的藏書,我想如果你有興趣或需要,或者不知如何使用,可以先看一下本站為您準候的「Google Book,全世界最大的免費圖書館」一文.

HT for Web自定义3D模型的WebGL应用

- - CSDN博客推荐文章
上图是采用 HT提供的 createRingModel函数,通过编辑2D的多边形生成对应的环状的3D模型,对于花瓶碗杯等环形对称的物体很适合采用该函数构建. 除了 createRingModel外,HT的建模手册中的custommodel自定义模型例子,还采用了createExtrusionModel等更多的自定义模型API构建了一个餐桌椅和墙面的场景,其效果如下:.

3款开源PHP网页游戏

- san - 帕兰映像
网上各种Web游戏让我们应接不暇,还记得曾今Ogame的火热吗. 相信很多朋友都拥有一个支持PHP和MySQL 数据库的服务器,何不装上一个网页游戏,再邀上好友一起参与期中呢. 和Ogame一样是一款以太空为背景的策略游戏,在主机上安装和wordpress一样简单. 国内有论坛进行了汉化和优化,名字叫星痕.

WebGL存在严重的安全漏洞

- CandyFrankie - Solidot
Panggit 写道 "HTML5中的WebGL技术已在Firefox和Chrome等浏览器中实现,并被默认开启,但这实际上给浏览器带来了极大的安全隐患. 问题根源在于,大多显卡以及显卡驱动在设计时并不考虑安全问题,而将相关安全问题交由操作系统完成. 但浏览器沙盒跳过了这一环节默认WebGL可以被安全执行,这会使脚本取得跨域名的执行权限,甚至取得访问本地文件的权限.

WebGL版的CryEngine即将到来?

- Dexter.Yy - HiWebGLHiWebGL
不如Source和CryEngine采用WebGL,UE支持Flash,形成 (Valve + Crytek + Mozilla + Google + Apple) vs (Epic + Adobe + Microsoft) 的战争格局罢. 我便是那唯恐天下不乱的开发者~XD. 上周早些时候,Epic Games在Adobe Max大会上演示了支持Flash 11技术的虚幻3引擎,凭借优秀的画面效果和流畅的性能表现,博得了一片赞誉.

WebGL 框架 API 横向评测 (Part 1)

- - HiWebGLHiWebGL
对于互联网来说,除了HTML5和CSS3之外,WebGL也是一项最有前途的正在进化的技术之一. 从简单的模型查看器到复杂的3D场景,由OpenGL ES驱动的网页结合CSS3和视频纹理也许会成为下一代互联网网页的主流. 由于应用广泛,富WebGL应用程序必须易于搭建和渲染,缩短响应时间,提供更好的可扩展性.