Three.js将StereoEffect与FXAA ShaderPass相结合

Question

我使用Three.js StereoEffect创建了一个Google Cardboard场景

effect = new THREE.StereoEffect(renderer);
effect.render(scene, camera);

现在我想通过FXAA Shader运行它来平滑输出。我知道我可以使用EffectComposer执行此操作：

renderScene = new THREE.RenderPass(scene, camera);
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth * dpr), 1 / (window.innerHeight * dpr));
effectFXAA.renderToScreen = true;

composer = new THREE.EffectComposer(renderer);
composer.setSize(window.innerWidth * dpr, window.innerHeight * dpr);
composer.addPass(renderScene);
composer.addPass(effectFXAA);
composer.render();

这会使图像变得平滑，但是我无法弄清楚如何将它与StereoEffect视图结合起来。

Answer 1

在对我自己的项目进行相同问题的研究和试验后，我发现EffectComposer和StereoEffect混合不好。它们都试图在管道的同一级别渲染场景。一个人不会流过另一个人。

我的解决方案是创建一个新的类StereoCamera，由StereoEffect改变。没有效果几乎相同，返回由EffectComposer（或其他一些效果）渲染的相机。

您可以找到StereoCamera class here，full working example here。

由于这有助于我前进（也许你，如果这个问题不是太老），我提交了一个拉取请求，用其他三个.js示例添加类和示例，希望它能帮助其他人。

===

<强>更新 事实证明，其他一些人最近也解决了这个问题。请参阅this pull request和其他更优化的StereoCamera class。