javascript - 云上的丑陋渲染

Question

我正在尝试实现本教程中的代码，但比例要大得多（半径 = 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_FILLrenderstate 来偏移由外球体写入的深度值。在此处阅读有关 polygonOffset 的更多信息。