CODEWITHSUNDEEP
javascriptthree.jsrenderingrender
derseitzer
derseitzer

Reputation: 159

Three.js - antialiasing, rendering, fxaa

I have a three.js project with 3d-models, a ground and a grid in it. The 3d-models getting outlined with outlinePass (https://threejs.org/examples/?q=outl#webgl_postprocessing_outline).

I am able to move the objects with Transformcontrol (https://threejs.org/examples/?q=transf#misc_controls_transform) and i can change my camera position with Orbitcontrols (https://threejs.org/examples/?q=orbit#misc_controls_orbit)

The problem: The graphics seem kind of badly rendered, here some screenshots: https://i.sstatic.net/QxjrZ.jpg

I don't really know which settings i should use here:

    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 is probably necessary for outlinePass (also in the outlinePass-example linked above).

    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
    }

So i have to say, i have not really a clue how i can solve the rendering issue and which settings i have to set to make the most out of my project. I'm happy for every hint and answers and maybe i can put these answers together and solve the issue.

Upvotes: 5

Views: 5546

Answers (1)

Mugen87
Mugen87

Reputation: 31026

When using post-processing with WebGL 1, you have to use FXAA for antialiasing. Passing { antialias: true } to true when creating WebGLRenderer activates MSAA but only if you render to the default framebuffer (directly to screen).

In any event, you configure the FXAA pass like so:

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 );

You have to honor the pixelRatio. Besides, setting renderToScreen to true is not necessary anymore. The last pass in the post-processing chain is automatically rendered to screen now.

When using EffectComposer, you do not call renderer.render(scene, camera);. You have to use composer.render(); instead.

camera.addEventListener( 'change', render ); can also be deleted. I'm not sure where you seen this but it has no effect.

three.js R109

Upvotes: 7

Related Questions