2nd/10_Wiki/Topics/Graphics & Performance/WebGL 모바일 GPU 성능 관리.md

---
id: [[P-Reinforce|P-Reinforce]]-AUTO-3EE85A
category: "10_Wiki/💡 Topics/Graphics & Performance"
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - [[WebGL|WebGL]] 모바일 GPU 성능 관리"
---

# [[WebGL 모바일 GPU 성능 관리|WebGL 모바일 GPU 성능 관리]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> WebGL 모바일 GPU 성능 관리는 처리 능력과 메모리 용량이 제한적인 모바일 디바이스 환경에서 3D 애플리케이션이 부드럽게 구동될 수 있도록 렌더링 부하를 줄이는 기술적 과정입니다. 모바일 브라우저는 처리 가능한 폴리곤 수와 드로우 콜([[Draw Call|Draw Call]])에 뚜렷한 한계가 있으며, 이를 극복하기 위해 셰이더 정밀도 조절, 텍스처 압축, 배터리 소모 관리 등의 다각적인 최적화가 요구됩니다 [1-4].

## 📖 구조화된 지식 (Synthesized Content)
* **모바일 하드웨어의 렌더링 및 메모리 한계:** 
  모바일 브라우저(iOS Safari, [[Chrome|Chrome]] Mobile 등)는 장면당 5만에서 10만 개의 폴리곤을 처리하는 것이 권장되며, 드로우 콜이 1,000~2,000회를 넘어가면 CPU 병목 현상으로 인한 성능 저하가 눈에 띄게 나타납니다 [2, 3]. 특히 2~4GB의 시스템 메모리를 가진 기기에서는 텍스처 메모리가 500MB를 초과할 경우 가비지 컬렉션(GC)으로 인한 멈춤 및 프레임 끊김 현상이 심각하게 발생할 수 있습니다 [4].
* **셰이더 및 데이터 정밀도 최적화:** 
  모바일 GPU는 `mediump` 정밀도 처리 속도가 `highp`보다 약 2배 빠르므로, 깊이 계산이나 위치 정보 등 필수적인 경우를 제외하고는 기본적으로 `mediump` 정밀도를 사용하는 것이 유리합니다 [1]. 또한, 버텍스 셰이더와 프래그먼트 셰이더 간에 데이터를 전달하는 Varying 변수의 개수도 모바일 기기의 한계를 고려하여 3개 이하로 최소화해야 합니다 [1].
* **텍스처 및 렌더링 옵션 조율:** 
  여러 텍스처를 하나로 결합하는 텍스처 아틀라스([[Texture Atlas|Texture Atlas]])를 활용하면 모바일 GPU에서 큰 부담이 되는 텍스처 바인딩 오버헤드를 획기적으로 줄일 수 있습니다 [5]. 추가적으로 Basis Universal과 같은 툴을 이용해 모바일 특화 포맷(iOS의 PVRTC, 안드로이드의 ASTC 등)으로 트랜스코딩하여 메모리 사용량을 줄여야 하며 [6], 섀도우 맵의 크기는 모바일에 맞게 512에서 1024 사이로 설정해야 합니다 [7]. 모바일 기기에서 60fps를 유지하기 위해서는 기본 네이티브 안티앨리어싱(MSAA)을 비활성화하고, 그 대신 FXAA와 같은 포스트 프로세싱 기반의 안티앨리어싱을 적용하는 것이 좋습니다 [8].
* **전력 보존 및 상태 관리:** 
  씬(Scene)이 정적일 때 매 프레임 렌더링을 하지 않는 온디맨드(`frameloop="demand"`) 렌더링 방식을 사용해 모바일 디바이스의 배터리 소모를 줄여야 합니다 [9]. 이와 함께 모바일 환경 특성상 WebGL 컨텍스트 유실(Context lost) 현상이 발생할 수 있으므로, 이를 감지하고 자연스럽게 복구할 수 있는 이벤트 리스너 처리가 필수적입니다 [10].
* **컬링 부재 시 모바일 성능 치명타:** 
  개별적인 인스턴스에 대해 시야 절두체 컬링([[Frustum Culling|Frustum Culling]])이 이루어지지 않을 경우, 보이지 않는 객체에 대한 정점 셰이더의 행렬 연산이 인스턴스 수에 비례해 선형적으로 증가하므로, 저사양 모바일 기기나 통합 GPU 환경에서는 치명적인 성능 저하를 일으킬 수 있습니다 [11].

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.

## 🔗 지식 연결 (Graph)
- **Related Topics:** Draw Calls, [[Texture Atlas|Texture Atlas]], 셰이더 정밀도 (Mediump/Highp), [[Varying Variables|Varying Variables]], FXAA
- **Projects/Contexts:** Three.js 모바일 렌더링 최적화, [[모바일 기반 WebGL 애플리케이션 개발|모바일 기반 WebGL 애플리케이션 개발]]
- **Contradictions/Notes:** 모바일 환경 최적화를 위해 다양한 기법을 동원하더라도, 텍스처 메모리를 500MB 이하로 통제하지 않으면 가비지 컬렉션(GC) 멈춤 현상으로 최적화 효과가 상쇄될 수 있으므로 메모리 사용량에 대한 엄격한 제한이 우선되어야 합니다 [4].

---
*Last updated: 2026-04-19*

---