shader学习笔记
shader是生成图，可以将其生成的结果应用到3D上面。
可以将shader理解为透镜。
Shader开发人员，可以理解为创意编程者。
我有正当的理由买高端显卡了
如何学习Shader
Shader必修课
Games101
Unity Shader入门精要
3blue1brown 的线性代数视频
学习流程
1、查看坐标系转换的文章，弄清楚3D坐标到屏幕坐标的转换原理和相关矩阵
2、自己一定要推导一次坐标系的矩阵计算
3、将这个推导记录成笔记，做成PPT
4、将shader写文字和数字的搬过来，这是调试利器
5、通过上一个工具，打印常用内置变量的值，了解内置属性
6、然后再去看shader源码，通过上面这个工具帮助我调试代码，通过拆解注释的方式一个个搞懂，积累经验技巧
别人的学习路线推荐
参考这个问题下的高赞回答：
https://www.zhihu.com/question/22514128
(TODO)B站视频
这是从国外搬运的视频，目前学到这里了：
这个讲课模式很好，因为：
1、每个环节末尾有个总结
2、每次操作，会在后面逐步逐步列出步骤，以及每一步的含义和输出是什么
关于调试，有个输出数字的，是怎么搞的？用这个调试坐标系的位置岂不是很赞？？？？？
(精)调试：
参考这2个例子，先知道如何绘制英文文字和数字：
字母：Shader - Shadertoy BETA
数字：Shader - Shadertoy BETA 这个还包含了在指定位置画数字，牛逼
字母+数字：Shader - Shadertoy BETA 利用可视化的理念做的，真的是学以致用了。
shader合集：
GLSL Shaders - a Collection by Nik Lever on CodePen
想要解决的问题
图形的形变，比如不同图形之间的形变切换。
我想把这个写成一个通用的功能，给我们的各种图表使用。
技术选型
从零开始比较麻烦，因此一般可以选择开源库作为起步工具。
常用的有P5.js，比如这个开发者，就用P5写了不少效果和游戏。
有个技术框架，可以极大提升你的开发效率，比如上面这位作者的P5框架。
他的P5Demo中，有一些特别炫酷的：
color-space-projection：动感形状
clipper：裁剪
die-welle：动感波形线条
hidden-dimensions(动态的折线图)
info-pollution：动感的文字
informational-beings：连续的线条几+几何形状，很适合做标注和引导
jumper：关系图+重点标注+镜头动画
kanji-network：关系图+微缩视图
koenigsberg：力导向关系图
lines-of-data：叙事型时间轴柱状图
morph：形变动画
n-body-problem:游动的小蝌蚪
neural-network：打砖块游戏
no-longer-human：渐隐文字特效，很适合叙事
random-walk-tiles：随机彩色砖块
shapes-and-ripples：形状与涟漪，很适合做过渡变化
traffic：交通情况，高度抽象，适合用于做网络流量监控
感觉作者线条动画玩得特别溜，这个能增色不少。我们还是见少识窄了。
这才是真正的创意开发者！
Canvas也能画炫酷粒子效果
https://www.w3cplus.com/canvas/adding-particle-effects-to-dom-elements-with-canvas.html
工具
(精)ShaderFrog：
可以通过节点编辑Shader，可以导出到Three.js和Unity。
Siri：
https://shaderfrog.com/app/editor
一些想法
如果我能写一个工具，自动将Shadertoy的效果转为Three.js，那么可用的效果就多了！
效果
(Amazing)iq大神的作品：
https://www.shadertoy.com/user/iq
资料
shader的书籍：
中文版：
https://thebookofshaders.com/?lan=ch
一个人写的demo：
案例+在线调试器：
基于粒子系统的2D射击游戏(原来简单的游戏也能这么有意思，从作者博客来看，应该是用P5.js开发的。)：
https://openprocessing.org/sketch/453716
这个作者居然把这些游戏放Steam上面出售了！这说明也是一条路啊，不一定要追求多么华丽的画面效果，关键还是玩法。
另外这对于开发也是一个启发：先用抽象设计出玩法/功能Demo，再做细节上的视觉加工。
这个水池效果也是shader写的，而且作者居然是figma的联合创立者，也是esbuild的作者，10年做的，已经支持Ray Trace了！(我们把这个摸透，搞一个弄到官网？)：
https://madebyevan.com/webgl-water/
https://github.com/evanw/webgl-water
Three.js的着色器材质(ShaderMaterial)：