在学习 WebGL 着色器时，最困扰的是“从零开始”编写 Vertex 和 Fragment Shader。
但如果你想通过实践快速掌握核心技巧与特效原理，不妨直接使用 WebGL‑Shaders 案例网站（webgl‑shaders.com）。
这里面有很多shader案例，包含源码。 https://webgl-shaders.com/ (opens in a new tab)
使用方式简单
点击每个示例即可查看 JavaScript、顶点 Shader 和片段 Shader 三部分代码。
分类清晰，覆盖全面
网站将着色器示例分门别类，涵盖很多特效：
-
2D 示例：classic noise、随机像素、滴水等；
-
3D 效果：toon shading、cosine wave、sphere deformation；
-
粒子与模拟：银河吸引、扩散限制聚合、反应–扩散等；
-
后期处理：老电视效果
、像素化、“Bad TV”扭曲；
小结
如果你是程序开发者，希望快速理解 WebGL 中 Shader 的作用原理，或者你想找一个shader的学习案例，这个也是很好的一个网站。