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

文章目录

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

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

EXT_frag_depth 简介

EXT_frag_depth扩展为WebGL添加了一个新的内置变量 gl_FragDepth，允许开发者在片段着色器中直接修改深度值。默认情况下，WebGL根据片段着色器输出的颜色值和深度测试模式自动计算深度值。使用EXT_frag_depth扩展，你可以覆盖这个默认行为，从而实现更加精细的控制。

使用方法

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

检测扩展：首先确保浏览器支持该扩展。编写片段着色器：在片段着色器中使用 gl_FragDepth 变量来修改深度值。启用深度测试：使用 enable 方法启用深度测试。设置深度测试模式：使用 depthFunc 方法设置深度测试模式。绘制场景：使用 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中更灵活地控制深度值，这对于实现高级渲染效果非常有用。然而，由于支持情况的不同，你应该始终检查扩展是否可用，并且不要在生产环境中直接暴露敏感信息给用户。