WebGL2를 활용한 GPGPU의 세계로

1. 왜 GPU로 연산하는가

CPU는 소수의 강력한 코어로 복잡한 순차 연산에 최적화. GPU는 수천 개의 소형 코어로 단순한 연산을 대규모 병렬 처리에 최적화. 100만 개 파티클의 위치를 매 프레임 업데이트하려면 CPU 루프로는 16ms(60fps) 안에 처리 불가. GPU shader는 각 파티클을 동시에 처리해 수천 배 빠릅니다.

핵심 용어

2. Ping-Pong Technique

GPGPU의 핵심 패턴입니다. GPU는 같은 텍스처를 읽으면서 동시에 쓸 수 없습니다. 두 개의 Framebuffer를 번갈아 사용합니다: A를 읽어 B에 쓰고, 다음 프레임에서 B를 읽어 A에 씁니다. 이렇게 하면 이전 프레임 데이터를 읽으면서 현재 프레임 데이터를 계산할 수 있습니다.

핵심 용어

3. WebGL2 vs WebGPU

WebGL2: 현재 주요 브라우저에서 지원, OpenGL ES 3.0 기반, GPGPU는 렌더링 파이프라인 우회로 구현해 복잡. WebGPU: 현대적 GPU API(Vulkan/Metal/DX12 기반), Compute Shader로 GPGPU를 직접 지원, 2024년 주요 브라우저 지원 시작. WebGPU는 WebGL2보다 훨씬 직관적인 GPGPU 코드 작성이 가능합니다.

핵심 용어

Q1. 브라우저에서 GPGPU를 사용해야 하는 상황을 예시와 함께 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "브라우저에서 GPGPU를 사용해야 하는 상황을 예시와 함께 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 적합한 케이스: 수만 개 이상의 파티클/물리 시뮬레이션, 이미지/비디오 필터 실시간 처리, 머신러닝 추론(TensorFlow.js가 WebGL/WebGPU 백엔드 사용), 유체/연기 시뮬레이션. 부적합한 케이스: 순차적 의존성이 강한 연산, GPU-CPU 데이터 전송이 빈번한 경우(전송 비용이 연산 이득을 상쇄).

Q2. WebGL의 Ping-Pong Technique이란 무엇이고 왜 필요한가요?

힌트

[감점 답변] 정의만 반복하거나 "WebGL의 Ping-Pong Technique이란 무엇이고 왜 필요한가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] GPU는 동일 텍스처를 동시에 읽고 쓸 수 없습니다(feedback loop 금지). 두 텍스처(A, B)를 번갈아 사용해 이 제약을 우회합니다: 홀수 프레임은 A→B, 짝수 프레임은 B→A. 파티클 시뮬레이션에서 이전 위치를 읽어 새 위치를 계산할 때 이 패턴이 필수입니다.

Q3. WebGPU가 WebGL보다 GPGPU에 적합한 이유는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "WebGPU가 WebGL보다 GPGPU에 적합한 이유는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] WebGL은 렌더링을 위한 API라 GPGPU는 렌더링 파이프라인을 우회하는 꼼수가 필요합니다(텍스처를 데이터 버퍼로 사용). WebGPU는 Compute Shader를 1등 시민으로 지원해 렌더링 없이 순수 연산만 수행할 수 있습니다. CPU-GPU 메모리 접근도 더 효율적이고, 에러 메시지도 훨씬 명확합니다.