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

Question

我有一个包含 3d 模型、地面和网格的 three.js 项目。使用 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

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 channel :

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