2026-01-22

1일 1아티클

요즘IT

WebGL, GPGPU

배경

  • 한계 : 기존 소프트웨어가 기하급수적으로 늘어난 데이터를 버티지 못하기 시작
  • 요구사항 : 천만 개 이상의 데이터를 큰 지연 없이 렌더링 필요, 여러 조건에 맞게 실시간 필터링 필요
  • 시도 : 기존의 성능 좋은 라이브러리, WebAssembly 기반 라이브러리도 속도 저하 심각

GPGPU

  • General Purpose Computing on Graphics Processing Unit
  • 의미 : GPU를 이용한 일반적 계산
  • 도구 : CUDA, etc.

WebGL

  • 브라우저에서 공식적으로 GPU에 접근 가능한 두 라이브러리 : WebGL, WebGPU
    • WebGPU : GPGPU 지원하는 최근 라이브러리, But 아직 일부 브라우저(Safari, etc.)에서 사용 불가
  • 여러 브라우저 지원을 위해, GPGPU의 공식 지원은 안 되지만 WebGL을 통한 GPU 접근으로 선택

브라우저 기반 GPU 연산 과정

  1. 연산 데이터 준비 (배열 형태)
  2. 데이터를 GPU Buffer, GL Buffer 통해 GPU로 이동
  3. Vertex Shader → Fragment Shader 통한 GPU 연산
  4. 연산 결과를 Frame Buffer에 담음
  5. 브라우저에 렌더링

성능 비교

  • 데이터 양 많을수록, GPU > CPU
  • 속도 차이 : GPU가 CPU 대비 압도적으로 많은 코어 수 (10000~15000 > 10~20) → 병렬 처리 우수

트러블슈팅

  1. 데이터 중간에 바꾸기 어려움
    • JS에서는 실시간으로 배열 데이터 수정 가능, WebGL에서는 우회 필요
  2. 부동소수점 정밀도 문제
    • GPU : 기본 32bit 숫자 지원
    • JS : 기본 64bit
    • 변환 과정에서 값 변경 및 소실 발생으로 주의 필요
  3. GPU-CPU 간 데이터 이동 병목 현상
    • GPU 연산 결과를 CPU로 이동하는 과정에서 상당한 오버헤드 발생
    • Ping-Pong 기법으로 해결 (CPU에서 결과를 그때그때 바로 가져오지 않고, 입력 버퍼로 넘기면서 GPU 내부에서는 연산 지속 → 값을 가져올 때 단 한 번만 병목 발생)
  4. 텍스처 크기 제한
  5. 메모리 비효율성
    • GPU의 기본 boolean 값은 4byte
    • true = 1, false = 0만 필요한데 31개의 공간 낭비
    • 비트패킹으로 해결 : 숫자 하나 선언 후, 각 비트에 boolean 값 넣기 → 32배 공간 절약

적용하기 좋은 상황

  • 대규모 데이터 작업 필요 : 수백, 수천만 데이터의 실시간 필터링 및 시각화 (ex. 증권)
  • 오프라인 퍼스트 앱 : 데이터가 기본적으로 브라우저에 저장, 백엔드를 거치지 않고 빠른 연산

오늘 배운 것

  1. MR 및 팀 진행 상황 확인

내일 할 일

  1. 중간발표
  2. 싸피데이

참고자료

results matching ""

    No results matching ""