在Three.js的单个平面上使用谷歌地图风格的四叉树材料 - 1x1,2x2,4x4和8x8

Question

我正在尝试并且未能弄清楚如何在单个平面上实现四元树材料（图像），就像Google地图风格的可缩放图块一样，越接近就越准确。

简而言之，我希望能够拥有1x1图像纹理（覆盖256个单位宽和高的平面），然后可以用2x2纹理替换，然后可以用4x4纹理替换，并且等等。

与下面的图片示例相似......

理想情况下，我希望避免为每个缩放级别/段数创建不同的平面。一个完美的解决方案将允许我将单个平面分成8x8段（最高缩放）并动态更新纹理数量。因此，它将从所有64（8x8）段中的1x1纹理开始，然后变为2x2纹理，每个纹理覆盖4x4段，依此类推。

不幸的是，我无法弄清楚如何做到这一点。我探讨了为每张脸设置materialIndex，但是你无法在第一次渲染后更新它们，这样就无法工作了。我已经尝试过查看UV坐标，但我不明白它在这种情况下是如何工作的，也不知道如何在Three.js中实际实现它 - 这个特定情况的文档/示例几乎没有。

顶点着色器是研究中提出的另一种选择，但我再也不知道如何构建它。

我很感激任何和所有这方面的帮助，这将是一种技术，证明对我认为的其他Three.js用户有价值。

Answer 1

不是100％确定你要做什么，无论你是在谈论纹理贴图（根据当前设置/缩放查找和不同的纹理），但如果你正在寻找基于四叉树的纹理，其细节增加你放大然后这基本上是mipmaping的作用。

（因为这可以用来做各种奇怪的事情，但这完全是另一次冒险）

一般情况下，mipmapping会根据您使用的过滤自动进行 - 但听起来您需要对其进行更多控制。

我创建了一个隐藏在three.js源代码树中的示例，这可能会有所帮助：

http://mrdoob.github.com/three.js/examples/webgl_materials_texture_manualmipmap.html

其中显示了如何手动加载每个mipmap级别，而不是仅自动生成它。

HTH