AI Skills
shader-dev

shader-dev

熱門

全面涵蓋 GLSL 著色器（Shader）開發技巧，打造震撼視覺效果——包含光線步進（Ray Marching）、SDF 造型建模、流體模擬、粒子系統、程序化生成（Procedural Generation）、光照模型、後處理（Post-processing）等多項核心技術。

1.3萬星標
1139分支
更新於 2026/4/18
獲取技能源代碼

相關技能

fsharp-testing24萬dogfood22萬export-download-debugging9.3萬
SKILL.md
唯讀
名稱
shader-dev
描述

全面涵蓋 GLSL 著色器（Shader）開發技巧，打造震撼視覺效果——包含光線步進（Ray Marching）、SDF 造型建模、流體模擬、粒子系統、程序化生成（Procedural Generation）、光照模型、後處理（Post-processing）等多項核心技術。

Shader Craft

涵蓋 36 種 GLSL 著色器技術（完全相容 ShaderToy）的整合型 Skill，專為即時視覺特效打造。

Invocation

/shader-dev <request>

$ARGUMENTS 包含使用者的需求描述（例如：「建立一個帶有軟陰影的 Raymarching SDF 場景」）。

Skill Structure

shader-dev/
├── SKILL.md                      # 核心 Skill 檔案（本檔案）
├── techniques/                   # 具體技術實作指南（依路由表查閱）
│   ├── ray-marching.md           # 結合 SDF 的 Sphere Tracing 技術
│   ├── sdf-3d.md                 # 3D 符號距離函數（SDF）
│   ├── lighting-model.md         # PBR、Phong 與卡通著色（Toon Shading）
│   ├── procedural-noise.md       # Perlin、Simplex 與 FBM 雜訊
│   └── ...                       # 另外 34 個技術指南檔案
└── reference/                    # 深入參考資料（按需查閱）
    ├── ray-marching.md           # 數學推導與進階設計模式
    ├── sdf-3d.md                 # SDF 延伸理論
    ├── lighting-model.md         # 光照數學深入解析
    ├── procedural-noise.md       # 雜訊函數原理理論
    └── ...                       # 另外 34 個參考資料檔案

How to Use

  1. 查閱下方的技術路由表（Technique Routing Table），確認符合使用者需求的技術
  2. 從 techniques/ 目錄讀取對應的檔案——每個檔案皆包含核心原理、實作步驟與完整的程式碼範本
  3. 若需要更深入了解（如數學推導、進階模式），可點擊技術檔案底部的連結前往 reference/ 查看
  4. 生成獨立 HTML 頁面時，請務必遵守下方的 WebGL2 改編規則（WebGL2 Adaptation Rules）

Technique Routing Table

當使用者想要建立... 主要技術 搭配使用
數學定義的 3D 物件 / 場景 ray-marching + sdf-3d lighting-model, shadow-techniques
複雜 3D 形狀（布林運算、平滑融合） csg-boolean-operations sdf-3d, ray-marching
3D 無限重複圖樣 domain-repetition sdf-3d, ray-marching
有機 / 扭曲造型 domain-warping procedural-noise
流體 / 煙霧 / 墨水效果 fluid-simulation multipass-buffer
粒子特效（火焰、火花、下雪） particle-system procedural-noise, color-palette
基於物理的模擬 simulation-physics multipass-buffer
康威生命遊戲 / 反應擴散 cellular-automata multipass-buffer, color-palette
海洋 / 水面 water-ocean atmospheric-scattering, lighting-model
地形 / 自然景觀 terrain-rendering atmospheric-scattering, procedural-noise
雲朵 / 霧氣 / 體積火焰 volumetric-rendering procedural-noise, atmospheric-scattering
天空 / 日落 / 大氣層 atmospheric-scattering volumetric-rendering
擬真光照（PBR、Phong） lighting-model shadow-techniques, ambient-occlusion
陰影（硬陰影 / 軟陰影） shadow-techniques lighting-model
環境光遮蔽（AO） ambient-occlusion lighting-model, normal-estimation
路徑追蹤 / 全局光照 path-tracing-gi analytic-ray-tracing, multipass-buffer
精確的光線與幾何體交集計算 analytic-ray-tracing lighting-model
體素世界（Minecraft 風格） voxel-rendering lighting-model, shadow-techniques
雜訊 / FBM 紋理 procedural-noise domain-warping
2D 瓷磚平鋪圖樣 procedural-2d-pattern polar-uv-manipulation
Voronoi / 細胞圖樣 voronoi-cellular-noise color-palette
分形（Mandelbrot、Julia、3D 分形） fractal-rendering color-palette, polar-uv-manipulation
調色 / 調色盤控制 color-palette —
輝光（Bloom）/ 色調對映 / Glitch 故障風 post-processing multipass-buffer
多通道 Ping-Pong 緩衝區 multipass-buffer —
紋理 / 採樣技術 texture-sampling —
攝影機 / 矩陣變換 matrix-transform —
表面法線計算 normal-estimation —
極座標 / 萬花筒效果 polar-uv-manipulation procedural-2d-pattern
基於 SDF 的 2D 形狀 / UI sdf-2d color-palette
程序化音訊 / 音樂生成 sound-synthesis —
SDF 實用技巧 / 效能最佳化 sdf-tricks sdf-3d, ray-marching
反鋸齒渲染 anti-aliasing sdf-2d, post-processing
景深 / 動態模糊 / 鏡頭特效 camera-effects post-processing, multipass-buffer
進階紋理貼圖 / 消除接縫平鋪重複 texture-mapping-advanced terrain-rendering, texture-sampling
WebGL2 Shader 錯誤診斷與除錯 webgl-pitfalls —

