2016-12-15 5 views
0

同じキャンバスとレンダラに複数のシーンをレンダリングしようとしています。 FXAAシェーダを私の作曲家の1人に追加してレンダリングするまで、すべてが期待どおりに動作します。THREE.js CopyShaderでFXAAシェーダが動作しない - 空白にレンダリングする

この作曲家は私の第二のシーンのためのものであり、作曲/レンダラの周りの私のコードがどのように見えるかの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); 

/作曲家はすべてうまく動作し、THREE.HueSaturationShaderを持っていますが、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(); 
... 

EDIT

  • 私はFXAAシェーダを削除する場合には罰金レンダリング:

    は、実行時に私はレンダラがその位置にビューポートと作曲をレンダリング設定しました。

  • 私はそれをオフセット(レンダリング0、0)し、コピーシェーダを削除してもFXAAシェーダを残すとうまくレンダリングします。
  • オフセットをそのままにしておくと、最後のピクセルFXAAシェーダを使用しますが、CopyShaderを削除します。

答えて

3

this answerのおかげです。

オフスクリーンレンダリング以降、renderToScreenフラグをfalseに設定する必要がありました。

effectFXAA.renderToScreen = false; 
関連する問題