还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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 中的渲染流程。