Anti Aliasing Three.js / WebGL

时间:2018-03-05 15:27:07

标签: javascript 3d three.js

当我使用orbiter旋转模型时,我遇到了抗锯齿的问题

我正在使用

renderer = new THREE.WebGLRenderer({                 preserveDrawingBuffer:true,                 antialias:true});

它有助于但不能完全解决问题。

antialiasing

在这个位置看起来没问题:

anti aliasing works

有谁知道如何解决这个问题?或者知道我还能尝试什么? (代码示例将不胜感激)

由于

编辑:

好的,我添加了这个:

renderer.setPixelRatio(2);

它已经改进了很多(见下文结果),但仍然显示了一点,

任何人都有其他想法建议吗?

improved

2 个答案:

答案 0 :(得分:0)

我不完全确定这是否会起作用,但值得一试。 使用下面的示例,将纹理各向异性设置为渲染器最大各向异性。 (我正在使用webglrenderer)这应该能够在这个纹理上实现抗锯齿效果并减少第一张图像中的锯齿状线条。

texture.anisotropy = renderer.getMaxAnisotropy()。

答案 1 :(得分:0)

线条是纹理吗?

如果是这样,我有一个类似的问题,然后根据相机位置不完全在我的纹理会变得模糊。也许这对你有帮助:

texture.minFilter = THREE.LinearFilter;