Question

我尝试使用MeshDepthMaterial在three.js中实现一个简单的GPU选择器。我设法使用以下示例提取颜色值： https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_gpu.html

通过将unpackRGBAToDepth函数从此处移植到javascript来重建深度：

https://github.com/mrdoob/three.js/blob/acdda10d5896aa10abdf33e971951dbf7bd8f074/src/renderers/shaders/ShaderChunk/packing.glsl

但是这个值是0.0到255.0之间的浮点数（我原以为它介于0.0和1.0之间或实际深度）。我的问题如下：如何使用此值，是否可以将其转换为实际深度？如果是这样，怎么样？

Answer 1

自己遇到这个问题后（可能是按照从三个以上的地方复制代码的相同路径），我可能已经找到了问题。

当从JS中的RGBA-Texture读取时，您将获得Uint8格式的颜色值，而GLSL中的纹理查找（我怀疑计算是从那里复制的）返回rgba-float值。

因此，您需要在解包之前将颜色向量与1 / 255相乘：

// ...

renderer.readRenderTargetPixels(
    depthRenderTarget, x, y, 1, 1, pixelBuffer);

vec4
  .fromArray(pixelBuffer)
  .multiplyScalar(1/255);

var logz = vec4.dot(unPackFactors);

// ...

在three.js中解压缩RGBA深度值

1 个答案: