如何在三个.js的纹理上应用自定义 mipmap?

Question

与这里和相应的三个示例.js建议相反，我正在研究如何应用实际的自定义mipmap，即针对不同mipmap大小的不同自定义图像，而不仅仅是指南三个.js自动生成mipmap。 这可能吗？我根本找不到任何示例代码。

原因是文本。正确创建的文本优于任何自动抗锯齿，尤其是在小尺寸上，当对不同大小使用不同的字体时。我不知道这在实践中是否会是一个更好的解决方案，我正在寻找答案。

Answer 1

您需要创建一个尺寸为 [64 x 64、32 x 32、16 x 16、8 x 8、4 x 4、2 x2、1 x 1] 的image数组，并将其分配给纹理的mipmaps属性。

所使用的图像应始终为正方形，其尺寸应为 2 的幂。数组中的每个后续图像的维度应减半，直到达到维度 1 x 1。

对于您的情况，您可以编写一个函数textImage，该函数可以在所需的尺寸和字体下绘制相同的文本。比如说(text, dimension, font) => canvas，其中canvas是HTMLCanvasElement。然后你可以写

texture.mipmaps[0] = textImage('sampleText', 64, 'font0');
texture.mipmaps[1] = textImage('sampleText', 32, 'font1');
...
texture.mipmaps[6] = textImage('sampleText', 1, 'font6');

而且，如果您不想在采样时混合两个mipmap(例如，您为不同的级别使用不同的字体)，则需要将minFilter设置为NearestMipMapNearestFilter或LinearMipMapNearestFilter。

(我还没有弄清楚如何处理不完整的 mipmap 链，所以我总是提供一个完整的链，低至 1 x 1。另外，在我的理解中，我上面提到的image不需要HTMLCanvasElement。它可以是WebGLRenderingContext.texImage2D()接受作为其pixels参数的任何类型：https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D)