2nd/01_Archive/2026-04-20/Three.js 모바일 렌더링 최적화.md

Three.js 모바일 렌더링 최적화

📌 Brief Summary

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

📖 Core 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].

🔗 Knowledge Connections

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

---

Last updated: 2026-04-19