好工匠不缺工具,缺的是「知道每件工具在流程里的位置」。这一章把 Shader 生态的工具按试玩 → 学习 → 创作 → 落地四个环节摆开,每件都告诉你什么时候该拿起它。全是免费或有免费档的。
1在线游乐场
Shadertoy
Shader 界的 GitHub + 美术馆。数十万个带源码的作品,全部可在线改。你的下一步就是它,下一节专讲怎么用好。
Graphtoy
iq 做的函数绘图器,内置 GLSL 全部数学函数。写效果前先在这里看曲线——本书 fn-plot 组件就是向它致敬。
twigl
Shader 高尔夫场:比谁的代码短。围观 300 字符内的银河与海洋,是理解「数学即画面」的震撼教育。
Book of Shaders 编辑器
极简无干扰的在线编辑器,教材配套,适合贴片段快速验证。
Shader Playground
Shader 界的 Compiler Explorer:看你的 GLSL 被各家编译器编成什么样。好奇心工具,偶尔救命。
GL Transitions
上百个开源转场效果的画廊,3.5 章框架直接兼容。做转场前先来逛,大概率已有人写好。
2怎么"读"Shadertoy
Shadertoy 是宝库也是劝退圣地——首页全是几百行的 Ray Marching 神作。正确打开方式:
- 对照翻译表看代码。Shadertoy 有自己的约定,对应关系一共就这几条:
mainImage(out vec4 fragColor, in vec2 fragCoord)是入口(fragCoord 即 gl_FragCoord.xy);iResolution= uResolution、iTime= uTime、iMouse= uMouse、iChannel0~3= 输入纹理。移植时机械替换即可(3.5 章五步法)。 - 按「New + Love」排序而不是热门。热门榜是大神竞技场;按新作+受欢迎排序能看到大量「简单但巧」的作品,适合拆。
- 搜本书教过的关键词。「dissolve」「pixelate」「frosted glass」「CRT」——你会发现大部分实现和本书 Demo 结构一致,阅读毫无障碍;偶尔遇到新招,恭喜,白捡一个。
- Fork 着改,别只看。右上角 fork 之后随便折腾,0.2 章调试三板斧(输出中间值)在这里同样是读懂别人代码的第一工具。
- 多 pass 作品看 Buffer 标签页。Buffer A/B/C/D 是多趟渲染(前一趟的输出当下一趟的输入),这是 GLSurfaceView 能做、AGSL 做不了的那类东西(3.4 章边界)。
3本地与桌面工具
| 工具 | 形态 | 适合场景 |
|---|---|---|
| glslViewer | 命令行(Mac/Linux/树莓派) | 本地文件实时热重载:glslViewer effect.frag,存盘即刷新。配自己的编辑器写 Shader 的最顺路径,Book of Shaders 作者出品 |
| KodeLife | 桌面 App(全平台) | 专业级实时编辑器:多 pass、MIDI/音频输入,VJ 和现场演出圈的标配;免费版够用 |
| SHADERed | 桌面 IDE(开源) | Shader 界的完整 IDE:断点、逐像素调试、性能分析——「没有调试器」的日子它能部分终结 |
| VS Code + 插件 | 编辑器扩展 | 「Shader languages support」高亮 + 「glsl-canvas」侧边实时预览;写 res/raw 里的 .frag 文件时体验飞升 |
| Bonzomatic | 桌面(演出向) | Shader Live Coding 比赛(Revision 等 demoparty)用的现场编码器,围观即震撼教育 |
4Android 专属工作流
把工具串成本书推荐的完整流水线:
- AGSL 试炼场:Google 官方开源了 AGSL 相关示例与 官方文档(文档里的示例都能直接跑);社区的「AGSL playground」类 App 可在手机上直接改代码看效果,搜 Play Store。
- 调试帧内容:Android GPU Inspector(AGI)能逐 draw call 看纹理与耗时;简单场景用 GPU 渲染分析条(开发者选项)够了。
- 真机差异测试:Adreno / Mali / PowerVR 对精度和边界情况的处理不同(0.3 章精度坑),上线前至少各测一台;模拟器的 GPU 是宿主机的,不算数。
- 性能红线:写复杂效果时打开「HWUI 呈现模式分析」,绿线(16ms)是及格线;吃不消就用 1.5/2.1 章的降本三招。
5素材库与学习资源
The Book of Shaders
公认最好的 GLSL 入门书(有中文版),交互式。和本书视角互补:它更艺术,本书更工程。
iq 的文章库
Inigo Quilez——SDF、噪声、调色板的源头。本书引用的每个公式这里都有原始推导,够你挖三年。
The Art of Code
YouTube 频道,从零 live coding 各种效果(2.3 章的雨滴玻璃它有完整三集)。跟敲一遍胜读十篇。
LYGIA
模块化 Shader 函数库:噪声、SDF、色彩空间全有,GLSL/HLSL/WGSL 多语言,#include 即用。别再手抄 hash 了。
Desmos
不会写造型函数就先在这里拖参数;和 Graphtoy 二选一,顺手就好。
pouet.net
Demoscene 大本营:4KB 装下整个世界的艺术。想知道 Shader 的上限在哪,来这里受打击。
本章小结
- 流水线:浏览器(本书 Demo/Shadertoy)调效果 → VS Code + glsl-canvas 维护 .frag → 真机验证性能与精度。
- Shadertoy 移植对照:mainImage→main、iTime→uTime、iChannel→uTex,fork 着改而不是干看。
- 本地三杰:glslViewer(轻)、KodeLife(演出)、SHADERed(带调试器)。
- Android 端:AGI 看帧、渲染条看性能、多 GPU 厂商真机测精度,模拟器不算数。
- 学习纵深:Book of Shaders(体系)→ iq(深度)→ The Art of Code(跟练)→ LYGIA(复用)。
动手练习
- 注册 Shadertoy,搜「frosted glass」,fork 一个作品,用调试三板斧读懂它和本书 2.3 章实现的异同。
- 装好 VS Code 双插件,把本书任意 Demo 存成 .frag 文件,在编辑器里获得「存盘即预览」的工作流。
- 去 twigl 围观一个 geekest(300 字符)作品,尝试把它展开、加注释、翻译成本书 Demo 格式——高尔夫代码展开的过程就是最好的阅读理解。