[Dev Log] 3D 맵 렌더링: FXAA(후처리 안티앨리어싱) 적용 및 UI 연동

최근 3D 맵 컴포넌트(Map3DWithControls.js)를 작업하면서 렌더링 퀄리티를 한 단계 높이기 위해 후처리 안티앨리어싱(Post-processing Anti-Aliasing)을 도입했습니다. 모델의 난간이나 얇은 구조물, 외곽선 등에서 눈에 띄게 발생하는 계단 현상(Aliasing)을 개선한 과정입니다.

 

안티앨리어싱(Anti-Aliasing)과 FXAA란?

3D 그래픽을 모니터의 사각 픽셀로 표현하다 보면, 사선이나 곡선의 경계면이 톱니바퀴처럼 깨져 보이는 '계단 현상(Aliasing)'이 필연적으로 발생합니다. 이를 부드럽게 다듬어주는 기술을 안티앨리어싱이라고 합니다.

이번 작업에서 선택한 방식은 FXAA (Fast Approximate Anti-Aliasing)입니다. FXAA는 3D 지오메트리를 계산할 때 처리하는 것이 아니라, 렌더링이 1차적으로 끝난 결과물 이미지 위에 후처리(Post-processing) 필터를 입히는 방식입니다. 연산 비용이 비교적 저렴하고 속도가 빨라서, 웹 기반의 3D 환경에서도 성능 저하를 최소화하며 깔끔한 외곽선을 얻을 수 있는 장점이 있습니다.

 

작업내용

단순히 기능만 켜는 것이 아니라, 화면 퀄리티를 실시간으로 확인하며 최적의 값을 찾을 수 있도록 컨트롤 패널에 연동했습니다.

• FXAA Pass 추가: 기존 렌더링 파이프라인 마지막 단계에 후처리 FXAA Pass를 얹어주었습니다.
• UI 컨트롤러 연동: 맵 튜닝 패널(Sky / Light Tune) 우측 하단에 Post AA 슬라이더를 추가하여, 화면을 보면서 실시간으로 안티앨리어싱 강도를 조절할 수 있게 만들었습니다.

트레이드오프 (Trade-off) 및 주의점

슬라이더를 통해 적용 강도를 조절해 보면 안티앨리어싱의 명확한 트레이드오프를 확인할 수 있습니다.

• 값이 낮을 때 (0에 가까울수록): FXAA가 꺼지거나 약하게 들어가며, 화면이 쨍하고 선명하지만 계단 현상이 눈에 띕니다.
• 값이 높을 때: 계단 현상이 사라지고 외곽선이 부드러워집니다.

하지만 주의할 점이 있습니다. FXAA는 픽셀의 대비를 분석해 경계선을 살짝 뭉개는(Blur) 방식으로 작동합니다. 따라서 슬라이더를 무작정 높게 설정하면 외곽선의 계단 현상은 완벽히 잡히겠지만, 화면 전체의 디테일과 텍스처가 살짝 흐려지는(Blurry) 부작용이 발생할 수 있습니다.

결국 가장 중요한 것은 3D 맵의 선명함을 잃지 않으면서도 거슬리는 계단 현상을 억제할 수 있는 적절한 타협점(Sweet spot)을 패널 슬라이더를 통해 찾아내는 것입니다.

 

FXAA 0일때

 

FXAA 1일때

 

확실히 건물 윤곽의 계단 현상이 없어진것을 확인할수 있었습니다!