아들이 좋아하는 말랑이를 브라우저에서 만들었습니다

AI 요약

Hacktoberfest의 ‘친구를 위해 만들기’ 챌린지에 맞춰 아들이 좋아하는 말랑이 장난감을 브라우저에서 직접 만지는 프로젝트로 만들었습니다. Squishy Lab에는 모찌, 딸기, 바나나, 고양이, 치즈, 땅콩 등 10가지 모양이 있습니다. 표면 마감과 표정, 문구, 글꼴, 색상을 바꾸고, 누르는 힘에 반응하는 Gel 또는 Crunchy 소리를 선택할 수 있습니다. 만든 결과물은 PNG로 내보냅니다.

연체 시뮬레이션

말랑한 효과를 단순한 크기 애니메이션이나 셰이더로 처리하지 않았습니다. Three.js 장면에서 216개 입자와 750개 사면체로 구성한 XPBD 케이지가 5,402개 정점의 용접된 표면을 움직입니다. 압력은 누른 위치에 국소적으로 적용됩니다. 오래 누를수록 움푹 들어간 부분이 깊고 넓어지며, 재질마다 압축에 저항하는 정도가 다릅니다. 변형 상태에 지연을 줘 폼처럼 천천히 복원되는 느낌을 냅니다.

물리 계산은 고정된 120Hz로 실행합니다. 표면과 글자, 작은 장식도 변형하는 몸체를 따라 움직입니다. 일부 모양과 장식은 Blender에서 제작하지만, 실행할 때 Blender가 필요하지는 않습니다. 전체 경험은 브라우저 안에서 동작합니다.

자연어를 재질 설정으로 변환

AI 모델은 물리 시스템을 대신하지 않고, 그 위에서 재질 설정을 만듭니다. 사용자가 “색은 그대로 두고 더 단단하게 만들되 천천히 복원되게 해줘”라고 입력하면, 오픈 웨이트 모델이 문장을 검증된 재질 명세로 변환합니다. 이후 결정론적 컴파일러가 이를 처리하고 연체 시뮬레이션에 전달합니다.

만든 사람의 반응

개발자는 아들이 실제로 Squishy Lab을 좋아하고 친구들에게도 써보라고 하고 싶어 한다는 점을 가장 만족스러운 사용자 테스트로 꼽습니다. 프로젝트는 오픈 소스로 공개했습니다.

dev.to 반응

• @technogamerz — 와 🥰 마음에 들어요! 😍

원문: dev.to / 번역·요약: Trawling