僅在MacBook Pro（Retina）上在Three.js中使用SSAO的偽像

Question

我目前正在使用Three.js示例中提供的SSAO着色器 。 除了MacBook Pro Retina之外，它在我的大多數計算機上都能完美運行。 MBP在數周之前（可能是在MBP上進行固件升級之后）完美地實現了SSAO。

就目前而言，MBP渲染SSAO場景，並在屏幕上顯示出大量閃爍的偽像，如下所示：

場景代碼在這里

在這里找到場景

相同的代碼可以在其他計算機上完美呈現。 我已經在其他MBP上看到了此問題，因此我相信這不是一個單一的問題。

除了固件更新之外，在此MBP正常工作和出現的偽像之間，我沒有進行任何更改（代碼相同）。

如果刪除SSAO效果，則場景將完美呈現。

有任何想法嗎？

Answer 1

我認為您需要考慮devicePixelRatio。 請看以下示例http://uihacker.blogspot.gr/2013/03/javascript-antialias-post-processing.html

Answer 2

這在Retina Macbook的所有瀏覽器上都發生了，但在其他設備上也可以顯示（在Chromebook Pixel上看起來還不錯），這一事實表明這可能是OSX上的驅動程序錯誤。 WebGL中可能有解決此問題的方法，但我建議至少向Apple提交錯誤報告 。

Answer 3

我在非視網膜MacBook Pro上遇到了完全相同的問題，因此似乎是NVidia圖形驅動程序中的錯誤。 似乎影響行為的一件事是材料混合。 將depthmaterial混合設置為THREE可獲得更好的結果。

// 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上完美運行。