ai21.net
語言

毛絨龍物理效果對比

示範影片

毛絨龍物理效果對比 — 1

提示詞

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”註釋)。

標本:
- 一隻胖乎乎的毛絨幼龍坐在桌上,整體全部由同一個有符號距離場構成。
- Minky 絨布身體:大大的圓腦袋,短口鼻和兩隻毛氈角,淺色肚皮以水平條帶絎縫,粗短的胳膊,圓潤的臀部配軟墊腳掌和極小的毛氈爪子。
- 一條尾巴卷向一側,末端是一個柔軟的鏟形尾尖。
- 一排扁平的毛氈棘刺,沿頭部、背部和尾部排列。
- 面部:有光澤的珠狀眼睛、泛紅的臉頰、繡制的鼻孔、縫線的微笑,配一顆小小的毛氈獠牙。
- 兩隻絎縫毛絨翅膀,縫在肩部。

物理:
- 身體:六邊形單元晶格上的 XPBD 軟體(共旋轉形狀匹配加四面體體積),60 Hz,6 個子步。重力和地面摩擦;坐部保持支撐,玩具像加了配重的毛絨玩偶一樣緩慢自行扶正。
- 用肌肉代替力:肚皮會呼吸(單元的靜止形狀和靜止體積膨脹);尾巴通過讓中心線一側的單元伸長、另一側縮短來擺動,龍開心時擺得更快。
- 翅膀:
- 每隻翅膀都是一小塊 XPBD 布料,裁自彎曲的扇形 3D 版型(拉伸、剪切和彎曲連接),其兩排根部嵌入身體晶格;
- 一個姿勢(繞垂直方向向後摺疊、繞沿身體的鉸鏈扇動,兩者都掛載在由嵌入點生成的肩部座標繫上)會把每個點拉向它的目標:根部拉得很緊,邊緣幾乎不拉,因此填充的翅膀會滯後並鬆垮地擺動;
- 附着在身體上的碰撞球體讓翅膀不會碰到身體。
- 扇動:向下拍翅通過懸停控制器把龍抬起(離桌面約 6 釐米,隨每次拍擊上下浮動),然後它落回坐姿。
- 把翅膀拉過它的鬆弛量,就會通過那一側肩膀拖動身體。

渲染:
- 殼層毛髮(基礎層 + N 個實例化殼層,4× MSAA 下使用 alpha-to-coverage):毛發的伏倒方向由變形梯度承載,阻尼彈簧帶來毛尖滯後,Kajiya–Kay 高光,天鵝絨光澤,以及一把梳理工具。
- 在靜止空間中繪製的區域:帶絎縫縫線的肚皮、與翅膀同色的短絨毛氈角與棘刺、加了軟墊的腳底、臉頰、微笑凹槽。
- 翅膀每幀繪製爲由布料掃掠而成的填充板片:
- 與身體同色的捲曲前緣;
- 三塊在縫製肋條之間鼓起的板面;
- 扇貝形後緣;
- 同一 Minky 絨布上更短的絨毛。
- 有光澤的眼睛、刺繡線、毛氈獠牙和爪子。
- 柔和的 PCSS 主光陰影、影棚地面上的接觸遮蔽、Khronos PBR Neutral 色調映射。
- 對 NaN 安全的 WGSL(鉗制的 pow/smoothstep、鉗制的後處理)。

交互:
- 手:抬起並擠壓龍,或抓住一隻翅膀把它拉開(拉得更用力就能拖動龍)。
- 手指:一根手指從觀察者方向伸進來;戳一下會讓填充物凹陷;按住不放來撓癢 —— 龍會咯咯笑,翅膀顫抖,尾巴擺動。
- 梳子:梳理絨毛。
- 按鈕:Flap、Stretch(翅膀大幅張開)、Boop(打噴嚏:頭向後仰,翅膀張開)、Toss、Smooth fur、Reset。
- 滑塊:Stuffing、Pile、Wingbeat。
- 調色板:Mint(淡紫色翅膀)、Ember(珊瑚色配金色翅膀)、Dusk(薰衣草色配粉色翅膀)。
- 讀數:質量、相對靜止狀態的體積百分比、實時翼展(釐米)、離桌高度(釐米)。
- 環繞與縮放;手機上爲響應式堆疊佈局;自適應畫質;支持 reduced-motion。

溯源

原作者
vib3coded
發佈日期
2026-10-05(由推文 ID 反解)
原始出處
查看原帖 ↗
收錄來源
zhuyansen/awesome-opus-5.5-video · 2107020311380033949 · 未聲明授權