Anti Aliasing Three.js / WebGL

问题

I have an issue with anti aliasing when i spin model with orbiter

i am using

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

it is helping but not resolving the issue fully.

in this position it looks ok:

Does anyone know how to resolve this? or have any idea what else can i try? ( code sample would be appreciated )

Thanks

EDIT:

Ok i have added this:

renderer.setPixelRatio(2);

and it has improved a LOT ( see result bellow ), but still shows a bit,

anyone has any other idea suggestion?

回答1:

I am not completely sure if this will do the trick but it might be worth a try. Using the example below, set your textures anisotropy to the renderers max anisotropy. (i am using the webglrenderer) this should enabel antialiasing on this texture and reduce jagged lines like in the first image.

texture.anisotropy = renderer.getMaxAnisotropy().

回答2:

Are the lines textures?

If so, I had a simular issue then depending on the camera position not completely on top my texture would get blurry. Maybe this helps for you:

texture.minFilter = THREE.LinearFilter;

来源：https://stackoverflow.com/questions/49113835/anti-aliasing-three-js-webgl