Three.js -抗锯齿、渲染、fxaa

Question

我有一个带有3D模型的three.js项目，其中有一个地面和一个网格。使用outlinePass (https://threejs.org/examples/?q=outl#webgl_postprocessing_outline)对3D模型进行概述。

我可以使用变换控件(https://threejs.org/examples/?q=transf#misc_controls_transform)移动对象，也可以使用轨道控件(https://threejs.org/examples/?q=orbit#misc_controls_orbit)更改相机位置。

问题:图形似乎呈现得很差，这里有一些屏幕截图：https://imgur.com/gallery/3FrZt3s

我真的不知道我应该在这里使用哪些设置：

    renderer = new THREE.WebGLRenderer();//{ antialias: true } ); With antialiasing or without?
                                 //antialiasing is only needed when not using fxaa, right??
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.gammaOutput = true;
            renderer.physicallyCorrectLights = true;

    camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
    camera.addEventListener( 'change', render ); //Is this necessary? Seems like it has no use

FXAA可能是outlinePass所必需的(也在上面链接的outlinePass示例中)。

    composer = new EffectComposer( renderer );

            var renderPass = new RenderPass( scene, camera );
            composer.addPass( renderPass );

            effectFXAA = new ShaderPass( FXAAShader );
            effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
            effectFXAA.renderToScreen = true;
            composer.addPass( effectFXAA );   

            orbitControls = new OrbitControls( camera, renderer.domElement );
            orbitControls.update();
            orbitControls.addEventListener( 'change', render );

    function render(){
    renderer.render(scene, camera);
    //composer.render(); // don't know if needed
    }

所以我不得不说，我真的不知道如何解决渲染问题，以及我必须设置哪些设置才能最大限度地利用我的项目。我很高兴每一个提示和答案，也许我可以把这些答案放在一起，并解决问题。

Answer 1

在WebGL 1中使用后处理时，必须使用FXAA进行抗锯齿。在创建WebGLRenderer时将{ antialias: true }传递给true会激活MSAA，但前提是渲染到默认帧缓冲区(直接渲染到屏幕)。

在任何情况下，您都可以这样配置FXAA过程：

effectFXAA = new ShaderPass( FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
effectFXAA.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );
composer.addPass( effectFXAA );   

你必须遵守pixelRatio。此外，不再需要将renderToScreen设置为true。后处理链中的最后一遍现在会自动渲染到屏幕上。

在使用EffectComposer时，您不会调用renderer.render(scene, camera);。您必须改用composer.render();。

也可以删除camera.addEventListener( 'change', render );。我不确定你是在哪里看到这个的，但它没有任何效果。

three.js R109