javascript - Three.js 将 StereoEffect 与 FXAA ShaderPass 相结合

标签 javascript three.js webgl

我使用 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 View 结合起来。

最佳答案

sample render: StereoCamera with EffectComposer

在我自己的项目研究和试验相同的问题后,我发现 EffectComposer 和 StereoEffect 不能很好地混合。他们都试图在管道的同一层渲染场景。一个不会流过另一个。

我的解决方案是创建一个新类 StereoCamera,它是从 StereoEffect 改过来的。它几乎与没有效果相同,而是返回由 EffectComposer(或其他一些效果)渲染的相机。

您可以找到 StereoCamera class here , 与 full working example here .

因为这帮助我前进(如果这个问题不是太老的话,也许你也能),我提交了一个拉取请求来添加类和示例以及其他 three.js 示例,希望它能帮助其他人。

===

更新: 事实证明,其他一些人最近也首先解决了这个问题。参见 this pull request和一个不同的,更优化的StereoCamera class .

关于javascript - Three.js 将 StereoEffect 与 FXAA ShaderPass 相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31248397/

相关文章:

c++ - 隧道着色器(从 WebGL 转换为 OpenGL)- 纹理坐标不匹配?

opengl - 什么时候需要透视分割?

javascript - for...in 在 JavaScript 中是如何实现的?

javascript - 在选项卡的单击功能上初始化猫头鹰轮播

javascript - 如果通过特定字符串搜索元素,如何获取 nextsibling 的值?

javascript - 无法将 Threejs EventDispatcher 附加到自定义对象

three.js - 拉伸(stretch)几何 ThreeJS 上的纹理映射

javascript - 如何使用 THREE.JS 从 xyz 中的点数组制作自定义形状?

javascript - "GL_INVALID_OPERATION: Insufficient buffer size."在可变数量的渲染调用之后

div 上的 Javascript onclick 函数仅适用于 IE