Antialiasing not working in Three.js

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

The above works with my desktop computer, but it doesn't seem to work with my laptop.


In case your computer does not support default WebGL AA, resizing the renderer size and canvas width gives me much better result than FXAA. Mind you the CSS holds the real width and height values.

var w,h = [your prefs];

renderer.setSize(window.innerWidth*2, window.innerHeight*2);

renderer.domElement.style.width = w;
renderer.domElement.style.height = h;
renderer.domElement.width = w*2
renderer.domElement.height = h*2

The property is called antialias and It is activated like this:

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

Doesn't work for all browsers, check this issue for more information.


Note:
The property is NOT publicly accessible, so setting antialias after construction like this:

renderer.antialias = true; // <-- DOES NOT WORK

will not work.


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.