丑陋的渲染云

Question

我正在尝试实施this tutorial中的代码，但比例更大（半径= 100000单位）。

我不知道尺寸是否重要，但在我的地球上渲染云有一个奇怪的渲染。 正如教程所做的那样，我使用了两个球体和三个纹理（地球地图，凹凸贴图，云）。

这里的结果（如果云更近，情况会更糟）：

更多的云离行星表面越近，这个小故障就越明显。如果云足够远（但这不现实），问题就会完全消失。

我该怎么办？

Answer 1

使用对数深度缓冲区而不是线性缓冲区。这是一个非常简单的更改，只需在您创建logarithmicDepthBuffer时启用THREE.WebGLRenderer：

var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true});

以下是您可以查看的示例： http://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer

使用LJ_1102建议的polygonOffset是可能的，但它不应该是必要的。

Answer 2

由于深度缓冲区分辨率不足，您遇到的是z-fighting。

你基本上有三种选择来抵消这个：

1. 编写/使用多纹理着色器，在一个球体上渲染所有三个纹理。

2. 增加球体面之间的距离。 /减少近剪裁平面与远剪裁平面之间的距离。

3. 使用polygonOffset和POLYGON_OFFSET_FILL renderstate来偏移外部球体写入的深度值。 Read more about polygonOffset here