CODEWITHSUNDEEP
javascriptthree.jswebgl
zooooom
zooooom

Reputation: 23

Three.js combining StereoEffect with FXAA ShaderPass

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

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

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();

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

Upvotes: 2

Views: 1911

Answers (1)

Christopher Stevens
Christopher Stevens

Reputation: 1278

sample render: StereoCamera with EffectComposer

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.

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.

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

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.

===

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.

Upvotes: 7

Related Questions