Build "Plush Dragon" — Material Studies No. 014: a single self-contained HTML file, native WebGPU, fully procedural (no assets, no libraries), in the same editorial style as the series (serif masthead, side specimen panel, live readouts, "Inside the experiment" notes).
The specimen:
- A chubby plush baby dragon sitting on a table, all made from one signed distance field.
- Minky body: a big round head with a short snout and two felt horns, a pale belly quilted in horizontal bands, stubby arms, round haunches with padded feet and tiny felt claws.
- A tail curled round to one side, ending in a soft spade.
- A row of flat felt spikes down the head, back and tail.
- Face: glossy bead eyes, blushing cheeks, embroidered nostrils, a stitched smile with one little felt fang.
- Two quilted plush wings sewn on at the shoulders.
Physics:
- Body: XPBD soft body on a hex-cell lattice (co-rotational shape matching plus tetrahedral volume), 60 Hz, 6 substeps. Gravity and floor friction; the seat keeps its footing and the toy slowly rights itself like a weighted plush.
- Muscles instead of forces: the belly breathes (cells' rest shapes and rest volumes swell); the tail wags by lengthening cells on one side of its centre line and shortening them on the other, faster when the dragon is happy.
- Wings:
- each wing is a small XPBD cloth cut from a curved fan-shaped 3D pattern (stretch, shear and bend links), its two root rows embedded in the body lattice;
- a pose (fold back about the vertical, flap about a hinge along the body, both riding a shoulder frame from embedded points) pulls every point toward its target: firmly at the root, barely at the edge, so the stuffed wings lag and flop;
- collider spheres riding the body keep the wings off it.
- Flapping: downstrokes lift the dragon with a hover controller (about 6 cm off the table, bobbing with each beat), then it drops back onto its seat.
- Pulling a wing past its slack tows the body by that shoulder.
Rendering:
- Shell fur (base + N instanced shells, alpha-to-coverage under 4× MSAA): fur lie carried by the deformation gradient, damped-spring tip lag, Kajiya–Kay highlights, velvet sheen, a comb tool.
- Regions painted in rest space: belly with quilting seams, short-nap felt horns and spikes in the wing colour, padded soles, cheeks, smile groove.
- Wings drawn each frame as stuffed slabs swept from the cloth:
- a rolled leading edge in the body colour;
- three panels puffed between stitched ribs;
- a scalloped trailing edge;
- a shorter pile of the same minky.
- Glossy eyes, embroidery thread, felt fang and claws.
- Soft PCSS key-light shadows, contact occlusion on the studio floor, Khronos PBR Neutral tone mapping.
- NaN-safe WGSL (clamped pow/smoothstep, clamped post).
Interaction:
- Hand: lift and squash the dragon, or grab a wing to stretch it open (pull harder to tow the dragon).
- Finger: a finger reaches in from the viewer; poke to dent the stuffing; hold it pressed in to tickle — the dragon giggles, its wings shiver and its tail wags.
- Comb: brush the pile.
- Buttons: Flap, Stretch (wings spread wide), Boop (a sneeze: head bobs back, wings flare), Toss, Smooth fur, Reset.
- Sliders: Stuffing, Pile, Wingbeat.
- Palettes: Mint (lilac wings), Ember (coral with gold wings), Dusk (lavender with pink wings).
- Readouts: mass, volume % of rest, live wingspan in cm, lift off the table in cm.
- Orbit and zoom; responsive stacked layout on phones; adaptive quality; reduced-motion support.
한국어 번역
"Plush Dragon"을 만들어 주세요 — Material Studies No. 014: 단일 자체 완결형 HTML 파일, 네이티브 WebGPU, 완전 프로시저럴(에셋 없음, 라이브러리 없음), 시리즈와 동일한 에디토리얼 스타일(세리프 마스트헤드, 측면 표본 패널, 실시간 리드아웃, "Inside the experiment" 노트).
표본:
- 탁자 위에 앉아 있는 통통한 봉제 아기 드래곤, 전부 하나의 부호 있는 거리장(signed distance field)으로 만들어집니다.
- 밍키(minky) 몸통: 짧은 주둥이와 펠트 뿔 두 개가 달린 크고 둥근 머리, 가로 띠로 누빈 옅은 배, 뭉툭한 팔, 패딩 발과 작은 펠트 발톱이 있는 둥근 엉덩이.
- 한쪽으로 말려 올라간 꼬리, 끝은 부드러운 스페이드 모양.
- 머리, 등, 꼬리를 따라 이어지는 납작한 펠트 스파이크 한 줄.
- 얼굴: 광택 나는 구슬 눈, 발그레한 볼, 자수 콧구멍, 작은 펠트 송곳니 하나가 있는 박음질 미소.
- 어깨에 박음질로 달린 누빈 봉제 날개 두 개.
물리:
- 몸통: 헥스 셀 격자 위의 XPBD 소프트 바디(공회전 형상 매칭 + 사면체 부피), 60 Hz, 6 서브스텝. 중력과 바닥 마찰; 앉은 자리는 발판을 유지하고 장난감은 무게추가 든 봉제 인형처럼 천천히 스스로 몸을 바로 세웁니다.
- 힘 대신 근육: 배가 숨을 쉽니다(셀의 레스트 형상과 레스트 부피가 부풉니다); 꼬리는 중심선 한쪽 셀을 늘리고 반대쪽을 줄여 흔들리며, 드래곤이 행복할 때 더 빠릅니다.
- 날개:
- 각 날개는 곡면 부채꼴 3D 패턴에서 잘라낸 작은 XPBD 천이며(스트레치, 시어, 벤드 링크), 두 개의 뿌리 열이 몸통 격자에 임베드됩니다;
- 포즈(수직축 기준으로 뒤로 접기, 몸통을 따르는 힌지 기준으로 퍼덕이기, 둘 다 임베드된 점에서 나온 어깨 프레임을 따름)가 모든 점을 타깃으로 당깁니다: 뿌리에서는 단단히, 가장자리에서는 거의 당기지 않아, 솜이 든 날개가 늦게 따라오며 펄럭입니다;
- 몸통을 따라다니는 콜라이더 구체가 날개가 몸통에 닿지 않게 유지합니다.
- 퍼덕이기: 날갯짓의 하강 스트로크가 호버 컨트롤러로 드래곤을 들어 올리고(탁자에서 약 6 cm, 박자마다 위아래로 흔들림), 다시 자기 자리로 떨어집니다.
- 날개를 여유분 이상으로 당기면 그 어깨 쪽으로 몸통이 끌려옵니다.
렌더링:
- 셸 퍼(베이스 + N개의 인스턴스 셸, 4× MSAA 아래 alpha-to-coverage): 변형 구배로 전달되는 털의 결, 감쇠 스프링 끝단 지연, Kajiya–Kay 하이라이트, 벨벳 광택, 빗 도구.
- 레스트 공간에 칠해진 영역: 누빔 솔기가 있는 배, 날개 색의 짧은 털 펠트 뿔과 스파이크, 패딩 밑창, 볼, 미소 홈.
- 날개는 매 프레임 천에서 스윕된 솜이 든 슬래브로 그려집니다:
- 몸통 색으로 말린 앞전(leading edge);
- 박음질 리브 사이로 부풀어 오른 세 개의 패널;
- 물결 모양(scalloped) 뒷전;
- 같은 밍키 소재의 더 짧은 파일.
- 광택 눈, 자수 실, 펠트 송곳니와 발톱.
- 부드러운 PCSS 키라이트 그림자, 스튜디오 바닥의 컨택트 오클루전, Khronos PBR Neutral 톤 매핑.
- NaN 안전 WGSL(클램프된 pow/smoothstep, 클램프된 포스트).
상호작용:
- 손: 드래곤을 들어 올리고 눌러 으깨거나, 날개를 잡아 펼칩니다(더 세게 당기면 드래곤이 끌려옵니다).
- 손가락: 시청자 쪽에서 손가락이 들어옵니다; 찔러서 솜을 눌러 들어가게 하고, 계속 눌러 간지럽히면 — 드래곤이 낄낄 웃고 날개가 떨리며 꼬리가 흔들립니다.
- 빗: 파일을 빗습니다.
- 버튼: Flap, Stretch(날개를 넓게 펼침), Boop(재채기: 머리가 뒤로 젖혀지고 날개가 확 펴짐), Toss, Smooth fur, Reset.
- 슬라이더: Stuffing, Pile, Wingbeat.
- 팔레트: Mint(라일락 날개), Ember(산호색에 금색 날개), Dusk(라벤더에 분홍 날개).
- 리드아웃: 질량, 레스트 대비 부피 %, 실시간 날개 폭(cm), 탁자에서 뜬 높이(cm).
- 궤도 회전과 줌; 휴대폰에서 반응형 스택 레이아웃; 적응형 품질; reduced-motion 지원.
