将球体划分为多个纹理

Question

我有一个带有地球纹理的球体，我使用SVG文件中的canvas元素动态生成并操纵它。

纹理尺寸为16384x8192，小于此值 - 近距离变焦看起来模糊不清。

但这是一个巨大的纹理大小并导致内存问题...（但它在工作时看起来非常好）

我认为更好的方法是将球体分成32个独立的纹理，每个纹理大小为2048x2048

几个问题：

1. 如何拆分球体并指定正确的纹理？

2. 这种方法在内存和性能方面是否比单个巨大纹理更好？

3. 有更好的解决方案吗？

由于

Answer 1

您可以细分一个立方体，并将立方体贴图。

不是每个面都有一个纹理，而是拥有NxN纹理。 32听起来不是一个好数字，但例如24，（6x2x2）。

您仍将使用相同数量的内存。如果形状实际上需要是球形，则可以进一步细分线段并对整个形状进行标准化（将其球化）。

你甚至无法使用如此大的纹理。

注意顶部球体（立方体贴图，忽略isocube）：

Answer 2

1. 通常情况下，这不是您以编程方式执行的操作，而是在Blender或3D max等3D程序中。它涉及一些平凡的网格分离，UV映射和材料分配。值得尝试的另一种方法是使用多种材料但只有一种网格 - 您仍然可以（有点）渐进式加载。 BUT

2. 你确定你会用＃34; chunks＆＃34;加载顺序而不是一个大的纹理需要花费大量的时间？当然，它在超时和缓存方面有所改进，但是权衡是网格的大块是无纹理的，这是显而易见的，并且是不可思议的。

3. 有一些方法可以缓解您的问题。首先，了解纹理加载优化技术（虽然在游戏引擎中很常见）并不是三个或它构建的内容的重要部分，但这一点非常重要。您永远不会获得UE4或Unity可以获得的近乎无缝的LOD或GPU优化技术。此外，webGL - 虽然在过去十年取得了很大进展 - 但对于处理大量纹理尺寸并不理想，而不是GPU级别（因为它基于OpenGL ES，主要适用于移动设备），当然也不适用于缓存级别 - 我们仍然在这里处理broswers。您不会发现很多webGL工作都是使用您所引用的维度的大量纹理完成的。

话虽如此，

一个。 loader允许您在加载纹理时执行其他操作，这样您的用户就不会盯着未完成的网格＆＃39;。它让您在动态加载时间和UX设计方面非常聪明。另外，请查看this gist，了解渐进式纹理加载器的外观。可以找到一种更具参与性的JPEG特定技术here，但我不会接近它，除非您对低级图形编程感到满意。

B中。 Threejs does有LOD的基本实现，虽然我自己并没有修改它，但我不确定它对纹理是否有用;也就是说，调查的基本前提是你是否可以根据需要逐步加载更高分辨率的文件，就像Google Earth所做的那样。

℃。这超出了你的问题的范围 - 但我会调查Unity的webgl导出（基于threejs）在幕后发生的事情，以及那里采用了哪种巧妙的技巧类似的目的。

最后，你的项目有是否在webgl中？对于雄心勃勃和要求苛刻的东西，有时候＆＃34;正确的＆＃34; openGL / DX更有意义。