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

所以我发现给行星做纹理真的很难。我创建了一个4096k的图像，并将其环绕在一个高多边形球体上。除了3-4 mb图像可能存在的内存管理性能问题外，在特写（轨道）视图中纹理看起来不好/像素化

我在想我可以通过分解图片来显著提高分辨率。然后创建每个部分的低、中、高版本。如果摄影机视口非常接近该特定区域，则渲染高分辨率图像。如果距离较远，请从内存中删除图像并应用低版本或中版本

老实说，我不确定使用什么策略来渲染高质量的行星。我是否应该避免使用纹理，只使用高度贴图，并使用Javascript为星球着色？云也是这样。我应该使用alpha贴图创建球体还是使用着色器

---

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

您需要实施lod系统。lod=“level of detail”在3d中，它通常意味着从高多边形模型切换到低多边形模型，但一般来说，它意味着尽一切努力将高细节切换到低细节

因为你不能制作100000x1000000的纹理，而这正是你想要得到的结果所需要做的，你需要用多个部分构建一个球体，并分别对每个部分进行纹理处理。有多少部分取决于您希望放大的距离。谷歌地图有数百万个部分。同时，如果你能缩小视野看到整个地球（就像你在谷歌地图上看到的那样），你就无法画出数百万个部分。相反，您将切换到单个球体。这个过程叫做

没有“通用”解决方案。您通常需要为您的具体案例编写自己的案例

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

人们经常做的另一件事是在LOD之间淡出。因此，当谷歌地图显示单个网格球体时，所有的图像都缩小了，它们过渡到100块或1000块球体，它们在两者之间交叉淡入淡出

住宿的一些例子

---

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

假设您创建了6个方形平面，它们的排列方式使它们形成一个长方体。可以对这些平面进行镶嵌，以使球体具有足够的分辨率。这些平面将具有类似于立方体贴图的UV贴图，每个平面将包含一个立方体贴图面

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

可以将等矩形全景图像转换为立方体贴图。我认为这将让你以更便宜的价格获得更高的分辨率和更少的拉伸

对于初学者，默认球体上的4096 x 4096应为4096x2048，且为等矩形，但新映射的球体可以容纳6 x 4096 x 4096，而无需拉伸，并且可以在6次绘制调用中绘制

---

进一步拆分这些数据可能会为gman的建议提供一个很好的基础。

看看。将调用您提到的更改分辨率，并在webGL中提供。从我的观点来看，你并不需要球体是高多边形（在合理的范围内）。@mlkn这在three.js中是可能的，还是只有纯webgl api？是的，在three.js中都可能。js@mkln我懂了。这会让事情变得很难管理，是不是？我的意思是，如果球体由许多独立的对象组成，我将如何向其添加着色器。我的一个想法是，实际使用蓝色作为基础颜色（海洋），然后使用各种高质量的地块PNG，并对其进行定位，如果要使用单独的瓷砖，则它们应该是具有相同着色器程序和不同输入（制服和纹理）的对象。从另一个角度看，如果你不需要放大你的星球，这可能是一种过度杀伤力。为了获得良好的轨道质量，在一个网格内有mipmap和多纹理就足够了。顺便说一下，据说并非所有设备都可以使用4k纹理。此外，您不必手动制作mipmap，还有gl.generateMipmap功能。