WebGL入门（011）：WebGLShader 简介、使用方法、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

在 WebGL 中，WebGLShader 是一个表示着色器的对象，它可以是顶点着色器 (VERTEX_SHADER) 或片段着色器 (FRAGMENT_SHADER)。着色器是运行在 GPU 上的小型程序，用于处理顶点数据和像素数据，以实现复杂的渲染效果。

下面是对 WebGLShader 的详细说明：

创建 WebGLShader

要创建一个新的 WebGLShader 对象，可以使用 WebGL 上下文的方法 createShader()，并指定着色器类型。

var shader = gl.createShader(gl.VERTEX_SHADER); // 创建顶点着色器
var shader = gl.createShader(gl.FRAGMENT_SHADER); // 创建片段着色器

设置着色器源代码

一旦创建了 WebGLShader 对象，就需要设置它的源代码。这可以通过 shaderSource 方法完成。

var shaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;
gl.shaderSource(shader, shaderSource);

编译着色器

设置完源代码后，需要编译着色器以验证语法和逻辑是否正确。

gl.compileShader(shader);

编译成功后，可以通过 gl.getShaderParameter(shader, gl.COMPILE_STATUS) 来检查编译状态。如果编译失败，可以通过 gl.getShaderInfoLog(shader) 获取错误信息。

示例

下面是一个完整的示例，展示了如何创建顶点着色器和片段着色器，设置源代码，并编译着色器：

// 创建顶点着色器
var vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 检查顶点着色器的编译状态
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error("Vertex shader compilation failed: " + gl.getShaderInfoLog(vertexShader));
}

// 创建片段着色器
var fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 检查片段着色器的编译状态
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error("Fragment shader compilation failed: " + gl.getShaderInfoLog(fragmentShader));
}

使用 WebGLShader

一旦着色器编译成功，就可以将它们附加到 WebGLProgram 中，并链接成一个完整的着色器程序。着色器程序的创建和使用将在另一篇文章中详细讨论。

销毁 WebGLShader

当不再需要着色器时，可以使用 deleteShader 方法释放资源。

gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);

总结

WebGLShader 是 WebGL 中用于处理顶点和像素数据的关键组件。通过编写顶点着色器和片段着色器的源代码，并编译这些着色器，可以实现复杂和定制化的渲染效果。正确的创建、编译和使用着色器是 WebGL 渲染的基础。