Javascript 云上的丑陋渲染

我试图从中实现代码，但比例要大得多（radius=100000个单位）

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

结果如下（如果云层更近，情况会更糟）：

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

---

我能做什么？

您遇到的问题是深度缓冲区分辨率不足

您基本上有三个选项来解决此问题：

编写/使用在一个球体上渲染所有三个纹理的多重纹理着色器

增加球体面之间的距离。/减小近剪裁平面和远剪裁平面之间的距离

使用

polygonOffset

和

POLYGON\u OFFSET\u FILL

renderstate偏移外部球体写入的深度值

---

使用对数深度缓冲区而不是线性深度缓冲区。这是一个非常简单的更改，只需在创建

三个时启用
对数深度缓冲区即可。WebGLRenderer
如下所示：

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

下面是一个您可以查看的示例：

使用LJ_1102建议的polygonOffset是一种可能性，但这不是必需的。
如果您的近平面为0.01，如教程中所述，请尝试将其增加到100。谢谢！最后，我使用了travnik解决方案，效果非常好。但我有一些问题。您所说的深度缓冲区分辨率不足。你是说，在某种意义上，我对球体半径使用了太大的值？我不这么认为，因为我找到了z战斗原点：我使用64段（宽度和高度）来绘制球体。如果我将段数增加到512，问题几乎完全消失。它让我认为，z形格斗是因为两个球体的表面是平的，所以它们在格斗。只有顶点处于“良好高度”。顺便说一句：我想接受你的答案和travnik的答案，但我认为这是不可能的。我投了你一票，但很抱歉我不能再多做了，因为你的答案更完整，提供了更多的调查可能性。问题不在于你的球体太大，而在于它们之间的距离相对于球体的大小来说“太小”。默认深度缓冲区是非线性的，并且朝向远剪裁平面的分辨率在降低。您的假设是正确的，当您增加球体的分段数时，您可以获得与理想球体更好的近似值，从而减少跨面插值深度值时的错误。非常感谢，这是有效的。你也可以看到我对LJ_1102答案的评论。关于你的答案，我认为对数深度缓冲区没有那么优化？我现在看不出渲染持续时间有什么不同，但我将来需要在场景中添加更多的元素。@Morgantouveryquilling日志缓冲区在片段着色器中有一个开销，它添加了一个对数函数。至于计算碎片的颜色和位置所需的所有其他事情，我看到这是一个微小的下降。换句话说：性能开销非常小。此外，此开销是静态的-无论场景深度测试中有多少对象，基本上每个渲染像素只执行一次。源代码帮助，最后您的解决方案会导致“我的粒子”的渲染出现问题。我使用ShaderParticleEngine作为我的粒子引擎，现在粒子在所有其他元素后面渲染，请看：（飞船反应堆的粒子显示在地球后面，也在反应堆后面-发射器的原点在反应堆内部）这是一个单独的问题，我的朋友！）在这种情况下，有一点神奇的作用是，在构造函数中向
SPE.Group
传递额外的参数，就像这样
new SPE.Group（{depthTest:false}）
这应该会导致粒子被渲染。请参阅错误报告，抱歉延迟！这不会改变任何事情。这些参数出现在粒子编辑器导出中，我复制/粘贴了给定的代码。我有“depthWrite:false”和“depthTest:false”