shader 基础之 2D技巧集合 视频教程下载（价值368）

如果你写过一段顶点着色器，能把纹理贴到四边形上，但一遇到「描边有毛边」「圆形头像糊了」「背景想做成流动的水面」就不知道从哪下手，这套 2D 着色器技巧集合正好补的就是这一段。它不讲 GPU 管线史，也不推导光照方程，主题只有一个：在二维平面上，用 fragment shader 把常见的视觉需求一项项做出来。所以它更像一本「遇到问题翻哪一节」的工具册，而不是从头到尾啃的教材。

这门课真正解决的能力缺口

第一类是几何计算不过关。很多人能写 uv 采样，却算不对距离场，画个圆靠的是调参数试出来的。课程里围绕坐标变换、距离函数、旋转与缩放展开，练完你能说清楚为什么一个圆可以用一行距离判断画出来，而不是复制别人的代码猜数值。

第二类是边缘与混合处理含糊。抗锯齿、透明度叠加、描边宽度随分辨率变化，这些在 2D 场景里出现频率极高。你如果只会 step 一刀切，边缘一定是锯齿；课程会带你把 smoothstep、混合模式、预乘 alpha 这些点逐个落实。

第三类是时间和交互维度缺失。静态图形人人会画，动起来就乱：动画速度跟帧率绑死、鼠标坐标没做归一化、多个效果叠加后互相打架。这部分是 2D 着色器从「练习」走向「能用」的分水岭。

配套练习怎么用才不白看

• 每节的小效果建议先关掉视频自己写一遍，卡住再看，比顺着抄一遍有效得多。
• 把参数当成实验对象：同一个距离函数，改半径、改平滑区间、改颜色映射，观察画面怎么变，这一步能帮你建立手感。
• 配套资料里的工程拿到手后，试着把效果拆成两三个独立函数重新组织，而不是留着一个几百行的大 main。
• 学完一个效果，换一张自己的贴图或换一组配色再复现一次，确认你掌握的是方法而不是那组参数。

看完应该能回答的问题

• 为什么用距离场画图形，比直接判断像素是否在形状内部更好用？
• 边缘抗锯齿的平滑区间取多大合适，跟分辨率和缩放是什么关系？
• 让动画速度稳定，应该把什么量传进着色器，而不是依赖帧计数？
• 多个 2D 效果叠加时，颜色混合顺序为什么会改变最终结果？
• 同一个效果放到不同分辨率的画布上，怎样保证视觉比例不变？

适合谁，不适合谁

适合已经在做 2D 渲染、UI 特效、小游戏或图形工具，但效果基本靠改参数和搜索拼凑的人；也适合准备转向图形方向、需要把 2D 这块基础补扎实的开发者。需要你至少能读懂一段着色器代码，知道顶点和片元的分工，否则前几节会有点吃力。

不适合指望靠它搞定 3D 光照、PBR 材质或引擎级渲染管线的人——它的边界就是二维。也不适合想跳过动手、只看一遍视频就掌握的人，2D 着色器的很多细节是调出来的，不是看出来的。

建议的用法是：先挑你当前项目里最想解决的那一类效果切入，做完再回头补前置章节，边做边把疑问记下来，等整套看完，你应该能独立写出一个带交互、边缘干净、能随分辨率自适应的 2D 效果，而不是只会改别人的参数。