Question

我正在尝试将FXAA与效果作曲家一起使用，但我无法让它正常工作。

这是场景，WebGLRenderer如何呈现它： http://imageshack.us/a/img515/143/rendererscene.png

这与使用EffectComposer的场景相同： http://imageshack.us/a/img849/5336/composerscene.png

它只显示纹理。

我的代码结构如下：

renderer = new THREE.WebGLRenderer({ antialias : true });
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowCameraNear = 1;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 40;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.6;
renderer.shadowMapWidth = graphics_options.shadow_res;
renderer.shadowMapHeight = graphics_options.shadow_res; 
renderer.setClearColorHex( cwe_settings.bg_color, cwe_settings.bg_alpha);
document.getElementById("blackboard").appendChild(renderer.domElement);
renderer.physicallyBasedShading = true;

    (...)


composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth), 1 / (window.innerHeight));
effectFXAA.renderToScreen = true;
composer.addPass(effectFXAA);

Animationloop：

(...)
composer.render(scene, camera);

有没有人有同样的问题？我没有在互联网上找到类似的东西。

Answer 1

我遇到了同样的问题，但最终让它发挥了作用。我在网上找到的一个ssao例子中使用了js文件......在我使用了我的THREE版本，r58附带的js文件后，它工作了。

此示例应包含以下文件：

<!-- THREE Shaders -->
<script type="text/javascript" src="/js/shaders/CopyShader.js"></script>
<script type="text/javascript" src="/js/shaders/ConvolutionShader.js"></script>
<script type="text/javascript" src="/js/shaders/FXAAShader.js"></script>
<script type="text/javascript" src="/js/shaders/SSAOShader.js"></script>
<!-- THREE Post Processing -->
<script type="text/javascript" src="/js/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="/js/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="/js/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="/js/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="/js/postprocessing/BloomPass.js"></script>

这是我的init函数内部：

self.height = window.innerHeight;
self.width = window.innerWidth;
self.scale = 0.75;

var renderScene = new THREE.RenderPass( self.scene, self.camera );

var effectBloom = new THREE.BloomPass( 2 );

var effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA.uniforms['resolution'].value.set( 1 / self.width, 1 / self.height );
effectFXAA.renderToScreen = true;

var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
var renderTarget = new THREE.WebGLRenderTarget( self.width, self.height, parameters );

self.composer = new THREE.EffectComposer( self.renderer, renderTarget );
self.composer.addPass( renderScene );
self.composer.addPass( effectBloom );
self.composer.addPass( effectFXAA );

这是我的动画功能：

requestAnimationFrame( self.animate );
self.Tick();
self.renderer.clear();
self.composer.render( self.fpsCounter.dt );

我希望这会有所帮助。

EffectComposer仅将纹理绘制到屏幕

1 个答案: