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

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

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例150+】 5前端就业宝典 【面试题+详细答案 1000+】

文章目录

在WebGL中，

EXT_frag_depth

扩展提供了一种方式来允许片段着色器直接写入深度缓冲区。这在许多渲染技术中非常有用，例如实现自定义的深度测试、深度偏移效果、以及某些类型的阴影贴图等。

EXT_frag_depth 简介

EXT_frag_depth

扩展为WebGL添加了一个新的内置变量

gl_FragDepth

，允许开发者在片段着色器中直接修改深度值。默认情况下，WebGL根据片段着色器输出的颜色值和深度测试模式自动计算深度值。使用

EXT_frag_depth

扩展，你可以覆盖这个默认行为，从而实现更加精细的控制。

使用方法

使用

EXT_frag_depth

扩展的一般步骤如下：

1. 检测扩展：首先确保浏览器支持该扩展。
2. 编写片段着色器：在片段着色器中使用 gl_FragDepth 变量来修改深度值。
3. 启用深度测试：使用 enable 方法启用深度测试。
4. 设置深度测试模式：使用 depthFunc 方法设置深度测试模式。
5. 绘制场景：使用 drawArrays 或 drawElements 方法绘制场景。

示例代码

下面是一个使用

EXT_frag_depth

扩展修改深度值的基本示例：

const canvas = document.getElementById('my-canvas');const gl = canvas.getContext('webgl2',{antialias:true});// 检测扩展const fragDepth = gl.getExtension('EXT_frag_depth');if(!fragDepth){
  console.error('EXT_frag_depth extension not supported.');return;}// 创建顶点着色器const vertexShaderSource =`
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);// 创建片段着色器const fragmentShaderSource =`
  precision mediump float;
  void main() {
    float depth = (gl_FragCoord.z * 2.0) - 1.0; // 将深度值映射到 [-1, 1]
    gl_FragDepth = depth; // 写入深度值
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);// 创建并链接着色器程序const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);// 启用深度测试
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);// 设置顶点数据const vertices =newFloat32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const positionAttributeLocation = gl.getAttribLocation(shaderProgram,'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation,2, gl.FLOAT,false,0,0);// 绘制三角形
gl.drawArrays(gl.TRIANGLES,0,3);

注意事项

• 在使用EXT_frag_depth扩展时，确保在片段着色器中正确设置 gl_FragDepth 的值。通常需要将深度值映射到正确的范围，例如从 [0, 1] 映射到 [-1, 1]。
• 由于浏览器和设备支持情况的不同，你应该始终检查扩展是否可用。
• 在片段着色器中修改深度值可能会导致一些渲染问题，因此请确保你的片段着色器逻辑正确。

结论

使用

EXT_frag_depth

扩展可以让你在WebGL中更灵活地控制深度值，这对于实现高级渲染效果非常有用。然而，由于支持情况的不同，你应该始终检查扩展是否可用，并且不要在生产环境中直接暴露敏感信息给用户。