WebGL入门之初始化着色器流程

1. 创建 WebGLShader 着色器对象

在WebGL中，着色器对象是用来存储和编译GLSL程序代码的。为了创建WebGLShader着色器对象，可以使用WebGLRenderingContext.createShader()方法：

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

2. 设置 WebGLShader 着色器的GLSL程序代码

接下来，我们需要为着色器对象设置GLSL程序代码。这可以通过WebGLShader.source()方法来完成：

gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);

3. 编译 WebGLShader 着色器对象

当着色器对象的GLSL程序代码设置完成后，就可以使用WebGLShader.compile()方法来编译着色器对象：

gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

4. 检查 WebGLShader 着色器对象的编译状态

编译完成后，需要检查着色器对象的编译状态。可以使用WebGLShader.getShaderInfoLog()方法来获取编译日志：

const vertexShaderCompileStatus = gl.getShaderInfoLog(vertexShader);
const fragmentShaderCompileStatus = gl.getShaderInfoLog(fragmentShader);

如果编译成功，编译日志为空字符串。否则，编译日志中会包含错误信息。

5. 创建 WebGLProgram 着色器程序对象

当两个着色器对象都编译成功后，就可以使用WebGLRenderingContext.createProgram()方法来创建一个WebGLProgram着色器程序对象：

const program = gl.createProgram();

6. 将 WebGLShader 着色器对象附加到 WebGLProgram 着色器程序对象

接下来，需要将编译成功的WebGLShader着色器对象附加到WebGLProgram着色器程序对象上。可以使用WebGLProgram.attachShader()方法来完成：

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

7. 链接 WebGLProgram 着色器程序对象

当着色器对象附加到着色器程序对象后，就可以使用WebGLProgram.linkProgram()方法来链接着色器程序对象：

gl.linkProgram(program);

8. 检查 WebGLProgram 着色器程序对象的链接状态

链接完成后，需要检查着色器程序对象的链接状态。可以使用WebGLProgram.getProgramInfoLog()方法来获取链接日志：

const programLinkStatus = gl.getProgramInfoLog(program);

如果链接成功，链接日志为空字符串。否则，链接日志中会包含错误信息。

9. 使用 WebGLProgram 着色器程序对象

当着色器程序对象链接成功后，就可以使用WebGLRenderingContext.useProgram()方法来使用着色器程序对象：

gl.useProgram(program);

现在，着色器程序对象已经准备就绪，可以用来渲染几何体了。