Fable 5로 완성한 브라우저 실시간 물리 기반 포트폴리오 애니메이션

작성자는 글 말미에 Fable 5에 대한 감사와 흥분을 표했고 구체적 기술·구현 세부를 공유했다. 게시물에는 도움 요청이 아닌 성취 공유의 성격이 강하고 구현 방식과 수치적 단서가 포함되어 있어 독자는 실행 가능성과 재현성을 판단할 수 있다. 댓글이 제공되지는 않았으나 본문만으로도 경험을 나누는 목적이 분명하며 추가 질문이나 기술적 디테일 요청이 뒤따를 가능성이 크다.

• 브라우저에서 대규모 강체 군집을 돌릴 때는 물리 연산을 Rust로 작성해 WASM으로 컴파일하고 클라이언트에서 직접 실행하면 응답성이 좋아진다.
• 동일 메시를 대량으로 렌더링할 때는 인스턴스 렌더링을 사용해 드로우 콜을 단일화하면 GPU 부하를 크게 낮출 수 있다.
• 생성 모델은 역할을 분리해 사용하면 실무에서 효과적이며, 물리적 동작은 한 모델로 확보하고 미세한 미학적 보정은 다른 모델로 수행하는 워크플로가 재현 사례로 유효했다.

Rapier

— Rapier는 Rust 생태계에서 사용되는 고성능 물리 시뮬레이션 라이브러리로, 강체(rigid body) 충돌과 제약을 실시간으로 계산한다. 이 글 맥락에서는 질량·반발계수·댐핑 같은 물리 파라미터를 바탕으로 수백 개의 개별 rigid body를 시뮬레이션하는 핵심 컴포넌트로 사용되었다. 브라우저 환경에서는 Rust로 작성된 Rapier를 WASM으로 컴파일해 클라이언트에서 직접 물리 계산을 수행했다.

WebAssembly

— WebAssembly는 브라우저에서 네이티브 성능에 가까운 코드를 실행하기 위한 이식 가능한 바이너리 형식으로, Rust로 작성된 물리 엔진을 브라우저에서 직접 실행할 때 사용된다. 이 게시물에서는 Rapier를 WASM으로 컴파일해 클라이언트에서 실시간 물리 시뮬레이션을 돌리는 실행 환경을 제공했다. WASM은 네이티브 코드 대비 안전성과 포팅 용이성을 유지하면서도 대규모 물리 계산을 브라우저에서 가능하게 했다.

Instanced Rendering

— 인스턴스 렌더링은 동일한 메시를 여러 번 그릴 때 GPU 드로우 콜을 한 번으로 묶어 성능을 크게 향상시키는 그래픽 기법이다. 게시물에서는 약 230개의 얼음 큐브를 단일 GPU 드로우 콜로 렌더링해 프레임 비용을 낮추고 동시에 물리 시뮬레이션 결과를 시각화했다. 이 기법은 대규모 군집 시뮬레이션에서 드로우 콜 병목을 제거하는 핵심 최적화로 작동했다.

Rigid-body Simulation

— 강체 시뮬레이션은 각 객체를 변형되지 않는 단단한 물체로 가정하고 힘·토크·충돌을 계산해 운동을 예측하는 물리 시뮬레이션이다. 글에서는 각 얼음 큐브를 독립적인 강체로 시뮬레이션해 집단 거동(행성 형성→분해→아이콘 재조합)을 재현했다. 파라미터 민감도가 높아 질량이나 반발계수가 소폭만 어긋나도 시각적 결과가 즉시 틀리게 나타났다.

Index of Refraction

— 굴절률은 매질에서 빛이 굴절되는 정도를 나타내는 물리적 상수로, 게시물에서는 얼음의 실제 굴절률 1.31을 렌더링에 적용해 현실감 있는 빛 굴절을 구현했다. 정확한 굴절률 적용은 재질의 시각적 설득력을 높이며 물리적 사실성 확보에 기여했다. 광학 속성까지 시뮬레이션에 포함함으로써 단순한 형태 운동을 넘어 물리적 현실감을 추구했다.