ai21.net
語言

瀏覽器章魚物理效果對比

示範影片

瀏覽器章魚物理效果對比 — 1

提示詞

Create an interactive 3D "Plush Octopus" toy as a single self-contained HTML file using native WebGPU. A cute stuffed octopus sits on a soft studio table: a big round head with two glossy black safety-bead eyes, embroidered blush cheeks and a small stitched smile, and eight chubby tapering arms that lie on the table and curl up at the tips, revealing a paler underside with rows of sucker discs. Make it look like real minky plush: dense real-time fur with visible strands, soft sheen, fur that sways when the toy moves, and soft contact shadows.

Interactions:
- Drag the head or any single arm to stretch it independently; arms must stay connected to the body and never pass through each other or the head.
- "Finger" tool: a finger follows the pointer above the octopus. Nearby arms reach up for it; press to lower it and the arms wrap around it and hold on. Moving or lifting the finger drags or lifts the octopus until the arms let go. Poking the head dents it.
- "Comb" tool: stroke the fur to change its direction; against the grain it looks darker, with the grain it shines. Add a "Smooth fur" button.
- "Shake it" button: pick the octopus up by the crown and shake it so the arms flop and swing like soft sausages, then set it down.
- Squish (press down from above), Toss, and Reset. If it lands upside down, it slowly rolls back onto its arms.

Controls: three fur colours (Coral, Lilac, Lagoon), sliders for stuffing firmness, pile length, and internal damping, quarter speed, pause. Support mouse and touch, camera orbit, and zoom (scroll or pinch). Use an elegant editorial "material study" layout: a large serif title, a compact control panel, and live readouts (mass, volume, kinetic energy, arms holding on). Generate all geometry, materials, and fur procedurally: no external libraries, models, textures, or other assets. Prioritize believable soft-body physics, stable simulation, and a cosy, polished look.

中文翻譯

使用原生 WebGPU,創建一個可交互的 3D“Plush Octopus”玩具,作爲單個自包含的 HTML 文件。一隻可愛的填充章魚坐在柔軟的工作室桌面上:一個大大的圓腦袋,兩顆光亮的黑色安全珠眼睛,繡制的腮紅臉頰和一個小小的縫線微笑,八條胖乎乎、逐漸收細的觸手躺在桌上、末端向上捲起,露出顏色更淺、帶有一排排吸盤的下側。讓它看起來像真正的 minky 絨布:濃密、可見毛絲的實時毛髮,柔和的光澤,玩具移動時會擺動的毛髮,以及柔和的接觸陰影。

交互:
- 拖動頭部或任意一條觸手,獨立地拉伸它;觸手必須始終與身體相連,且絕不能相互穿透或穿透頭部。
- “Finger”工具:一根手指在章魚上方跟隨指針。附近的觸手會向上伸向它;按下以放低手指,觸手便纏繞上去抓住它。移動或抬起手指會拖動或提起章魚,直到觸手鬆開。戳頭部會讓它凹陷。
- “Comb”工具:撫摸毛髮以改變其方向;逆着毛流看起來更深,順着毛流則發亮。添加一個“Smooth fur”按鈕。
- “Shake it”按鈕:抓住章魚頭頂把它提起來搖晃,讓觸手像柔軟的香腸一樣耷拉、甩動,然後把它放回去。
- Squish(從上方往下壓)、Toss 和 Reset。如果它倒着落地,它會慢慢滾回觸手朝下的姿態。

控制項:三種毛髮顏色(Coral、Lilac、Lagoon)、填充硬度、毛長和內部阻尼的滑塊、四分之一速度、暫停。支持鼠標與觸控、相機環繞和縮放(滾輪或雙指捏合)。使用優雅的編輯式“材質研究”佈局:一個大號襯線標題、一塊緊湊的控製麪板,以及實時讀數(質量、體積、動能、抓住不放的觸手)。所有幾何體、材質和毛髮均程序化生成:不使用外部庫、模型、貼圖或其他資源。優先保證可信的軟體物理、穩定的模擬,以及溫馨、精緻的觀感。

溯源

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