外国一位小哥耗时16个月打造的3D版赛车游戏，这两天忽然火了起来。
只需一个浏览器，就能驾车从森林、海滩，“无缝切换”到广袤的沙漠甚至平原。甚至还可以选择春夏秋冬或者白天黑夜的环境风格。
在不想自己开车的时候，竟然还可以开启自动驾驶模式，感受一波“AI飙车”的快乐。
网友们也是嗨得不行：此情此景怎能少得了经典BGM逮虾户（Deja Vu）
代码片段
下面我们来看看它究竟是怎么实现的。
他是怎么实现的！
这个游戏完全使用Three.js来开发，经大帅测试，这个游戏可以在大部分网页浏览器中运行，甚至在移动端上也有着非常优秀的表现。
此外，开发者还给出了不同级别的渲染设置来保证性能，玩家可以自由选择适合自己设备的配置。是【模糊粗糙】还是【细节丰富】，丰俭由君哦~
除了开头提到的随意切换地点、季节和天气以外，这个赛车游戏也可以随意切换各种车型和视角。
那么这个赛车游戏中“任意变幻”的环境到底是如何生成的？
生成高度图
- 使用类似于PerlinNoise的算法生成无限平铺的高度图，并加以修改以实现更为逼真的山景。
- 使用Alea这个库来生成伪随机数。https://www.npmjs.com/package/alea
规划道路
- 公路的起点要选择整个地形世界中不太陡峭，也不能太深的某个地方。将这里作为道路中线的第一个点。
- 选择一个方向来测试周围的高度图用以评估横向和纵向的梯度。
- 然后，使中线向一个坡度最小的方向移动10米。这个点的信息被写一个双向链表中，每个点位信息都包含坡度，道路宽度，曲率等元数据。
- 实现一个永无止境的道路，以距离车辆位置15KM的地平线为界，这是开发过程中耗时最久，让小哥掉了最多头发的一个问题。
- 使用二次贝塞尔曲线以1m的单位做路线的平滑处理。
地面环境
- 为了进一步提升性能，靠近道路和远离道路的地块使用了不同网格密度来处理。
- 道路被渲染为一个简单的矩形网格，由3个高细节块和9个低细节块组成，每个长100m，随着车辆的前进而循环。
图形
- 地面纹理采用世界坐标UV，并混合PerlinNoise以改变植被的颜色。
- 基于坡度混合悬崖面纹理和顶点位移。
- 小哥一开始想实现动态阴影贴图，但过于复杂从而放弃后选择采用一种更简单的方案，就是在树木的下方应用深色纹理，造成有阴影的视觉假象。
- 所有树叶都由简单的精灵图和几何体组成，将多种变化存储在一个纹理图中，该纹理使用顶点着色器中的噪声采样。
物理系统
- 每个轮子都单独结合重力，摩擦力和地面法线来独立计算物理上动力学的特性。以此来解决车辆底盘的位置问题。
- 道路两侧的围挡没有真正的采用物理碰撞算法，而是使用距离检查来解决。
- 物理特性的计算极其消耗性能，为此小哥去除了树木，指示牌等其他东西物理特性的计算。
优化
- 通过合并相近网格的几何图形，非常细致的管理实例化对象从而节省提升渲染效率。
- 车辆在道路中的进行情况会被不断追踪计算，并依据远景能见度来释放不可见的元素并使其重复使用。
- 提供一系列和质量有关的设定以满足不同设备上的渲染。
开源了吗？
目前这款游戏还没有开源。不过小哥表示，虽然没有开源整个项目的计划，但后续可能会开源部分子系统，如图形MOD接口等。
对于这款游戏的未来，小哥也立下了几个flag，包括在环境上，开发更多的越野地点、加入更多环境细节，包括建筑、动物、植物阴影、灯光效果等；
赛车上，加入更多的赛车皮肤和车辆类型；天气上，细化天气类型（下雨、下雪、刮风等），也进一步改善已有天气的效果；
功能上，将来会加入竞争模式和全球排行榜（包括限时竞速、比拼距离等），同时对系统进一步进行优化，未来适配手柄、赛车模拟器等。
码上掘金体验
和往期分享的threejs项目一样，这个赛车游戏的本地项目代码大帅也已经备份到AwesomeSites仓库中的pack02里了。
https://github.com/ezshine/AwesomeSites
虽然不是源码，但依然具有学习和参考的价值~
- 我是
大帅老猿，微信公众号同名。 - 加本人微信交流，个人微信：
dashuailaoyuan。 - 👍🏻：觉得有收获请点个赞鼓励一下！
- 🌟：收藏文章，方便回看哦！
- 💬：评论交流，互相进步！
暂无评论内容