Three.js对纹理RT进行后处理抗锯齿处理

时间:2014-04-02 09:25:15

标签: javascript three.js webgl

我试图在渲染到纹理时避免使用webGL(three.js,r64)的抗锯齿问题。我创建了一个自上而下的场景视图,而不是将其应用为简单四边形上的alpha切割纹理。它适用于标准的renderer.render()方法:

rtTexture = new THREE.WebGLRenderTarget( 1024, 1024, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat } );
renderer.render( scene, cameraRTT, rtTexture, true );

我找到了一些例子和这个帖子:https://github.com/mrdoob/three.js/issues/568 在设置效果编辑器之后:

materialTopDown = new THREE.MeshPhongMaterial( { color: 0xcccccc}); 

var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
effectFXAA.renderToScreen = true;

var renderScene = new THREE.RenderPass( scene, cameraRTT, materialTopDown, new THREE.Color(0x000000), 0 );

composer = new THREE.EffectComposer( renderer, rtTexture );
composer.addPass( renderScene );
composer.addPass( effectFXAA );

和渲染:

composer.render();

当这样完成时,我最终得到所有黑色rtTexture(当删除effectFXAA路径时它是相同的,所以问题出在renderScene传递内部。)

任何人都可以引导我进入正确的方向吗?

0 个答案:

没有答案