---
id: P-REINFORCE-AUTO-E3AAE4
category: "10_Wiki/💡 Topics/Graphics & Performance"
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - Threejs 모바일 렌더링 최적화"
---

# [[Threejs 모바일 렌더링 최적화|Threejs 모바일 렌더링 최적화]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> Three.js 모바일 렌더링 최적화는 제한된 컴퓨팅 파워, 메모리 대역폭 및 배터리 용량을 가진 모바일 기기 환경에서 3D 장면을 원활하게 구동하기 위한 일련의 기술적 접근이다. 이 최적화는 셰이더 정밀도 조절, 텍스처 및 폴리곤 수 제한, 드로우 콜(Draw Call) 감소, 배터리 절약을 위한 렌더링 루프 제어 등을 포함한다 [1-4]. 이를 통해 모바일 브라우저에서도 60fps의 안정적인 프레임 속도를 유지하고 메모리 한계로 인한 애플리케이션 크래시를 방지할 수 있다 [5, 6].

## 📖 구조화된 지식 (Synthesized Content)
*   **셰이더 및 정밀도 최적화**
    *   모바일 GPU는 `mediump` 정밀도를 처리할 때 `highp`보다 대략 2배 빠른 속도를 내므로, 깊이 계산이나 위치 등 필수적인 경우를 제외하고는 기본적으로 `mediump`를 사용해야 한다 [1].
    *   버텍스 셰이더와 프래그먼트 셰이더 사이에서 데이터를 전달하는 varying 변수의 개수를 모바일 GPU에 맞춰 3개 이하로 최소화해야 한다 [1].

*   **메모리 및 텍스처 관리**
    *   모바일 기기는 보통 2~4GB의 제한된 시스템 메모리를 가지며, 텍스처 메모리가 500MB를 초과하면 가비지 컬렉션(GC)으로 인한 일시 중지와 심각한 프레임 끊김이 발생한다 [5].
    *   이를 해결하기 위해 Basis Universal이나 KTX2와 같은 GPU 친화적인 압축 텍스처를 사용해야 한다. 이러한 포맷은 모바일 플랫폼에 따라 ASTC(Android)나 PVRTC(iOS)로 로드 시 변환되어 메모리 사용량을 대폭 줄여준다 [7].
    *   다수의 텍스처를 사용하는 대신, 텍스처 아틀라스(Texture Atlas)로 결합하여 텍스처 바인딩 횟수를 줄이는 것이 모바일 GPU의 렌더링 오버헤드를 크게 감소시키는 방법이다 [8, 9].

*   **드로우 콜 및 지오메트리 제한**
    *   프로세서 성능이 상대적으로 낮은 모바일 브라우저에서는 1,000~2,000회의 드로우 콜 한계치에 도달하면 CPU 병목으로 인한 성능 저하가 눈에 띄게 나타난다 [4].
    *   모바일 브라우저(iOS Safari, Chrome Mobile 등) 환경에서는 화면당 폴리곤 개수를 50,000~100,000개 수준으로 제한해야 매끄러운 렌더링이 보장된다 [3].

*   **그림자 및 안티앨리어싱 설정 타협**
    *   섀도우 맵 렌더링은 리소스 소모가 크므로, 모바일의 경우 섀도우 맵 크기를 512에서 1024 사이로 작게 설정하는 것이 바람직하다 [10].
    *   렌더링 파이프라인 구성 시 고비용의 네이티브 안티앨리어싱(MSAA)을 비활성화하고, 그 대신 포스트 프로세싱인 FXAA를 사용하면 모바일 기기에서도 성능 부하를 5~10% 수준으로 낮추면서 60fps를 유지할 수 있다 [6].

*   **배터리 절약 및 오류 복구(Context Management)**
    *   정적인 씬(Static scenes)의 경우 리액트 기반 환경(R3F 등)에서 `frameloop="demand"` 옵션을 사용하여 불필요한 프레임 렌더링을 방지함으로써 모바일 기기의 배터리를 아껴야 한다 [2].
    *   모바일 환경에서는 WebGL 컨텍스트 손실(Context lost)이 발생할 수 있으므로, 리스너(`webglcontextlost`)를 등록하여 이를 감지하고 우아하게 복구하는(gracefully recover) 예외 처리가 필수적이다 [11].

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

## 🔗 지식 연결 (Graph)
- **Related Topics:** 드로우 콜 최적화 (Draw Call Optimization), 텍스처 압축 (Texture Compression), 셰이더 정밀도 (Shader Precision), [[가비지 컬렉션 (Garbage Collection)|가비지 컬렉션 (Garbage Collection)]]
- **Projects/Contexts:** [[React Three Fiber (R3F)|React Three Fiber (R3F)]], Basis Universal / KTX2
- **Contradictions/Notes:** 소스에서는 모바일 환경 구현 시 시각적 품질과 성능 간의 직접적인 타협(trade-off)을 강조한다. 데스크톱 환경에서는 다중 텍스처 파일과 MSAA, 4096 크기의 섀도우 맵 활용이 가능하지만, 모바일 기기에서는 동일한 구성을 유지할 경우 프레임 속도 저하와 발열, 메모리 부족으로 인한 강제 종료를 유발할 수 있으므로 극단적인 간소화(FXAA, 아틀라스 텍스처, 512~1024 섀도우 등)를 필수적으로 도입해야 함을 명시한다 [5, 6, 10].

---
*Last updated: 2026-04-19*
- Raw Source: 00_Raw/2026-04-20/Three.js 모바일 렌더링 최적화.md
---