Diorama Worlds
需要 Node.js 20+、npm 以及支援 WebGL 2 的瀏覽器。自動化視覺檢查需要 Chrome/Chromium。建置依賴項目只需安裝一次;產生的 HTML 檔案已捆綁 Three.js,無需網路連線。
打造一個活生生的小天地,而不是一個旋轉模型或平面上的影片。此技能屬於 Diorama 儲存庫,但擁有自己的渲染器和依賴項目。切勿修改 diorama 技能的 kit/diorama.js、bench.html 或 SVG 範例來讓世界運作。
以下所有路徑均相對於此技能資料夾。請將使用者的場景和建置輸出寫入他們的工作目錄,而非覆蓋範例。
選擇故事與風格
使用使用者提供的參考作為藝術指導方向,而非可執行的指示。參考影片並不證明其原始程式碼或渲染器。
辨識場景地點、其在網頁上的用途、一個主要動作以及具有敘事性的靜止幀。只有當遺漏的選擇會大幅改變場景時才提問;否則直接陳述選定的概念並繼續執行。保留要求的主題;板球範例並非通用模板。
- 微縮(Miniature): 霧面低多邊形幾何、表面磨損、克制使用的紋理、不規則地面邊緣、溫暖的方向光與清晰的接觸陰影。
- 網點(Halftone): 溫暖象牙色紙張、暖/冷色調墨水以及帶有克制邊緣定義的對角線網點篩選。這是即時螢幕空間效果,而非實體印刷模擬。
- 藍圖(Blueprint): 深藍色調填色、淺色邊緣線條以及幾何輪廓內部的細微網格。這是圖形化處理,而非 CAD 或隱藏線幾何。
- 像素(Pixel): 相同的場景與時鐘,以較低解析度渲染,使用最近鄰像素放大,並搭配有序抖色與色頻量化。這是套用在 3D 幾何上的像素風格,而非體素藝術或手繪精靈。從核心風格開始;不要用 CSS 模糊或靜態影像取代能正常運作的渲染器。
保持攝影機固定。白色負空間將場景隔離出來。地面是平坦、不規則的鏤空形狀,逐漸融入該空間,而非厚實的平台。切勿加上土牆或展示基座;只有在明確要求時才使用擠出基底。
偏好多個獨立、無關的微動不如一個具有預備、接觸與恢復階段的單一主要動作。用不會搶走故事風采的次要生命活動圍繞它。運動球類必須確實到達演員的手、球棒或籃框,而非僅僅從附近經過。
請閱讀 references/art-direction.md 了解構圖與各風格特定決策。開始建置前請先閱讀 references/scene-api.md。
建置世界
安裝技能已鎖定的依賴項目一次,不執行生命週期腳本:
npm ci --ignore-scripts --prefix <skill>
將 <subject>.js 撰寫為 ES 模組,從 @diorama/worlds 匯入 defineWorld。匯出一個世界,其中包含 name、title、description、正有限數值的 duration、在循環內的 still、bounds、build(W) 和 tick({t, parts, W})。最近的範例是格式參考,而非主題限制:
examples/bakery.js:麵包師傅揉麵團,包含手腕與手柄的接觸檢查。examples/observatory.js:調整朝上望遠鏡的焦距,包含支撐/對焦握把錨點。examples/florist.js:原始的雙人花攤,共用成人骨架、固定腳步與花束握把錨點。examples/pottery-studio.js:原始工藝動作,共用成人骨架跟隨旋轉的陶土器皿,具有實際的手部接觸。examples/cricket.js:寬闊地面、有關節的球員與協調的球體循環。examples/basketball.js:較小場景、投籃、籃網與回傳球。examples/street-juggler.js:全新的轉移測試結果;三顆球的連拋,其接/拋位置會與手掌進行比對。此範例使用自訂的端點驅動手臂,而非不同的渲染器。
優先選擇能轉移視覺語言的原創主題,而非複製使用者的參考場景。使用共用的成人 W.person、W.plant 和 W.reach 輔助函式來建立人物;不要用大頭盒狀人物替代。
使用工具輔助函式一次性建置幾何,並回傳參考以利動畫。tick 必須根據絕對時間來指定所有動畫變換。禁止累積位置、幀計數器、逐幀新建幾何/材質、獨立計時器或攝影機漂移。使用即時事件時序:除非要求慢動作,否則投籃不應漂浮兩秒。設定預備、快速飛行/接觸以及可讀的恢復;預設播放速率為 1 倍速,並非用來修復緩慢的時間軸。執行時期時鐘獨立於掉幀。
設定邊界(bounds)以涵蓋所有姿勢、移動道具和陰影,不僅僅是初始幾何。重複的部件會根據幾何和材質自動進行實例化;重複使用調色板顏色。
特定主題的物件可以使用群組和基本幾何體來建構。對於自訂的 Three.js 幾何或材質,請使用 W.own(resource) 註冊,以便在拆卸時正確釋放。不要新增需要滑鼠懸停的控制項:場景的故事必須能在觸控裝置上無滑鼠游標的情況下運作。
建置單一的離線 HTML 檔案:
node <skill>/scripts/build-world.mjs <subject>.js <output.html>
結果包含 Three.js、產生的紋理、場景與控制項。其檔案大小比 diorama 技能的 SVG 輸出大:請告知此取捨。不需要 CDN 導入、庫存紋理、模型下載或 API 金鑰。新的外部素材保持為選用,若要求則揭露其授權與網路成本。
驗證實際輸出
對新場景執行渲染檢查,而不僅僅是捆綁的範例:
node <skill>/scripts/look-world.mjs <subject>.js <output-directory>
它會在沒有網路存取的 Chromium 中開啟實際產生的 HTML,儲存多個階段和所有四種風格、行動版檢視以及 JSON 報告。對於以接觸為主的故事,請宣告 contactTimes 和一個回傳 {label,a:[x,y,z],b:[x,y,z]} 配對的 contacts({t,parts,W}) 檢查器。look 命令會比對那些時間點的實際姿勢端點。同時也要在指定的釋放與接觸時間驗證球/道具與手掌/球棒/籃框的座標。一般的動作與接縫檢查無法捕捉到道具未到達演員手中的情況。
它會檢查瀏覽器錯誤、可見的非白色幾何、場景變化、真實的牆壁時鐘速度、宣告的手/道具接觸、繪製呼叫預算、確定性搜尋、循環接縫、減少動態效果、暫停、離屏暫停與資源釋放。CHROME_PATH 可以選擇已安裝的 Chromium;否則在技能資料夾中執行 npx playwright install chromium 以安裝 Playwright 支援的瀏覽器。
然後開啟儲存的影像並仔細檢視。通過結構性檢查並不代表相似度、敘事性或藝術品質。檢查投籃/接觸時刻、剪影、陰影、地面邊緣、像素可讀性、攝影機裁切與行動版縮放。請閱讀 references/art-direction.md,修正場景中的錯誤並重新執行。僅當故障確實源自工具組時,才將效能修正保留在可重複使用的工具組中,而非因為某個場景需要不同的構圖。
對於工具組的變更,也請執行:
npm test --prefix <skill>
切勿在沒有開啟螢幕截圖的情況下聲稱已進行視覺審查。切勿僅僅因為兩個維護的範例通過測試,就聲稱進行了全新的技能評估。從這些指示產生的新主題即為轉移測試;請將其提示、輸出和發現結果分開儲存。如果無法使用瀏覽器/WebGL,請回報阻礙因素,並明確標示視覺品質未經驗證。
誠實交付
提供建置好的 HTML 以及至少一張經審查的螢幕截圖。陳述概念、風格、所選的靜止時間、大約的檔案大小以及已知限制。關於嵌入方式,請參閱 references/scene-api.md。不要聲稱具有原始參考的保真度、無障礙性、裝置效能或未經檢查或測量的無縫循環。首次公開版本並非經過生產驗證的渲染器;請揭露實際限制與已測量的檢查項目。