Rocaille Shader 技能用于生成有机、旋涡状的光效，其核心是渐进式域扭曲（domain warping）技术：通过反复用正弦函数迭代位移坐标，逐步构建出越来越复杂的图案。
核心公式为 v += sin(v.yx + t) / amplitude，其中 v 是二维坐标向量，v.yx 交换 x/y 分量以形成特征性旋涡，t 为时间用于动画，amplitude 控制扭曲强度（1.0 为强，4.0 为弱）。每次迭代都会增加更多有机复杂度。
扭曲次数与效果对应关系：1-2 次为细微波动，适合背景和轻微运动；3-5 次为有机流动，适合音乐可视化和英雄区；6-9 次为复杂旋涡，适合迷幻效果和主视觉；10 次以上为混沌效果，适合实验性和故障艺术。
使用方式：通过命令行脚本生成着色器，需指定扭曲次数（1-15）、颜色模式（basic、rainbow、monochrome、neon 或自定义 RGB）和输出格式（shadertoy、threejs、webgl、p5js）。示例命令：python3 scripts/rocaille_generator.py --warps 5 --color rainbow --format shadertoy。可选参数包括 --warps N（默认 5）、--color MODE（默认 rainbow）、--format FMT（默认 shadertoy，可选 all）、--amplitude N（默认 2.0）、--speed N（默认 1.0）、--demo（生成交互式 HTML 演示页）。
资产模板：assets/templates/ 中提供预置模板，包括 shadertoy.glsl（Shadertoy 兼容片段着色器）、threejs.js（带 uniforms 的 Three.js ShaderMaterial）、vanilla-webgl.html（纯 WebGL2，无依赖）、p5js.js（P5.js 着色器模式集成）、interactive.html（带控件的完整演示）、liquid-logo.glsl（Shadertoy 液态 Logo 参考，读取 iChannel0）、liquid-logo.html（独立液态 Logo 运行时，可将 logo.png 放在旁边或通过 ?logo=… 传入）。
实现模式：提供最小 Shadertoy 示例和 Three.js 集成示例。自定义方面，可替换基础形状（如 length(v) 为反色暗中心、sin(length(v) * 10.0) 为波纹环、abs(v.x) + abs(v.y) 为菱形、max(abs(v.x), abs(v.y)) 为方形），也可进行颜色映射（基于角度的彩虹、霓虹辉光、温度渐变）。
液态 Logo 模式：将域扭曲系列应用于纹理而非程序化距离场。指针驱动的径向扭曲加色差使静态图像或 SVG Logo 在光标周围产生涟漪、弯曲和折射，指针不活动时可选 Lissajous 空闲呼吸。适用于英雄区、品牌展示、加载时刻或任何希望 Logo 有生命感的悬停状态。生成自包含 HTML 的命令：python3 scripts/rocaille_generator.py --mode liquid-logo --input path/to/logo.svg --output liquid.html。输出将图像嵌入为 base64 数据 URI，生成单个无外部依赖的 HTML 文件。调优参数包括 --distortion（默认 0.40，峰值 UV 拉向光标）、--radius（默认 0.25，高斯衰减半径，越小涟漪越紧）、--decay（默认 3.0，释放衰减率，越高松弛越快）、--chroma（默认 0.015，RGB 通道 UV 分离幅度）、--idle / --no-idle（默认开启，光标静止时的 Lissajous 空闲呼吸）。运行时遵循 prefers-reduced-motion（减半扭曲和空闲幅度），并在 visibilitychange 时暂停 RAF 循环，标签页隐藏时零 GPU 消耗。
参考文档：references/rocaille-complete.md（完整 8 步着色器分解）、references/domain-warping.md（Inigo Quilez 理论）、references/glsl-patterns.md（常用 GLSL 模式）、references/liquid-logo.md（液态 Logo 数学：衰减、拉拽、色差偏移）、references/fluid-dom.md（实时 DOM 上的稳定流体模拟：Navier-Stokes 管线，VFX-JS 谱系）。
组合效果：可与其他技术叠加，包括 Bloom（对亮区应用高斯模糊）、Grain（添加 fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453)）、Vignette（乘以 1.0 - length(uv) * 0.5）、色差（在略微偏移的 UV 处采样 RGB）。
归属：Rocaille 域扭曲技术的核心公式和理论来自 Inigo Quilez 的域扭曲文章。液态 Logo 模式受 Gustav WF 的 LiquidLogo（免费 Framer 组件）启发，但此处着色器是从第一性原理重新实现，并非其代码移植。Astryx-statue 模式研究自 Astryx（Framer + Unicorn Studio），深度视差着色器技术源自 Robin Delaporte 的 CodePen，生产参考为 BrokenSource 的 DepthFlow（AGPL，仅参考，非依赖）。Fluid-DOM 模式研究自 Amagi 的 "Stable Fluid on VFX-JS" CodePen，着色器谱系为 Pavel DoGreat 的 WebGL-Fluid-Simulation（MIT），理论为 Jos Stam 的 "Real-Time Fluid Dynamics for Games"（GDC 2003）。