ai21.net
語言

果凍世界北極島嶼:Opus對比Astra

示範影片

果凍世界北極島嶼:Opus對比Astra — 1

提示詞

Create "Frostbay." — an interactive miniature Arctic diorama as ONE self-contained HTML file using native WebGPU (WGSL). Everything procedural: no libraries, no imported models, no image textures, no network requests.

SCENE
- A clear rectangular block of cold sea (≈10 × 7 units, ~1.6 deep) resting on a thick, glossy jelly foundation with rounded edges and soft layered bands of icy blue and pale lavender.
- A snowy rock island toward the back: wet dark rock at the tide line, a cut "core-sample" cross-section where it meets the glass, a few rounded boulders on the sea floor.
- An igloo built from individual curved snow blocks (rows offset like brickwork), a block entrance tunnel, a warm amber ice window and a glowing interior.
- A wooden plank pier on posts with a hanging lantern; a fluttering red-and-white flag on a pole.
- An orange kayak with a double-bladed paddle; ~10 irregular ice floes; a larger ice raft.
- Two harbour seals (spotted, pale muzzle): one basking on a shore ledge of the island, one lying on the raft.
- A humpback whale: one smooth continuous lofted body, pale throat pleats and belly, mouth line, eyes, knobbly rostrum, very long pale flippers, small dorsal fin, wide flukes.
- Calm editorial backdrop; the diorama casts a soft shadow on an unseen floor.

WATER (a real simulation, not a shader trick)
- Height-field long-wave sim (∂²h/∂t² = ∇·(g·depth ∇h)) on a ~200×140 grid, flux form (volume-conserving), fixed 180 Hz substeps, damping + light viscosity + hard clamps: stable at every slider setting and during frantic drags.
- Waves slow and steepen over the shallows, wrap around the island, reflect off the glass and settle.
- Press = a soft plunger making a deep hollow with a raised, volume-neutral rim; dragging sweeps it (speed-limited) and leaves real 3D wakes. Hover never makes waves. Touch supported.
- Dragging a glass side tilts and slides the block on its jelly (damped springs that wobble back) and the sea sloshes toward the new level; a local soft bulge follows the hand. Pulling a jelly edge stretches it locally, then it wobbles home.
- Floating things follow local height and averaged slope, drift, bump each other, avoid shallows and glass.

LIFE
- Kayak: draggable (with a wake). A strong local wave — high swing AND steep averaged slope across the hull — rolls it 180° and leaves it upside down; ordinary ripples and blizzard chop only rock it; never capsizes while held.
- Raft seal: breathes, looks around, articulated flippers. Strong waves make it lose balance, slip off head-first, fall in with a splash, then swim — head up, coordinated hind-flipper strokes, steering away from shallows and glass — and later hauls itself back onto the raft.
- Shore seal: breathes, gazes, scratches with a fore flipper, lifts its head when big waves come.
- Whale: its spine follows the path its head has swum, so it always moves head-first and bends through turns, never sliding backward. "Call the whale" (button or double-click / double-tap) brings it up to the surface, it blows a misty spout, its back heaves the water, then it dives with the flukes rolling under.

LOOK
- Opaque pass to HDR with 4× MSAA plus a distance buffer; water pass with screen-space refraction (wave-driven), depth absorption (deep cold blue, no tropical turquoise), Fresnel sky reflection, restrained soft highlights, foam on crests and shallows, side walls showing the underwater cross-section with a crisp waterline and total internal reflection.
- Moving caustics on everything under the surface, focused by the live wave curvature; soft key-light shadows; neutral tone mapping.
- Modes: Daylight, Snowfall (overcast, falling snow), Aurora night (green/violet curtains, twinkling stars, warm igloo and lantern light with reflections on the water). Blizzard toggle: dense wind-driven snow, gusts and chop on the sea.

UI
- Restrained editorial layout: large italic serif "Frostbay.", short atmospheric subtitle, live status pill, compact panel (weather segments, blizzard switch, jelly firmness, wave damping, tide, Call the whale, Pause, Reset, Camera), concise hints, readouts for seal, kayak, whale and swell; orbit and zoom (pinch on touch).
- Pause freezes all motion; Reset restores sea, block, raft seal and upright kayak.
- Mobile: stacked layout, collapsible controls, ≥44 px touch targets. Clear fallback card if WebGPU is unavailable.

Test water interaction, stability, animals, kayak drag and capsize, whale call, weather modes, pause/reset, shader compilation and mobile layout. Return the finished HTML only.

中文翻譯

創建“Frostbay.”——一個可交互的微縮北極立體模型,作爲唯一一個自包含的 HTML 文件,使用原生 WebGPU(WGSL)。一切皆爲程序化:不使用庫,不導入模型,不使用圖像紋理,不發起網絡請求。

