2

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 enter image description here

Scene found here enter image description 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?

Kromster
  • 7,181
  • 7
  • 63
  • 111
Robin Hawkes
  • 688
  • 8
  • 24

4 Answers4

0

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

gaitat
  • 12,449
  • 4
  • 52
  • 76
  • Thanks for the advice. I don't believe it's related to the pixel ratio of the Retina because these SSAO demos worked fine on the same machine a few weeks ago. Something has changed with Three.js or the Retina in those weeks that has caused this to happen. – Robin Hawkes May 26 '13 at 11:09
0

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.

Toji
  • 33,927
  • 22
  • 105
  • 115
  • This is what I'm worried it might be, considering the proximity to a recent OS and firmware upgrade to the MBP Retina. I'll submit the bug and continue in the hope of an interim fix. Interestingly, older SSAO demos work fine. – Robin Hawkes May 27 '13 at 14:05
0

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.

AvD
  • 271
  • 1
  • 5
0

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.

Robin Hawkes
  • 688
  • 8
  • 24
  • I expect this is your explanation: http://www.opengl.org/wiki/Depth_Buffer_Precision – WestLangley Jul 16 '13 at 13:40
  • Very interesting! Still curious that this used to work fine with the camera near value set to 1, until a few months ago. Either something changed in Three.js or a Retina MacBook update screwed things up. Still, just glad to have it fixed! – Robin Hawkes Jul 16 '13 at 18:04