無(wú)縫切地圖的3D賽車游戲火了，小哥花16個(gè)月用JS打造，瀏覽器免費(fèi)就能玩

蕭簫 發(fā)自 凹非寺

量子位 | 公眾號(hào) QbitAI

一位小哥耗時(shí)16個(gè)月打造的3D版賽車游戲，這兩天忽然火了起來(lái)。

只需一個(gè)瀏覽器，就能駕車從森林、海灘，“無(wú)縫切換”到廣袤的沙漠甚至平原：

無(wú)論春夏秋冬還是白天黑夜，也無(wú)論你用的是電動(dòng)汽車、自行車（？）還是公共汽車：

甚至不想開的時(shí)候，還可以開啟自動(dòng)駕駛模式，感受一波“AI飆車”的快樂(lè)。

△甚至有“自”行車&自動(dòng)駕駛小巴

據(jù)小哥表示，這個(gè)名叫Slow Road的3D賽車游戲沒(méi)有用到任何傳統(tǒng)引擎，而是基于JavaScript編寫的，無(wú)需登錄就能直接在瀏覽器上運(yùn)行。

要是電腦發(fā)出了吃力的聲音，稍微更改一下渲染配置就能搞定。

網(wǎng)友們也是嗨得不行：此情此景怎能少得了經(jīng)典BGM逮蝦戶（Deja Vu）

△作者回復(fù)：我寫代碼時(shí)聽的是10小時(shí)沉浸版

還有網(wǎng)友回憶起了自己幾十年前做過(guò)的3D賽車游戲，這波屬實(shí)“爺青回”了：

來(lái)看看它究竟是怎么實(shí)現(xiàn)的。

基于Javascript而非傳統(tǒng)引擎搭建

與大多數(shù)3D賽車游戲采用Unity3D、UE等傳統(tǒng)引擎不同，Slow Roads是基于JavaScript編寫的。

具體來(lái)說(shuō)，它采用了一個(gè)名叫Three.js的開源框架，相當(dāng)于一個(gè)能實(shí)現(xiàn)3D效果的JavaScript庫(kù)，基于原生WebGL運(yùn)行，可以在大部分網(wǎng)頁(yè)瀏覽器中搞定交互式2D/3D圖形。

除了開頭提到的隨意切換地點(diǎn)、季節(jié)和天氣以外，這個(gè)賽車游戲也可以隨意切換各種車型和視角。

此外，考慮到不同電腦對(duì)瀏覽器的適配，這款賽車游戲還給出了不同級(jí)別的渲染設(shè)置，從“粗糙大色塊”到更精細(xì)的樹木和圍欄都能生成。

要是有電腦顯卡的話，還可以更改一下瀏覽器設(shè)置，給圖形渲染加加速。

所以，這個(gè)賽車游戲中“任意變幻”的環(huán)境是如何生成的？

首先是生成環(huán)境地形。

小哥采用了類似柏林噪聲（Perlin noise）的自定義算法，來(lái)生成環(huán)境高度圖（Heightmap，用于生成三維地形的圖像），隨后進(jìn)行簡(jiǎn)單修改讓山景看起來(lái)更逼真。

柏林噪聲，Ken Perlin發(fā)明的自然噪聲生成算法，經(jīng)常用于在游戲和特效中生成隨機(jī)內(nèi)容，包括火焰、云彩、奇形怪狀的巖石以及樹木和大理石表面等。

△高度圖，圖源維基百科

隨后是制作賽道。

選擇地圖上一個(gè)不太陡峭/凹陷的地方作為起點(diǎn)后，選擇一個(gè)方向并測(cè)量周圍高度圖，以坡度最緩的路線作為道路中線，并給每個(gè)點(diǎn)注釋上元數(shù)據(jù)，包括道路寬度、曲率等。

值得注意的是，如果賽道鋪到一半出現(xiàn)“打結(jié)”的情況，也就是鋪到一半撞到了一起，一定要想辦法解決。這也是道路鋪設(shè)最難的地方之一：

△車在島上狂轉(zhuǎn)

接下來(lái)就是渲染環(huán)境了。

從圖中來(lái)看，整體環(huán)境被分成了很多個(gè)分辨率10m的大型網(wǎng)格，最大視距1km2；靠近道路時(shí)，每個(gè)網(wǎng)格又會(huì)被分成5×5的較小網(wǎng)格。

越接近道路中線，渲染越精細(xì)，最終道路高度和底層環(huán)境高度之間會(huì)進(jìn)行插值，盡量讓它保持“無(wú)縫銜接”。

當(dāng)然小哥表示，這種銜接并不是“真·無(wú)縫”的，但通?？床怀鰜?lái)。

最后就是整個(gè)環(huán)境的渲染了，這里面也有一些小細(xì)節(jié)：

包括地面和懸崖紋理、基于柏林噪音做草色變化，以及給樹木等植被加上簡(jiǎn)單陰影、在湖泊周圍渲染更多樹等。

除了環(huán)境之外，就是一些基礎(chǔ)物理學(xué)的配置了，包括重力、表面摩擦力和動(dòng)力學(xué)計(jì)算等。

不過(guò)為了節(jié)省性能，小哥忽略了提示牌和樹木的碰撞。

此外，他也采用了更“平和”的電動(dòng)汽車作為核心賽車手，因?yàn)檫@樣一來(lái)就不需要考慮齒輪或RPM等部件，而音頻和物理特性也更容易編寫了。（小哥稱：內(nèi)燃機(jī)正逐漸過(guò)時(shí)！）

當(dāng)然，隨著這款游戲的關(guān)注度上升，他表示后續(xù)還會(huì)進(jìn)行更多優(yōu)化。

未來(lái)支持手柄和汽車模擬器

隨著人們對(duì)這款游戲的好奇度提升，小哥也著重解答了幾個(gè)熱點(diǎn)問(wèn)題。

例如，采用JavaScript編寫游戲的原因，是因?yàn)樾「缦敫淖內(nèi)藗儗?duì)瀏覽器的“刻板印象”，它可以做到比查資料更廣泛的事情，甚至還能更好地對(duì)游戲性能進(jìn)行優(yōu)化。

不過(guò)，目前這款游戲還沒(méi)有開源。小哥表示，后續(xù)可能會(huì)開源部分子系統(tǒng)，如圖形MOD接口等。

對(duì)于這款游戲的未來(lái)，小哥也立下了幾個(gè)flag，包括在環(huán)境上，開發(fā)更多的越野地點(diǎn)、加入更多環(huán)境細(xì)節(jié)，包括建筑、動(dòng)物、植物陰影、燈光效果等；

賽車上，加入更多的賽車皮膚和車輛類型；天氣上，細(xì)化天氣類型（下雨、下雪、刮風(fēng)等），也進(jìn)一步改善已有天氣的效果；

功能上，將來(lái)會(huì)加入競(jìng)爭(zhēng)模式和全球排行榜（包括限時(shí)競(jìng)速、比拼距離等），同時(shí)對(duì)系統(tǒng)進(jìn)一步進(jìn)行優(yōu)化，未來(lái)適配手柄、賽車模擬器等。

你做好上班摸魚的準(zhǔn)備了嗎？（手動(dòng)狗頭）

玩耍地址：
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小時(shí)版逮蝦戶:https://www.youtube.com/watch?v=9ILQNSgE7mw

— 完 —