我正在尝试在场景中心渲染具有旋转的白色边缘的立方体。我可以使用它,但是立方体的边缘在移动时非常锯齿。
我尝试启用抗锯齿并添加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
答案 0 :(得分:0)
最终我没有使用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);