title: Three.js jagged edges even with FXAA shader and anti aliasing
body: <p>I'm trying to render a cube in the center of my scene with white edges that rotates. I got this to work but the edges of the cube are very jagged when it moves. </p>
  
  <p>I tried enabling anti-aliasing and adding a FXAA shader but the lines are still jagged. </p>
  
  <p>I'm using <a href="https://github.com/mattdesl/three-shader-fxaa" rel="nofollow noreferrer">this FXAA shader</a> and react-three-fiber instead of vanilla Three.js.</p>
  
  <p>This is my effects composer:</p>
  
  <pre class="lang-py prettyprint-override"><code>const Effects = ({ factor }) =&gt; {
    const composer = useRef();
    const {
      scene, gl, size, camera,
    } = useThree();
    useEffect(() =&gt; void composer.current.setSize(size.width, size.height), [size]);
    useRender(({ gl }) =&gt; void ((gl.autoClear = true), composer.current.render()), true);
    return (
      &lt;effectComposer ref={composer} args={[gl]}&gt;
        &lt;renderPass attachArray="passes" scene={scene} camera={camera} /&gt;
        &lt;shaderPass
          attachArray="passes"
          args={[fxaa()]}
          material-uniforms-resolution-value={[1 / size.width, 1 / size.height]}
          renderToScreen
        /&gt;
      &lt;/effectComposer&gt;
    );
  };
  </code></pre>
  
  <p><a href="https://i.imgur.com/dIPdijX.png" rel="nofollow noreferrer">Image here of the top edge of my cube with anti aliasing and FXAA applied</a></p>