太强了!外国小哥花16个月用Three.JS打造了一个无缝切地图的3D开车游戏

·  阅读 17224
太强了!外国小哥花16个月用Three.JS打造了一个无缝切地图的3D开车游戏

外国一位小哥耗时16个月打造的3D版赛车游戏,这两天忽然火了起来。

图片

只需一个浏览器,就能驾车从森林、海滩,“无缝切换”到广袤的沙漠甚至平原。甚至还可以选择春夏秋冬或者白天黑夜的环境风格。

图片

在不想自己开车的时候,竟然还可以开启自动驾驶模式,感受一波“AI飙车”的快乐。

网友们也是嗨得不行:此情此景怎能少得了经典BGM逮虾户(Deja Vu)

下面我们来看看它究竟是怎么实现的。

他是怎么实现的!

这个游戏完全使用Three.js来开发,经大帅测试,这个游戏可以在大部分网页浏览器中运行,甚至在移动端上也有着非常优秀的表现。

此外,开发者还给出了不同级别的渲染设置来保证性能,玩家可以自由选择适合自己设备的配置。是【模糊粗糙】还是【细节丰富】,丰俭由君哦~

除了开头提到的随意切换地点、季节和天气以外,这个赛车游戏也可以随意切换各种车型和视角。

图片

那么这个赛车游戏中“任意变幻”的环境到底是如何生成的?

生成高度图

  • 使用类似于PerlinNoise的算法生成无限平铺的高度图,并加以修改以实现更为逼真的山景。
  • 使用Alea这个库来生成伪随机数。www.npmjs.com/package/ale…

规划道路

  • 公路的起点要选择整个地形世界中不太陡峭,也不能太深的某个地方。将这里作为道路中线的第一个点。
  • 选择一个方向来测试周围的高度图用以评估横向和纵向的梯度。
  • 然后,使中线向一个坡度最小的方向移动10米。这个点的信息被写一个双向链表中,每个点位信息都包含坡度,道路宽度,曲率等元数据。
  • 实现一个永无止境的道路,以距离车辆位置15KM的地平线为界,这是开发过程中耗时最久,让小哥掉了最多头发的一个问题。
  • 使用二次贝塞尔曲线以1m的单位做路线的平滑处理。

图片

地面环境

  • 为了进一步提升性能,靠近道路和远离道路的地块使用了不同网格密度来处理。
  • 道路被渲染为一个简单的矩形网格,由3个高细节块和9个低细节块组成,每个长100m,随着车辆的前进而循环。

图片

图形

  • 地面纹理采用世界坐标UV,并混合PerlinNoise以改变植被的颜色。
  • 基于坡度混合悬崖面纹理和顶点位移。
  • 小哥一开始想实现动态阴影贴图,但过于复杂从而放弃后选择采用一种更简单的方案,就是在树木的下方应用深色纹理,造成有阴影的视觉假象。
  • 所有树叶都由简单的精灵图和几何体组成,将多种变化存储在一个纹理图中,该纹理使用顶点着色器中的噪声采样。

图片

物理系统

  • 每个轮子都单独结合重力,摩擦力和地面法线来独立计算物理上动力学的特性。以此来解决车辆底盘的位置问题。
  • 道路两侧的围挡没有真正的采用物理碰撞算法,而是使用距离检查来解决。
  • 物理特性的计算极其消耗性能,为此小哥去除了树木,指示牌等其他东西物理特性的计算。

优化

  • 通过合并相近网格的几何图形,非常细致的管理实例化对象从而节省提升渲染效率。
  • 车辆在道路中的进行情况会被不断追踪计算,并依据远景能见度来释放不可见的元素并使其重复使用。
  • 提供一系列和质量有关的设定以满足不同设备上的渲染。

开源了吗?

目前这款游戏还没有开源。不过小哥表示,虽然没有开源整个项目的计划,但后续可能会开源部分子系统,如图形MOD接口等。

图片

对于这款游戏的未来,小哥也立下了几个flag,包括在环境上,开发更多的越野地点、加入更多环境细节,包括建筑、动物、植物阴影、灯光效果等;

赛车上,加入更多的赛车皮肤和车辆类型;天气上,细化天气类型(下雨、下雪、刮风等),也进一步改善已有天气的效果;

功能上,将来会加入竞争模式和全球排行榜(包括限时竞速、比拼距离等),同时对系统进一步进行优化,未来适配手柄、赛车模拟器等。

码上掘金体验

和往期分享的threejs项目一样,这个赛车游戏的本地项目代码大帅也已经备份到AwesomeSites仓库中的pack02里了。

github.com/ezshine/Awe…

虽然不是源码,但依然具有学习和参考的价值~


  • 我是大帅老猿,微信公众号同名。
  • 加本人微信交流,个人微信:dashuailaoyuan
  • 👍🏻:觉得有收获请点个赞鼓励一下!
  • 🌟:收藏文章,方便回看哦!
  • 💬:评论交流,互相进步!
分类:
前端
收藏成功!
已添加到「」, 点击更改