仅在MacBook Pro（Retina）上使用SSAO in Three.js的人工制品

Question

我目前正在使用SSAO shader provided in the Three.js examples。除了我的MacBook Pro Retina之外，它在我的大多数机器上都能完美运行。几周前，MBP完美呈现了SSAO（可能是在MBP固件升级之后）。

目前，MBP在屏幕上呈现了大量闪烁的人工制品，如下所示：

Scene code here

Scene found here

这个代码在其他机器上完美呈现。我已经在其他MBP上看到了这个问题，所以我相信这不是一个问题。

除了固件更新之外，我还没有改变它在工作和出现的人工制品之间的任何内容（代码是相同的）。

如果我删除了SSAO效果，那么场景就会完美呈现。

有什么想法吗？

Answer 1

我认为您需要考虑devicePixelRatio。看一下这个例子http://uihacker.blogspot.gr/2013/03/javascript-antialias-post-processing.html

Answer 2

事实上，这种情况发生在Retina Macbook上的所有浏览器上，但似乎在其他设备上运行（在Chromebook Pixel上看起来很好）表明这可能是OSX上的驱动程序错误。可能有办法在WebGL中解决它，但我建议至少提交bug report with Apple。

Answer 3

我在非视网膜MacBook Pro上遇到了完全相同的问题，因此它似乎是NVidia显卡驱动程序中的一个错误。似乎影响行为的一件事是材料混合。深度材质混合设置为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

相机的近平面设置似乎也对渲染有影响。

Answer 4

我通过将相机对象的“near”属性更改为大于1的值来解决问题。仍然不确定为什么要修复它，但SSAO现在可以在Retina MacBook上完美运行。