Natural paper motion through sparse physics simulation.

개요 4×4 제어점(16개 강체)에 스프링-댐퍼 제약 조건을 적용한 뒤, 이를 64×64 베지어 곡면(4,096 버텍스)으로 평가하여 자연스러운 종이 움직임을 WebGL로 구현한 프로젝트다. 물리 연산은 16개 포인트에서만 수행하고, 렌더링은 4,096개 버텍스에서 처리하는 효율적인 구조를 갖고 있다.

핵심 내용 이 시뮬레이션의 핵심은 스파스 물리(Sparse Physics)와 밀집 렌더링(Dense Rendering)의 분리에 있다. 종이 한 장의 물리적 거동을 시뮬레이션하려면 원래 수천 개의 버텍스 각각에 물리 연산을 적용해야 하지만, 이는 실시간 처리에 과도한 비용이 든다. 이 프로젝트는 4×4(16개) 제어점만으로 물리 시뮬레이션을 수행한다. 각 제어점 사이에는 스프링-댐퍼 제약 조건이 걸려 있어 탄성과 감쇠를 통해 종이의 구부러짐과 복원력을 표현한다. 거리 제약(distance constraints)은 종이가 과도하게 늘어나지 않도록 강성을 유지하면서도 자연스러운 변형을 허용한다.

물리 연산 결과로 얻어진 16개 제어점의 위치는 베지어 곡면 평가를 통해 64×64 = 4,096개의 버텍스로 보간된다. 베지어 곡면은 제어점 사이를 부드럽게 연결하는 수학적 특성을 갖고 있어, 적은 수의 물리 포인트로도 매끄러운 곡면 변형이 가능하다.

기존 대비 차별점 일반적인 천(cloth) 시뮬레이션은 모든 버텍스에 대해 물리를 계산하거나 GPU 기반 컴퓨트 셰이더를 사용하는데, 이 접근법은 CPU 측 연산량을 극단적으로 줄이면서도 시각적 품질을 유지한다. 16:4096이라는 256배의 물리-렌더링 비율은 모바일 환경에서도 충분히 실시간 처리가 가능한 수준이다. 종이라는 소재 특성상 천에 비해 강성이 높아 적은 제어점으로도 설득력 있는 결과를 만들어낸 점이 영리하다.

활용 가능성 웹 기반 인터랙티브 카드 뒤집기, 페이지 넘기기 효과, 제품 언박싱 애니메이션 등에 직접 활용할 수 있다. 스파스 물리 + 베지어 보간 패턴은 종이뿐 아니라 깃발, 리본, 얇은 금속판 등 시트 형태의 오브젝트에도 응용 가능하다. Three.js나 WebGL 프로젝트에서 가벼운 소프트바디 시뮬레이션이 필요할 때 좋은 레퍼런스가 된다.

참고 자료 - 원본 트윗 ===