Three.js antialiasing not working on Chrome

Question

I'm currently running Chrome v31 and antialiasing seems to not be working at all. No errors in either browsers.

Possibly relevant code:

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

In Safari it renders fine:

vs Chrome:

Answer 1

It seems to be a rendering issue with Chrome, perhaps you have the 32 bit Chrome installed?

You can do two things to increase the quality. First set a renderer attribute

renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap

and then you can also increase the shadowmap size of your light with:

light.shadowMapWidth = 1024; // default is 512
light.shadowMapHeight = 1024; // default is 512

as seen in the issue here: Quality of Three.js shadow in Chrome/MacOS?

“ I believe that this depends on the browser and system you are using. As far as i know, Firefox doesn't support antialiasing right now at all. Also it may be dependant on your graphics card and drivers. For example, i don't get antialiasing in Chrome on my old mid 2009 MacBook Pro, but i do get antialiasing on my newer late 2012 machine.

Also, you may consider using the FXAA shader to do the antialiasing as a postprocessing step. You can read about postprocessing here. ”

Read more: Antialiasing not working in Three.js