無縫切地圖的3D賽車遊戲火了,小哥花16個月用JS打造,瀏覽器免費就能玩_風聞
量子位-量子位官方账号-2022-11-06 13:30
蕭簫 發自 凹非寺
量子位 | 公眾號 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