Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
단 하나의 HTML 파일로 구현된 WebGL2 기반의 수채화 시뮬레이터 'Inkwash'를 소개합니다. 유체 역학 논문을 바탕으로 실제 종이에 그리는 듯한 물리적 경험을 브라우저에서 완벽하게 구현했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 X @heynavtoor (자동 발견)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기누군가 단 하나의 HTML 파일로 수채화 시뮬레이터 (Watercolor Simulator)를 만들었습니다.
가입도 필요 없고, 설치도 필요 없습니다. 탭을 열기만 하면 페이지가 이미 종이 상태로 준비되어 있습니다.
이름은 Inkwash입니다. 마우스로 그림을 그리는데, 느린 획은 진해지고 빠른 획은 얇아집니다. 그런 다음 물로 전환하여 잉크 위를 문지르면, 잉크가 번집니다. Photoshop의 "스머지 도구 (smudge tool)" 방식이 아니라, 젖은 종이와 유체 역학 (fluid physics) 방식입니다. 잉크가 고이고, 깃털처럼 퍼지며, 마릅니다.
브라우저 탭 안에서 실제로 종이에 그림을 그리는 것과 가장 유사한 경험입니다.
매 프레임마다 실행되는 12개의 WebGL2 셰이더 패스 (shader passes)
드로잉당 22회의 Jacobi 압력 반복 (Jacobi pressure iterations)
실제 물리 연산을 수행하는 1999년 유체 시뮬레이션 논문 (Jos Stam, "Stable Fluids")
fbm 노이즈 (fbm noise)로 절차적으로 생성된 종이 질감
S를 누르면 PNG 저장, C를 누르면 초기화, 이것이 인터페이스의 전부입니다
놀라운 점은, 앱 전체가 GitHub Pages에 있는 하나의 독립된 HTML 파일이라는 것입니다. 백엔드도, 프레임워크도, 빌드 단계도 없습니다. 마우스 오른쪽 버튼을 눌러 소스 보기를 하면 전체 코드를 읽을 수 있습니다.
https://t.co/pcVADXHMYp 의 연구원인 Jonathan Whitaker가 제작했습니다. 그는 AI에게 모든 줄을 작성하도록 프롬프트를 입력했으며, 본인은 코드를 직접 만진 적이 없다고 말합니다.
컬러 피커 (color picker) 없음. 실행 취소 (undo) 없음. 레이어 (layers) 없음. 오직 색조 슬라이더 (hue slider)와 유체 역학 (fluid dynamics)의 법칙뿐입니다. 그런데 신기하게도 바로 그 점 때문에 이 앱이 완벽하게 작동합니다.
잉크가 치유하고, 종이가 치유합니다. https://t.co/ebGH5ga05w 사람들은 여전히 놀라운 것들을 만들어내고 있습니다.