SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场shader-art-coding

shader-art-coding

设计与创作

查看项目

更新于 10-24 16:22

技能介绍

用途

该技能把着色器编写当作视觉工程来做：先明确想要的画面，再选择能产生该画面的最小数学模型，按可检查的阶段逐步搭建，并用调试视图验证每个阶段。适用于程序化 GLSL 片段着色器开发，目标环境为 Shadertoy 的 mainImage 与 WebGL2 / GLSL ES 3.00。

工作流程

  1. 目标：说明画面内容，包括主体、相机与构图、主要形态、材质、光照、运动。
  2. 路线：依据 references/subject-routing.md 选择渲染模型与起始模板——2D 距离场（海报、图标、图案）、SDF 光线步进（物体、角色）、高度场步进（地形）、体积积分（云、烟、火）。
  3. 从库中组装：用 python3 scripts/glsl_tools.py search <words> 或 references/library-index.md 查找构件，按名称调用；不要粘贴或重新推导库代码。
  4. 先出首图：坐标、背景、一个图元、一个光源，然后加入调试视图。
  5. 按顺序细化：比例、构图、材质区分、光照、氛围、颜色、抗锯齿、性能。
  6. 打包并检查：python3 scripts/glsl_tools.py bundle shader.glsl -o out.glsl 只内联实际使用的函数；python3 scripts/glsl_tools.py check out.glsl 进行 lint，并在安装了 glslangValidator 时编译。修复所有错误后交付 out.glsl。

脚本需在本技能目录下运行，仅依赖 Python 3。

约定

  • 坐标：vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;，一个像素为 2.0 / iResolution.y。
  • 场景契约：vec2 map(vec3 p) 返回 vec2(distance, materialId)；raymarch、calcNormal、softShadow、calcAO 与 sdfThickness 均使用它。
  • 调试：#define DEBUG_MODE 0，0 为最终画面，1 距离场，2 法线，3 id，4 步数，5 遮罩，6 光照项。
  • 颜色管线：在线性空间打光，用 srgbToLinear 解码拾取颜色；然后曝光，再色调映射（默认 tonemapAgX，逐 AA 采样），再取平均，线性转 sRGB 一次，最后 ditherTPDF。
  • 距离：遵守 @exact / @bound / @approx 标签；若形变使 Lipschitz 超过 1，需缩小距离或降低 raymarch 的 stepScale。

硬性规则（违反会破坏 Shadertoy/WebGL 兼容性）

  • 不写 #version 行、不自定义 uniform、不使用 gl_FragColor / texture2D / iGlobalTime。
  • 结构体上不用 ?:，改用 vec2(distance, id) 或 if。
  • 写浮点字面量：2.0 * PI、clamp(x, 0.0, 1.0)。
  • 不用 fract(sin(...) * 43758.5453) 哈希，改用 hash12 / hash22 / hash33（整数 PCG）；从旧代码移植时也须替换，check 会把正弦哈希报为错误。
  • 防范 NaN 来源：atan(0, 0)、负数幂、负数开方、normalize(vec3(0))。
  • dFdx / fwidth 不得出现在非一致分支与循环中，或改用显式像素尺寸。

参考路由（按需读取）

  • references/subject-routing.md：从主体（如“水母”“山脉”）出发时，把正式名称映射到主体。
  • references/library-index.md：选函数，列出每个库函数的签名、精确度与用途。
  • references/sdf-library-guide.md：建模，精确度分级、混合、邻域检查重复、形变限制、WebGL 陷阱。
  • references/rendering-pipeline.md：光照装置、阴影/AO、天空与雾、体积、色调映射、AA、性能。
  • references/noise-use-cases.md：选择 Perlin/值/单纯形/细胞噪声，fBm/ridged/billow/warp/hybrid 配方，游戏用例与原始代码链接。
  • references/procedural-buildings.md：地块 ID、建筑体量、退台/屋顶、立面筛选、城市重复与游戏集成。
  • references/terrain-production.md：地形表示、设计山谷、坡度/海拔材质、追踪限制、区块与 LOD。
  • references/water-quality.md：高质量海洋/海岸水、波浪导数、Fresnel/折射/吸收、泡沫、预设与引擎侧升级。
  • references/shader-workflow.md：复杂着色器的端到端规划；审查清单。
  • references/composition-and-debugging.md：画面读不通或视觉异常时使用。
  • references/formula-cookbook.md：多步配方，模块化单元格、地形合成、有机构图。
  • references/formula-code-couples-sdf.md：有机与模块化 SDF 特征的公式到代码。
  • references/formula-code-couples-terrain.md：高度场、密度场、累积、氛围。
  • references/formula-code-couples-materials.md：遮罩、调色板、光照项、润色、运动。

templates/ 中为完整且经渲染验证的起点：raymarch-sdf.glsl、terrain.glsl、ocean.glsl、volumetric-clouds.glsl、sdf-2d-poster.glsl、pattern-swatches.glsl、noise-progression.glsl、noise-terrain-map.glsl、procedural-city.glsl、alpine-valley.glsl、coastal-water.glsl。

输出要求

编写着色器时：

  • 交付打包好、可直接粘贴的 Shadertoy 代码，含 mainImage(out vec4 fragColor, in vec2 fragCoord)。
  • 除非用户提供纹理，否则避免使用纹理。
  • 包含 DEBUG_MODE 开关，并把艺术控制项以常量形式放在顶部。
  • 结尾给出简短调参指南，说明哪些常量控制尺度、柔和度、颜色、光照与运动。
  • 说明是否做了编译检查以及如何检查。
  • 对于建筑/地形/水，区分已实现功能与引擎侧升级项；不要把高度场称为洞穴生成器、把材质窗户称为建模凹槽、把程序化泡沫/焦散遮罩称为流体/光照模拟。
  • 对质量要求，说明目标与预算，暴露预设/调试视图，并检查渲染输出；用 // @variant QUALITY=3 之类的注释标注重要模板预设，便于 CI 编译并渲染；在添加细节前保持地平线/岸线接触与时间滤波。

改进现有着色器时：识别其渲染模型与瓶颈；保持意图与接口；先修正确性，再处理可读性、视觉质量与速度；标出风险改动（坐标尺度、材质 id、循环次数）。

适用场景与限制

适用于 Shadertoy / WebGL2 环境下的程序化图形创作，如 SDF 建模、地形、海洋、云、城市、海报与图案。需注意硬性规则中列出的兼容性限制；脚本仅需 Python 3，编译检查依赖可选的 glslangValidator；纹理需由用户提供。其它收费、平台支持或效果细节资料未提供。

分类：设计与创作（design）