Question

我正在尝试在场景中心渲染具有旋转的白色边缘的立方体。我可以使用它，但是立方体的边缘在移动时非常锯齿。

我尝试启用抗锯齿并添加FXAA着色器，但这些行仍然参差不齐。

我正在使用this FXAA shader并使用三纤维来代替香草Three.js。

这是我的效果作曲家：

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

Answer 1

最终我没有使用LineSegments绘制边缘，而是使用了胖线示例中的LineMaterial方法，该方法具有可变线宽的额外好处。

如果有人遇到这个问题，并且想知道如何在LineMaterial中使用边，则代码如下：

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

即使使用FXAA着色器和抗锯齿，Three.js的锯齿边缘

1 个答案: