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

outlookPass可能需要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进行抗锯齿。创建{ antialias: true }时将true传递到WebGLRenderer会激活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

Three.js-抗锯齿，渲染，FXA

1 个答案: