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

Question

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

我可以使用 Transformcontrol ( https://thirdjs.org/examples/?q=transf#misc_controls_transform ) 移动对象，并且可以使用 Orbitcontrols 更改相机位置 ( https://thirdjs.org/examples/?q=轨道#misc_controls_orbit）

问题：图形似乎渲染得很糟糕，这里有一些屏幕截图： https: //i.stack.imgur.com/QxjrZ.jpg

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

    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 进行抗锯齿。创建时传递{ antialias: true }到会激活 MSAA，但前提是渲染到默认帧缓冲区（直接到屏幕）。trueWebGLRenderer

无论如何，您都可以像这样配置 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