跳至內容

AI 代理為網頁打造 3D 世界。

以瀏覽器原生執行的 3D 遊戲,具備自製模型、真實物理互動,以及可供探索的完整世界。

公開實驗室流程

可供檢視的 AI 作品。

探索已發表的作品 ↗
  1. AI 創作者

    從模型 → 物理 → 瀏覽器遊戲

    AI 代理負責場景創作、模型整合,以及互動與物理程式碼的撰寫。

  2. AI 檢視

    測試可玩世界

    代理執行遊戲,並檢查其機制、視覺效果與效能表現。

  3. 經驗回饋

    工具與提示持續精進

    所得發現會被記錄下來,並納入建構者的指引與工具,供未來的工作使用。

於實驗室中打造。

探索所有實驗室 ↗

鹹風崗哨——黎明時分白堊海岸上的一架郵遞滑翔機

three.js · 滑翔飛行

鹽風驛站

關於此專案

駕著一架完全沒有引擎、由帆布與黃銅打造的滑翔機,沿白堊海崖進行黎明郵運任務。高度是你唯一的籌碼:可換取速度,也能在崖壁升流或海鷗盤旋標示的熱氣流中重新換回;穿越三個投遞圈環,最後降落在沙洲上。空氣煞車是唯一能讓 17:1 滑翔比的機身安全降落的方式。以 Blender 雕塑的滑翔機與海岸地形、三自由度飛行模型,以及隨高度耗盡從豎琴轉為大提琴的配樂。

灰燼站——暮色天空下,灰燼平原上的探勘車

three.js · 載具巡覽

灰燼站

關於此專案

駕駛六輪探勘車穿越正在冷卻的火山灰平原,記錄三個感測環,並在轟炸來襲前趕回站點停機坪。預警落下的熔岩彈採用連續碰撞偵測,若逗留在地表過久,灼熱地殼會侵蝕你的載具外殼;車輛若翻覆則會自動翻正,因為輪型載具翻倒後將完全失去牽引力。以 Blender 雕塑的探勘車與站點模型,也是本實驗室首件採用 Rapier 物理引擎(而非 cannon-es)的作品——附有促成此決策的效能基準測試。

微光巷——工坊燭光中的微光精靈

three.js · 彈珠賽道

微光巷

關於此專案

滾動一顆熔蠟球,穿越沉睡蠟燭匠的工坊,重新點燃大燭芯。蠟是你的生命值、重量與速度:餘燼床會使你熔化得更小更快,霜凍池則會讓你增重,重到足以撞碎脆弱的蜂巢橋。以 Blender 雕塑的世界、cannon-es 物理引擎,搭配取樣樂器配樂。

AI 代理從概念出發,逐一資源打造成品

AI 代理將概念資料包轉化為資源清單,在 Blender 中製作模型,並在 three.js 中組裝互動世界。每件作品都以工作室等級的概念資料包為根基——關鍵美術、正交轉向圖、三個環境區域、道具、材質——並附有一份書面的元素清單,證明每項具名物件都確實成為了真實的 Blender 資源。驗證程序會在缺漏項目時阻擋作品完成。

ELEMENT_INVENTORY.md14/14 已建模
主視覺帆船三視圖 → skiff.glb · 已烘焙法線
燈塔 · 海蝕拱門 · 碼頭區域 1 設定圖 → 3 個 glb,實例化
地面 · 水面 · 船體材質標註板 → 依表面分別設定著色器
概念元素若沒有對應資產列 = 建置不予出貨。

先灰盒,後美術

整個遊戲場域在任何美術出現之前先以灰盒形式試玩——趁改配置只要幾分鐘的階段,就把比例、鏡頭和難度定案。之後成品資產一對一替換替身;美術出現後配置絕不重新設計。

粗模 → 完稿
生成的灰模研究稿,展示具三個平台、兩座橋樑與佔位障礙物的 3D 遊戲場地
灰模粗模
生成的成品美術視角,攝影機與物件位置與灰模相同,呈現石造平台、木橋與主角角色
完稿美術
在 Blender 花掉一分鐘之前,手感和可讀性已經用試玩證明。

專業質感,Web 預算

高模細節被烘焙到精簡的遊戲網格上,接著每個模型都會壓縮——量化幾何、WebP 貼圖——並由確定性驗證器強制執行硬預算:總容量、單一檔案上限、三角形數、Draw Call 數。

資料量 — 主視覺場景低於預算
skiff.glb11.0MB 雕塑模型 → 烘焙並壓縮
2.0MB
3D 資料總量上限 12MB · 9 項資產,實例化 ×140
7.4MB
渲染統計首幀自動回報
176 次繪製 · 412k 三角形

驗證到與自己的美術對上為止

完成的遊戲會被試玩、截圖,並對照它自己的概念圖包評判——剪影、配色、材質、動態、音訊——迭代到一張誠實的並排對照看起來就是同一套美術方向為止。不是「看起來還行」,而是「對得上」。

概念一致性 — 第二輪通過
主體剪影 + 配色與三視圖誤差在容許範圍內
區域造型 + 材質3 個區域與設定圖相符
動作組合 + 合理性無滑步、無漂浮物、無接縫
第 1 輪發現 3 處偏差 → 自動修正 → 複評通過。

一件作品如何誕生

01

概念圖包

七張圖稿 + 生產必須滿足的元素清單。

02

灰盒階段

任何美術之前灰盒先行試玩——手感先定。

03

Blender 世界

雕塑、烘焙、壓縮——每類一次,按擺放實例化。

04

three.js + 物理

隨附打包的引擎檔案、真實剛體物理,不靠 CDN。

05

驗證到零發現

對照自己的概念評判,直到並排對照對上為止。

常見問題解答

為什麼用 three.js 而不是大型引擎?

因為產出是純靜態檔案:同一份建置能在網頁、Android/iOS App 外殼和桌面應用程式裡執行,免安裝,容量僅個位數 MB。對 Web 原生 3D 來說,這份觸及本身就是重點。

這些模型真的是 AI 做的嗎?

是——代理針對平台雕塑套件撰寫 Blender 腳本:雕塑、重拓撲、UV、法線/AO 烘焙、骨架綁定、動作捕捉重定向。每次匯出出貨前都經過數值驗證。

是什麼擋住醜的建置出貨?

它自己的概念圖包。視覺評審會把算出的實機畫面與每張圖稿對照,發現偏差就擋下收尾——外加對容量、三角形數和 Draw Call 的確定性預算門檻。

我能自己做一個嗎?

可以——AI 遊戲建構器跑的正是這條流程。描述一個 3D 遊戲;圖包、清單、灰盒、資產與驗證也會為你的建置逐一完成。

我可以直接在瀏覽器中體驗作品嗎?

本實驗室專注於瀏覽器渲染的 3D 體驗。使用專案的「試玩」按鈕開啟已發佈的成品,並查看該作品提供的操作說明。

在 3D 需求說明中,該如何描述鏡頭?

說明玩家是以第一人稱、第三人稱、俯視角還是固定視角觀看世界,並解釋遊玩過程中哪些畫面內容需要保持可見;鏡頭同時影響操作手感與機制的可讀性。

除了視覺風格之外,還應該注意什麼?

在主要動作進行時,實際測試移動、碰撞、互動回饋與鏡頭表現。令人信服的 3D 場景同時需要清楚易懂的操作方式與可運作的遊戲循環。

打造你自己的 3D 遊戲

描述它。建構器會畫概念、雕資產、寫程式碼並驗證成果。