Question

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

原因是文本。正确创建的文本优于任何自动抗锯齿功能，尤其是在使用小字体的情况下。我不知道这是否最终会成为实践中更好的解决方案，我正在寻找答案。

Answer 1

您需要创建一个image数组，其尺寸为[64 x 64、32 x 32、16 x 16、8 x 8、4 x 4、2 x 2、1 x 1]和将其分配给纹理的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或{{ 1}}。

（我还没有弄清楚如何使用不完整的mipmap链，因此我总是提供一个完整的链，该链的大小应小于1 x1。另外，据我所知，我上面提到的LinearMipMapNearestFilter并没有这样做”不必为image。它可以是WebGLRenderingContext.texImage2D（）接受为其HTMLCanvasElement参数的任何类型：https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D）

如何在Three.js中的纹理上应用自定义Mipmap？

1 个答案: