Three.js 将 StereoEffect 与 FXAA ShaderPass 相结合

Question

我使用 Three.js StereoEffect

创建了一个 Google Cardboard 场景

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

现在我想运行它通过FXAA着色器来平滑输出。我知道我可以使用 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 不能很好地混合。他们都试图在管道的同一层渲染场景。一个不会流过另一个。

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

您可以找到 StereoCamera class here, with a full working example here。

因为这帮助我前进（如果这个问题不是太老，也许你也能），我提交了一个拉取请求以添加 class 和示例以及其他 three.js 示例，希望如此它将帮助其他人。

===

更新： 事实证明，其他一些人最近也首先解决了这个问题。参见 this pull request and a different, more optimized StereoCamera class。

Three.js 将 StereoEffect 与 FXAA ShaderPass 相结合

Three.js combining StereoEffect with FXAA ShaderPass

javascript

webgl

three.js