1：gpu渲染流程
image.png
根据上图就是3D图形渲染整个过程。
顶点缓冲区：在gpu的显存中开辟出一个空间，用于存储顶点数据，顶点是从cpu发送过来的。
uniform：全局变量
顶点着色器：主要是对cpu发过来的顶点数据进行平移、转换、旋转，得到物体最终的点坐标
图元装配：根据顶点着色器发过来的点位坐标渲染成几何形状
光栅器：在图元装配中生成的几何图形上生成片元，相当于web中的像素点，一个像素低就是一个片元。
片元着色器：主要是对每一个片元进行着色
我们主要关注顶点着色器和片元着色器，我们写的shader，就是在这两个着色器中执行。可以理解为vue中的钩子。
2：shader语法
以下为顶点着色器代码
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
attribute vec3 position;
attribute float aRandom
varying float vRandom;
void main() {
vRandom = aRandom
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}
uniform：顶点着色器使用的常量数据，不能被修改。这个数据可以从js代码中传过来，不能修改的意思是在着色器中不能修改，但是可以在js中修改。
attribute：使用顶点数组封装每个顶点的数据，一般用于每个顶点都各不相同的变量
以下为着色器内置变量
projectionMatrix：将坐标转化为裁切空间坐标
viewMatrix：摄像机坐标
modelMatrix：模型自身的坐标
gl_Position：这个就是最终的点的坐标
position：从cpu传过来的点坐标
varying:限定变量，从cpu传过的变量 aRandom我们在片元着色器中无法使用，需要使用varying进行中转。
以下为片元着色器代码
precision mediump float;
varying float vRandom;
void main() {
gl_FragColor = vec4(0.5, vRandom, 1.0, 1.0);
}
precision mediump：这行代码用来决定浮点数的精度
可选值如下：
highp：会影响性能，在有些机器上可能无法运行；
mediump：常用的类型；
lowp：可能会由于精度问题产生错误。
varying float vRandom：用来承接顶点着色器传过来的变量
