根据鼠标位置和深度图计算 3D 点

Question

我需要使用渲染的深度图从屏幕空间位置计算 3D 坐标。不幸的是，使用常规光线追踪对我来说不是一个选择，因为我正在处理一个包含 5M 面量级的几何体。

所以我想我会做以下几点：

• 使用 RGBADepthPacking将深度贴图渲染到渲染目标中
使用
• 常规的取消投影调用从鼠标位置计算光线(就像我在使用光线投射时所做的那样)
• 从鼠标坐标处的深度图中查找深度，并使用该距离计算沿射线的点。

这种工作，但不知何故定位点总是稍微落后于物体，所以我的深度计算可能有问题。

现在有关上述步骤的一些详细信息

渲染深度图非常简单：

const depthTarget = new THREE.WebGLRenderTarget(w, h);
const depthMaterial = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking
});
// in renderloop
renderer.setClearColor(0xffffff, 1);
renderer.clear();
scene.overrideMaterial = depthMaterial;
renderer.render(scene, camera, depthTarget);

使用以下命令在鼠标位置查找存储的颜色值：

renderer.readRenderTargetPixels(
depthTarget, x, h - y, 1, 1, rgbaBuffer
);

并使用(改编自packing.glsl中的GLSL版本)转换回浮点数：

const v4 = new THREE.Vector4()
const unpackDownscale = 255 / 256;
const unpackFactors = new THREE.Vector4(
unpackDownscale / (256 * 256 * 256),
unpackDownscale / (256 * 256),
unpackDownscale / 256,
unpackDownscale
);
function unpackRGBAToDepth(rgbaBuffer) {
return v4.fromArray(rgbaBuffer)
.multiplyScalar(1 / 255)
.dot(unpackFactors);
}

最后计算深度值(我在 readDepth() 中找到了相应的代码，examples/js/shaders/SSAOShader.js我将其移植到 JS)：

function computeDepth() {
const cameraFarPlusNear = cameraFar + cameraNear;
const cameraFarMinusNear = cameraFar - cameraNear;
const cameraCoef = 2.0 * cameraNear;
let z = unpackRGBAToDepth(rgbaBuffer);
return cameraCoef / (cameraFarPlusNear - z * cameraFarMinusNear);
}

现在，由于此函数返回范围为 0..1 的值，我认为它是剪辑空间坐标中的深度，因此我使用以下方法将它们转换为"真实"单位：

const depth = camera.near + depth * (camera.far - camera.near);

这些计算显然有些不对劲，我还没有弄清楚关于深度存储方式的数学和细节。 有人可以指出我犯的错误吗？

补充：我尝试过的其他事情

首先，我认为应该可以在我的非项目调用中使用解压缩的深度值作为 z 的值，如下所示：

const x = mouseX/w * 2 - 1;
const y = -mouseY/h * 2 + 1;
const v = new THREE.Vector3(x, y, depth).unproject(camera);

但是，这也不能获得正确的坐标。

[编辑1 2017-05-23 11：00CEST]

根据@WestLangleys评论，我找到了听起来应该有帮助的perspectiveDepthToViewZ()功能。用JS编写的函数是

function perspectiveDepthToViewZ(invClipZ, near, far) {
return (near * far) / ((far - near) * invClipZ - far);
}

但是，当使用深度图中的解压缩值调用时，结果会相差几个数量级。请参阅此处。

Answer 1

好的，所以。终于解决了。因此，对于遇到类似问题的每个人，以下是解决方案：

computeDepth-函数的最后一行是错误的。packing.glsl中有一个函数perspectiveDepthToViewZ，很容易转换为JS：

function perspectiveDepthToViewZ(invClipZ, near, far) {
return (near * far) / ((far - near) * invClipZ - far);
}

(我相信这在某种程度上是逆投影矩阵的一部分)

function computeDepth() {
let z = unpackRGBAToDepth(rgbaBuffer);
return perspectiveDepthToViewZ(z, camera.near, camera.far);
}

现在，这将返回该点的视图空间中的 z 轴值。剩下要做的就是将其转换回世界空间坐标：

const setPositionFromViewZ = (function() {
const viewSpaceCoord = new THREE.Vector3();
const projInv = new THREE.Matrix4();
return function(position, viewZ) {
projInv.getInverse(camera.projectionMatrix);
position
.set(
mousePosition.x / windowWidth * 2 - 1,
-(mousePosition.y / windowHeight) * 2 + 1,
0.5
)
.applyMatrix4(projInv);
position.multiplyScalar(viewZ / position.z);
position.applyMatrix4(camera.matrixWorld);
};
}) ();