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

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

文章目录

• • • EXT_frag_depth 简介
    • 使用方法
    • 示例代码
    • 注意事项
    • 结论

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