<aside> ☝ 标题图是我学习Shader两周之后画的sketch

</aside>

我从两周前开始学习The Book of Shaders，感觉在这里面找到了之前用processing或者p5js写sketch没有享受到的快感！Processing或者p5js写到复杂的sketch之后难免code很长，而且执行时间也很长，debugging起来也很头痛。但是shader几乎是实时的rendering，有很多快速试验的方法，所以非常有趣。

什么是Shader？

Shader是利用GPU的并行运算功能来作图的指令集。你可以想象每个pixel都经过一个管道，并在管道中同步进行处理，然后生成一个新的pixel。而在processing中，每个指令是单独经过CPU处理来作图，一次处理一部分的像素，这就是为什么Shader比processing要快很多的原理。

Image from The Book of Shaders

Shader语言有很多，听起来都大同小异，基本上他们都包含了很类似于C的语法结构，以及compile到硬件层面指令的compiler。我只学了GLSL，但是对其他语言有兴趣的话可以看一下这篇 A review of Shader Languages 。

Shader和普通p5js sketch的区别

• 两条重要的Shader原则：
  • 每个pipe的指令是互相独立的。也就是说每个像素都是单独处理，他并不知道隔壁的像素是怎么处理的。所以类似p5中，“如果旁边的像素是白色那这个像素是黑色的” 这样的指令在Shader里是行不通的。
  • 第二条原则是每个pipe是不记录之前的状态的。Shader只在乎当前处理的指令，因此shader里没有processing中的object的概念，也无法记录历史状态。
• Processing中如果要对每个像素处理就需要写两个嵌套的for loop来遍历x轴和y轴的所有像素，但是这在Shader里通常就是一行指令，因为这行指令默认就会对每个像素执行。
• 所有的shader sketch都是数学问题，这又唤起了我对几何学的热爱～

  • Shaping functions，是Shader的作图基本。用shaping function既可以控制图形的变化，也可以控制每个像素的颜色变化。在Book of Shaders的这章里不仅提供了基本的shaping function的介绍，还提供了很多很好的学习各种曲线的资源。Nerd如我，看到这些曲线都有自己的名字就觉得很兴奋了！

    

    各种拥有自己名字的曲线～

    

    Mac自带的Grapher工具也非常好用！

  • 在Shader里画图形也是数学问题，不同于processing当中已经build in了很多画图形的function，shader里的shape基本都需要你自己写。不过所有的shape的实现都有好几种方法，这也很有趣。Book of Shaders的作者甚至做了一副塔罗牌，每个牌的后面都有如何用shader指令实现这些图形的代码。

    

  • Book of Shaders里解释如何实现random和noise的部分也非常有趣，虽然在processing里已经学过了但是这里从数学的角度解释就更加深了我对noise的理解。同样，在shader里实现random和noise的方法也有很多，不仅是这里提到的这些。

Shader学习资源和步骤

• 快速上手的setup

  GLSL可以在任何你习惯的dev环境中setup，我用的是atom，也可以用p5js sketch来联动。Book of Shaders也提供一个online editor来直接练习。

• Book of Shaders 肯定是Shader领域里最棒的入门教材，这里面的一些练习提示和工具资源都非常好。强烈推荐！

• 这套youtube上的Shader tutorial series 也很不错，每个视频都很短，介绍了一些入门的shader写法。

• p5js shaders 这套文章主要侧重在介绍如何让p5js sketch和shader互动，比方用shader做出来的texture apply到p5的一些图形上，可以作为进阶学习的材料。

• 就像学processing一样，看别人的code实现方法也是很好的进一步学习的方式。Shadertoy 上就有很多shader sketch的资源，你可以根据自己有兴趣的topic来搜索。比如color, noise 等等～ 另外在openprocessing上也有很多Shader sketch的code可以学习，在browse里搜索shader就可以了。