如何读取WebGL中的深度缓冲区?

本文介绍了如何读取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.

一般用法:

准备工作:

查询扩展名(必填)

分配单独的颜色和深度纹理(gl.DEPTH_COMPONENT)

将两个纹理合并到一个帧缓冲区(gl.COLOR_ATTACHMENT0，gl.DEPTH_ATTACHMENT)

Query the extension (required)

Allocate a separate color and depth texture (gl.DEPTH_COMPONENT)

Combine both textures in to a single framebuffer (gl.COLOR_ATTACHMENT0, gl.DEPTH_ATTACHMENT)

渲染:

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

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

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

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;