찢어지는 천 시뮬레이터
마우스로 천을 잡아당겨 찢고, 이미지를 천처럼 씌우고, 화염방사기로 불태워 보세요.
소개
찢어지는 천 시뮬레이터는 Verlet 물리로 짠 격자 천을 마우스로 잡아당기고, 세게 당겨 찢고, 우클릭으로 자르며, 원하는 이미지를 천처럼 씌워 실시간으로 늘어지고 접히는 모습을 관찰하는 인터랙티브 놀이터입니다. 이미지를 올리면 WebGL 셰이더가 접힌 면의 명암과 하이라이트를 계산해 실제 직물처럼 빛을 받게 하고, 화염방사기 모드로 불을 붙이면 천이 위로 번지며 타들어가 숯이 되고 구멍이 뚫리는 과정까지 재현합니다.
찢어지는 천 시뮬레이터는 Verlet 물리로 만든 천을 잡아당기고 찢고 이미지를 씌우고 불을 붙이는 인터랙티브 시뮬레이터입니다를 빠르게 처리하면서도 결과를 어디까지 믿고 어떻게 해석해야 하는지까지 같은 페이지에서 판단할 수 있도록 구성한 moduhub 실무 도구입니다. 유틸리티 도구는 실제 작업 중간에 열리는 경우가 많아서, 결과를 바로 써도 되는 상황과 한 번 더 검토해야 하는 상황을 구분해 안내합니다.
특히 잘 맞는 상황은 다음과 같습니다. 쉬어가는 시간에 마우스로 천을 잡아당기고 찢으며 물리 반응을 즐기고 싶을 때 열어두기 좋습니다. 자신의 사진을 천처럼 씌워 늘어지고 접히고 불타는 모습을 만들어 캡처하거나 공유하고 싶을 때 활용합니다. 실제 사용 흐름은 다음 순서로 이어집니다. 천을 마우스로 드래그해 잡아당기고, 세게 당기면 실이 끊어지며 찢어집니다. 우클릭 드래그로 원하는 선을 따라 천을 자르고, 이미지 올리기·드래그·붙여넣기(Ctrl+V)로 사진을 천으로 씌웁니다. 화염방사기 버튼을 켜고 천을 문지르면 불이 붙어 번지고, 다시 만들기로 언제든 초기화합니다. 각 격자점을 Verlet 적분으로 갱신하고 구조 스프링과 굽힘 스프링으로 형태를 유지하며, 스프링이 한계 이상 늘어나면 끊어 찢김을 표현합니다. 이미지 모드에서는 삼각형 단위로 텍스처를 매핑하고 국소 변형에서 유사 법선을 추정해 WebGL 셰이더로 접힘의 명암을 계산합니다. 물리와 발열은 시각적 재미를 위한 근사이며 실제 직물이나 연소를 정밀하게 모사하지는 않습니다. 격자 밀도가 높거나 파티클이 많을 때는 저사양 기기에서 프레임이 떨어질 수 있습니다.
사용 방법
- 천을 마우스로 드래그해 잡아당기고, 세게 당기면 실이 끊어지며 찢어집니다.
- 우클릭 드래그로 원하는 선을 따라 천을 자르고, 이미지 올리기·드래그·붙여넣기(Ctrl+V)로 사진을 천으로 씌웁니다.
- 화염방사기 버튼을 켜고 천을 문지르면 불이 붙어 번지고, 다시 만들기로 언제든 초기화합니다.
이럴 때 잘 맞습니다
- 쉬어가는 시간에 마우스로 천을 잡아당기고 찢으며 물리 반응을 즐기고 싶을 때 열어두기 좋습니다.
- 자신의 사진을 천처럼 씌워 늘어지고 접히고 불타는 모습을 만들어 캡처하거나 공유하고 싶을 때 활용합니다.
작동 방식과 해석 포인트
- 각 격자점을 Verlet 적분으로 갱신하고 구조 스프링과 굽힘 스프링으로 형태를 유지하며, 스프링이 한계 이상 늘어나면 끊어 찢김을 표현합니다.
- 이미지 모드에서는 삼각형 단위로 텍스처를 매핑하고 국소 변형에서 유사 법선을 추정해 WebGL 셰이더로 접힘의 명암을 계산합니다.
알아두면 좋은 점
- 물리와 발열은 시각적 재미를 위한 근사이며 실제 직물이나 연소를 정밀하게 모사하지는 않습니다.
- 격자 밀도가 높거나 파티클이 많을 때는 저사양 기기에서 프레임이 떨어질 수 있습니다.
자주 묻는 질문
내 이미지를 천으로 사용할 수 있나요?
네. 파일 올리기 버튼, 드래그 앤 드롭, 클립보드 붙여넣기(Ctrl+V) 세 가지 방식으로 이미지를 넣을 수 있고, 이미지는 천의 격자에 텍스처로 입혀져 늘어나고 접히며 찢어집니다.
이미지는 어디로 업로드되나요? 서버에 저장되나요?
업로드한 이미지는 서버로 전송되지 않고 브라우저 안에서만 처리됩니다. 페이지를 새로고침하면 사라지므로 개인 사진도 부담 없이 실험할 수 있습니다.
화염방사기 기능은 어떻게 동작하나요?
화염방사기 모드에서 천을 문지르면 닿은 지점에 불이 붙고, 불은 위쪽으로 더 빠르게 번지며 부위마다 다른 속도로 타들어갑니다. 충분히 타면 숯이 되어 실이 끊어지고 구멍이 남습니다.
모바일 터치로도 되나요?
네. 터치로 천을 잡아당기고 찢을 수 있으며, 화면 크기에 맞춰 천과 캔버스가 자동으로 다시 구성됩니다. 다만 WebGL 성능은 기기에 따라 차이가 있을 수 있습니다.
관련 검색어
- 찢어지는 천 시뮬레이션
- 천 물리 시뮬레이터
- Verlet 천 시뮬레이션
- 인터랙티브 천 애니메이션
- 이미지 천 효과