perfect antialiasing

보수적 인 재화 및 분석 영역 계산을 통한 항아리 아기

3D 삼각형을 '완벽한'반 알리 아스로 렌더링하는 새로운 기술. 글꼴과 벡터는 삼각형으로 나누고 보수적으로 재고 화 된 다음 조각 셰이더는 각 조각에 대한 알파를 계산하기 위해 삼각형 영역 커버리지를 결정합니다.

프로세스

서브 픽셀 정확도로 벡터 그래픽의 GPU 렌더링 :

1. 삼각형 곡선으로 삼각형으로 곡선
2. 보수적 인 공장화를 사용하여 각 삼각형을 렌더링하십시오
3. 각 조각에 대해 :
   1. 삼각형/상자 교차로를 수행하여 다각형을 만듭니다
   2. 다각형에서 삼각형의 영역을 요약하십시오
   3. 금액을 파편 영역으로 나누어 백분율 적용 범위를 제공합니다.
   4. 모든 삼각형을 계속하고 추가로 혼합하십시오

시사

시민

https://andrewlowndes.github.io/perfect-antialiasing/dist/를 방문 하여이 repo에 사용 된 다양한 기술을 보여주는 데모 세트를보십시오.

달리다

1. nodejs가 설치되어 있는지 확인하십시오
2. npm i 실행하여 종속성을 설치하십시오
3. npm start

로드맵

• CPU 데모 (캔버스)
  • 입방/2 차 베 지어 테셀레이션
  • 다각형으로가는 경로
  • 보수적 인 선수 화
  • SVG 테스트
  • 셀 논리
  • 사용자 정의 글꼴 렌더링
• Webgl
  • 보수적 인 선수 화
  • 사용자 정의 글꼴 렌더링
  • 3D 삼각형
  • 3D 장면
  • 스크린 공간 테셀레이션
  • 인스턴스
  • 성능 테스트
• vulkan
  • 지오메트리 셰이더를 통한 화면 공간 테셀레이션
  • GPU 확장을 사용한 보수적 인 공장화
  • 인스턴스
  • 성능 테스트
• 추가 실험
  • 정확한 곡선 커버리지 분석
    • 2 차 베 지어
    • Cubic Bezier (Prob 너무 복잡한)

사용법

• 게임의 반 알리 아스
• 글꼴 렌더링 (여전히 삼각 측량에 의존 - 해상도 독립 렌더링을 위해 테셀레이션 셰이더에서 화면 공간을 사용)

개발

대 코드 및 다음 확장을 설치하십시오.

• VS 코드의 editorConfig
• eslint
• 더 예쁘다

참조

GPU GEMS의 알고리즘 2를 기반으로 한 정점 기반 보수적 인 재화 화