着色器(Shaders Utilize)是通过GPU去渲染2D和3D对象在屏幕上。通过编程改变网格来创建前所未有的视觉效果。

javascript的执行是单线程的，所以只能逐个逐个像素进行计算和绘制。就像一个细长的漏斗，一滴一滴水的往下漏。

WebGL的处理方式，是用GPU驱动的，对每一个像素的处理，都是在GPU上执行，而GPU有许多渲染管道，这些处理可以在这些管道中并行执行.

Three.js默认带有几个着色器，如果需要更多与实际需要的工作，就需要自定义编写自定义着色器。

着色器有两种类型：顶点着色器在屏幕上反映顶点信息，而片段着色器以像素为单位绘制。 通常是fragment.js vertex.js

一个顶点着色器，一个顶点着色器为一个提供的每个顶点运行一次。

顶点着色器对3D场景里物体的每个顶点计算值，如颜色、法线向量等

void main(){
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
}

gl_Position 是一个xyz坐标，表示顶点在屏幕顶点着色器

片段着色器的作用就是计算平面上每一个片段（在这里是屏幕上每一个像素）输出的颜色值

片段着色器入参有varying和uniform两种，varying简单说一下是由顶点着色器传入的，每个片段输入的值由相关的顶点线性插值得到，所以每个片段上的值不一样

顶点着色器和片段着色器具有高度定制的效果。

GLSL

OpenGL Shading Language (OpenGl着色语言)

类似于标准C编写代码。

从javascript输入变量的入口, uniform是统一值，由着色器外部传入，每个片段得到的值是一样的

顶点着色器 到 片段着色器。

片段着色器入参有varying和uniform两种，varying简单说一下是由顶点着色器传入的，每个片段输入的值由相关的顶点线性插值得到，所以每个片段上的值不一样

shadertoy.com是一个类似codepen的着色器playgroud，上面的着色器都是利用上面的基本工具，还有一些造型函数，造出各种眼花缭乱的特效、动画。