Project: Hybrid High-Performance GIF Engine (Rust/WASM + WebGPU)
1. 프로젝트 개요
단순한 포팅을 넘어, 웹 브라우저의 연산 한계를 극복하기 위해 ‘CPU(Rust/WASM)’와 ‘GPU(WebGPU Compute Shader)’를 유기적으로 결합한 하이브리드 GIF 인코딩 엔진입니다. 비동기 병렬 파이프라인으로 처리 지연(Latency)을 은폐하고, 지각 기반(Perceptual) 알고리즘을 이중으로 적용하여 256색 포맷의 한계를 뛰어넘는 화질과 성능을 동시에 달성했습니다
산출물 GIF입니다.
2.핵심 기술 명세
A. 하이브리드 파이프라인 아키텍처
Problem 대용량 이미지 처리 시 단일 스레드(JS) 병목과 GPU-CPU 간 데이터 전송 지연(Stall) 발생.
Solution
• Async Triple-Buffering (WebGPU): 3-Stage 링 버퍼(slots=3)를 구축하여 GPU 연산, 리드백(Readback), 데이터 업로드를 병렬로 수행. GPU 유휴 시간(Idle Time)을 제거하고 스루풋을 극대화했습니다.
• Zero-Allocation Strategy (Rust/WASM): 프레임 단위 처리 시 발생하는 malloc/free 오버헤드를 제거하기 위해, 주요 버퍼(plane_l, err_l 등)를 초기화 시 한 번만 할당하고 재사용(Reuse)하는 구조로 설계하여 GC 부하를 원천 차단했습니다.
• Parallel Computing (Rust): Rayon 라이브러리를 통해 데이터 병렬 처리를 도입, 색상 클러스터링 과정을 멀티스레드로 가속화했습니다.
B. 지각 기반 색상 공학
Problem 기계적인 RGB 거리 계산은 인간의 시각 특성(HVS)과 괴리가 있어, 결과물의 색감이 탁하고 밴딩 현상이 발생.
Solution
• Dual Color Space Operation:
◦ GPU (Pre-process): OKLab 색 공간을 활용하여 인간이 인지하는 색상 차이($\Delta E$)를 실시간으로 계산, 시각적으로 균일한 팔레트 후보군을 추출합니다.
◦ CPU (Encoding): CIELAB 공간에서 정밀한 색차 계산을 수행하여 최종 양자화 오차를 최소화했습니다.
• Structure Tensor Analysis: 이미지의 고유 벡터(Eigenvectors)를 추출하여 텍스처의 흐름(Flow)과 경계(Edge)를 수학적으로 모델링, 단순 평면과 디테일 영역을 구분하여 색상 할당 가중치를 차별화했습니다.
C. 적응형 디더링 & 아티팩트 제어
Problem 일률적인 디더링은 평면 영역에 노이즈를 남기고, 외곽선을 뭉개뜨림.
Solution
• Anisotropic Diffusion (Rust): 픽셀의 흐름(Flow) 방향에 따라 오차를 확산시키는 독자적인 ΔK Dithering 로직을 통해 노이즈를 텍스처의 일부처럼 자연스럽게 합성했습니다.
• Structure-Aware Blue Noise (WebGPU): 구조 텐서 마스크를 기반으로, 텍스처 영역에만 Blue Noise 디더링을 적용하고 평탄한 영역(Flat)은 디더링을 차단하는 Edge Gating 로직을 쉐이더단에 구현했습니다.
• Highlight Suppression: 밝은 영역에서 발생하는 특유의 노이즈(White Beads) 현상을 방지하기 위해 휘도 기반 감쇠 로직을 적용했습니다.
D. 시간적 안정성 및 지능형 제어
Problem 프레임 간 팔레트 불일치로 인한 깜빡임(Flickering)과 장면 전환 시 화질 저하.
Solution: • Greedy Slot Matching: 이전 프레임의 팔레트와 현재 프레임의 색상을 유사도 기반으로 매칭하여 색상 배열의 시간적 연속성을 보장, MP4 수준의 안정적인 재생을 구현했습니다. • Smart Scene Detection: 저해상도 Luma Grid 차분을 통해 장면 전환(Scene Cut)을 0.1초 내로 감지하고, 해당 프레임에 팔레트 샘플링 가중치를 부여하여 색상 오염을 방지했습니다. • Content-Aware Auto Calibration: 첫 프레임의 히스토그램을 분석(Compute Shader)하여 엣지 검출 임계값 등 핵심 파라미터를 콘텐츠 특성에 맞춰 자동으로 보정(Auto-Tune)합니다.
3. 기술 스택
• Core: Rust (Targeting wasm32-unknown-unknown), WebGPU (WGSL)
• Libraries: Rayon (Parallelism), wasm-bindgen
• Algorithm: Ring Buffer Pipelining, OKLab/CIELAB Colorimetry, Structure Tensor, Custom K-Means, Error Diffusion