javascriptthree.jswebglrenderantialiasing

Antialiasing not working in Three.js


I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference.

 renderer = new THREE.WebGLRenderer({ antialiasing: true });

I have searched for possible solutions, yet I can't seem to find or understand why this doesn't work. Is there something I am missing or need to in order to get antialiasing to work?

EDIT:

Links that helped me fix this issue: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples/js

It took some digging but the developers for three.js have it covered!


Solution

  • The property name you are using in the argument object of the WebGLRenderer constructor is incorrect. According to the documentation, the name of the property should be 'antialias', not 'antialiasing'.

    I tested it in Google Chrome for Mac OS and there was a noticeable smoothing in the rendering of edges in a demo featuring a spinning cube.