【p5js shader翻译教程】1.3 什么是shaders？

该文章为翻译而来，原文链接 传送门

该系列翻译文章将不定期更新，将用于学习记录，若有侵权，请联系我。

1.3 什么是shaders？

世界上到处都在使用shaders，所以你肯定见过它们，尽管你自己从未写过一个。不论是计算机游戏还是音乐会的视觉效果，shaders对于图形的快速实时渲染是必要的。

如果你玩电脑游戏，那么其中的每一个3D物体都有一个shaders连接到它的材料上。shaders决定了物体的颜色，也决定了光线如何从物体上反射，它是否透明等等。此外，如果你曾经去过一场音乐会，那里的视觉效果对声音或动作有反应，这些很可能就是shaders。

shaders是一个小程序，完全运行在你的显卡上，即GPU（图形处理单元），而不是你的计算机的CPU（中央处理单元）。这使得它的速度惊人。它们实际上很容易编写，而且一旦你理解了它们工作的基本原理，就可以在p5js中简单实现。

由于shaders是一个单独的脚本，你只需把它放在sketch.js以外的一个单独文件中，就像加载的声音文件或图像一样，我们一会儿就会说到这一点。首先，理解为什么shaders产生的效果与单单p5js代码所产生效果的不同是很重要的。

shader是如何工作的？

到目前为止，当你在p5js的draw()函数中绘制图形时，你所做的工作主要依靠CPU。

CPU的工作方式是依次进行每一次计算–即你所绘制的像素或形状的每一次移动。如果你仔细观察你的屏幕，你会看到它是由每一个小像素组成的。当你使用CPU绘图时，计算机必须执行所要求的每一个操作（例如绘制红色，或增加亮度），一次一个像素。如果你的屏幕是2,560×1,600像素，那就是每帧4,096,000个操作。在每秒60帧的情况下，就是每秒245,760,000次操作。如果你的屏幕是4k的，那就是这个数字的两倍。这对基本程序来说是没有问题的，但你可能已经注意到，你的绘图越复杂，整个程序的运行速度就越慢。

相反，你的GPU（图形处理单元）能够通过使用shader进行所谓的并行处理。这意味着，你通过使用shader在草图中绘制的所有内容都是一次性绘制的，所有4,096,000个操作都是如此。 因此，shader是一种令人难以置信的优化方式，可以在不降低绘制速度的情况下制作更复杂的图形。

为了理解shader的作用，可以把CPU想象成一条管道，画布上的所有像素都必须通过这条管道，一次一个，告诉它们应该属于什么颜色。但使用shader之后，CPU处理所有的计算，GPU处理实际的着色。现在想象一下，每个像素都有自己的管道，我们可以计算并告诉你画布上的每个像素应该有什么颜色（同时）。这就是shader的作用。

这有点像用多色喷灯一次性画完整个蒙娜丽莎。如下面视频所示。

NVIDIA现场形象展示CPU和GPU工作原理上的区别

写在最后

我创建了一个公众小号【p5js艺术小站】，里面会更新各种作品、教程等精彩内容，欢迎各位大佬关注指导，共同进步！！！