Three.js combining StereoEffect with FXAA ShaderPass

吃可爱长大的小学妹 提交于 2019-12-10 10:47:22

问题


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.


回答1:


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.



来源:https://stackoverflow.com/questions/31248397/three-js-combining-stereoeffect-with-fxaa-shaderpass

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!