AI Skills
shader-dev

shader-dev

热门

全面的 GLSL 着色器技术指南，助力打造惊艳的视觉特效 —— 涵盖光线步进 (Ray Marching)、SDF 建模、流体模拟、粒子系统、程序化生成、光照渲染、后处理等核心技术。

1.3万Star
1139Fork
更新于 2026/4/18
获取 Skill源代码

相关 Skills

fsharp-testing24万dogfood22万frontend-testing15万
SKILL.md
只读
名称
shader-dev
描述

全面的 GLSL 着色器技术指南，助力打造惊艳的视觉特效 —— 涵盖光线步进 (Ray Marching)、SDF 建模、流体模拟、粒子系统、程序化生成、光照渲染、后处理等核心技术。

Shader Craft

统一的 Shader 开发 Skill，涵盖 36 种用于实时视觉特效的 GLSL 着色器技术（兼容 ShaderToy）。

Invocation

/shader-dev <request>

$ARGUMENTS 包含用户的请求（例如："create a raymarched SDF scene with soft shadows"）。

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 适配规则

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
环境光遮蔽 (Ambient Occlusion) ambient-occlusion lighting-model, normal-estimation
路径追踪 / 全局光照 path-tracing-gi analytic-ray-tracing, multipass-buffer
精确光线与几何体求交 analytic-ray-tracing lighting-model
体素世界（体素/我的世界风格） 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 泛光 / 色调映射 (Tone mapping) / 故障风 (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 着色器错误 / 调试 webgl-pitfalls —

Technique Index

Geometry & SDF

  • sdf-2d — 2D 有向距离函数，适用于形状、UI 及抗锯齿渲染
  • sdf-3d — 3D 有向距离函数，适用于实时隐式曲面建模
  • csg-boolean-operations — 构造实体几何 (CSG)：带平滑融合的并集、差集和交集运算
  • domain-repetition — 无限空间重复、折叠与有限平铺
  • domain-warping — 利用噪声扭曲空间域，创建有机流动形状
  • sdf-tricks — SDF 性能优化、包围体、二分查找精细化、镂空、分层边缘及调试可视化

Ray Casting & Lighting

  • ray-marching — 基于 SDF 的球体追踪，用于 3D 场景渲染
  • analytic-ray-tracing — 解析式光线与几何图元求交（球体、平面、立方体、圆环体）
  • path-tracing-gi — 用于逼真全局光照的蒙特卡洛路径追踪
  • lighting-model — Phong、Blinn-Phong、PBR (Cook-Torrance) 及卡通渲染
  • shadow-techniques — 硬阴影、软阴影（半影估计）、级联阴影
  • ambient-occlusion — 基于 SDF 的 AO 及屏幕空间 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 噪声、Perlin、Simplex、Worley、FBM 与 Ridged 噪声
  • 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）、晕影、色差与故障风
  • multipass-buffer — Ping-pong FBO 设置及跨帧状态持久化
  • 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")
  • 着色器首行：#version 300 es，片元着色器添加 precision highp float;
  • 片元着色器必须声明：out vec4 fragColor;
  • 顶点着色器：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) {
    // 着色器代码...
    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> 标签提取着色器源码时，确保 #version 为首个字符 —— 使用 .trim()：
const fs = document.getElementById('fs').text.trim();

Common Pitfalls

  • 未使用的 Uniform：编译器可能会优化掉未使用的 uniform，导致 gl.getUniformLocation() 返回 null —— 务必以编译器无法优化掉的方式使用 uniform
  • 循环索引：在部分 ES 版本中，循环中请使用运行时常量，而非 #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 -->