three.js - three.js: how to add CopyShader after FXAAShader (r58)

Question

In postprocessing, I added CopyShader after FXAAShader, for proper rendering even if FXAA are disabed (like a example: webgl_postprocessing2.html).

~

renderer.setSize( 320, 240 );  // not full screen

~

fxaa = new THREE.ShaderPass( THREE.FXAAShader );
fxaa.uniforms[ 'resolution' ].value = new THREE.Vector2( 1 / 320, 1 / 240 );
composer.addPass( fxaa );

var effect = new THREE.ShaderPass( THREE.CopyShader );
effect.renderToScreen = true;
composer.addPass( effect );

This code doesn't work well and the rendered image is smaller than expected.

I'm using r58 and confirmed with Firefox20. What should I do?

Answer 1

的widthand必须与height的相匹配。THREE.EffectComposer.renderTargetWebGLRenderer

为此，您创建自己的renderTarget并将其传递给EffectComposer构造函数。

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

composer = new THREE.EffectComposer( renderer, renderTarget );

小提琴：http: //jsfiddle.net/uxeez/4/

三.js r.58