CanvasRenderer를 사용하여 three.js의 선을 그리면 WebGLRenderer보다 매끄러운 선을 만듭니다.

Question

three.js의 CanvasRenderer 렌더링 선이 WebGLRenderer보다 훨씬 더 매끄럽게 처리되었습니다. WebGLRenderer가 앤티 엘리 어싱을 적용하지 않는 것처럼 보입니다.

renderer = new THREE.CanvasRenderer(); 

를 다음 줄을 변경하는 경우

: - 라인 - 나는 three.js를 캔버스 촬영하면

http://mrdoob.github.io/three.js/examples/canvas_lines.html에서 무작위 예를 들어, 나는 이것을 CanvasRenderer 사용을 참조하십시오

renderer = new THREE.WebGLRenderer({antialias: true}); 

, 이 전자 : 당신이 볼 수 있듯이, WebGL을 명확하게 열등한 품질을 가지고

. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

같은 문제가 발생하여 Three.js의 CanvasRenderer가 WebGL을 전혀 사용하지 않는 CanvasRenderingContext2D을 사용하고있는 것으로 보입니다. 모든 라인 투영은 소프트웨어로 이루어지며 출력은 일반 2D 캔버스를 사용하여 2D 라인으로 렌더링됩니다. 페인팅이 소프트웨어에서 이루어지기 때문에 브라우저는 앤티 앨리어싱으로 쓰다듬어 낼 수 있습니다.

내 경험에 비추어 볼 때 WebGL의 GL_LINES에 대한 앤티 앨리어싱은 현재 널리 지원되지 않으므로 차이점을 설명합니다. Antialias는 삼각형에 대해서만 작동하는 것 같습니다. 유일한 해결책은 화면보다 높은 해상도의 FBO로 렌더링 한 다음 앤티 앨리어싱을 직접 수행하는 것입니다.

WebGL에서 매끄러운 선을 렌더링하는 것이 모든 브라우저 및 컴퓨터의 기본 기능이어야한다고 생각되면 앞으로 더 나아질 것입니다.