0. 前言
今天本想偷个懒不发文的，在朋友圈看下到下几句话，还是忍不住，看来我得把自己的位定好，坚定不移.
程序员：你是什么BUG！
前面两周我们学习的是 GLSL ES 语法相关的内容，今天换一个角度学习WebGL，了解如何在浏览器中使用原生 JavaScript 创建 WebGL 着色器程序。
色器程序分为顶点着色器和片元着色器，一个是用于描述绘图的位置和大小，一个是用于描述绘图的颜色。我们从零开始，在浏览器中使用 WebGL API 创建一个着色器程序，先看一下大概的流程：
1.获取 WebGL 上下文对象
- 获取HTML canvas 对象
- 从 canvas 中获取 WebGL 上下文对象
2.创建 shader 对象
- 顶点 shader : 创建、关联代码、编译
- 片元 shader : 创建、关联代码、编译
3.创建 program 对象
- 创建 program
- 将顶点、片元 attach 到 program
- 链接、使用
下同看详细步骤：
1. 获取 WebGL 上下文对象 在 HTML 中创建一个 id 为 webgl 的 <canvas> 标签，大小为400*400
代码语言：javascript复制<canvas id="webgl" width="400" height="400">
</canvas>在JS代码中通过 id 获取 canvas 元素，然后在canvas元素中获取 WebGL 上下文，代码如下：
代码语言：javascript复制var canvas = document.getElementById('webgl');
//获取webgl上下文
var gl = canvas.getContext('webgl');注意，在不同的浏览器中 webgl 上下文名字可能不同，上面代码仅在 Chrome 中测试通过。
2. 创建编译shader
有了上面的 gl 对象就可以使用 WebGL 相关的 API 来创建Shader，首先创建的是顶点着色器，代码如下：
代码语言：javascript复制var vertexShader = gl.createShader(gl.VERTEX_SHADER);非常简单一行代码就创建了一个顶点着色器shader，使用gl.createShader时需要传入着色器类型，就两种：
- VERTEX_SHADER
- FRAGMENT_SHADER
然后使用 gl.shaderSource 函数将 顶点着色器代码与 vertexShader 对象关联，并编译：
代码语言：javascript复制gl.shaderSource(vertexShader, 'void main() { ... }');
gl.compileShader(vertexShader);我们的着色器代码有可能会出现语法错误，可以使用 gl.getShaderParameter 函数检查 shader 的编译状态是否有错：
代码语言：javascript复制if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
//如果出错，使用 gl.getShaderInfoLog 获取错误提示
var error = gl.getShaderInfoLog(vertexShader);
console.log('Failed to compile shader: ' error);
gl.deleteShader(vertexShader);s
return null;
}getShaderParameter 如果返回false，表示出错，可使用 gl.getShaderInfoLog 获取错误提示，同时删除 vertexShader 对象，注意需要使用 gl.deleteShader() 来删除。
创建片元着色器 framgentShader，流程相同就不再缀述。
3. 创建链接着色器程序
有了 vertexShader 和 framgentShader 两个 shader 对象，现在将它们关联起来，成为一个 完整的着色器程序，需要创建一个 program 对象：
代码语言：javascript复制var program = gl.createProgram();将顶点、片元着色器附加到 program 对象上：
代码语言：javascript复制gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);最后进行链接，并使用此着色器程序：
代码语言：javascript复制gl.linkProgram(program);
gl.useProgram(program);链接时也可能会出现错误，可使用 gl.getProgramParameter 查看 program 对象的链接状态：
代码语言：javascript复制if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' error);
//出错了，将shader和program都删除
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
gl.deleteProgram(program);
}至此 WebGL 着色器程序创建完成，不过目前着色器还没开始工作，我们下篇继续！
