关键词：
萧箫 发自 凹非寺
量子位 | 公众号 QbitAI
一位小哥耗时16个月打造的3D版赛车游戏，这两天忽然火了起来。
只需一个浏览器，就能驾车从森林、海滩，“无缝切换”到广袤的沙漠甚至平原：
无论春夏秋冬还是白天黑夜，也无论你用的是电动汽车、自行车（？）还是公共汽车：
甚至不想开的时候，还可以开启自动驾驶模式，感受一波“AI飙车”的快乐。
△甚至有“自”行车&自动驾驶小巴
据小哥表示，这个名叫Slow Road的3D赛车游戏没有用到任何传统引擎，而是基于JavaScript编写的，无需登录就能直接在浏览器上运行。
要是电脑发出了吃力的声音，稍微更改一下渲染配置就能搞定。
网友们也是嗨得不行：此情此景怎能少得了经典BGM逮虾户（Deja Vu）
△作者回复：我写代码时听的是10小时沉浸版
还有网友回忆起了自己几十年前做过的3D赛车游戏，这波属实“爷青回”了：
来看看它究竟是怎么实现的。
基于Javascript而非传统引擎搭建
与大多数3D赛车游戏采用Unity3D、UE等传统引擎不同，Slow Roads是基于JavaScript编写的。
具体来说，它采用了一个名叫Three.js的开源框架，相当于一个能实现3D效果的JavaScript库，基于原生WebGL运行，可以在大部分网页浏览器中搞定交互式2D/3D图形。
除了开头提到的随意切换地点、季节和天气以外，这个赛车游戏也可以随意切换各种车型和视角。
此外，考虑到不同电脑对浏览器的适配，这款赛车游戏还给出了不同级别的渲染设置，从“粗糙大色块”到更精细的树木和围栏都能生成。
要是有电脑显卡的话，还可以更改一下浏览器设置，给图形渲染加加速。
所以，这个赛车游戏中“任意变幻”的环境是如何生成的？
首先是生成环境地形。
小哥采用了类似柏林噪声（Perlin noise）的自定义算法，来生成环境高度图（Heightmap，用于生成三维地形的图像），随后进行简单修改让山景看起来更逼真。
柏林噪声，Ken Perlin发明的自然噪声生成算法，经常用于在游戏和特效中生成随机内容，包括火焰、云彩、奇形怪状的岩石以及树木和大理石表面等。
△高度图，图源维基百科
随后是制作赛道。
选择地图上一个不太陡峭/凹陷的地方作为起点后，选择一个方向并测量周围高度图，以坡度最缓的路线作为道路中线，并给每个点注释上元数据，包括道路宽度、曲率等。
值得注意的是，如果赛道铺到一半出现“打结”的情况，也就是铺到一半撞到了一起，一定要想办法解决。这也是道路铺设最难的地方之一：
△车在岛上狂转
接下来就是渲染环境了。
从图中来看，整体环境被分成了很多个分辨率10m的大型网格，最大视距1km²；靠近道路时，每个网格又会被分成5×5的较小网格。
越接近道路中线，渲染越精细，最终道路高度和底层环境高度之间会进行插值，尽量让它保持“无缝衔接”。
当然小哥表示，这种衔接并不是“真·无缝”的，但通常看不出来。
最后就是整个环境的渲染了，这里面也有一些小细节：
包括地面和悬崖纹理、基于柏林噪音做草色变化，以及给树木等植被加上简单阴影、在湖泊周围渲染更多树等。
除了环境之外，就是一些基础物理学的配置了，包括重力、表面摩擦力和动力学计算等。
不过为了节省性能，小哥忽略了提示牌和树木的碰撞。
此外，他也采用了更“平和”的电动汽车作为核心赛车手，因为这样一来就不需要考虑齿轮或RPM等部件，而音频和物理特性也更容易编写了。（小哥称：内燃机正逐渐过时！）
当然，随着这款游戏的关注度上升，他表示后续还会进行更多优化。
未来支持手柄和汽车模拟器
随着人们对这款游戏的好奇度提升，小哥也着重解答了几个热点问题。
例如，采用JavaScript编写游戏的原因，是因为小哥想改变人们对浏览器的“刻板印象”，它可以做到比查资料更广泛的事情，甚至还能更好地对游戏性能进行优化。
不过，目前这款游戏还没有开源。小哥表示，后续可能会开源部分子系统，如图形MOD接口等。
对于这款游戏的未来，小哥也立下了几个flag，包括在环境上，开发更多的越野地点、加入更多环境细节，包括建筑、动物、植物阴影、灯光效果等；
赛车上，加入更多的赛车皮肤和车辆类型；天气上，细化天气类型（下雨、下雪、刮风等），也进一步改善已有天气的效果；
功能上，将来会加入竞争模式和全球排行榜（包括限时竞速、比拼距离等），同时对系统进一步进行优化，未来适配手柄、赛车模拟器等。
你做好上班摸鱼的准备了吗？（手动狗头）
玩耍地址：
https://slowroads.io/
参考链接：
[1]https://twitter.com/anslogen
[2]https://news.ycombinator.com/item?id=33305234
[3]https://anslo.medium.com/slow-roads-tl-dr-a664ac6bce40
[4]10小时版逮虾户:https://www.youtube.com/watch?v=9ILQNSgE7mw
浏览器上享受《速度与激情》，开发者花16个月用javascript造了一款驾驶游戏，水里也能开车！
整理|苏宓出品|CSDN（ID：CSDNnews）有些人玩游戏，是为了寻求刺激；有些人玩游戏，是为了休闲安静地打发时间。二者的感受如何才能兼得，近日，苏格兰爱丁堡的一位开发者Anslo潜心开发了16个月&#x... 查看详情
浏览器上享受《速度与激情》，开发者花16个月用javascript造了一款驾驶游戏，水里也能开车！
整理|苏宓出品|CSDN（ID：CSDNnews）有些人玩游戏，是为了寻求刺激；有些人玩游戏，是为了休闲安静地打发时间。二者的感受如何才能兼得，近日，苏格兰爱丁堡的一位开发者Anslo潜心开发了16个月&#x... 查看详情
《fomo3d》评测，贴在脸上的庞氏骗局火了！
7月16日笔者曾经测试过这款游戏，当时这个游戏的资金并不多，仅有不到800ETH的资金池。但是7月21日资金池已经暴涨到11402ETH，在短短的3天时间里24小时活跃用户量也响应翻了近10倍。根据数据显示，这款游戏是在19日开始大量用... 查看详情
arcgis,用arccatalog切全国地图，大概需要2个月，如果中间断电或者啥的，停了，怎么继续切图啊？
1、arcmap编辑切图区域shp格式分几个矩形区域2、切到一半断了后之前切的那些瓦片图是在，所以继续切的时候选择更新模式recreateemptytiles参考技术A断电这种意外是没法避免的，你要考虑怎么去优化切图方案，提高效率，从而避免... 查看详情
SpriteKit 中的假 3D 赛车手
】SpriteKit中的假3D赛车手【英文标题】：Fake3DracerinSpriteKit【发布时间】：2015-08-1413:45:50【问题描述】：我阅读了这篇关于创建像Outrun或Lotus这样的老式赛车游戏的文章。Linktoarticle那里的代码基于HTML画布元素和JavaScript。为了实现3... 查看详情
非科班ai小哥火了：他没有ml学位，却拿到deepmind的offer
...c;DeepMind研究工程师小哥AleksaGordić的个人经验贴在Twitter上火了一把。不到半天时间，点赞达431。重点是，这位小哥啥机器学习（ML）学科背景都没有，但在接触ML仅3年后，顺利入职DeepMind。他强调自己不是... 查看详情
noi2017[noi2017]游戏2-sat
...策略。题目描述小L计划进行nn场游戏，每场游戏使用一张地图，小L会选择一辆车在该地图上完成游戏。小L的赛车有三辆，分别用大写字母A、B、C表示。地图一共有四种，分别用小写字母x、a、b、c表示。其中，赛车A不适合在地... 查看详情
用unity3d开发赛车游戏碰到的几个问题，求高手解答
...么简单的问题,用不着算法,你想多了建议你先把官方那个赛车游戏摸摸透,那样就会了本回答被提问者采纳 查看详情
linux赛车游戏supertuxkart1.0正式发布
SuperTuxKart是一款受MarioKart（马里奥赛车）启发并以Linux/Tux为主题的开源赛车游戏，经过12年多的开发，已经达到1.0版本。并且确定这个版本确实是一个重要的里程碑。SuperTuxKart1.0已经发布，现在已经发布SuperTuxKart的网络支持，可... 查看详情
linux赛车游戏supertuxkart1.0正式发布
导读SuperTuxKart是一款受MarioKart（马里奥赛车）启发并以Linux/Tux为主题的开源赛车游戏，经过12年多的开发，已经达到1.0版本。并且确定这个版本确实是一个重要的里程碑。SuperTuxKart1.0已经发布，现在已经发布SuperTuxKart的网络支持... 查看详情
请问，赛车游戏如何来判断到达终点呢
赛车游戏有好多圈，如何来判断到达终点，跑完了所有的圈呢。不清楚unity3d中如何来做。参考技术A开到终点被本回答被提问者采纳 查看详情
游戏的 3D 文件格式
...理想情况下，它们应该支持动画，但我也对可能用于构建地图 查看详情
unity无缝循环世界实现
...趣，但是对这个题材倒是有点想法。如何通过unity3d实现无缝的循环世界呢。有一种想法是动态生成，一块场景一块场景进行动态加载。（做过2D背景地图加载的可能理解，不展开）如果是单场景，有没有简单的办法呢？思来想去... 查看详情
我在用unity3d编一个赛车游戏，其中遇到了几个问题：
1：我是菜鸟，请告诉我如何让赛车的动作更真，就是按下加速时慢慢的加速，然后慢慢的停下，。2，如何让赛车到终点后结束游戏并统计出名次。谢谢问题1：解决方案：速度增加和减少用插值在达到目标速度前用临时速度代替... 查看详情
基于html5和js实现的切水果游戏
切水果游戏曾经是一款风靡手机的休闲游戏，今天要介绍的就是一款网页版的切水果游戏，由JavaSript和HTML5实现，虽然功能和原版的相差太大，但是基本的功能还是具备了，还是模仿的挺逼真，有一定的JavaSript水平的朋友，可以... 查看详情
unity制作赛车游戏，车子加了刚体和碰撞体为啥车子死活不动？
参考技术Aunity制作赛车游戏，车子加了刚体和碰撞体为什么车子死活不动是不是传递系统有问题。简介：Unity是实时3D互动内容创作和运营平台。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助Unity将创意变... 查看详情
手把手学会人工智能：tensorflow实现马里奥赛车自动驾驶，含源码
手把手学会人工智能：TensorFlow实现马里奥赛车自动驾驶，含源码这次年假没啥事做，作者想着试试完成一个两年前就已开始的项目：训练人工智能神经网络来玩《马里奥赛车64》游戏。因为一年前做过一些机器学习，现在想蹭个... 查看详情
noi2017游戏
https://www.luogu.org/problemnew/show/P3825 如果没有x地图，每场比赛只有两种选择赛车的方案，而且只能选择其中一个这是一个2-SAT问题对于约束条件（i，hi，j，hj）若hi不能选，第i场比赛的可选赛车中不存在hi，所以此条件忽略若hj... 查看详情