Three.js发布过程:FXAA在启用SSAO的情况下不起作用 [英] Three.js post process: FXAA does not work with SSAO enabled

问题描述

在这个简单的测试场景中，我需要将SSAO和FXAA效果组合在一起，但无法使其正常工作.启用S​​SAO后，如果我还启用FXAA，则渲染会变黑.

In this simple test scene, I need SSAO and FXAA effects composed together, but I can't get it work. When SSAO is enabled, if I also enable FXAA the render gets black.

在小提琴中，如果取消注释composer.addPass(FXAA_effect);，则会看到问题.我查看了有关如何一次添加这些效果的不同示例，它们分别起作用，但我无法将它们组合在一起.

In the fiddle, if you uncomment composer.addPass(FXAA_effect); you'll see the issue. I check different examples of how to add these effects one at time, they work individually, but I can't get them together.

我想念什么?

JSFiddle: http://jsfiddle.net/ur3tpwag/

JSFiddle: http://jsfiddle.net/ur3tpwag/

那是代码:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 2;
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({ color: 0x1C4A8C });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0, 0, 1);
scene.add(light);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ----------------------------------
// POST PROCESSING
// ----------------------------------

// depth        
var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );

depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
depthMaterial.blending = THREE.NoBlending;
//

// FXAA
FXAA_effect = new THREE.ShaderPass( THREE.FXAAShader );
FXAA_effect.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
FXAA_effect.renderToScreen = true;
//

// composer
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );
//

depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

SSAO_effect = new THREE.ShaderPass( THREE.SSAOShader );
SSAO_effect.uniforms[ 'tDepth' ].value = depthTarget;
SSAO_effect.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
SSAO_effect.uniforms[ 'cameraNear' ].value = 0.01; 
SSAO_effect.uniforms[ 'cameraFar' ].value = 150;
SSAO_effect.uniforms[ 'onlyAO' ].value = false;
SSAO_effect.uniforms[ 'aoClamp' ].value = 0.5;
SSAO_effect.renderToScreen = true;

composer.setSize(window.innerWidth, window.innerHeight);
composer.addPass(FXAA_effect);
composer.addPass(SSAO_effect);
// ----------------------------------

var render = function () {
  requestAnimationFrame( render );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  scene.overrideMaterial = depthMaterial;
  renderer.render( scene, camera, depthTarget, true );

  scene.overrideMaterial = null;
  composer.render();

};

render();

推荐答案

在您的代码中，设置

FXAA_effect.renderToScreen = false;

更新的提琴: http://jsfiddle.net/ur3tpwag/1/

three.js r.72

three.js r.72

这篇关于Three.js发布过程:FXAA在启用SSAO的情况下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！