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

文章目录

创建 WebGLProgram附加着色器链接着色器程序使用 WebGLProgram获取统一变量位置设置统一变量值获取属性位置启用和禁用属性指定顶点属性指针示例总结

在 WebGL 中，<code>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 中的渲染流程。