Three.js-着色器

Shader操控的是物体的表面。

似乎可以将Shader理解为装饰器模式。

Shader能干嘛？

Shader中文翻译是着色器，从这个名字就可以看出来，其功能是着色。

作者：毛伟
链接：https://www.zhihu.com/question/471183747/answer/2009491115
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

大部分shader本质上就是进行了两个环节的计算：

顶点着色 vertex shading
像素（片元）着色 pixel/fragment shading

顶点着色：

首先通过建模软件制作出网格（mesh）模型，这个模型中的每一个顶点就会在顶点着色阶段进行计算，这个时候可以修改每个顶点的坐标，就能实现风吹草动、海水波浪、全息图像信号抖动之类的效果，也可以做近似计算给整体上色，但是效果会很糙，这时就需要计算更精细（开销也更大）的像素着色。

像素（片元）着色：

在每个顶点之间连线形成的三角面（也有四边形或其他类型的面）上，会进行光栅化（rasterization），也就是把三角形放到像素格子（栅栏）里，判断具体哪一个像素包含在里面，然后对其进行上色，这一步的操作就精细化到了每一个像素的级别，可以实现的功能也更多（大部分shader逻辑都是在这个环节实现的），这一步，我们可以决定每一个像素的颜色、透明度，颜色实际上也不只是色彩，通过各种前辈研究出来的模型，我们其实在上色的时候就决定了物体的明暗光影、质感（金属、塑料），还能通过一些逻辑实现各种炫彩特效、黑白剪影……

计算

computeShader

渲染

一句话经验

Shader必须依赖于BufferGeometry
通过BufferAttribute定义自定义属性
注意，WebGL 1.0使用的shader只支持GLSL 1.0.17, 这是因为WebGL是基于OpenGL ES 2.0的，是给相对于台式机性能较低的手持设备用的。所以如果在网上找到的GLSL的例子，在WebGL上可能不管用，要注意版本。 GLSL 1.0与现行最高的4版本比起区别还是比较多的，比如老版本里叫attribute, varying的变量到高版本里叫in, out了。

VSCode的Shader环境搭建
https://zhuanlan.zhihu.com/p/151384233