Fluid Simulator 가속화

발행: (2026년 1월 11일 오전 06:22 GMT+9)
5 min read
원문: Dev.to

Source: Dev.to

Abstract

Introduction

이 프로젝트의 목표는 플러그인 없이 최신 브라우저에서 네이티브로 실행되는 안정적이고 인터랙티브한 Navier‑Stokes 솔버를 구현하는 것이었습니다. 우리는 입자 시스템(Lagrangian)의 시각적 디테일과 격자 기반 솔버(Eulerian)의 안정성 사이의 균형을 제공하는 FLIP 방식을 선택했습니다.

Methodology & Implementation

The FLIP/PIC Hybrid Solver

핵심 물리 엔진은 Fluid Implicit Particle (FLIP) 방법을 직접 구현한 것입니다. 시뮬레이션 단계는 다음 파이프라인을 따릅니다:

  • Transfer: 입자 속도를 배경이 되는 스태거드 격자에 래스터화합니다.
  • External Forces: 중력 및 사용자 인터랙션 힘을 격자에 적용합니다.
  • Pressure Solve: 가우스‑세이델 반복 솔버가 속도 필드를 발산이 없는(비압축성) 상태로 강제하여 유체가 부피를 유지하도록 합니다.
  • Advection: 새로운 속도를 다시 입자에 보간합니다. 90 % FLIP(에너지/스플래시 유지)과 10 % PIC(Particle‑in‑Cell, 노이즈를 부드럽게 함)의 혼합을 사용해 안정성을 유지합니다.

High‑Performance Rendering (WebGL)

  • Vertex Shaders: 시뮬레이션 좌표를 클립 공간으로 매핑합니다.
  • Fragment Shaders: 거리 필드(length(gl_PointCoord - 0.5))를 이용해 각 입자를 수학적으로 완벽한 원으로 렌더링하여 텍스처 로드를 피하고 메모리 대역폭을 최소화합니다.
  • Buffer Management: 입자 위치와 색상은 CPU 솔버에서 GPU VRAM 버퍼(gl.ARRAY_BUFFER)로 매 프레임 스트리밍됩니다.

Multi‑Material & Rigid Body Physics

  • Viscosity: 입자 유형에 따라 속도 전송을 감쇠시켜 점성을 모델링합니다(예: 꿀은 높은 감쇠 계수를 가짐).
  • Rigid Bodies: 동적 장애물(돌, 통나무)은 커스텀 임펄스 기반 충돌 시스템을 사용합니다. 이들은 유체 입자와 운동량 전달을 통해 상호 작용하며—입자는 물체를 밀고, 물체는 입자를 이동시킵니다(양방향 결합).

Features & Interaction

시뮬레이션 환경은 실험을 위한 실험실 수준 인터페이스를 제공합니다:

  • Interactive Injection: 사용자는 마우스 기반 레이캐스터로 도메인에 유체를 “그리기”하여 초기 속도를 가진 입자를 주입할 수 있습니다.
  • Variable Gravity: 전역 스칼라가 중력 벡터를 제어하여 무중력(0 g) 환경, 고중력, 혹은 중력이 반전된(유체가 위로 떨어지는) 상황을 구현합니다.
  • Material Selector: 사용자는 실시간으로 물, 기름, 꿀 등 다양한 밀도와 색상의 유체를 전환할 수 있습니다.
  • Visual Aesthetics: 시뮬레이션은 어두운 모드 컨테이너 안에서 격자 없는 깨끗한 캔버스로 실행되어 시각적 대비를 극대화합니다.

Performance Results

표준 소비자 하드웨어(Chrome/Edge 브라우저)에서 테스트를 수행했습니다:

  • Particle Count: 150 000개 이상의 입자를 안정적으로 처리합니다.
  • Frame Rate: 일반적인 인터랙션 중에도 일관된 60 FPS를 유지합니다.
  • Stability: 강력한 비압축성 반복 덕분에 200 % 중력과 같은 극한 조건에서도 솔버가 안정적으로 동작합니다.

Conclusion

References

  • Müller, M. Ten Minute Physics – FLIP Fluids. YouTube Series, 2022.
  • Zhu, Y. & Bridson, R. Animating Sand as a Fluid. SIGGRAPH 2005.
Back to Blog

관련 글

더 보기 »

openworld.js의 역사를 간략히 소개

소개 지난 며칠 동안 나는 멀티‑모델 작업을 진행하며 가능한 한 많은 대규모 모델을 구현하려고 했습니다. WebGL은 약 … 후에 지연이 시작됩니다.