0

我正在尝试将 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);

动画循环：

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

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

4

1 回答 1

0

我遇到了同样的问题，但最终我得到了它的工作。我正在使用我在网上找到的一个 ssao 示例中的 js 文件......在我使用了我的三个版本 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 );

我希望这有帮助。

于 2013-07-10T05:11:44.887 回答