Technique Index

Geometry & SDF

  • sdf-2d — 用於形狀、UI 及反鋸齒渲染的 2D 符號距離函數
  • sdf-3d — 用於即時隱式表面建模的 3D 符號距離函數
  • csg-boolean-operations — 實體幾何建構（CSG）：聯集、差集、交集與平滑融合
  • domain-repetition — 無限空間重複、折疊與有限瓷磚平鋪
  • domain-warping — 利用雜訊扭曲空間座標，打造流暢的有機造型
  • sdf-tricks — SDF 最佳化、包圍體、二分搜尋修正、抽空（Hollowing）、分層邊緣與除錯視覺化

Ray Casting & Lighting

  • ray-marching — 結合 SDF 的 Sphere Tracing 技術，用於 3D 場景渲染
  • analytic-ray-tracing — 光線與基本幾何體（球體、平面、立方體、環面）的精確解析交集計算
  • path-tracing-gi — 蒙特卡羅路徑追蹤，實現擬真的全局光照
  • lighting-model — Phong、Blinn-Phong、PBR (Cook-Torrance) 與卡通著色（Toon Shading）
  • shadow-techniques — 硬陰影、軟陰影（半影估算）與層級陰影（Cascade Shadows）
  • ambient-occlusion — 基於 SDF 的環境光遮蔽與螢幕空間 AO 估算
  • normal-estimation — 有限差分法求法線、四面體法線計算技術

Simulation & Physics

  • fluid-simulation — 包含平流、擴散與壓力投影的 Navier-Stokes 流體求解器
  • simulation-physics — 基於 GPU 的物理模擬：彈簧、布料、N 體重力場與碰撞
  • particle-system — 無狀態與有狀態粒子系統（火焰、雨滴、火花、星系）
  • cellular-automata — 康威生命遊戲、反應擴散（圖靈圖樣）、沙盒模擬

Natural Phenomena

  • water-ocean — Gerstner 波浪、FFT 海洋波浪、水下焦散（Caustics）與水下霧氣
  • terrain-rendering — 高度圖光線步進、FBM 地形與水蝕效果
  • atmospheric-scattering — 瑞利/米氏散射、耶穌光（God Rays）、次表面散射估算
  • volumetric-rendering — 體積光線步進，用於雲朵、霧氣、火焰與爆炸效果

Procedural Generation

  • procedural-noise — Value Noise、Perlin、Simplex、Worley、FBM 與 Ridged Noise
  • procedural-2d-pattern — 磚牆、六角形、Truchet 與伊斯蘭幾何圖案
  • voronoi-cellular-noise — Voronoi 圖、Worley 雜訊、龜裂大地與水晶紋理
  • fractal-rendering — Mandelbrot、Julia 集與 3D 分形（Mandelbox、Mandelbulb）
  • color-palette — 餘弦調色盤、HSL/HSV/Oklab 色彩空間與動態色彩對映

