三.js:如何在 FXAAShader (r58) 之后添加 CopyShader

Question

在后处理中，我在 FXAAShader 之后添加了 CopyShader，即使 FXAA 被禁用也能正确渲染(例如: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 );

这段代码不能很好地工作，渲染的图像比预期的要小。

我正在使用 r58 并通过 Firefox20 确认。我该怎么办？

Answer 1

width和 height的THREE.EffectComposer.renderTarget必须与 WebGLRenderer 的匹配.

为此，您需要创建自己的 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 );

fiddle : http://jsfiddle.net/uxeez/4/

三.js r.58