# 2D 게임 엔진의 드로우 콜 최적화 및 GPU 렌더링
개별 낱개 프레임 이미지를 단 하나의 텍스처 아틀라스로 패킹하면 CPU에서 GPU로 전송되는 렌더링 드로우 콜 횟수가 획기적으로 줄어듭니다. 95% 드로우 콜 절감률
4x GPU 일괄 처리 속도 향상
60 FPS 모바일 목표 성능
100% 브라우저 로컬 처리
# 개별 프레임 파일 vs 패킹된 텍스처 아틀라스 비교
개별 프레임 파일
독립적으로 저장된 PNG 파일
- 화면상의 개별 프레임마다 독립적인 드로우 콜 명령 호출
- 그래픽 카드 GPU 렌더링 컨텍스트 스위칭 빈번히 발생
- 웹 게임 환경에서 HTTP 요청 수 대폭 증가
- 모바일 기기에서 프레임 레이트 저하 유발
패킹된 텍스처 아틀라스
단일 PNG 이미지와 JSON 좌표 데이터 결합
- 수백 개의 스프라이트를 단 하나의 GPU 드로우 콜로 묶어서 처리
- 그래픽 메모리 대역폭 및 렌더링 처리량 극대화
- 이미지와 메타데이터를 묶어 네트워크 요청 단순화
- 모든 플랫폼에서 부드러운 렌더링 성능 보장
# 서브픽셀 카메라 이동 및 테두리 확장 기술
외곽 테두리 피셀을 1~2픽셀 외곽으로 확장 복사하는 Border Extrusion을 적용하면 카메라 이동 시 발생하는 픽셀 번짐 현상을 방지할 수 있습니다.테두리 확장 최적화 전략
카메라 이동 시 발생하는 시각적 경계 간섭을 방지하기 위해 1~2픽셀의 테두리 확장을 설정하세요.# 모바일 및 PC 엔진용 권장 텍스처 규격
| 타깃 플랫폼 | 권장 최대 크기 | 2의 거듭제곱 필수 여부 | 메모리 프로필 |
|---|---|---|---|
| 모바일 웹 브라우저 | 2048 x 2048 px | WebGL 1.0 필수 | 낮은 대역폭 |
| 데스크톱 PC / 콘솔 | 4096 x 4096 px | 권장 | 높은 GPU 용량 |
| 레트로 휴대용 기기 | 1024 x 1024 px | 필수 | 엄격한 VRAM 제한 |
장점
- 구형 그래픽 드라이버 및 WebGL 1.0 환경과의 완벽한 호환성 제공
- 하드웨어 밉맵 자동 생성 지원
- GPU 메모리 VRAM 할당 최적화
단점
- 스프라이트 개수가 적을 때 여백 공간이 남을 수 있음
- 불규칙한 프레임인 경우 정교한 여백 조절 필요
- 초기 텍스처 할당 영역이 약간 증가함
# 스프라이트 패킹 핵심 용어
- 드로우 콜 (Draw Call)
- CPU가 그래픽 카드 GPU에 그래픽 렌더링을 명령하는 지시 횟수.
- 빈 패킹 (Bin Packing)
- 다양한 크기의 사각형들을 가장 작은 영역 안에 효율적으로 배치하는 알고리즘.
- 외곽 확장 (Border Extrusion)
- 이미지 테두리 피셀을 외곽으로 확장하여 그래픽 경계선 경계 간섭을 막는 기술.
- 플립북 애니메이션 (Flipbook Animation)
- 연속된 프레임 이미지를 빠르게 재생하여 움직임을 표현하는 방식.
# 개발 점검 리스트
생산성 규칙
캐릭터 애니메이션은 하나로 패킹하고 WebGL 빌드 시 2의 거듭제곱 해상도를 유지하세요.