2026-08-11

把 3D 模型變成 8 方向精靈表 —— 在瀏覽器裡，免費

把 3D 模型預渲染成 2D 精靈，是遊戲工業裡最老的招數之一。《暗黑破壞神 II》這麼做過，《異塵餘生》這麼做過，2000 年代的一大半韓國網遊也這麼做過：角色只建一次 3D 模，從每個方向各渲一張，出貨的是渲染好的精靈圖。你同時得到 2D 的效能和畫面一致性，以及 3D 動畫的低成本複用。變化的只是它跑在哪——過去需要一套 3D 軟體加渲染腳本，現在在瀏覽器分頁裡就能完成。

新上線的「3D → 精靈圖」工具，接收一個已綁定骨骼的 3D 模型，輸出一張可直接進遊戲的精靈表。這篇講清楚它能做什麼、模型需要什麼條件、哪幾個設定真正重要。

這個工具做什麼

上傳已綁定的 GLB 或 GLTF。工具把它載入即時視口，列出檔案裡自帶的動畫片段供你選擇。選好方向數（4、8 或 16）、相機俯仰角、每方向影格數和輸出單格尺寸，然後渲染。每個「方向 × 影格」組合都在你自己的顯示卡上離屏渲染，最終打包成與動畫、角色工具完全一致的精靈表 + JSON 中繼資料格式——你為那些工具搭好的管線可以原樣複用。

為什麼免費

這背後沒有伺服器 GPU。渲染是跑在你機器上的 WebGL，和瀏覽器裡的 3D 遊戲是同一回事。生成一張精靈表對我們來說零成本，所以對你也零成本：登入即用，不消耗點數。

模型需要滿足什麼

模型必須已綁定骨骼——也就是網格上綁好了骨架——並且骨骼命名要遵循 Mixamo 規範，這是事實上的行業標準。用 Adobe 免費的 Mixamo 服務自動綁定的模型天然滿足；主流 AI 3D 生成器（Meshy、Tripo）的輸出也相容。如果你的模型沒有綁定，先過一遍 Mixamo 的自動綁定，只需要幾分鐘。工具在上傳時就校驗骨架，不能用會明確告訴你原因，而不是渲出一個扭曲的結果。

真正重要的相機設定

俯仰角——相機往下看多少度——是一個全域參數：橫版遊戲用正側 0°，等距視角用 30° 或 45°，俯視用 60°。這裡刻意不給自由相機：所有方向必須共用完全相同的俯仰角，否則精靈表的各行彼此對不齊。

投影方式是更微妙的選擇。正交投影是傳統做法，和瓦片網格嚴絲合縫，但純正交的畫面容易顯得扁平。經典預渲染的質感往往來自長焦鏡頭——視場角很小、相機拉得很遠，接近正交但保留一絲縱深。工具兩種都提供，切換時構圖保持不變，你可以直接對比。

關於像素化選項

有一個可選的像素化後處理，帶描邊偵測。得把話說清楚：它是機械降採樣，不是手工點出來的像素畫。用在原型和想要復古味道的遊戲裡效果不錯，但如果你的美術方向是真正的像素藝術，請把輸出當作可以往上覆蓋細化的底稿，而不是成品素材。

把精靈表接進引擎

JSON 中繼資料裡有兩個細節能幫你省下真金白銀的除錯時間。

錨點。相機在模型四周留了安全邊距，所以每個單格裡角色腳底下方都有一段透明留白。如果按格子底邊定位精靈，角色就是懸空的。JSON 記錄了 footInset 和建議錨點——腳底正下方那個點——讓你第一次就擺對位置。

方向順序。精靈表按方向逐行排列，JSON 裡寫明了每一行對應哪個角度。如果把移動輸入接到行號後發現東西方向互換了，那是手性不匹配——計算行號時把 x 輸入取負即可。

老招數，去掉了舊管線

這裡沒有任何新發明，而這恰恰是重點。預渲染被二十五年的已上市遊戲反覆驗證過。新的地方在於：從「我有一個 3D 模型」到「我有一張帶正確中繼資料的 8 方向精靈表」，現在在瀏覽器裡幾分鐘就能走完——而那些瑣碎的部分：各方向構圖一致、落地錨點、匯出格式，都替你處理好了。