携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
这里说的 book就是 thebookofshader 。它对于完全小白的人来说足够友好了，它从着色基本原理开始说起，然后是，着色语言的简单介绍，如何运行着色器（这一点我之前就自己做过了，书的方法我也想用来着，但是惭愧的很，没能成功）。 后面就开始写了，开始以一种可以说纯数学的方式进行编码，图形绘制。
可能，有人会想到shadertoy这个网站，这个网站确实令人大开眼界，但是，对于我这种新手来说，也就只是欣赏而已。 我无意放大shader做图的难度，但是对于不熟悉的人来说，思维方式可能很难转变过来。
shader做图的不同之处
鄙人目前体会的仅仅是二维的，三维的暂且不知道。
先说简单的，比如我们要画一个点，如果是canvas2d ,我们可以fillrect/strokerect,或者画圆，如果用webgl 我们可以顶点建模用三角面画一个点，或者直接使用gl.POINT模式绘制。 但是，shader做图，给你的只有当前坐标，你来决定这个点要上什么颜色。
也可以理解为我们用webgl绘制了一个平面，就是画布那么大，然后这个平面具体怎么上色，就要仰仗片元着色器了。
所以要绘制一个点，我们就需要判断当前这个坐标在不在这个点内，如果在，我们就使用点的颜色，否则使用背景色。 这一件事是我们在shader绘图贯穿始终的。
简单过一下前几章的内容
我是打算从造型函数这里开始写的。 但是前面有些东西还是比较重要的。
shader是运行在gpu中的，gpu是多个cpu组合的，所以可以并行处理程序，这个多比我们一般的四核八核要多的多。
uniform 变量 我们只用片元着色器，是不可能有attribute 变量的，要获取对应的attribute可以用varry来进行传递。 gl_FragCoord 是对应画布的坐标，是个vec4 其单位就是px，原点在右下角，xy和正常的笛卡尔坐标系相同。 在这个网站里会使用 vec2 u_resolution 来表示画布尺寸，也就是说其x y分量分别就是 画布的宽高。
然后，如果对shader的语法不熟悉的可以看这篇文章 . 觉得某个内置函数讲得不清楚可以直接在bookofshader这个网站里搜。
搜索办法就是直接改变地址栏参数，改语言也是用这个办法。例如
不过，这个页面暂时还没有翻译，大家可以用谷歌翻译之类的。
或者访问 thebookofshaders.com/glossary/?l… 这个里面基本上很全了
本地运行这本书
这个网站是开源的，是用PHP写的。如果不会手动装PHP环境的话，下载一个PHPstudy，启动Apache服务，新建网站即可，还能自定义本地域名， Mac和Windows都可以。
本地运行，有时候还是很有必要的。
今天的水文就到这里，明天正式开始shader之旅。
