EffectComposer只繪製紋理到屏幕

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> 

這是我的初始化函數中：

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); 

我希望這有幫助。