원 그래픽
마우스 척력과 자가 복원 스프링 물리를 결합하여 3D 입자 구체와 2D 평면 텍스트 사이를 역동적으로 오가는 인터랙티브 캔버스 시뮬레이터
💡 만든 동기
사용자의 마우스 움직임에 단순히 반응하는 것을 넘어, "완벽한 수학적 규칙성을 가진 입자들이 외부의 강력한 힘에 의해 파괴되었다가, 스스로 원래의 정체성(구체 또는 입력된 단어)을 찾아 복원되는 유기적인 움직임"을 웹 브라우저 상에서 초당 60프레임의 부드러운 애니메이션으로 구현해보고 싶었습니다. 특히 정형화된 UI에서 벗어나 사용자의 타이핑과 커서 움직임이 곧바로 예술적인 시각 효과가 되는 몰입형 경험을 제공하고자 했습니다.
🤔 어려웠던 점
차원 간의 충돌 연산 오류 (3D vs 2D) 입자들은 3차원 가상 공간($X, Y, Z$)에서 계산되고 회전하는데, 마우스 커서는 2차원 모니터 화면 바깥($X, Y$)에 존재했습니다. 이로 인해 마우스 원 안에 입자가 들어왔는지 판단하는 충돌 감지와, 튕겨 나갈 때 3차원 벡터로 변환하는 물리 연산이 어긋나 입자가 튀거나 뚫고 들어오는 현상이 발생했습니다. 텍스트 모핑 시의 시인성 저하 입자들이 구체 모양으로 계속 자전(회전)하다 보니, 단어를 입력해도 글자가 사방으로 돌아가거나 찌그러져서 사용자가 영어 단어를 직관적으로 읽기 어려웠습니다.
🛠 해결한 방법
스크린 투영(Screen Projection) 및 역투영 기술 적용 3D 공간의 입자 좌표를 렌더링 파이프라인의 View/Projection 행렬을 이용해 화면상의 2D 픽셀 좌표로 실시간 변환했습니다. 마우스 원과의 거리는 이 2D 좌표계에서 정확하게 연산(지름 고정)하고, 튕겨 나가는 힘을 가할 때는 다시 카메라의 Right와 Up 벡터를 활용해 3차원 물리 가속도로 역투영함으로써 완벽하고 자연스러운 바운스 엔지니어링을 완성했습니다. 실시간 각도 감쇠 및 회전 복원 시스템 구축 글자가 입력되는 순간 구체의 자전 애니메이션을 즉시 정지시키고, 현재 돌아가 있던 3D 회전 각도($\theta$)를 Linear Interpolation (선형 보간) 알고리즘을 통해 정면($0, 0, 0$) 좌표로 부드럽게 수렴(Easing) 시켰습니다. 이를 통해 글자가 흐트러지지 않고 정면을 바라보며 고정되도록 처리했습니다.
✨ 배운 점
수학적 물리 융합의 즐거움: 피보나치 격자(수학)를 이용한 균일한 분배, 훅의 법칙(물리)에 기반한 댐핑 용수철 시스템, 그리고 벡터 연산을 결합하면서 수학 공식이 어떻게 브라우저에서 '쫀득하고 살아있는 듯한 유체 텍스트 애니메이션'으로 시각화되는지 깊이 이해하게 되었습니다. 사용자 경험(UX) 중심의 코드 튜닝: 기술적으로 완벽한 3D 회전이라 할지라도 "글자를 읽고 싶다"는 사용자의 의도(텍스트 모드)를 만족시키기 위해서는 과감하게 회전을 제어하고 화면 정면에 고정하는 등의 상황별 예외 처리와 인터랙션 설계가 얼마나 중요한지 깨달았습니다.