台北狂飆為什麼不卡又逼真？跟 Zoonster 差在哪

2026-10-23

先講清楚這篇在比什麼：一邊是 台北狂飆，一個人做的網頁 3D 遊戲，作者是 Threads 上的 @aicodewithme；另一邊是我們自己在做的 Zoonster 3D 冒險遊戲，拿來比的是「動物園」那一關。不是在比 SNOW 滑雪。

會寫這篇，是因為我自己在手機上玩台北狂飆，第一個感覺是：地圖很大、很像真的台北，而且不卡。回頭玩我們的動物園，反而有點卡。兩個都是網頁遊戲，連用的 3D 引擎都是同一套（three.js），差在哪？

我請團隊裡負責遊戲手感的 agent 拆了一次。下面寫的都是從它公開的網站和程式看得到的東西，加上我們自己這邊量到的數字。它那邊沒有實際量到每秒幾格，因為在我們的電腦上它要載好幾分鐘才進得去，所以只比「它怎麼設定」，不比格數。

一、手機不卡：它在 iPhone 上自動用最低畫質

這是最讓我意外的一點。台北狂飆一偵測到是 iPhone，就自動選「低」畫質。我在手機上看到的畫面，其實是它把最貴的效果全部關掉之後的樣子：

• 沒有即時影子
• 沒有後製（不做整張畫面的調色、光暈、抗鋸齒，直接畫到螢幕上）
• 最簡單的打光，貼圖縮小
• 地上沒有一根一根的草，只有顏色深淺
• 忙不過來的時候，先把看得到的距離縮短一點、影子隔一格才畫，解析度也是一直微調

我們的動物園剛好相反。手機上預設是「漂亮」：有影子、有整張畫面的後製、有一根一根的草。量下來，模擬 iPhone 在城裡每一格要畫約 67 萬個三角形，其中大約一半是草。台北狂飆整張地圖的地形加上樹、路燈這些擺設，加起來才十幾萬個三角形。

說穿了很簡單：它不是比較會「撐」，而是在手機上很捨得砍。電腦上才把影子、光暈、精細打光打開。

二、地圖很大卻不卡

• 整座城在進遊戲前就蓋好。 載入畫面一段一段跑，房子、街道、招牌都先算完。代價是載入比較久，但玩的時候不會「第一次看到什麼就頓一下」。
• 房子是程式自動長出來的，一批一批畫。 地圖照一份台北的道路資料，路有名字、有一般道路和高架。房子沿著路用程式生成，同一種房子一次畫一大批。最後再挑 101 這種地標特別做。
• 遠處用霧蓋掉。 地圖有好幾公里大，但同一時間只畫附近幾百公尺。
• 它用的是比較新的 three.js。 新版可以把一整區的房子合成一次畫完，我們目前用的版本比較舊，沒有這個功能。

三、為什麼看起來像真的

我原本以為「逼真」是模型做得很細。拆完才發現，它靠的大多是感覺：

• 認得的地方。 101、西門町、夜市、中文招牌、滿街機車。不同街區有不同的店，西門町多球鞋和美妝，大安多咖啡和小籠包。熟悉的東西一出現，腦袋就自己補成「這是真的」。
• 傍晚和夜景。 天色暗下來，窗戶一格一格亮著。暗的畫面不需要影子也很好看，這是最便宜的逼真。招牌和窗戶是用程式畫的圖，不是很多面的模型，所以再多也不貴。
• 聲音。 引擎聲跟著轉速走，車子從旁邊呼嘯而過有都卜勒的音高變化，還有喇叭聲。
• 速度感。 越快視野越廣、鏡頭會震。
• 只有在地人懂的細節。 機車待轉、垃圾車停在巷口。這種東西模型不用多精緻，看到就會笑出來。

四、我們要學什麼、不學什麼

要學的：

• 手機再降一階：草減半、影子只留腳下的圓影、後製只留一層。先出前後對照圖給我看再上線。
• 自動畫質調得更細。我們現在只有三段，而且只調解析度。忙的時候應該先縮可視距離、影子隔格畫。
• 重的準備工作搬到載入時做，像裝備、特效、怪第一次出現。
• 聲音、光線、速度感先做。成本最低、效果最大。SNOW 滑雪已經照這個加了聲音和速度感。

不學的： 寫實的畫風。它逼真是因為畫的是大家認得的真實城市，我們是 Q 版怪獸的世界，要變寫實等於整個美術重做。比較值得借的是「傍晚、窗戶亮燈」這種氣氛。

五、我們也照這套想法蓋了一座滑雪場

拆完台北狂飆，我最想試的不是改動物園，而是另開一個新場景：照真實的地方蓋一座滑雪場。我們選了一座真實的滑雪場。

做法幾乎就是台北狂飆那一套，只是把台北的街道換成雪道：

• 地圖照真實資料。 雪道和纜車來自 OpenStreetMap，一共 36 條雪道、7 條纜車；山的高低用公開的地形高度資料，30 公尺一格。
• 大量的東西用程式擺。 樹林、山腳的建築、排隊欄杆、造雪機，照資料和規則自動長出來，同一種東西一次畫一大批。
• 再挑幾個地方細做。 山腳的雪具大廳、初級區、吊廂和吊椅站，這些是大家一到就會看到、會認得的地方。
• 纜車是會動的。 吊廂、吊椅一直在跑，山上有人在滑。這種「活著」的感覺，比把一棟房子做得很細更像真的。

現在已經可以在網頁上轉著看、飛一圈。去過那座雪場的人看到，應該認得出是哪一條雪道。

雪道和纜車資料 © OpenStreetMap 貢獻者。

最後

這次最大的收穫，是把「逼真」和「不卡」拆開來看。不卡，是在手機上很捨得關效果；逼真，是讓玩家認得出來、聽得到、感覺得到速度。兩個都不一定要靠更精細的模型。

謝謝台北狂飆的作者做了一個這麼好的例子，一個人能把一座城做到這樣，很厲害。