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

Question

我有一个 three.js 项目，其中包含 3d 模型、一个地面和一个网格。 使用 outlinePass (https://threejs.org/examples/?q=outl#webgl_postprocessing_outline) 勾勒出 3d 模型。

我可以使用 Transformcontrol (https://threejs.org/examples/?q=transf#misc_controls_transform) 移动对象，我可以使用 Orbitcontrols (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

outlinePass 可能需要 FXAA（也在上面链接的 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