如何读取WebGL中的深度缓冲区? [英] How can I read the depth buffer in WebGL?

问题描述

除了执行我自己的光线投射之外，如何使用WebGL API，如何从深度缓冲区中获取一个值，或者如何以其他方式从屏幕坐标中确定3D坐标(即找到被点击的位置)?

Using the WebGL API, how can I get a value from the depth buffer, or in any other way determine 3D coordinates from screen coordinates (i.e. to find a location clicked on), other than by performing my own raycasting?

推荐答案

几年过去了，这些天WEBGL_depth_texture扩展名广泛可用...除非您需要支持IE.

Several years have passed, these days the WEBGL_depth_texture extension is widely available... unless you need to support IE.

一般用法:

准备工作:

1. 查询扩展名(必填)
2. 分配单独的颜色和深度纹理(gl.DEPTH_COMPONENT)
3. 将两个纹理合并到一个帧缓冲区(gl.COLOR_ATTACHMENT0，gl.DEPTH_ATTACHMENT)

1. Query the extension (required)
2. Allocate a separate color and depth texture (gl.DEPTH_COMPONENT)
3. Combine both textures in to a single framebuffer (gl.COLOR_ATTACHMENT0, gl.DEPTH_ATTACHMENT)

渲染:

1. 绑定帧缓冲区，渲染场景(通常是简化版本)

2. 取消绑定帧缓冲区，将深度纹理传递到着色器，并像读取其他任何纹理一样读取它:

1. Bind the framebuffer, render your scene (usually a simplified version)

2. Unbind the framebuffer, pass the depth texture to your shaders and read it like any other texture:

texPos.xyz = (gl_Position.xyz / gl_Position.w) * 0.5 + 0.5;
float depthFromZBuffer = texture2D(uTexDepthBuffer, texPos.xy).x;

这篇关于如何读取WebGL中的深度缓冲区?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！