Post-Processing & Infrastructure

  • post-processing — 輝光（Bloom）、色調對映（ACES, Reinhard）、暈影（Vignette）、色差（Chromatic Aberration）與 Glitch 故障風
  • multipass-buffer — Ping-pong FBO 設置，實現跨訊框（Frame）狀態持續
  • texture-sampling — 雙線性、雙三次採樣、Mipmap 與程序化紋理查表
  • matrix-transform — 攝影機 Look-at、投影、旋轉與軌道控制
  • polar-uv-manipulation — 極座標 / 對數極座標、萬花筒與螺旋對映
  • anti-aliasing — SSAA、SDF 解析反鋸齒、時間序列反鋸齒 (TAA) 與 FXAA 後處理
  • camera-effects — 景深（薄透鏡模型）、動態模糊、鏡頭畸變、底片顆粒與暈影
  • texture-mapping-advanced — 雙平面對映（Biplanar Mapping）、消除紋理重複平鋪與光線微分過濾

Audio

  • sound-synthesis — GLSL 程序化音訊生成：振盪器、包絡線、濾波器與 FM 合成

Debugging & Validation

  • webgl-pitfalls — 常見 WebGL2/GLSL 踩坑點：fragCoord、main() 包裹函數、函數宣告順序、巨集限制與 Uniform 空值

WebGL2 Adaptation Rules

所有技術檔案均採用 ShaderToy GLSL 風格。當生成獨立 HTML 頁面時，請套用以下調整規則：

Shader Version & Output

  • 使用 canvas.getContext("webgl2")
  • Shader 第一行必須為：#version 300 es，片段著色器（Fragment Shader）需加上 precision highp float;
  • 片段著色器必須宣告：out vec4 fragColor;
  • 頂點著色器（Vertex Shader）：attribute → in，varying → out
  • 片段著色器：varying → in，gl_FragColor → fragColor，texture2D() → texture()

Fragment Coordinate

  • 請使用 gl_FragCoord.xy 替代 fragCoord（WebGL2 並未內建 fragCoord 變數）
// 錯誤
vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
// 正確
vec2 uv = (2.0 * gl_FragCoord.xy - iResolution.xy) / iResolution.y;

main() Wrapper for ShaderToy Templates

  • ShaderToy 使用 void mainImage(out vec4 fragColor, in vec2 fragCoord)
  • WebGL2 需要標準的 void main() 入口點——請務必包裹 mainImage：
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    // shader 程式碼...
    fragColor = vec4(col, 1.0);
}

void main() {
    mainImage(fragColor, gl_FragCoord.xy);
}

Function Declaration Order

  • GLSL 要求函數必須在被呼叫前先宣告——可以在呼叫前補上宣告，或是調整函數順序：
// 錯誤 — getAtmosphere() 在定義之前就呼叫了 getSunDirection()
vec3 getAtmosphere(vec3 dir) { return getSunDirection(); } // 報錯！
vec3 getSunDirection() { return normalize(vec3(1.0)); }

// 正確 — 先定義被呼叫者
vec3 getSunDirection() { return normalize(vec3(1.0)); }
vec3 getAtmosphere(vec3 dir) { return getSunDirection(); } // 正常運作

Macro Limitations

  • #define 不可使用函數呼叫——請改用 const：
// 錯誤
#define SUN_DIR normalize(vec3(0.8, 0.4, -0.6))

// 正確
const vec3 SUN_DIR = vec3(0.756, 0.378, -0.567); // 預先計算好的標準化向量

Script Tag Extraction

  • 從 <script> 標籤提取 Shader 源碼時，請確保 #version 是第一個字元——可使用 .trim()：
const fs = document.getElementById('fs').text.trim();

Common Pitfalls

  • 未使用的 Uniform：編譯器可能會自動最佳化掉未使用的 Uniform，導致 gl.getUniformLocation() 回傳 null——請務必確保使用 Uniform 的方式無法被編譯器忽略
  • 迴圈索引：在部分 ES 版本中，迴圈內請使用執行期常數（Runtime Constants），而非 #define 巨集
  • 地形函數：像 terrainM(vec2) 這類函數需要 XZ 分量——請使用 terrainM(pos.xz + offset)，而非 terrainM(pos + offset)

HTML Page Setup

When generating a sta

<!-- truncated for translation batch; full body continues in source -->