프론트엔드
WebGL 활용한 화상회의 배경 블러 처리 개선
두줄요약
화상회의 배경 블러의 느린 성능을 WebGL과 GPU 병렬 처리로 개선했습니다.\nCPU 병목을 줄여 저사양 기기에서도 부드럽게 동작하도록 만들었습니다.
문제 상황
- 화상회의 배경 블러 기능에서 저사양 기기 렉과 높은 CPU 사용률 발생
- JavaScript 기반 픽셀 순회가 메인 스레드 병목이 된 상황
원인 분석
- 1920x1080 프레임의 모든 픽셀을 JavaScript로 순차 처리하는 구조
- MediaPipe 결과를 GPU에서 CPU로 복사한 뒤 다시 렌더링하는 비효율
- 싱글 스레드 특성상 대량의 독립 연산을 병렬로 처리하지 못한 한계
해결 방법
- 픽셀 변환을 WebGL 프래그먼트 쉐이더로 이전해 GPU 병렬 처리 적용
- MediaPipe의 WebGL 텍스처를 직접 사용해 불필요한 CPU-GPU 전송 제거
- Canvas 2D는 합성과 블러 등 충분히 빠른 구간만 유지하는 하이브리드 구성
성능/운영 포인트
- CPU 사용률 50~60%에서 5~15% 수준으로 감소
- 렉과 팬 소음 완화, 저사양 기기에서도 사용성 개선
- 병목 구간만 선별 최적화하고 나머지는 기존 API를 활용