CanvasKit 파이프라인 통합 및 SkSL 기반 Liquid Glass 효과 구현

I Built a Liquid Glass Lens Effect in React Canvas

ouzz2026년 4월 15일3분advanced

AI 요약

Context

렌즈 효과 구현을 위해 별도의 레이어를 추가할 경우 발생하는 렌더 출력 간의 높은 동기화 비용과 인터랙션 충돌 문제가 병목 지점으로 작용함. 기존 렌더링 스택을 유지하며 시각적 왜곡과 확대 효과를 효율적으로 처리할 구조적 설계가 필요했음.

Dual Render Tree 배제를 통한 단일 CanvasKit 파이프라인 내 Full-screen Post-processing 구조 설계
Offscreen Surface에 씬을 먼저 렌더링한 후 SkSL RuntimeEffect를 적용하여 메인 캔버스에 단일 패스로 출력하는 방식 채택
렌즈 중심부의 왜곡을 억제하고 외곽 20% 영역에 왜곡을 집중시키기 위해 smoothstep(0.8, 1.0, t) 기반의 Edge Weight 로직 구현
Chromatic Dispersion 및 Rim Highlight/Shadow 처리를 통한 물리적 유리 질감의 시각적 완성도 확보
불필요한 프레임 렌더링을 방지하기 위해 requestCanvasRepaint를 활용한 On-demand Repainting 전략 도입
getBoundingClientRect와 Backing-store scale을 적용한 좌표 매핑 및 clamp(0..1) 처리로 UV 샘플링 아티팩트 제거

실천 포인트

1. 레이어 중첩으로 인한 동기화 비용이 클 경우 Offscreen Surface + Post-processing 파이프라인 검토

2. 전체 영역에 일괄 효과를 적용하기보다 특정 임계값(예: 외곽 20%) 기반의 가중치 설계를 통한 자연스러운 시각 효과 구현

3. Uniform 기반의 셰이더 효과 구현 시 무조건적인 repaint 대신 이벤트 기반의 On-demand 렌더링으로 리소스 최적화

태그