CODEWITHSUNDEEP
three.js
notbrian
notbrian

Reputation: 71

Three.js jagged edges even with FXAA shader and anti aliasing

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.

I tried enabling anti-aliasing and adding a FXAA shader but the lines are still jagged.

I'm using this FXAA shader and react-three-fiber instead of vanilla Three.js.

This is my effects composer:

const Effects = ({ factor }) => {
  const composer = useRef();
  const {
    scene, gl, size, camera,
  } = useThree();
  useEffect(() => void composer.current.setSize(size.width, size.height), [size]);
  useRender(({ gl }) => void ((gl.autoClear = true), composer.current.render()), true);
  return (
    <effectComposer ref={composer} args={[gl]}>
      <renderPass attachArray="passes" scene={scene} camera={camera} />
      <shaderPass
        attachArray="passes"
        args={[fxaa()]}
        material-uniforms-resolution-value={[1 / size.width, 1 / size.height]}
        renderToScreen
      />
    </effectComposer>
  );
};

Image here of the top edge of my cube with anti aliasing and FXAA applied

Upvotes: 1

Views: 2453

Answers (1)

notbrian
notbrian

Reputation: 71

I ended up not using LineSegments to draw my edges and instead using the LineMaterial method from the fat lines example, which has the added benefit of variable line width.

In case anyone comes across this and is wondering how to use edges with LineMaterial here is the code:

const edges = new THREE.EdgesGeometry(geometry.current);
    const geo = new LineSegmentsGeometry().fromEdgesGeometry(edges);
    const matLine = new LineMaterial({
      color: 'white',
      linewidth: 2,
      dashed: false,
    });
    matLine.resolution.set(window.innerWidth, window.innerHeight);
    const wireframe = new Wireframe(geo, matLine);
    wireframe.computeLineDistances();
    wireframe.scale.set(1, 1, 1);
    scene.add(wireframe);

Upvotes: 1

Related Questions