이 게시물은 화상회의 배경 블러 기능의 성능 문제를 CPU 픽셀 순회 방식의 병목에서 시작해 WebGL GPU 병렬 처리로 개선한 과정 정리입니다.

문제 및 병목

• 저사양 기기에서 배경 블러 시 CPU 사용률 50~60%, 화면 끊김/버벅거림 발생
• MediaPipe Selfie Segmentation의 confidence mask를 JavaScript로 1920x1080 픽셀을 순차 순회하며 ImageData를 업데이트하는 과정이 병목

해결 전략

• JavaScript 싱글 스레드로 픽셀을 순차 처리하는 한계를 GPU 병렬 처리(WebGL)로 전환
• MediaPipe mask.getAsWebGLTexture()로 마스크를 GPU 텍스처로 직접 접근해 CPU- GPU 데이터 복사 최소화

구현 구성 및 개선 효과

• WebGL 프래그먼트 쉐이더로 픽셀 변환을 GPU에서 수행하고, 합성 및 blur는 Canvas 2D에서 처리하는 하이브리드 구성
• CPU 사용률 50~60% → 5~15%로 감소, 렉 제거 및 UI 반응성 향상
• WebGL 좌표계 차이(Y축 반전)와 고정 프레임 레이트(setInterval) 등 최적화 이슈 해결