Three.js 结合 StereoEffect 和 FXAA ShaderPass [英] Three.js combining StereoEffect with FXAA ShaderPass

问题描述

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

I have created a Google Cardboard scene using Three.js StereoEffect

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

现在我想通过 FXAA 着色器运行它来平滑输出.我知道我可以使用 EffectComposer 做到这一点:

Now I want to run it through the FXAA Shader to smooth the output. I know I can do this using the 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 视图结合起来.

This smooths the image, however I can't work out how to combine this with the StereoEffect view.

推荐答案

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

After research and trials on my own project with the same question, I found out that EffectComposer and StereoEffect don't mix well. They both attempt to render the scene at the same level of the pipeline. One won't flow through the other.

我的解决方案是创建一个新类 StereoCamera，从 StereoEffect 改变而来.在没有效果的情况下几乎相同，而是返回由 EffectComposer(或其他一些效果)渲染的相机.

My solution was to create a new class, StereoCamera, altered from StereoEffect. It's nearly the same without the effect, returning the cameras to be rendered by EffectComposer (or some other effect) instead.

您可以在此处找到 StereoCamera 类，带有完整的工作示例.

You can find the StereoCamera class here, with a full working example here.

因为这帮助我前进了(如果这个问题不是太老的话，也许你也是)，我提交了一个拉取请求，将类和示例与其他三个.js 示例一起添加，希望对其他人有所帮助.

As this has helped me move forward (and perhaps you if this question is not too old), I submitted a pull request to add the class and example with other three.js examples in hopes that it will help others.

===

更新:事实证明，其他一些人最近也首先解决了这个问题.请参阅此拉取请求和一个不同的、更优化的StereoCamera 类.

UPDATE: It turns out that some other folks have recently addressed this as well, first. See this pull request and a different, more optimized StereoCamera class.

这篇关于Three.js 结合 StereoEffect 和 FXAA ShaderPass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！