브라우저에서 실시간 물리 시뮬레이션이 가능해졌다 — WebGPU로 구현한 물리 엔진

브라우저 안에서 물리 시뮬레이션이 돌아간다고요?

웹 브라우저에서 천이 바람에 펄럭이거나, 고무공이 탱탱 튀는 물리 시뮬레이션을 실시간으로 돌릴 수 있다면 어떨까요? 지금까지 이런 건 Unity나 Unreal 같은 네이티브 게임 엔진에서나 가능한 일이었는데요, WebGPU라는 차세대 웹 그래픽 API를 활용해서 브라우저에서 고급 물리 시뮬레이션을 구현한 오픈소스 프로젝트 "webphysics"가 공개됐어요.

이 프로젝트는 2024년 SIGGRAPH(세계 최대 컴퓨터 그래픽 학회)에서 발표된 "Augmented Vertex Block Descent"라는 최신 물리 시뮬레이션 알고리즘을 WebGPU 컴퓨트 셰이더로 포팅한 건데요, 쉽게 말해 학계에서 막 나온 최첨단 알고리즘을 웹 브라우저에서 돌릴 수 있게 만든 거예요.

Augmented Vertex Block Descent가 뭔가요?

이름이 좀 어렵죠? 하나씩 풀어볼게요. 물리 시뮬레이션에서 가장 핵심적인 문제는 "수많은 점(vertex)들이 서로 영향을 주고받으면서 움직이는 걸 어떻게 빠르게 계산하느냐"예요. 예를 들어 천(cloth)을 시뮬레이션한다고 생각해보면, 천은 수천 개의 작은 점들이 스프링처럼 연결된 구조로 모델링되는데, 한 점이 움직이면 연결된 모든 점에 영향을 미치거든요.

전통적인 방법은 이 점들을 한꺼번에 거대한 연립방정식으로 풀어야 했어요. 정확하지만 엄청나게 느려요. 반대로 각 점을 독립적으로 빠르게 계산하는 방법도 있는데, 이건 빠르지만 정확도가 떨어지고 진동이 생기는 문제가 있었어요.

Augmented Vertex Block Descent(줄여서 AVBD)는 이 두 가지 접근의 장점을 합친 알고리즘이에요. 각 꼭짓점을 작은 블록 단위로 나누어서 병렬로 계산하되(이래서 GPU에 잘 맞아요), 블록 간의 상호작용을 "증강(augmented)" 단계에서 보정해주는 방식이에요. 결과적으로 GPU의 병렬 처리 능력을 최대한 활용하면서도 안정적이고 정확한 시뮬레이션을 할 수 있게 된 거죠.

WebGPU가 이걸 가능하게 한 이유

여기서 핵심 기술이 바로 WebGPU예요. WebGPU는 기존의 WebGL을 대체하는 차세대 웹 그래픽/컴퓨트 API인데요, WebGL과의 가장 큰 차이는 컴퓨트 셰이더(Compute Shader)를 지원한다는 거예요.

이게 뭐냐면, WebGL은 기본적으로 "그림을 그리는" 용도로만 GPU를 쓸 수 있었어요. 물론 꼼수를 써서 범용 연산을 할 수도 있었지만 매우 불편하고 제한적이었죠. 반면 WebGPU의 컴퓨트 셰이더는 GPU를 범용 연산 장치로 활용할 수 있게 해줘요. 물리 계산, 입자 시뮬레이션, AI 추론 같은 대규모 병렬 연산을 브라우저 안에서 네이티브에 가까운 성능으로 돌릴 수 있는 거예요.

webphysics 프로젝트는 AVBD 알고리즘의 핵심 연산을 WebGPU 컴퓨트 셰이더로 구현했어요. 물리 시뮬레이션의 각 타임스텝마다 수천 개의 꼭짓점을 GPU에서 병렬로 처리하고, 그 결과를 바로 렌더링 파이프라인에 넘겨서 화면에 그려주는 구조예요. CPU와 GPU 간 데이터 전송을 최소화해서 성능을 끌어올린 거죠.

기존 웹 물리 엔진과 뭐가 다른가요?

웹에서 물리 시뮬레이션을 하는 도구가 아예 없었던 건 아니에요. cannon.js, ammo.js(Bullet 물리 엔진의 WebAssembly 포트), Rapier(Rust로 작성된 물리 엔진의 WASM 빌드) 같은 프로젝트들이 있었죠. 하지만 이들은 대부분 CPU에서 동작하기 때문에, 복잡한 시뮬레이션에서는 성능 한계가 명확했어요.

webphysics는 연산 자체를 GPU에서 돌린다는 점에서 근본적으로 다른 접근이에요. GPU는 수천 개의 코어가 동시에 같은 연산을 처리하는 데 특화되어 있으니까, 수천~수만 개의 꼭짓점을 가진 메시의 물리 시뮬레이션에서 CPU 기반 대비 극적인 성능 향상을 기대할 수 있어요.

물론 아직 초기 단계의 프로젝트라서 프로덕션에 바로 가져다 쓸 수준은 아닐 수 있어요. 하지만 WebGPU 컴퓨트 셰이더를 이용한 물리 시뮬레이션의 가능성을 보여주는 의미 있는 레퍼런스 구현이에요.

한국 개발자에게 주는 시사점

WebGPU는 아직 모든 브라우저에서 완벽하게 지원되는 건 아니지만, Chrome에서는 이미 정식 지원되고 있고 Firefox와 Safari도 구현을 진행 중이에요. 웹 프론트엔드 개발을 하면서 3D나 시뮬레이션 쪽에 관심이 있는 분이라면, 지금이 WebGPU를 배워두기 좋은 타이밍이에요.

특히 요즘 웹 기반 3D 에디터, 인터랙티브 제품 뷰어, 교육용 시뮬레이션 같은 프로젝트가 늘어나고 있는데, 이런 분야에서 GPU 기반 물리 시뮬레이션은 사용자 경험을 한 단계 끌어올릴 수 있는 기술이에요. 또한 이 프로젝트의 코드가 GitHub에 오픈소스로 공개되어 있으니, WebGPU 컴퓨트 셰이더를 어떻게 구조화하고 최적화하는지 배우는 교재로도 좋아요.