場景
- 一塊長方形、清澈的寒冷海水(≈10 × 7 單位,約 1.6 深),置於一層厚實、有光澤的果凍基座上,基座邊緣圓潤,並帶有冰藍色與淡薰衣草色的柔和分層色帶。
- 後方有一座覆雪的巖石島:潮線處是溼潤的深色巖石,在與玻璃相接處有一個切開的“巖芯樣本”剖面,海牀上還有幾塊圓潤的巨石。
- 一座由一塊塊弧形雪磚砌成的冰屋(各排像磚砌那樣錯位),一條由雪磚砌成的入口隧道,一扇溫暖的琥珀色冰窗,以及發光的內室。
- 一座由木樁支撐的木板碼頭,掛着一盞燈籠;旗杆上飄揚着一面紅白相間的旗幟。
- 一艘橙色皮劃艇,配一支雙頭槳;約 10 塊形狀不規則的浮冰;一塊較大的冰筏。
- 兩隻港海豹(帶斑點、淺色口鼻):一隻在島嶼的岸邊巖臺上曬太陽,一隻躺在冰筏上。
- 一頭座頭鯨:一個光滑連續、放樣生成的軀體,淺色的喉部褶溝與腹部,嘴線,眼睛,佈滿瘤突的吻部,很長的淺色胸鰭,小小的背鰭,寬大的尾鰭。
- 平靜的編輯式背景;立體模型在不可見的地面上投下柔和的陰影。

水(真實模擬,而非着色器把戲)
- 在約 200×140 網格上的高度場長波模擬(∂²h/∂t² = ∇·(g·depth ∇h)),通量形式(體積守恆),固定 180 Hz 子步,阻尼 + 輕微黏性 + 硬性鉗制:在每個滑塊設置下以及劇烈拖拽過程中都保持穩定。
- 波浪在淺灘上減速並變陡,繞過島嶼,從玻璃上反射後歸於平靜。
- 按下 = 一個柔軟的柱塞壓出深坑,邊緣隆起且保持體積中性;拖拽會帶着它掃過(受速度限制),並留下真實的 3D 尾跡。懸停絕不會產生波浪。支持觸摸。
- 拖拽玻璃側面會使海塊在其果凍基座上傾斜並滑動(帶阻尼的彈簧會晃動回位),海水隨之晃向新的水平面;一處局部的柔軟隆起跟隨手移動。拉扯果凍邊緣會使其局部拉伸,然後晃動着恢復原狀。
- 漂浮物遵循局部高度與平均坡度,會漂移、相互碰撞,並避開淺灘與玻璃。

生命
- 皮劃艇:可拖拽(帶尾跡)。強勁的局部波浪——擺幅大且船體橫向的平均坡度陡——會讓它翻滾 180° 並倒扣;普通的漣漪與暴風雪碎浪只會讓它搖晃;被握住時絕不會傾覆。
- 冰筏上的海豹:呼吸、四處張望、鰭肢有關節。強浪會讓它失去平衡,頭朝前滑落,撲通一聲掉進水裏,然後遊泳——頭抬起,後鰭肢協調劃水,避開淺灘與玻璃——之後又把自己拖回冰筏上。
- 岸邊的海豹:呼吸、凝視,用前鰭肢撓癢,大浪來時抬起頭。
- 鯨:它的脊柱沿着頭部遊過的路徑,因此它始終頭朝前移動,並在轉彎時彎曲,絕不向後滑。“Call the whale”(按鈕或雙擊/雙觸)會讓它浮到水面,噴出一道霧氣水柱,背部掀起海水,然後下潛,尾鰭翻卷沒入水下。

外觀
- 不透明通道輸出到 HDR,帶 4× MSAA 以及一個距離緩衝;水面通道使用屏幕空間折射(由波浪驅動)、深度吸收(深冷的藍色,不要熱帶青綠)、Fresnel 天空反射、剋制的柔和高光、浪尖與淺灘處的泡沫,側壁展示水下剖面,並有清晰的水位線與全內反射。
- 水面以下的一切都有移動的焦散,由實時波浪曲率聚焦;柔和的主光陰影;中性色調映射。
- 模式:Daylight、Snowfall(陰天、飄雪)、Aurora night(綠色/紫色光幕、閃爍的星星、溫暖的冰屋與燈籠光及其在水面上的倒影)。Blizzard 開關:密集的風吹雪、陣風與海面碎浪。

界面
- 剋制的編輯式佈局:大號斜體襯線“Frostbay.”,簡短而有氛圍的副標題,實時狀態膠囊,緊湊面板(天氣分段、blizzard 開關、果凍硬度、波浪阻尼、潮汐、Call the whale、Pause、Reset、Camera),簡潔提示,海豹、皮劃艇、鯨與湧浪的讀數;環繞與縮放(觸摸時雙指捏合)。
- Pause 凍結所有運動;Reset 恢復海水、海塊、冰筏上的海豹以及正立的皮劃艇。
- 移動端:堆疊佈局、可摺疊控件、≥44 px 的觸摸目標。若 WebGPU 不可用,顯示清晰的回退卡片。

測試水的交互、穩定性、動物、皮劃艇拖拽與傾覆、鯨的呼喚、天氣模式、暫停/重置、着色器編譯以及移動端佈局。只返回完成後的 HTML。

溯源

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