认识着色器
2021 年 6 月 1 日 星期二(已编辑)
着色器(Shaders Utilize)是通过GPU去渲染2D和3D对象在屏幕上。通过编程改变网格来创建前所未有的视觉效果。
为什么需要GPU去渲染
javascript的执行是单线程的，所以只能逐个逐个像素进行计算和绘制。就像一个细长的漏斗，一滴一滴水的往下漏。
WebGL的处理方式，是用GPU驱动的，对每一个像素的处理，都是在GPU上执行，而GPU有许多渲染管道，这些处理可以在这些管道中并行执行.
Three.js j结合 WebGL
image-20210601213559657
Three.js默认带有几个着色器，如果需要更多与实际需要的工作，就需要自定义编写自定义着色器。
着色器有两种类型：顶点着色器在屏幕上反映顶点信息，而片段着色器以像素为单位绘制。 通常是fragment.js vertex.js
image-20210601214015368
Vertex Shader
一个顶点着色器，一个顶点着色器为一个提供的每个顶点运行一次。
顶点着色器对3D场景里物体的每个顶点计算值，如颜色、法线向量等
void main(){
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
}
gl_Position 是一个xyz坐标，表示顶点在屏幕顶点着色器
image-20210601221820510
Fragment Shader
片段着色器的作用就是计算平面上每一个片段（在这里是屏幕上每一个像素）输出的颜色值
片段着色器入参有varying和uniform两种，varying简单说一下是由顶点着色器传入的，每个片段输入的值由相关的顶点线性插值得到，所以每个片段上的值不一样
image-20210601222244216
顶点着色器和片段着色器具有高度定制的效果。
image-20210601222344857
GLSL
OpenGL Shading Language (OpenGl着色语言)
类似于标准C编写代码。
从javascript输入变量的入口, uniform是统一值，由着色器外部传入，每个片段得到的值是一样的
image-20210601222522767
image-20210601222552099
顶点着色器 到 片段着色器。
片段着色器入参有varying和uniform两种，varying简单说一下是由顶点着色器传入的，每个片段输入的值由相关的顶点线性插值得到，所以每个片段上的值不一样
image-20210601222612098
向高手学习
shadertoy.com是一个类似codepen的着色器playgroud，上面的着色器都是利用上面的基本工具，还有一些造型函数，造出各种眼花缭乱的特效、动画。
image-20210601215704556