無縫切地圖的3D賽車遊戲火了，小哥花16個月用JS打造，瀏覽器免費就能玩_風聞

　　蕭簫 發自 凹非寺

　　量子位 | 公眾號 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