THREE.js CopyShader에서 FXAA 셰이더가 작동하지 않습니다. - 공백으로 렌더링합니다.

Question

동일한 캔버스와 렌더러에서 여러 장면을 렌더링하려고합니다. FXAA 셰이더를 내 작곡가 중 하나에게 추가하고 렌더링 할 때까지 모든 것이 예상대로 작동합니다.

이 작곡가는 내 두 번째 장면이며, 작곡가/렌더러 주위에 내 코드가 어떻게 생겼는지의 Heres는 기본 0

에서 1080pts를 렌더링 : 다음 몇 가지 다른 장면이

this.renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    alpha: true 
}); 
this.renderer.autoClear = false; 
this.renderer.setSize(RENDER_WIDTH * 3, RENDER_HEIGHT); 


let renderPass = new THREE.RenderPass(this.scene, this.camera); 

let effectFXAA = new THREE.ShaderPass(THREE.FXAAShader); 
effectFXAA.uniforms['resolution'].value.set(1/RENDER_WIDTH, 1/RENDER_HEIGHT); 
effectFXAA.renderToScreen = true; 

let effectCopy = new THREE.ShaderPass(THREE.CopyShader); 
effectCopy.renderToScreen = true; 

let rtParameters = { 
    minFilter: THREE.LinearFilter, 
    magFilter: THREE.LinearFilter, 
    format: THREE.RGBAFormat, 
    stencilBuffer: true 
}; 

this.composer = new THREE.EffectComposer(this.renderer, 
    new THREE.WebGLRenderTarget(RENDER_WIDTH, RENDER_HEIGHT, rtParameters)); 

this.composer.addPass(renderPass); 
this.composer.addPass(effectFXAA); 
this.composer.addPass(effectCopy); 

/작곡가는 모두 훌륭하게 작동하고 THREESaturationShader는 있지만 FXAA 셰이더는 없습니다.

this.renderer.setViewport(RENDER_WIDTH, 0, RENDER_WIDTH, RENDER_HEIGHT); 
this.composer.render(); 

this.renderer.setViewport(RENDER_WIDTH * 2, 0, RENDER_WIDTH, RENDER_HEIGHT); 
this.composer2.update(); 
... 

편집

• 나는 FXAA 쉐이더를 제거하면 그것은 잘 렌더링 :

  런타임 동안 나는 렌더러가 위치로 뷰포트와 작곡가 렌더링 설정합니다.

• 오프셋 (0, 0에서 렌더링)을하지 않고 복사 셰이더를 제거하지만 FXAA 셰이더를 유지하면 괜찮아집니다.
• 오프셋을 유지하면 마지막 픽셀 만 렌더됩니다 FXAA 셰이더는 제거하지만 CopyShader는 제거하십시오.

Answer 1

덕분에 this answer.

renderToScreen 플래그를 오프 스크린 렌더링 이후 false로 설정해야합니다.

effectFXAA.renderToScreen = false;