2D 렌더링, 레이 마칭(Ray Marching)으로 부드러운 그림자 구현!
2D 캔버스(Canvas)에 텍스트를 그리고, 거리 필드(Distance Field)를 생성하여 그림자를 구현함
레이 마칭(Ray Marching) 기법을 사용하여 그림자 경계를 부드럽게 처리하고, 성능을 최적화함
GLSL 코드(GLSL Code)를 통해 구현 방식을 상세히 설명하고, 밴딩(Banding) 현상 해결을 위한 트릭을 소개함
성능 개선(Performance Optimization)을 위해 for-loop 사용 및 최대 반복 횟수 제한
거리 필드(Distance Field) 기반 그림자 생성
본 게시물은 2D 렌더링에서 부드러운 그림자를 구현하기 위해 거리 필드(Distance Field)를 활용하는 방법을 제시한다. 거리 필드는 각 픽셀이 도형으로부터 얼마나 떨어져 있는지를 나타내는 이미지로, 이를 통해 레이 마칭(Ray Marching) 과정에서 그림자 여부를 판단한다. 특히, 텍스트 렌더링에 적용하여 시각적인 효과를 높였다.
레이 마칭(Ray Marching) 기법의 핵심 원리
레이 마칭(Ray Marching)은 광선(Ray)을 따라 일정 거리씩 이동하며 그림자 여부를 판단하는 기술이다. 거리 필드(Distance Field)를 활용하여 안전하게 이동할 수 있는 거리를 계산하고, 이를 통해 성능을 최적화한다. 게시물에서는 getDistance 함수를 사용하여 거리 필드를 샘플링하는 GLSL 코드를 제공하며, 코드 예시를 통해 이해를 돕는다.
부드러운 그림자 구현을 위한 트릭
게시물은 부드러운 그림자(Soft Shadow)를 구현하기 위해 세 가지 규칙을 제시한다. 첫째, 광선이 도형에 가까워질수록 그림자를 더 진하게 표현한다. 둘째, 픽셀이 거의 교차하는 지점으로부터 멀리 떨어져 있을수록 그림자를 더 넓게 퍼뜨린다. 셋째, 빛이 멀어질수록 약해지는 거리 감쇠(Distance Attenuation)를 적용하여 현실감을 더한다. 이러한 규칙들을 통해 밴딩(Banding) 현상을 완화하고 시각적 품질을 향상시킨다.
성능 최적화 및 밴딩(Banding) 현상 해결
성능 최적화를 위해 while 루프 대신 for 루프를 사용하고, 최대 반복 횟수를 제한한다. 또한, 밴딩(Banding) 현상을 개선하기 위해 Inigo Quilez의 기법을 활용하여 sceneDist / rayProgress 비율을 계산하고, randomJitter를 사용하여 레이 마칭(Ray Marching) 단계를 추가한다. 이러한 기법들을 통해 부드러운 그림자를 구현하면서도 성능 저하를 최소화한다.
