shader-dev
Shader Craft — GLSL 著色器技巧
生成完整、可直接用於生產環境的 GLSL 著色器，用於即時視覺效果——從光線行进 3D 場景到流體模擬——全部在瀏覽器中以 WebGL2 執行。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「shader-dev」。 使用極座標 UV 操作和 Voronoi 調色盤建立萬花筒圖案
預期結果:
- 包含 WebGL2 canvas 的完整 HTML 頁面
- 具有極座標/對數極座標座標變換的片段著色器
- 用於細胞圖案生成的 Voronoi/Worley 雜訊函式
- 用於鮮豔色彩的餘弦調色盤映射
- 透過角度重複實現萬花筒對稱（例如 8 重對稱）
- 基於時間的動畫旋轉以實現動態視覺效果
正在使用「shader-dev」。 建構一個具有柔和陰影和色彩滲透的路徑追蹤全域光照場景
預期結果:
- 具有 Monto Carlo 取樣的完整路徑追蹤器
- 包含多個物件和材質的 SDF 場景定義
- 漫反射和鏡面反射 BSDF 取樣
- Russian roulette 路徑終止
- 用於漸進式渲染的累積緩衝區
- 收斂圖像的色調映射和顯示
安全審計
安全This skill consists entirely of GLSL shader reference documentation (36 markdown files in techniques/ and reference/ directories). Detected risk factors (external_commands, scripts, filesystem, network) are false positives triggered by code examples in markdown documentation. The skill contains no executable scripts, no network requests, no filesystem operations, and no external command invocations. All code samples are GLSL shader snippets for educational/reference purposes. Safe to publish.
品質評分
你能建構什麼
互動式著色器藝術與 Demoscene
使用 GLSL 著色器在網頁瀏覽器中即時執行，創造迷人的視覺藝術作品、demoscene 作品或生成式藝術裝置。結合光線行进、程序雜訊和域扭曲等技巧來產生獨特的視覺效果。
WebGL 遊戲特效與著色器
實現遊戲可用的視覺效果，包括水面/海洋表面、地形渲染、火焰/火花/雪的粒子系統、後處理管線和大氣光照——全部在 WebGL2 中於客戶端執行。
科學視覺化與模擬
建構 GPU 加速的科學資料視覺化：流體動力學模擬、N 體重力模擬、細胞自動機、反應擴散模式，以及體積雲霧/霧氣渲染。
試試這些提示
建立一個獨立的 HTML 頁面，包含光線行进 SDF 場景，其中有幾個幾何物件（球體、方塊、環面），並使用平滑最小值（smin）進行組合。加入柔和陰影、環境光遮蔽和三光源戶外光照模型。包含透過滑鼠控制的相機環繞功能。
生成一個 WebGL2 著色器，渲染程序地形。使用高度場光線行进搭配 FBM 地形（6 個八度並使用導數實現類似侵蝕的細節）。加入雙平面紋理映射、基於高度的大氣散射（使用瑞利/米氏散射），以及海平面處的 Gerstner 波浪海洋。套用 ACES 色調映射和 2x SSAA。
使用 GLSL 中的 Navier-Stokes 求解器建構流體模擬，搭配多通道 ping-pong framebuffer。包含平流、擴散、壓力投影（Jacobi 迭代），以及滑鼠互動以添加染料/速度。使用調色盤來視覺化流場。
為火焰效果建立一個無狀態粒子系統著色器。使用程序雜訊來實現湍流效果，使用從亮黃色到深紅色的漸層暖色調色盤，並進行正確的 Alpha 混合。加入第二層火花，使用另一個帶有重力的粒子系統。
最佳實務
- 始終遵守效能預算：≤ 128 光線行进步驟、≤ 32 體積取樣、≤ 6 個 FBM 八度、≤ 每像素 1000 次巢狀迴圈迭代
- 在 GLSL 中先宣告函式再使用——與 C/C++ 不同，GLSL 並非所有實作都支援前置宣告
- 對需要跨幀保持狀態的效果（流體模擬、路徑追蹤、粒子系統）使用 multipass-buffer 技術
- 正確調整 ShaderToy 程式碼：將 mainImage() 包裝在 main() 中、使用 gl_FragCoord 而非 fragCoord、宣告 out vec4 fragColor
- 偏好使用 const 而非 #define 來定義數值——GLSL 巨集無法使用函式呼叫且有功能限制
避免
- 超出效能預算——每像素超過 1000 次迭代的迴圈會使瀏覽器當機
- 使用 #define 巨集來處理計算值——GLSL 前處理器無法在巨集中評估函式呼叫
- 存取可能被編譯器最佳化掉的 uniform 變數——始終確保 uniform 在片段輸出中被使用
- 在另一個迴圈中巢狀套用光線行进或體積取樣——這會使複雜度倍增並超出 GPU 時間限制
常見問題
我可以直接使用 ShaderToy 的著色器嗎？
techniques/ 和 reference/ 目錄有什麼區別？
如何組合多種著色器技巧？
為什麼某些效果需要多通道渲染？
這些著色器能在手機裝置上運行嗎？
如何偵錯 GLSL 著色器錯誤？
開發者詳情
檔案結構
📄 SKILL.md