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

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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 中，WebGLProgram 是一个表示着色器程序的对象，它是连接着色器（顶点着色器和片段着色器）并使其可以一起使用的容器。着色器程序定义了如何在 GPU 上处理顶点数据和像素数据，从而控制最终的渲染结果。

下面是对 WebGLProgram 的详细说明：

创建 WebGLProgram

要创建一个新的 WebGLProgram 对象，可以使用 WebGL 上下文的方法 createProgram()：

var program = gl.createProgram();

附加着色器

一旦创建了 WebGLProgram，就需要将顶点着色器和片段着色器附加到程序上。

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

这里 vertexShader 和 fragmentShader 是之前创建并编译成功的 WebGLShader 对象。

链接着色器程序

在将着色器附加到程序之后，还需要链接这些着色器以生成可执行的程序。

gl.linkProgram(program);

链接后，可以通过 gl.getProgramParameter(program, gl.LINK_STATUS) 来检查链接状态是否成功。如果链接失败，可以通过 gl.getProgramInfoLog(program) 获取错误信息。

使用 WebGLProgram

一旦着色器程序链接成功，就可以使用它来进行渲染。

gl.useProgram(program);

获取统一变量位置

统一变量是在着色器之间共享的数据，可以通过 getUniformLocation 方法获取它们的位置。

var uniformLocation = gl.getUniformLocation(program, 'u_matrix');

设置统一变量值

设置统一变量的值可以使用相应的 uniform 方法，例如 uniformMatrix4fv、uniform1f 等。

gl.uniformMatrix4fv(uniformLocation, false, matrix);

获取属性位置

顶点属性（如顶点坐标、颜色等）可以在着色器中声明，并通过 getAttribLocation 方法获取它们的位置。

var attributeLocation = gl.getAttribLocation(program, 'a_position');

启用和禁用属性

启用顶点属性以便使用。

gl.enableVertexAttribArray(attributeLocation);

指定顶点属性指针

设置顶点属性如何从缓冲区中读取数据。

gl.vertexAttribPointer(
  attributeLocation,    // 属性位置
  2,                    // 每个顶点属性的分量数量
  gl.FLOAT,             // 分量的数据类型
  false,                // 是否对数据进行标准化
  0,                    // 每个顶点属性之间的字节偏移量
  0                     // Buffer 中顶点属性数据的起始偏移量
);

示例

下面是一个完整的示例，展示了如何创建着色器程序、链接着色器、设置统一变量，并使用着色器程序进行渲染：

// 创建顶点着色器
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);

// 创建片段着色器
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);

// 创建着色器程序
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 检查链接状态
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error("Error linking program: " + gl.getProgramInfoLog(program));
}

// 使用着色器程序
gl.useProgram(program);

// 获取顶点属性位置
var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

// 启用顶点属性
gl.enableVertexAttribArray(positionAttributeLocation);

// 创建顶点缓冲区
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 准备一些数据
var vertices = [
  0, 0,
  1, 0,
  0, 1
];

// 将数据放入缓冲区
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 指定顶点属性如何从缓冲区中读取数据
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 清除颜色缓冲区
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

// 解除绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, null);

// 销毁着色器和着色器程序
gl.detachShader(program, vertexShader);
gl.detachShader(program, fragmentShader);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
gl.deleteProgram(program);

总结

WebGLProgram 是 WebGL 中着色器程序的核心对象。它包含了顶点着色器和片段着色器，并提供了统一变量和属性访问的接口。通过正确地创建、链接和使用着色器程序，你可以控制 WebGL 中的渲染流程。