셰이더(Shader) 기반 그리드(Grid) 구현, 앤티앨리어싱(Anti-aliasing)과 모아레(Moiré) 패턴을 잡아라!
텍스처 기반 그리드(Texture-based Grid)의 한계를 극복하고, 셰이더(Shader) 기반 그리드의 시각적 품질을 향상시키려는 시도
필터링된 펄스열(Filtered Pulsetrain) 및 박스 필터링된 그리드(Box Filtered Grid) 등 기존 셰이더 기법의 앤티앨리어싱(Anti-aliasing) 및 모아레(Moiré) 패턴 문제점 분석
Phone-wire AA 기법을 활용하여 원근감 있는 선 두께와 앤티앨리어싱(Anti-aliasing)을 동시에 구현하는 새로운 그리드 셰이더 개발
Moiré 패턴 억제(Moiré Pattern Suppression)를 위해 UV 미분(UV Derivatives)을 활용, 시각적 품질을 개선
텍스처 기반 그리드(Texture-based Grid)의 한계와 셰이더(Shader) 기반 접근법의 필요성
저자는 텍스처 기반 그리드의 성능(Performance)은 뛰어나지만, 앤티앨리어싱(Anti-aliasing) 및 모아레(Moiré) 패턴 문제로 인해 시각적 품질이 떨어진다고 지적한다. 특히 원거리에서 선이 뭉개지고, 앤티앨리어싱(Anti-aliasing)이 제대로 적용되지 않는 문제를 강조한다. 따라서 셰이더(Shader)를 활용하여 이러한 문제점을 해결하고, 시각적 품질(Visual Quality)을 향상시키려는 동기를 부여한다. 셰이더 기반 접근 방식은 렌더링(Rendering) 유연성을 높여, 다양한 시각 효과를 구현할 수 있는 장점을 가진다.
기존 셰이더 기법의 분석: 필터링된 펄스열(Filtered Pulsetrain)과 박스 필터링된 그리드(Box Filtered Grid)
저자는 필터링된 펄스열(Filtered Pulsetrain)과 박스 필터링된 그리드(Box Filtered Grid)를 포함한 기존 셰이더 기법의 앤티앨리어싱(Anti-aliasing) 성능을 분석한다. 필터링된 펄스열(Filtered Pulsetrain)은 앤티앨리어싱(Anti-aliasing)은 개선되었지만, 모아레(Moiré) 패턴이 여전히 존재하며, 박스 필터링된 그리드(Box Filtered Grid)는 정밀도 문제로 인해 노이즈(Noise)가 발생한다고 설명한다. 이러한 분석을 통해, 기존 기법의 한계를 파악하고, 새로운 해결책을 모색한다.
Phone-wire AA 기법을 활용한 앤티앨리어싱(Anti-aliasing) 및 원근감 있는 선 두께 구현
저자는 Phone-wire AA 기법을 활용하여 앤티앨리어싱(Anti-aliasing) 문제를 해결한다. 이 기법은 선의 두께를 1 픽셀 이상으로 유지하고, 픽셀 공간 미분(Pixel Space Derivatives)을 사용하여 선의 두께를 조절한다. 특히, `drawWidth = max(lineWidth, uvDeriv)` 코드를 통해 선이 너무 얇아지는 것을 방지하고, `line *= saturate(lineWidth / drawWidth)` 코드를 통해 선을 부드럽게 페이드 아웃(Fade Out)시킨다. 이로써, 원근감 있는 선 두께와 앤티앨리어싱(Anti-aliasing)을 동시에 구현한다.
Moiré 패턴 억제(Moiré Pattern Suppression)를 위한 UV 미분(UV Derivatives) 활용
저자는 Moiré 패턴 억제(Moiré Pattern Suppression)를 위해 UV 미분(UV Derivatives)을 활용한다. 그리드 셀(Grid Cell)이 1 픽셀보다 작아지는 지점에서 모아레(Moiré) 패턴이 발생한다는 점에 착안하여, UV 미분(UV Derivatives)을 기반으로 선을 페이드 아웃(Fade Out)하는 방식을 적용한다. 구체적으로, `grid2 = lerp(grid2, lineWidth, saturate(uvDeriv * 2.0 - 1.0))` 코드를 통해 UV 미분(UV Derivatives)이 특정 값을 초과할 때 선을 점진적으로 투명하게 만들어 모아레(Moiré) 패턴을 억제한다. 이 기법은 시각적 품질을 크게 향상시킨다.
