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

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

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例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,newFloat32Array(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 中的渲染流程。