书接上文，第一篇文章已经将顶点着色器和片段着色器的内容编写好了，这篇文章就创建着色器并编译

创建顶点着色器对象

const vertexShader = gl.createShader(gl.VERTEEX_SHADER);
gl.shaderSource(vertexShader,vsGLSL);
gl.compileShader(vertexShader );
if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS)){throw new Error(gl.getShaderInfoLog(vertexShader))
}

1. const vertexShader = gl.createShader(gl.VERTEX_SHADER);
   1. 使用Webgl的createShader方法创建一个顶点着色器对象。gl.VERTEX_SHADER参数表明创建是的顶点着色器类型；
   2. 如图所示，创建的顶点着色器对象的source为空，COMPILE_STATUS(编译状态)为false。
2. gl.shaderSource(vertexShader, vsGLSL);
   1. 将存储在变量vsGLSL中的 GLSL 顶点着色器代码字符串设置为刚刚创建的顶点着色器的源代码。
   2. 如图所示，将前面文章创建的顶点着色器内容设置给顶点着色器对象，所以source的内容为之前创建的vs内容
3. gl.compileShader(vertexShader);
   1. 编译顶点着色器。这一步将把 GLSL 代码转换为可在图形硬件上执行的形式。
   2. 编译shader内容
4. if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {... }
   1. 检查顶点着色器的编译状态。如果gl.getShaderParameter返回的编译状态为false，则表示编译失败，此时会抛出一个错误，错误信息为通过gl.getShaderInfoLog(vertexShader)获取的编译错误日志。
   2. 如图所示，如果编译成功，则COMPILE_STATUS的状态值为true.

 创建片段着色器对象

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {throw new Error(gl.getShaderInfoLog(fragmentShader))
};

1. const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
   1. 创建片段着色器对象。gl.FRAGMENT_SHADER参数表明创建的是片段着色器类型。
   2. 创建fragmentShader对象
2. gl.shaderSource(fragmentShader, fsGLSL);
   1. 将存储在变量fsGLSL中的 GLSL 片段着色器代码字符串设置为片段着色器的源代码
   2. 赋值shader内容
3. gl.compileShader(fragmentShader);
   1. 编译片段着色器
   2. 编译shader
4. if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {... }
   1. 检查片段着色器的编译状态。如果编译失败，则抛出一个错误，错误信息为片段着色器的编译错误日志
   2. 编译成功则COMPILE_STATUS的状态值为true