- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
与建议相反here在相应的 three.js 示例中,我正在研究如何应用实际的自定义 mipmap,即不同的 mipmap 大小的不同自定义图像,而不仅仅是引导 three.js 自动生成 mipmap。这可能吗?我根本找不到任何示例代码。
原因是文字。正确创建的文本优于任何自动抗锯齿,尤其是在小尺寸上,当使用不同的字体来显示不同的尺寸时。我不知道这在实践中是否会成为更好的解决方案,我正在寻找答案。
最佳答案
您需要创建一个 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
或 LinearMipMapNearestFilter
。
(我还没有弄清楚如何使用不完整的 mipmap 链,所以我总是提供一个完整的链,它低至 1 x 1。另外,据我所知,我提到的 image
above 不需要是 HTMLCanvasElement
。它可以是 WebGLRenderingContext.texImage2D() 接受的任何类型作为其 pixels
参数:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D )
关于javascript - 如何在 three.js 中的纹理上应用自定义 mipmap?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51249992/
我是一名优秀的程序员,十分优秀!