Three.js 창시자 Mr.doob의 새 장난감 — 브라우저에서 돌아가는 볼풀 시뮬레이션

브라우저에서 이게 된다고?

Three.js를 만든 Ricardo Cabello, 개발자들 사이에서는 Mr.doob이라는 닉네임으로 더 유명한 분이 CodePen에 재미있는 데모를 하나 올렸어요. 바로 "Ball Pit" — 볼풀 시뮬레이션인데요, 브라우저에서 열면 화면 가득 알록달록한 공들이 물리 법칙에 따라 떨어지고, 튀기고, 서로 부딪히는 모습을 볼 수 있어요. 마우스나 터치로 공을 밀거나 흩뿌릴 수도 있어서 가지고 놀기 딱 좋은 인터랙티브 데모예요.

이런 데모를 보면 "그냥 재미있는 장난감 아닌가?"라고 생각할 수 있는데, 사실 이 안에는 웹 그래픽스와 물리 시뮬레이션의 핵심 기술들이 꽤 많이 녹아 있어요.

이 데모가 기술적으로 흥미로운 이유

볼풀 시뮬레이션이 단순해 보여도, 수백 개의 공이 실시간으로 상호작용하면서 부드럽게 렌더링되려면 꽤 많은 기술적 과제를 해결해야 해요.

첫 번째는 물리 시뮬레이션이에요. 각 공마다 위치, 속도, 가속도를 계산하고, 중력의 영향을 받아 떨어지고, 바닥이나 벽에 부딪히면 반발 계수에 따라 튕겨야 해요. 이건 간단한데, 문제는 공끼리의 충돌이에요. 공이 100개만 되어도 모든 공 쌍의 충돌을 검사하려면 100×99÷2 = 4,950번의 검사가 필요하거든요. 공이 500개면 약 125,000번이에요. 매 프레임마다요.

이걸 효율적으로 처리하기 위해 보통 공간 분할(spatial partitioning)이라는 기법을 써요. 이게 뭐냐면, 화면을 격자(grid)로 나누고, 같은 칸이나 인접한 칸에 있는 공끼리만 충돌 검사를 하는 거예요. 서울에 사는 사람이 부산에 사는 사람과 부딪힐 일은 없으니까, 같은 동네에 있는 사람끼리만 확인하는 것과 같은 원리예요. 이렇게 하면 계산량이 극적으로 줄어들어요.

두 번째는 렌더링 성능이에요. 수백 개의 3D 구체를 각각 따로 그리면(draw call을 각각 보내면) GPU와 CPU 사이의 통신 비용 때문에 프레임이 뚝뚝 끊기거든요. 이걸 해결하는 방법이 인스턴스드 렌더링(instanced rendering)이에요. 같은 모양의 객체를 여러 개 그릴 때, "이 모양을 이 위치들에 그려줘"라고 한 번에 요청하는 방식인데, Three.js에서는 InstancedMesh라는 클래스로 이걸 쉽게 구현할 수 있어요.

Mr.doob과 Three.js 생태계

Mr.doob은 웹 그래픽스 역사에서 빼놓을 수 없는 인물이에요. Three.js는 WebGL을 직접 다루는 복잡함을 추상화해서, JavaScript 개발자들이 3D 그래픽스를 훨씬 쉽게 다룰 수 있게 해준 라이브러리거든요. WebGL이 뭐냐면, 브라우저에서 GPU를 직접 활용해 2D와 3D 그래픽을 렌더링할 수 있게 해주는 API(프로그래밍 인터페이스)예요.

Three.js 없이 WebGL로 3D 큐브 하나를 그리려면 셰이더 코드를 직접 작성하고, 버퍼를 세팅하고, 행렬 연산을 해야 하는데, 이게 수백 줄의 보일러플레이트 코드가 필요해요. Three.js를 쓰면 이걸 몇십 줄로 줄일 수 있고요. 현재 Three.js는 GitHub에서 10만 개 이상의 스타를 받은 프로젝트이고, WebGL 기반 웹 3D의 사실상 표준이 되었어요.

최근에는 WebGPU라는 차세대 웹 그래픽스 API가 등장하면서 Three.js도 WebGPU를 지원하기 시작했는데, 이를 위해 Three.js 내부에 TSL(Three.js Shading Language)이라는 노드 기반 셰이딩 시스템을 새로 만들었어요. 이 볼풀 데모도 이런 최신 Three.js 기능들을 활용했을 가능성이 높아요.

크리에이티브 코딩이라는 세계

이런 종류의 작업을 "크리에이티브 코딩(creative coding)"이라고 불러요. 실용적인 목적보다는 시각적 아름다움이나 인터랙티브한 경험을 만드는 것이 목적인 프로그래밍이에요. 쉽게 말하면 코드로 하는 예술이죠.

크리에이티브 코딩은 단순한 취미를 넘어서 실무에도 꽤 쓸모가 있어요. 데이터 시각화, 인터랙티브 웹 경험, 제품 데모 페이지, 게임 프로토타이핑 등에 이 기술들이 바로 적용되거든요. 예를 들어, Apple의 제품 소개 페이지나 Stripe의 랜딩 페이지에서 볼 수 있는 화려한 애니메이션들도 이런 기술 위에서 만들어진 거예요.

관련 도구로는 Three.js 외에도 p5.js(Processing의 JavaScript 버전), PixiJS(2D 렌더링), Babylon.js(3D 게임 엔진) 등이 있어요. 만약 관심이 생기셨다면 p5.js가 입문하기 가장 쉬운 편이에요.

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

포트폴리오를 준비하는 프론트엔드 개발자라면, 이런 인터랙티브 데모 하나가 이력서에 적힌 기술 스택 열 줄보다 강력한 임팩트를 줄 수 있어요. "저 Three.js 할 줄 알아요"보다 "이거 한번 눌러보세요"가 훨씬 설득력 있거든요.

또한 물리 시뮬레이션의 기초 개념들 — 벡터 연산, 충돌 감지, 공간 분할 — 은 게임 개발뿐만 아니라 지도 기반 서비스, 실시간 대시보드, 심지어 드래그 앤 드롭 UI 같은 일반적인 웹 개발에서도 응용할 수 있는 지식이에요.

정리하자면

"그냥 공이 굴러다니는 데모"처럼 보이지만, 그 안에는 물리 엔진, GPU 최적화, 공간 분할 알고리즘 같은 컴퓨터 과학의 핵심 개념들이 담겨 있어요. 가끔은 이런 장난감 같은 프로젝트에서 가장 많이 배울 수 있어요.

직접 한번 열어서 가지고 놀아보세요. 그리고 혹시 여러분만의 크리에이티브 코딩 작품이 있다면, 공유해주세요!