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

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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中，WEBGL_depth_texture扩展提供了一种方式来将深度缓冲区的内容作为纹理进行采样。这使得开发者能够在着色器中访问深度值，从而实现一些高级效果，比如阴影贴图、后处理效果等。

WEBGL_depth_texture 简介

WEBGL_depth_texture扩展为WebGL添加了一个新的纹理格式，允许将深度缓冲区的值作为纹理进行读取。这在许多渲染技术中都非常有用，尤其是那些需要访问深度信息的技术，如阴影计算、反射、折射等。

使用方法

使用WEBGL_depth_texture扩展的一般步骤如下：

1. 检测扩展：首先确保浏览器支持该扩展。
2. 创建纹理：使用createTexture方法创建纹理。
3. 设置纹理参数：使用texParameteri方法设置纹理参数，指定纹理格式为深度格式。
4. 绑定深度纹理：使用bindTexture方法绑定纹理。
5. 从深度缓冲区复制数据到纹理：使用readPixels或copyTexImage2D方法将深度缓冲区的内容复制到纹理中。
6. 在着色器中使用深度纹理：在着色器中通过texture2D函数访问深度纹理。

示例代码

下面是一个使用WEBGL_depth_texture扩展查询深度纹理的基本示例：

const canvas = document.getElementById('my-canvas');
const gl = canvas.getContext('webgl2', { antialias: true });

// 检测扩展
const depthTexture = gl.getExtension('WEBGL_depth_texture');

if (!depthTexture) {
  console.error('Depth texture extension not supported.');
  return;
}

// 创建深度纹理
const depthTextureId = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depthTextureId);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 将深度缓冲区的内容复制到纹理中
gl.readPixels(0, 0, canvas.width, canvas.height, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);

// 在着色器中使用深度纹理
const fragmentShaderSource = `
  precision mediump float;
  uniform sampler2D u_depthTexture;
  void main() {
    float depth = texture2D(u_depthTexture, gl_FragCoord.xy / ${canvas.width}).r;
    gl_FragColor = vec4(depth, depth, depth, 1.0);
  }
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建并链接着色器程序
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 设置着色器中的深度纹理
const depthTextureLocation = gl.getUniformLocation(shaderProgram, 'u_depthTexture');
gl.uniform1i(depthTextureLocation, 0);

// 绑定深度纹理到纹理单元0
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, depthTextureId);

// 渲染场景
gl.drawArrays(gl.TRIANGLES, 0, 3); // 假设已经设置了顶点数据

注意事项

• 确保在使用深度纹理之前已经正确设置了深度缓冲区。
• 在着色器中使用深度纹理时，通常需要将纹理坐标归一化到[0, 1]范围内。
• 由于浏览器和设备支持情况的不同，你应该始终检查扩展是否可用。

结论

使用WEBGL_depth_texture扩展可以方便地获取WebGL深度缓冲区的内容，并将其作为纹理进行采样。这对于实现高级渲染效果非常有用，如阴影贴图、后处理效果等。然而，由于浏览器和设备支持情况的不同，你应该始终检查扩展是否可用，并且不要在生产环境中直接暴露敏感信息给用户。