Artefacts with SSAO in Three.js only on MacBook Pro (Retina)

Question

I'm currently using the SSAO shader provided in the Three.js examples. It works perfectly on most of my machines aside from my MacBook Pro Retina. The MBP rendered SSAO perfectly until a few weeks ago (potentially after a firmware upgrade on the MBP).

As it stands, the MBP renders SSAO scenes with a huge amount of flickering artefacts all over the screen, like so:

Scene code here

Scene found here

This same code renders perfectly on other machines. I have seen this problem on other MBPs so I'm confident that it's not a single issue.

Aside from the firmware update, I've not changed anything on this MBP between it working and the artefacts appearing (the code is the same).

If I remove the SSAO effect then the scene renders perfectly.

Any ideas?

Answer 1

I fixed the problem by changing the 'near' property of the camera object to be a value greater than 1. Still unsure why this fixes it but SSAO now works perfectly on the Retina MacBook.

Answer 2

I think you need to take into account the devicePixelRatio. Take a look at this example http://uihacker.blogspot.gr/2013/03/javascript-antialias-post-processing.html

Answer 3

The fact that this is happening on all browsers on the Retina Macbook, but appears works on other devices (looks fine on the Chromebook Pixel) suggests that this may be a driver bug on OSX. There may be a way to work around it in WebGL, but I would recommend filing a bug report with Apple at the very least.

Answer 4

I had the exact same problem on a non-retina MacBook Pro, so it seems to be a bug in the NVidia graphics driver. One thing that seems to influence the behavior is the material blending. I get better results with the depthmaterial blending set to THREE.NoBlending:

// depth
var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );

depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
depthMaterial.blending = THREE.NoBlending; //add this

Also the near plane setting of the camera seemingly had effect on the rendering.