用于为行星添加高分辨率纹理的Three.js方法

Question

所以我发现纹理行星真的很难。我创建了一个4096k的图像并将其包裹在高多边形球体周围。除了3-4 mb图像可能存在的内存管理性能问题外，纹理在近距离（轨道）视图中看起来很糟糕/像素化。

我想我可以通过分割图片来显着提高分辨率。然后创建每个部分的低，中，高版本。如果摄影机视口非常靠近该特定部分，则渲染高分辨率图像。如果遥远的地方从内存中删除图像并应用低版本或中等版本。

说实话，我不知道用什么策略来渲染高质量的行星。我应该避免使用纹理，只使用高度贴图并使用Javascript为行星着色吗？云也一样。我应该创建一个带有alpha贴图的球体，还是应该使用着色器？

正如你所看到的，这就是我所拥有的问题，希望你可以启发我。随着时间的推移，Webgl / three.js的性能得到了显着提升，但由于这一切都是在浏览器中完成的，因此我认为从长远来看，正确的解决方案是至关重要的。

Answer 1

你需要实施一个lod系统。 lod =“细节水平”，在3d中它意味着通常意味着从高多边形切换到低多边形模型，但一般来说它意味着做任何事情来将高细节切换到低细节

因为你无法制作纹理1000000x100000，这几乎是你需要做的以获得你想要的结果你需要从多个部分构建一个球体并分别纹理每一个。多少部分取决于您希望能够放大的距离.Google地图有数百万个部分。同时，如果您可以缩小以查看整个星球（就像您在Google地图中一样），则无法绘制数百万个部分。相反，你会切换到一个球体。该过程称为"LODing"

没有“通用”解决方案。您通常需要根据具体情况编写自己的。

对于谷歌地图这样的东西，他们最有可能做的就是有几个层次的细节。当你可以看到整个星球时，一个球体。一个球体，比较接近100个碎片。近距离时由1000块组成的球体，靠近时由10000块组成的球体等。它们也只显示您可以看到的碎片。决定和管理使用通用解决方案显示哪些部分将会减慢速度（每帧看数百万件）但是，作为应用程序编写者，您知道哪些部分是可见的，因此您可以确保只有那些部分在您的场景中。

人们经常做的另一件事就是在LOD之间褪色。因此，当谷歌地图显示单个网格球体时，所有人都会缩小并将它们转换为100个或1000个球体，它们会在两者之间交叉淡入淡出。

lodding的一些例子

http://acko.net/blog/making-worlds-1-of-spheres-and-cubes/

http://vterrain.org/LOD/spherical.html

Answer 2

您可以创建具有不同拓扑的球体。

假设您创建了6个方形平面，以这样的方式排列，形成一个方框。您可以对这些平面进行细分，以使球体具有足够的分辨率。这些平面将具有类似于立方体映射的UV映射，每个映射都将保持立方体贴图面。

然后循环遍历所有顶点，取位置向量并对其进行标准化。这将产生一个球体。

您可以将equirectangular全景图像转换为立方体贴图。我认为它可以让你获得更高的分辨率和更便宜的拉伸。

对于初学者来说，4096 x 4096在默认球体上应该是4096x2048，带有equirectangular，但是新映射的球体可以容纳6 x 4096 x 4096而没有拉伸，并且可以在6个绘制调用中绘制。

进一步分裂这些可以为gman所建议的东西提供良好的基础。