피드로 돌아가기
Dev.toFrontend
원문 읽기
Quad-based Sprite 분할과 Polar 좌표계를 통한 2D 페이지 컬링 구현
HWYDT: Turning the Page
AI 요약
Context
Mini Micro 환경의 제약으로 인해 복잡한 3D 메쉬 렌더링이 불가능한 상황. 단순한 2D Sprite만으로 종이의 곡선 변형과 페이지 넘김 애니메이션을 구현해야 하는 기술적 도전 과제 직면.
Technical Solution
- 곡면을 평면 Quadrilateral로 세분화하여 각 구역을 개별 Sprite로 렌더링하는 구조 설계
- 곡률이 높은 제본 영역에 더 많은 분할점을 배치한 비균등 xDivs [0, 0.025, ..., 1] 적용으로 시각적 왜곡 최소화
- Polar Coordinate 시스템을 도입하여 시간에 따른 반지름과 각도 변화로 페이지의 회전 및 굴곡 경로 계산
- setCorners와 setUVs 함수를 연동하여 각 Quad Sprite의 정점 위치와 텍스처 매핑 영역을 동적으로 업데이트
- 원형 보간 및 수식(sqrt(1-(1-q)^2))을 통한 제본 부위의 입체적인 Dip 효과 구현
실천 포인트
1. 고정 해상도 환경에서 곡면 구현 시 적응형 그리드(Adaptive Grid) 분할 적용 검토
2. Cartesian 좌표계 변환 전 Polar 좌표계에서 애니메이션 경로를 먼저 정의하여 연산 단순화
3. 텍스처 매핑 시 UV 좌표와 정점 위치를 동기화하여 메시 변형 효과 구현