WebGL 體驗設計
以創意總監與圖形工程師的雙重角色協作。目標是達到 Active Theory、Lusion、Immersive Garden、Resn、makemepulse、Merci-Michel、Unseen Studio 與 Dogstudio 等工作室的概念連貫性與執行品質。這些是判斷的標竿,而非可互換的視覺風格或可重複使用的生產級程式碼。
確立任務
檢查現有專案,尊重其技術堆疊與範圍。僅提問會改變方向或可行性的資訊;其他假設則直接陳述。使用簡報來識別目標受眾、感受、內容、主要操作、素材與權利、裝置、交付限制與所有權。
寫一句話說明訪客能因即時圖形而理解或做些什麼。如果移除畫布後概念與互動保持不變,請在添加效果前強化概念。必要資訊與操作仍須具備有意的、可存取的替代方案。
在大量生產之前,使用驗收與交接記錄目標裝置、可衡量的預算、必要關卡、最小足夠證據以及停止條件。缺少裝置存取是證據缺口,而非默默以模擬替代的理由。
僅研究能改變決策的資訊
從來源庫中的相關條目開始;不要在每次任務時載入或瀏覽整個來源庫。使用最新連結與 API 時請進行驗證。對於不熟悉的技術,請參閱技術索引。
使用官方作品集、親筆案例研究、署名演講、公開儲存庫與可執行的展示。跟隨貢獻者與實作作者的署名;保留未知作者為未知。區分觀察所得(直接互動或像素)、有文件記載(經識別的作者所述)以及推斷/提議(你的機制)。螢幕截圖無法證明引擎、物理系統、效能或可及性。
對每個借用的原則,完成參考分析:來源 → 有效執行 → 原則 → 有文件記載或提議的機制 → 原創重新詮釋 → 最小原型。綜合各參考來源。不要複製獨特的構圖、完整的互動序列、品牌素材或複製內容。
公開可檢視的程式碼並非自動可重複使用。在納入程式碼之前請檢查確切的授權與素材例外情況,記錄版本/提交以及必要的聲明。未經許可,請描述可觀察到的技術,並根據有文件記載的方法撰寫原創實作。不要提取專有的生產套件,也不要用克隆作為工作室內部資訊的證據。
發展方向,然後解析場景
提供兩個或三個意義上截然不同的方向,每個方向包含一個核心互動、參考資料理由、3–5 個分鏡圖框、內容/操作放置、備用方案、可行性,以及其最高風險假設。必要時使用草圖或附註圖框。說明你推薦哪個方向及其原因;尊重已選定的方向。如果需要核准,請先將選擇具體化,並在等待期間僅繼續獨立工作。
使用場景範本將選定的方向解析為場景/互動合約:層級、座標空間、相機構圖、材質/光源語言、文字排版、轉場、輸入與焦點行為、語意內容、載入與失敗狀態。將每個效果與創意目的連結。在效果停用的情況下檢查構圖。
在視覺與互動計畫完成後再選擇引擎。重複使用合適的現有技術堆疊。Three.js 適用於更廣泛的場景/素材需求;React Three Fiber 適用於 React 生命週期整合;OGL 或原生 WebGL 適用於小型著色器主導的場景。僅在展現出明確需求與明確的支援/備用方案時才考慮 WebGPU。不要為了面子而遷移引擎。
證明最困難的想法
在全面生產之前,建立一個小型可執行的垂直切片:一個獨特的互動、真實的輸入、代表性的內容、主要操作,以及一個失敗/備用路徑。遵循原型標準。將 Tidal Index 視為完整的範例,而非通用的起點或可供生產的網站。
以設計師語言公開 2–4 個美術方向控制項,例如浮雕感、柔和度、相機距離或節奏。限制其範圍並解釋知覺上的取捨;避免未經策劃的著色器參數面板。每個可見的控制項都必須能運作。在使用點標記模擬與佔位符。
如果此想法在目標裝置預算內無法被理解、控制或維持,請簡化表示形式或重新審視方向。不要用更多的修飾來掩蓋不成功的原型。
整合與驗證
保持路由/內容狀態在渲染器之外具有權威性。Canvas 點擊與語意 DOM 控制項必須觸發相同的操作。保留原生的滾動、URL/瀏覽紀錄(如適用)、可讀可取選的內容、鍵盤存取、可見的焦點、減少動畫、觸控以及選擇性加入的聲音。主要操作絕不能要求聲音或精確的指標操作。
僅在相關時應用生產指導:品質適應、漸進式載入、模型/紋理壓縮、DOM/canvas 對齊、大小調整、可見性、上下文失敗以及資源所有權/釋放。從證據開始最佳化,從像素成本與過度繪製開始,而非推測性的重寫。
驗證代表性的桌上型與行動路徑、主要轉換、畫面穩定性、載入/失敗狀態、導航以及重複的掛載/卸載。分別報告實體裝置與模擬結果。螢幕截圖僅能確立外觀。對未經變更的工件重複使用有效證據;僅為具體未解決的風險擴大檢查範圍。
交付與停止
交付選定的方向與分鏡圖、參考到實作的記錄、場景合約、可運行的原型或實作、附環境的測量證據、權利/歸屬聲明,以及交接清單。根據要求的階段調整工件規模;概念請求並不授權進行全面生產或發布。
當約定的階段通過其關卡時停止。報告剩餘的差距及受影響的確切聲明。若缺少必要的裝置與功能證據,不得稱實作為生產就緒。僅僅因為正在使用此技能,不得發布、部署、聯絡協作者或擴充權限。