Three.js 着色器模型矩阵包含了一个几何体的旋转、平移、缩放变换。编写着色器代码的时候，模型矩阵modelMatr

模型矩阵(modelMatrix)

模型矩阵包含了一个几何体的旋转、平移、缩放变换。编写着色器代码的时候，模型矩阵modelMatrix不用程序员手动声明，Three.js渲染器系统渲染的时候会自动往ShaderMaterial顶点着色器字符串中插入一句 uniform mat4 modelMatrix;

投影矩阵（projectionMatrix）和视图矩阵（viewMatrix）

相机对象本质上就是存储视图矩阵和投影矩阵的信息的一个对象，基类 Camera 的 matrixWorldInverse 属性对应的就是着色器中视图矩阵变量viewMatrix，基类 Camera 的投影矩阵属性 projectionMatrix 对应着色器中的投影矩阵变量 projectionMatrix 。

使用ShaderMaterial构造函数自定义顶点着色器的时候，视图矩阵 viewMatrix 和投影矩阵 projectionMatrix 一样不需要手动声明，WebGL渲染器会通过 WebGLProgram.js 模块自动声明这两个变量，在顶点着色器代码中插入 uniform mat4 viewMatrix; 和 uniform mat4 projectionMatrix; 。

在着色器中使用，须遵循左乘矩阵的顺序

gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 )

着色器三种类型的变量（Uniforms 、Attributes 、Varyings ）

Uniforms是接收js这边传送过来的数据，在顶点着色器与片元着色器里面都可以接收到数据。

/********/
var shaderMaterial = new THREE.ShaderMaterial( {
  uniforms: {
    pointTexture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
  },
  vertexShader: document.getElementById( 'vertexshader' ).textContent,
  fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
} );

/***着色器****/
uniform sampler2D pointTexture;

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  gl_FragColor = gl_Position * texture2D( pointTexture, gl_PointCoord );
}

Attributes是存入到webgl缓存里的数据，只能在顶点着色器中拿到，片元着色器中拿不到，顶点的位置、面的法线、顶点的颜色这些不用自己在顶点着色器中声明，Three.js会自动在顶点着色器中插入 attribute vec3 position，其他需要自己声明

Varyings是顶点着色器与片元着色器通信的一个变量，通过Varyings可以将顶点着色器中的数据传递到片元着色器当中。

// 顶点着色器
varying vec3 vColor;
void main() {
	vColor = color;
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

// 片元着色器
varying vec3 vColor;
void main() {
	gl_FragColor = vec4( vColor, 1.0 );
}