title: Three.js - antialiasing, rendering, fxaa
body: <p>I have a three.js project with 3d-models, a ground and a grid in it. 
  The 3d-models getting outlined with outlinePass (<a href="https://threejs.org/examples/?q=outl#webgl_postprocessing_outline" rel="nofollow noreferrer">https://threejs.org/examples/?q=outl#webgl_postprocessing_outline</a>).</p>
  
  <p>I am able to move the objects with Transformcontrol (<a href="https://threejs.org/examples/?q=transf#misc_controls_transform" rel="nofollow noreferrer">https://threejs.org/examples/?q=transf#misc_controls_transform</a>) and i can change my camera position with Orbitcontrols (<a href="https://threejs.org/examples/?q=orbit#misc_controls_orbit" rel="nofollow noreferrer">https://threejs.org/examples/?q=orbit#misc_controls_orbit</a>)</p>
  
  <p>The problem: The graphics seem kind of badly rendered, here some screenshots:
  <a href="https://imgur.com/gallery/3FrZt3s" rel="nofollow noreferrer">https://imgur.com/gallery/3FrZt3s</a></p>
  
  <p>I don't really know which settings i should use here:</p>
  
  <pre><code>    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
  </code></pre>
  
  <p>FXAA is probably necessary for outlinePass (also in the outlinePass-example linked above).</p>
  
  <pre><code>    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
      }
  </code></pre>
  
  <p>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.</p>