Three.js MeshDepthMaterial无法按预期计算-太暗

Question

我正在尝试使用Three.js的MeshDepthMaterial，但是它并没有达到我的期望。也许我误解了材料应该如何工作，但是我假设它使用从给定相机位置到相机的近距和远距设置来确定该材料在给定点的“有多白”。因此，如果我的相机位于（0，0，0）且接近1且远离1000，并且我在（0，0，-2）处有一个立方体位置，那么我认为该立方体将非常白色（1-.002 = 99.8％白色）。

但是，情况并非如此。分别使用近距离和远距离1和10，将后方立方体放置在距离相机this is how the material renders约10个单位的位置。

如您所见，尽管最接近的立方体更接近4个单位，每个立方体的材料几乎都是黑色的。

As seen here，我必须离立方体非常近才能看到强烈的白色，即使这样，立方体的远角（甚至不到1个单位）都是强烈的灰色。

如果我将数值从1000改为10，这些结果也将保持不变。

我误解了MeshDepthMaterial的工作原理吗？这是我的代码：

renderer: new THREE.WebGLRenderer({antailias:true, logarithmicDepthBuffer: true}),
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10)

....

this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor(new THREE.Color(0x00000, 1.0));
this.renderer.shadowMap.enabled = true;
this.scene.overrideMaterial = new THREE.MeshDepthMaterial();

this.camera.position.z = 4;

....

this.createCube(-3, 0, -4, "#FF1215");
this.createCube(0, 0, -2);
this.createCube(2, 0, 0, "#FF7232");

其中createCube的参数是位置

Answer 1

您正在使用FirebaseAnalytics.SetUserProperty("gamertype", "active"); ，它将深度功能更改为如下所示：

从对数函数可以看到，由于亮度不是线性函数，因此需要沿x轴走得很远（或使摄像头真正靠近几何体）才能使亮度接近1。从您的描述中，听起来好像您正在期待一个线性深度缓冲区，您可以通过设置来告诉渲染器使用它：

logarithmicDepthBuffer: true

或者您可以从构造函数中省略此选项，因为线性深度是默认值。