WebGPU로 이미지 필터 가속

이미지 처리에서는 픽셀 단위 계산이 많아 CPU만 사용하면 성능이 제한됩니다. WebGPU는 브라우저 환경에서 GPU를 활용할 수 있게 해주며, WGSL 셰이더를 통해 컨볼루션 필터, 색 공간 변환 등 복잡한 이미지 연산을 병렬로 처리할 수 있습니다. 이번 글에서는 WebGPU를 이용해 이미지 필터를 가속하는 방법과 구현 경험을 상세히 공유합니다.

1. WebGPU 환경 구성

WebGPU를 사용하려면 먼저 브라우저 지원 여부를 확인하고, 초기화 과정을 거쳐 GPU 장치와 컨텍스트를 얻어야 합니다. HTMLCanvasElement에서 GPUContext를 가져오고, CommandEncoder와 RenderPipeline을 구성하면 GPU 연산을 수행할 준비가 됩니다.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
      

2. WGSL 셰이더 작성

WGSL 셰이더를 이용하면 픽셀별 연산을 병렬 처리할 수 있습니다. 컨볼루션 필터 예시는 주변 픽셀을 합산해 블러, 샤프닝 등의 효과를 구현하며, 색 공간 변환은 RGB→YUV 또는 그 반대로 변환할 때 유용합니다.

@group(0) @binding(0) var inputImage : array;
@group(0) @binding(1) var outputImage : array;

@compute @workgroup_size(16,16)
fn main(@builtin(global_invocation_id) id : vec3) {
    let index = id.y * width + id.x;
    // 필터 연산 구현
}
      

3. GPU와 CPU 간 데이터 관리

GPU와 CPU 간 버퍼 전송이 병목이 될 수 있어, 효율적인 매핑과 동기화가 중요합니다. staging buffer를 활용하거나, 필요한 부분만 전송하는 전략으로 성능을 최적화했습니다.

4. 실사용 필터 구현 예

• 가우시안 블러: 컨볼루션 커널 적용
• 샤프닝: 라플라시안 필터 적용
• 색 공간 변환: RGB→YUV 및 YUV→RGB

GPU를 활용하니 CPU 처리 대비 10~20배 정도 성능 향상을 경험할 수 있었고, 실시간 이미지 필터 웹앱 제작에도 적합했습니다.

5. 결론

WebGPU와 WGSL을 활용하면 브라우저에서도 고성능 이미지 연산이 가능하며, 복잡한 필터와 변환 작업을 실시간으로 처리할 수 있습니다. 이번 프로젝트를 통해 GPU 병렬 처리와 웹 기술 통합 경험을 쌓을 수 있었습니다.