Three.js: 如何使纹理在视网膜显示器上看起来清晰？

创建于 2012-10-24 · 16评论 · 资料来源: mrdoob/three.js

因此，我只是将笔记本电脑更新为可显示视网膜的Macbook，即使我重复使用高分辨率纹理，它们看起来也很模糊。

所以我想知道我应该怎么做才能解决这个问题？

Question

资料来源

emilsjolander

最有用的评论

只是在这里给其他发现此问题的人留下评论，因为我差点疯了，试图找到答案，而Google一直把我带到这里：我也有同样的问题，但我的解决方案非常简单，只需设置devicePixelRatio渲染器中的

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);

_Worth注意在对象创建时设置devicePixelRatio无效。也许是个错误？

igneosaur 于 2015-10-09

👍21 ❤5 🎉4 😄2

所有16条评论

各向异性可能就是您所追求的。
http://mrdoob.github.com/three.js/examples/webgl_materials_texture_anisotropy.html

mrdoob 于 2012-10-24

好的，这解决了我的重复纹理问题，谢谢：)但是，对于非重复纹理它不起作用，关于如何解决这个问题的任何想法吗？

emilsjolander 于 2012-10-24

他们可能需要两种纹理的力量？

mrdoob 于 2012-10-24

好吧，我尝试增加纹理的分辨率，但是我没有看到任何改善。在没有真正知道如何处理增加的密度的情况下，我的猜测是纹理正在按比例缩小到几何面的适当像素大小，但是随后我的浏览器再次将其按比例缩放以适合显示的密度。

当我仔细观察我重复的纹理时，我可以看到虽然将各向异性设置为max可以大大提高质量，但是纹理仍然不如应有的清晰

emilsjolander 于 2012-10-24

在不查看示例或至少没有屏幕截图的情况下很难说出正在发生的事情，但是您可能需要看看以下内容：

http://www.khronos.org/webgl/wiki/HandlingHighDPI

alteredq 于 2012-10-24

👍1

很棒的链接@alteredq ！解决了我的问题，现在一切看起来都很尖锐:)

emilsjolander 于 2012-10-24

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);

_Worth注意在对象创建时设置devicePixelRatio无效。也许是个错误？

igneosaur 于 2015-10-09

👍21 ❤5 🎉4 😄2

_Worth注意在对象创建时设置devicePixelRatio无效。也许是个错误？

不久前被删除。

mrdoob 于 2015-10-09

@mrdoob ， @greggman ：仅供参考，人们还不清楚必须调用renderer.setPixelRatio _before_调用renderer.setSize 。

mietek 于 2015-12-24

@mietek实际上，我认为这可能已经无意中在dev了解决。

mrdoob 于 2015-12-25

尚不清楚在调用renderer.setSize之前必须先调用renderer.setPixelRatio。

它甚至都没有帮助，或者看起来如此。这是我在野生动物园控制台中得到的：

screen shot 2016-01-24 at 19 15 50

这就是在ipad中的样子：

screen shot 2016-01-24 at 19 21 05

如您所见，矩形看起来是正确的大小，但实际的视口大了2倍。

makc 于 2016-01-24

在dpr = 2的chrome模拟器中，一切看起来正确，但在ipad上却没有。

makc 于 2016-01-24

@makc你有链接吗？

mrdoob 于 2016-01-24

[已删除]

makc 于 2016-01-24

发生了其他事情...

screen shot 2016-01-24 at 19 12 49

使用Safari的开发人员工具，我将style="width: 418px更改style="width: 408px并返回，看起来应该是正确的。我敢打赌，还有其他一些CSS规则搞乱了事情。

mrdoob 于 2016-01-24

似乎来回倾斜东西也可以解决此问题...无论如何，这

        setTimeout (function () {
            renderer.domElement.style.width = (parseInt (renderer.domElement.style.width) - 1) + 'px';
            setTimeout (function () {
                renderer.domElement.style.width = (parseInt (renderer.domElement.style.width) + 1) + 'px';
            }, 0);
        }, 0);

根本不起作用。回到画板...

makc 于 2016-01-24

此页面是否有帮助？

0 / 5 - 0 等级

Three.js: 如何使纹理在视网膜显示器上看起来清晰？

最有用的评论

所有16条评论

相关问题