WebGL 60FPS 방어전: 프레임 드랍을 막는 메모리 최적화 실무

웹 브라우저에서 60FPS를 유지한다는 것

웹 브라우저 기반의 3D 렌더링, 특히 Three.js를 사용해 실시간으로 움직이는 아바타를 렌더링할 때 가장 큰 적은 '가비지 컬렉션(GC, Garbage Collection)'입니다. 자바스크립트는 런타임이 메모리를 자동으로 관리해주지만, GC가 수행되는 그 순간 메인 스레드가 정지하면서 필연적으로 화면이 정지되는 '프레임 드랍(Frame Drop)' 스파이크가 발생하게 됩니다.

Vector, Quaternion 객체의 무한 생성 지옥 탈출

초당 60프레임(60FPS)으로 수십 개의 뼈대(Bone)를 회전시키려면 매 프레임마다 수많은 수학 연산 객체들이 생성됩니다. 만약 `new THREE.Vector3()`나 `new THREE.Quaternion()`을 렌더링 애니메이션 루프 내에서 직접 호출한다면, 1초마다 수천 개의 임시 객체가 생성되고 버려지며 브라우저 메모리를 갉아먹습니다.

우리는 객체 풀링(Object Pooling)과 사전 할당된 글로벌 임시 변수(Global Temp Variables) 패턴을 적용하여, 애니메이션 루프 내부에서는 단 하나의 새로운 객체(new 힙 할당)도 생성되지 않도록 렌더링 아키텍처를 전면 리팩토링했습니다.

결과: GC 스파이크 0%, 완벽한 모바일 최적화

최적화 적용 후 크롬 개발자 도구의 성능(Performance) 탭을 측정한 결과, 브라우저의 GC 발생 빈도가 90% 이상 감소했으며, V8 자바스크립트 엔진이 메모리를 청소하는 데 걸리던 시간 스파이크가 완전히 사라졌습니다. 덕분에 모바일 기기와 저사양 데스크톱 환경에서도 리소스 부족과 과열 현상 없이 60FPS를 완벽하게 고정 방어할 수 있게 되었습니다. 렌더링 최적화는 '화려한 기술'이 아닌 '재사용 패턴의 강제'에 기반합니다.