WebGL学习笔记 | 创建着色器程序

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

<canvas id="webgl" width="400" height="400">
</canvas>

在JS代码中通过 id 获取 canvas 元素，然后在canvas元素中获取 WebGL 上下文，代码如下：

var canvas = document.getElementById('webgl');
//获取webgl上下文
var gl = canvas.getContext('webgl');

注意，在不同的浏览器中 webgl 上下文名字可能不同，上面代码仅在 Chrome 中测试通过。

2. 创建编译shader

有了上面的 gl 对象就可以使用 WebGL 相关的 API 来创建Shader，首先创建的是顶点着色器，代码如下：

var vertexShader = gl.createShader(gl.VERTEX_SHADER);

非常简单一行代码就创建了一个顶点着色器shader，使用gl.createShader时需要传入着色器类型，就两种：

• VERTEX_SHADER
• FRAGMENT_SHADER

然后使用 gl.shaderSource 函数将 顶点着色器代码与 vertexShader 对象关联，并编译：

gl.shaderSource(vertexShader,  'void main() { ... }');
gl.compileShader(vertexShader);

我们的着色器代码有可能会出现语法错误，可以使用 gl.getShaderParameter 函数检查 shader 的编译状态是否有错：

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 对象：

var program = gl.createProgram();

将顶点、片元着色器附加到 program 对象上：

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

最后进行链接，并使用此着色器程序：

gl.linkProgram(program);
gl.useProgram(program);

链接时也可能会出现错误，可使用 gl.getProgramParameter 查看 program 对象的链接状态：

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 着色器程序创建完成，不过目前着色器还没开始工作，我们下篇继续！