ToB企服应用市场:ToB评测及商务社交产业平台

标题: WebGL入门（031）：EXT_frag_depth 简介、利用方法、示例代码 [打印本页]

---

作者: 麻花痒    时间: 2024-9-9 05:27
标题: 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扩展的一般步骤如下：

• 检测扩展：起首确保欣赏器支持该扩展。
  
• 编写片段着色器：在片段着色器中利用 gl_FragDepth 变量来修改深度值。
  
• 启用深度测试：利用 enable 方法启用深度测试。
  
• 设置深度测试模式：利用 depthFunc 方法设置深度测试模式。
  
• 绘制场景：利用 drawArrays 或 drawElements 方法绘制场景。
  

示例代码

下面是一个利用EXT_frag_depth扩展修改深度值的根本示例：

1. const canvas = document.getElementById('my-canvas');
2. const gl = canvas.getContext('webgl2', { antialias: true });
4. // 检测扩展
5. const fragDepth = gl.getExtension('EXT_frag_depth');
7. if (!fragDepth) {
8.   console.error('EXT_frag_depth extension not supported.');
9.   return;
10. }
12. // 创建顶点着色器
13. const vertexShaderSource = `
14.   attribute vec4 a_position;
15.   void main() {
16.     gl_Position = a_position;
17.   }
18. `;
20. const vertexShader = gl.createShader(gl.VERTEX_SHADER);
21. gl.shaderSource(vertexShader, vertexShaderSource);
22. gl.compileShader(vertexShader);
24. // 创建片段着色器
25. const fragmentShaderSource = `
26.   precision mediump float;
27.   void main() {
28.     float depth = (gl_FragCoord.z * 2.0) - 1.0; // 将深度值映射到 [-1, 1]
29.     gl_FragDepth = depth; // 写入深度值
30.     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
31.   }
32. `;
34. const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
35. gl.shaderSource(fragmentShader, fragmentShaderSource);
36. gl.compileShader(fragmentShader);
38. // 创建并链接着色器程序
39. const shaderProgram = gl.createProgram();
40. gl.attachShader(shaderProgram, vertexShader);
41. gl.attachShader(shaderProgram, fragmentShader);
42. gl.linkProgram(shaderProgram);
43. gl.useProgram(shaderProgram);
45. // 启用深度测试
46. gl.enable(gl.DEPTH_TEST);
47. gl.depthFunc(gl.LEQUAL);
49. // 设置顶点数据
50. const vertices = new Float32Array([
51.   0.0,  0.5,
52. -0.5, -0.5,
53.   0.5, -0.5
54. ]);
56. const positionBuffer = gl.createBuffer();
57. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
58. gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
60. const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');
61. gl.enableVertexAttribArray(positionAttributeLocation);
62. gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
64. // 绘制三角形
65. gl.drawArrays(gl.TRIANGLES, 0, 3);

复制代码

注意事项

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

结论

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4