Build "Plush Spider" — Material Studies No. 015.
Format and style:
- A single self-contained HTML file on native WebGPU, fully procedural (no assets, no libraries).
- The same editorial style as the series: serif masthead, side specimen panel, live readouts, "Inside the experiment" notes.
The specimen: a cute plush spider sitting on a table.
- The body is one signed distance field:
- a big round abdomen with knitted-looking stripes;
- a smaller head-and-chest tucked into it, with two fuzzy cheeks;
- a paler underside.
- The face:
- two big glossy bead eyes on white felt discs;
- a row of four tiny bead eyes above them;
- blushing cheeks, an embroidered smile and two little felt fangs.
- Eight posable plush legs, four a side, sewn on along the chest. They are striped like socks, end in pale little feet, and have a wire inside.
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.
- The toy slowly rights itself toward the heading it last walked (posture with a yaw).
- The abdomen breathes: its cells' rest shapes and rest volumes swell.
Physics — legs:
- Each leg is an XPBD rod chain from a hip embedded in the body lattice to the toe.
- A blended pose in the body's frame (sit, stand, hang, curl, wave) pulls each point toward its target: firmly at the hip, less toward the toe. So the legs hold their shape but sag and swing.
- The wire is plastic: when the hand bends a leg past its give, the pose itself takes the new shape and the leg stays bent until "Straighten legs".
- Spheres riding the body keep the legs off it. Toes grip the table. The finger pushes the legs aside.
- Pulling a leg further than it reaches tows the spider by that hip.
Behaviour:
- Walking:
- the body rises onto its legs with a height controller;
- it is led toward a goal with a weak pull and turns to face it;
- toes are drawn to footholds on the table;
- an alternating four-and-four gait lifts the set that has fallen furthest behind and sets it down ahead, with a little arc;
- it wanders on its own now and then.
- Curl up (button or a finger poke): the legs hug up over its back, the spider rolls away from the touch as a ball (no footing, no rolling resistance), then unrolls and rights itself.
- Hang on silk:
- a springy thread that only pulls, from an anchor high above to a patch of the back;
- it is reeled up off the table, swings when pushed, and its legs paddle the air;
- pressing again lowers it back to the table.
- Wave: one front leg is raised and wiggles.
- With the Finger tool, the spider scuttles over to the finger.
Rendering:
- Shell fur: base plus N instanced shells, alpha-to-coverage under 4× MSAA.
- The fur lie is carried by the deformation gradient, with a damped-spring tip lag.
- Kajiya–Kay highlights, velvet sheen, a comb tool.
- Regions painted in rest space: abdomen stripes, pale underside, short pile around the felt eye discs, cheeks, smile groove, stitched seams round the hips.
- Legs are drawn each frame as plush tubes:
- swept along a Catmull–Rom curve through each rod with a parallel-transport frame;
- a slight knee bulge and a rounded little foot;
- banded colour and a shorter pile.
- A thin glinting silk thread.
- Soft PCSS key-light shadows, contact occlusion on the studio floor, Khronos PBR Neutral tone mapping.
- NaN-safe WGSL: clamped pow and smoothstep, clamped post.
UI:
- Tools:
- Hand: lift and squash the body, or grab and bend a leg;
- Finger: the spider follows it, and a poke curls it up;
- Comb: brush the pile.
- Buttons: Walk, Hang on silk, Curl up, Wave, Straighten legs, Smooth fur, Reset.
- Sliders: Stuffing, Pile, Wire (floppy to stiff).
- Palettes: Midnight (dark plum with lilac stripes), Tangerine (orange with brown stripes), Moss (green with yellow stripes).
- Readouts: mass, volume % of rest, steps taken, silk length in cm.
- Orbit and zoom; responsive stacked layout on phones; adaptive quality; reduced-motion support.
한국어 번역
"Plush Spider" 제작 — Material Studies No. 015.
형식과 스타일:
- 네이티브 WebGPU 위에서 동작하는 단일 자체 포함 HTML 파일, 완전 절차적(에셋 없음, 라이브러리 없음).
- 시리즈와 같은 편집 디자인 스타일: 세리프 마스트헤드, 측면 표본 패널, 실시간 판독값, "Inside the experiment" 노트.
표본: 탁자 위에 앉아 있는 귀여운 봉제 거미.
- 몸체는 하나의 부호 거리장(signed distance field):
- 니트처럼 보이는 줄무늬가 있는 크고 둥근 배;
- 그 안으로 접혀 들어간, 보송보송한 볼 두 개가 달린 더 작은 머리-가슴;
- 더 옅은 색의 배 아래쪽.
- 얼굴:
- 흰 펠트 원판 위에 얹힌 크고 광택 나는 구슬 눈 두 개;
- 그 위로 한 줄로 놓인 작은 구슬 눈 네 개;
- 상기된 볼, 자수로 놓은 미소, 작은 펠트 송곳니 두 개.
- 자세를 잡을 수 있는 봉제 다리 여덟 개, 한쪽에 네 개씩, 가슴을 따라 꿰매어 붙임. 양말처럼 줄무늬가 있고 끝은 옅은 색의 작은 발이며, 안에 철사가 들어 있음.
물리 — 몸체:
- 육각 셀 격자 위의 XPBD 소프트 바디: 공회전 형상 매칭과 사면체 부피, 60 Hz, 서브스텝 6회.
- 중력과 바닥 마찰. 앉은 부분은 발딛음을 유지함.
- 장난감은 마지막으로 걸었던 방향을 향해 천천히 스스로 몸을 바로 세움(요(yaw)가 있는 자세).
- 배가 숨을 쉼: 셀들의 휴지 형상과 휴지 부피가 부풀어 오름.
물리 — 다리:
- 각 다리는 몸체 격자에 박힌 엉덩이 관절에서 발끝까지 이어지는 XPBD 막대 사슬.
- 몸체 좌표계에서 혼합된 자세(앉기, 서기, 매달리기, 말기, 흔들기)가 각 점을 목표 쪽으로 당김: 엉덩이에서는 단단히, 발끝 쪽으로 갈수록 약하게. 그래서 다리는 형태를 유지하되 처지고 흔들림.
- 철사는 소성 성질을 지님: 손이 다리를 탄성 한계 너머로 구부리면 자세 자체가 새 형태를 받아들이고, "Straighten legs" 전까지 다리는 구부러진 채로 남음.
- 몸체를 따라 움직이는 구체들이 다리가 몸체에 닿지 않게 함. 발끝이 탁자를 붙잡음. 손가락이 다리를 옆으로 밀어냄.
- 다리를 닿는 범위보다 더 멀리 당기면 그 엉덩이 쪽으로 거미가 끌려옴.
행동:
- 걷기:
- 높이 컨트롤러로 몸체가 다리 위로 올라섬;
- 약한 당김으로 목표를 향해 이끌리고, 목표 쪽으로 돌아 섬;
- 발끝이 탁자 위의 디딤점으로 끌려감;
- 네 개-네 개 교대 보행이 가장 뒤처진 세트를 들어 작은 호를 그리며 앞쪽에 내려놓음;
- 때때로 스스로 배회함.
- Curl up(버튼 또는 손가락 찌르기): 다리가 등 위로 오므라들고, 거미는 접촉에서 벗어나는 쪽으로 공처럼 굴러감(발딛음 없음, 구름 저항 없음), 그다음 풀리며 스스로 바로 섬.
- Hang on silk:
- 위쪽 높은 고정점에서 등 한 지점으로 이어지며 당기기만 하는 탄성 실;
- 탁자에서 감아 올려지고, 밀면 흔들리며, 다리가 허공을 젓음;
- 다시 누르면 탁자로 내려옴.
- Wave: 앞다리 하나가 들려 흔들림.
- Finger 도구를 쓰면 거미가 손가락 쪽으로 종종걸음으로 다가감.
렌더링:
- 셸 퍼: 베이스에 N개의 인스턴스 셸을 더함, 4× MSAA 아래 알파-투-커버리지.
- 퍼의 결은 변형 기울기로 전달되고, 감쇠 스프링으로 끝부분에 지연이 붙음.
- Kajiya–Kay 하이라이트, 벨벳 광택, 빗 도구.
- 휴지 공간에 칠해진 영역들: 배 줄무늬, 옅은 배 아래쪽, 펠트 눈 원판 주변의 짧은 파일, 볼, 미소 홈, 엉덩이 둘레의 꿰맨 솔기.
- 다리는 매 프레임 봉제 튜브로 그림:
- 각 막대를 지나는 Catmull–Rom 곡선을 따라 평행 운송 프레임으로 스윕;
- 약간 볼록한 무릎과 둥글고 작은 발;
- 띠 모양의 색과 더 짧은 파일.
- 가늘게 반짝이는 실크 실.
- 부드러운 PCSS 키 라이트 그림자, 스튜디오 바닥의 접촉 오클루전, Khronos PBR Neutral 톤 매핑.
- NaN 안전 WGSL: 클램프된 pow와 smoothstep, 클램프된 후처리.
UI:
- 도구:
- Hand: 몸체를 들어 올리고 찌그러뜨리거나, 다리를 잡아 구부림;
- Finger: 거미가 이것을 따라오고, 찌르면 몸을 오므림;
- Comb: 파일을 빗질함.
- 버튼: Walk, Hang on silk, Curl up, Wave, Straighten legs, Smooth fur, Reset.
- 슬라이더: Stuffing, Pile, Wire(흐물흐물에서 뻣뻣까지).
- 팔레트: Midnight(라일락 줄무늬가 있는 짙은 자두색), Tangerine(갈색 줄무늬가 있는 주황색), Moss(노란 줄무늬가 있는 초록색).
- 판독값: 질량, 휴지 상태 대비 부피 %, 걸음 수, 실크 길이(cm).
- 궤도 회전과 확대; 휴대폰에서 반응형 세로 적층 레이아웃; 적응형 품질; 동작 감소 지원.
