一段影片可以成為一個你能隨心改變的世界的起點。把參考素材交給 coding agent，讓它研究畫面影格，然後請它將場景重建為程序化程式碼。接著，你就能調整攝影機、燈光、材質或動態，再重新渲染一次。
這就是 Video 2 GLSL 背後的核心理念——一套我圍繞 shader-skills 開發出來的「參考素材到著色器」工作流程。其中最有趣的部分在於，這個流程有多少經驗可以直接套用到下一段影片上。
https://x.com/gokayfem/status/2111907592129671505
相輔相成的兩個部分
shader-skills 為 coding agent 提供了一套圖形技術庫、可運作的範例，以及建構與驗證程序化著色器的流程。Video 2 GLSL 則加入了一項以參考素材為導向的任務：研究影片片段、推導出規格、建構場景，最後將成果與原始片段進行比對。
這項技能支援 Claude Code、Codex、Cursor、Gemini 以及其他 coding agent。其中可重複使用的部分涵蓋了形狀、雜訊、材質、地形、建築、水面、雲層、光線與色彩。你可以用它們來打造原創場景、互動式實驗，或是重現某段影片。
在獨立的 Video 2 GLSL 目標中，最終交付物是一個相容於 Shadertoy 的片段著色器（fragment shader）。幾何結構以數學方式描述，表面是程序化的，而動畫則由時間驅動。參考影片提供了視覺規格；但影片的影格並不會在著色器內直接播放。
第一步：把影片轉化為規格
第一步是穩定地提取影格。單靠一個影片網址或檔名，agent 能掌握的資訊少之又少。它需要實際檢視畫面中出現了什麼，以及這些元素如何隨時間變化。
這個可重複使用的提示詞會要求在撰寫場景程式碼前先產出一份 REFERENCE.md：包含片段基本資訊、鏡頭時間軸、物件清單、主體比例、動態、攝影機構圖、光線以及取樣色票。它也會要求 agent 標出自己無法完全重現的部分，並提出替代方案供你核准。
觀察重點會隨著影片內容而改變。人物鏡頭需要注意接觸點、步伐與次要動態；建築鏡頭需要留意比例、透視與攝影機移動；水面鏡頭則要關注表面流動、反射與深度。同樣的拆解流程，能為每一種情境提供具體的起點。
給 agent 經過測試的圖形積木
一個看起來合理的公式，仍可能產生不安全的距離場、不穩定的雜訊或錯誤的色彩。一旦這些錯誤被埋進龐大的場景裡，就會更難隔離出來。
shader-skills 目前包含橫跨 20 個 GLSL 模組的 186 個函式。agent 可以搜尋特定技術、依名稱呼叫函式庫中的函式，並使用打包工具將其相依項目整合成一個自成一體的著色器。
這個函式庫包含了形狀的符號距離函式（SDF）、用來組合形狀的運算子、程序化雜訊與圖案、射線行進（raymarching）輔助工具、著色、大氣效果與色彩轉換。模板則展示了這些元件如何在完整場景中協同運作。
驗證環節涵蓋了在 WebGL2 中的編譯測試，以及 GPU 上的數值特性檢查：距離場的符號與邊界、雜訊導數、色彩往返轉換，以及其他可檢驗的行為。渲染範例則提供了視覺上的確認。這些檢查讓各個元件更加可靠，但最終場景依然需要人工檢視。
圍繞渲染器建立回饋迴圈
整個工作流程會依序經歷粗略佈局與節奏、動態、主體細節、環境細節、光影與色彩、參考素材比對，以及效能優化。每個里程碑都會產出可見的成果供你評判。
參考素材與渲染結果應該在相同的時間點與構圖下進行比對。用完整影格檢查構圖，用裁切區域檢視物件形狀與材質，用連續影格觀察動態。一張漂亮的靜態截圖，可能會掩蓋滑步、攝影機跳動或過早發生的互動等問題。
提示詞要求反覆進行檢討：找出五個最大的差異、修正它們，然後重新渲染。數據測量能為這個過程提供支援。主體大小與地平線位置有助於診斷攝影機錯誤；取樣色彩能協助判斷調色問題；動態探測則能找出不連貫之處。
快速迭代在這裡至關重要。低解析度預覽與獨立物件檢視，能讓你在投入高成本的渲染之前先修正比例。在打磨材質與光線之前，先確認剪影與物件比例是否正確。
依職責拆分複雜場景
較大型的場景可以讓多個 agent 分工處理不同部分：主體、環境、道具、動態或光線。拆分方式應取決於場景的實際需求。
共用的介面能確保這些工作彼此相容。事先約定好比例、座標、時間點與材質識別碼，讓每個 agent 負責自己的檔案，並要求他們提供實際渲染的證據。協調者（orchestrator）可以整合所有部分，並將合併後的畫面與參考素材進行比對。
這裡最值得重複使用的經驗是檢討機制：必須有人負責評估整體鏡頭。一棟細節豐富的建築或一個逼真的角色，放在整體構圖中仍可能是錯的。
這些實驗證明了什麼
目前完成的作品包括一段帶有動作變化的浮島序列、一段有互動的村莊序列，以及一個無盡街道的循環動畫。它們的需求各不相同：事件節奏、腳步接觸點、攝影機轉場與精確重複，各自需要不同的場景邏輯。它們的完成度與視覺品質也有所差異。
儘管如此，同一套流程在所有案例中都依然實用：提取、測量、組裝、渲染、比對與修正。這個 repo 還包含了程序化城市、地形與水面的範例，另外也有一些獨立的互動式實驗，探索有機形態與黑洞影像。
哪些變得可編輯，哪些仍充滿未知
一旦場景變成程式碼，你就可以開放各種控制項，例如攝影機位置、光源方向、色票、時間節奏與程序化細節。街道實驗就展示了從同一個建構好的場景中切換不同攝影機視角的效果。
但這些新視角也暴露了重建的極限。參考素材只能呈現世界的一部分。被遮擋的表面必須靠推測補齊，而 AI 生成的影片可能包含不斷變化的幾何結構或不一致的動態。某個角度看起來很逼真，並不代表整個場景已經完整且準確。
效能則是另一個因場景而異的結果。細緻的射線行進幾何、植被、陰影與反射都可能非常耗費資源。要在目標機器上測量影格渲染時間，檢查鏡頭中的不同時刻，並在回報未達標的效能時，一併列出剩餘的視覺差異。
Video 2 GLSL 是一套可重複使用的創作工作流程。它在面對任意影片素材時的可靠性，仍需要更廣泛的評估。但目前的工作已經為我們帶來了幾個具體的實驗，以及一套可以持續改進的共用方法。
用你自己的參考素材試試看
如果你使用 Claude Code，請新增 marketplace 並安裝外掛：
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
若使用其他支援的 agent：
npx skills add gokayfem/shader-skills
使用 prompts/video-to-shader-prompt.md，提供參考影片片段、輸出名稱與目標機器，並明確指出哪些部分必須保留、哪些可以省略。在開始實作之前，先檢視拆解結果。
我希望持續推動這個專案，讓「將視覺參考轉化為可編輯的程序化場景」成為一種可靠的方法。每一次的重建，都應該留下更好的工具、更好的測試，以及下一個專案能重複使用的技術。
