提示词
提示词:
构建 "Dam Jelly",作为我的 "Material Studies" 系列新作:一个单文件、自包含的交互式 WebGPU 微缩景观(一个 HTML 文件,所有 JS/CSS/WGSL 均内联,无网络请求,无库)。将一座带混凝土重力坝的山谷切成一块晃悠悠的果冻,放在浅色摄影棚桌面上,以 from above at three-quarters 呈现。
场景(块体局部坐标,原点位于底面中心,y 轴向上,块体约 5.2 × 5.2 单位):
- 一条从后向前延伸的河谷:陡峭的岩石坡面上有峭壁、碎石坡和巨石,针叶林与阔叶林,以及长草的坡肩。块体切面展示倾斜岩层中的层状灰色基岩及节理、顶部风化的棕色带和深色表土,以及水下的砾石和淤泥。最底部是对应当前口味的薄薄彩色“果冻”地层。
- 大坝后方是一座狭长水库,岸边有水位消落后裸露的岩石环带,溢洪道前有由橙色和黄色浮筒组成的漂浮拦木索,一艘小巡逻艇绕湖航行。
- 一座横跨山谷的混凝土重力坝,两端嵌入岩石坝肩:向上收坡的下游坝面带有分层浇筑线,坝顶公路配有栏杆和路灯,进水塔带拦污栅,三条压力管道沿坝面向下延伸。
- 中央为阶梯式溢洪道,闸墩之间设有三个孔口。每个孔口都有一扇弧形(Tainter)闸门:弧形面板安装在支臂上,绕闸墩上的支铰旋转,顶部设启闭机房。下方依次是实用堰堰顶、阶梯泄槽、导流墙,以及在河床中冲刷形成的消力池。
- 右侧坝趾设发电厂房:河中的混凝土底座、带外墙板和高窗的厂房,以及尾水出口。其上方的平台设有带变压器和门架的开关站,格构式输电塔沿右侧山坡向上排列,导线自然下垂。
- 左岸设鱼道:从河流通往湖面的 14 级混凝土水池,池间设堰,顶部有出口闸门和计数小屋。
- 左坝肩设游客中心,另有带发卡弯的道路、下游跨河悬索步行桥,以及河中的岩石、水草和砾石洲。
模拟:
- 浅水高度场(约 168×168),由大坝分成两个水体(水库和河流),各有自己的静水位,通过洪水填充分类法划分。水源、汇点和水流射流形成可见流动:湖后方的入流、朝开启闸门和进水口汇聚的水流、消力池和尾水渠中翻涌的出流,以及前缘的排水。泡沫随水流平流输运。
- 水库水位 ODE:dL/dt = (Qin − Qspill − Qturbines − Qover) / AREA,其中 Qspill ∝ gateOpening · (L − sill)^1.5,Qover ∝ (L − crest)^1.5。河流水位随总出流量上升。
- 基于水头的发电功率:3 台机组 × 120 MW,按水头缩放。
- 自动守坝员在湖面接近坝顶或洪水即将到来时开启闸门(先鸣警报),水位回落后再次关闭。
- 果冻块本身会晃动,拖动侧面可使其倾斜,随后恢复稳定。
交互(右侧玻璃面板,“大坝”):
- 开启溢洪道:先鸣响 3.5 s 警报,随后闸门用约 9 s 向上旋开,白色急流沿台阶倾泻,伴随飞溅和水雾。再次按下即可关闭。
- 水轮机开/关:机组逐渐启动或停转,功率上升或下降,尾水渠翻涌或平静,运行时厂房窗户亮起。
- 鲑鱼洄游:鲑鱼聚集在坝下,尝试跃过瀑布,然后逐池攀上鱼道(每池一跃,依次等待),最后游入湖中。计数器统计通过的鱼。每隔几分钟也会自行出现一波洄游。
- 洪水:风暴逐渐形成、肆虐并消退(降雨、天色变暗、闪电击中输电塔、山脊或湖面)。巨大的入流洪峰沿山谷涌来:守坝员提前泄水,但湖面仍漫过坝顶,一整片白色漫顶水幕沿整个坝面倾泻。水变成浑浊的棕色,之后缓慢恢复清澈。
- 点按闸门、厂房或鱼道,触发相同操作。点按巡逻艇鸣笛。空格键鸣响警报。
- 统计:功率(MW)、水头(m)、鲑鱼。状态行:溢洪道、发电厂房、水库(上涨/下降/稳定/洪水正在涌入/漫过坝顶,并以米显示相对坝顶的水位)。
- 在水面上拖动产生波浪,拖动块体侧面使其倾斜,在空白处拖动或按住右键拖动进行 orbits,滚轮或双指捏合缩放。
- 口味色样(Lime、Curaçao、Blackcurrant)为果冻和水着色。提供硬度、波浪阻尼和风力滑块,以及重置、暂停、声音开/关和视图按钮。
生命:河流和湖中的虹鳟、鲑鱼,游水和起飞的绿头鸭(雄鸭和雌鸭),涉水潜行的苍鹭,盘旋并俯冲入水捕鱼的鱼鹰,在坝顶(听见警报会停下)、厂房院落、游客中心和步行桥上行走的人,以及岸边的一位钓鱼者。动物会被警报、闪电和溅水惊动。
声音(用 WebAudio 合成,仅由事件触发,无持续环境音):电动警报器声、闸门启闭机的咔哒声和低鸣、闸门抬起时溢洪道的奔流声、水轮机启动和停转时的啸声、漫顶水流的轰鸣、鲑鱼跃水声、每计入一条鱼时的提示音、鱼鹰入水声、船笛、雷声,以及仅在风暴肆虐时出现的风雨声。
渲染:使用 WebGPU,配合 MSAA、太阳阴影贴图、河床焦散、水体和果冻的折射与吸收、Fresnel 反射,为飞沫和团状水雾、白色急流水幕、鱼道水池及雨使用半透明预乘通道,并在洪水期间加入浑水色调。
UI 与布局:编辑式视觉风格,使用斜体衬线刊头("Material Studies" 眉题、"Dam Jelly." 标题、一行描述),左下角设“玩法说明”页脚。移动端将控制面板变为底部抽屉。若 WebGPU 不可用,显示清晰的回退提示卡。遵循 prefers-reduced-motion。页面不滚动。
质量:模拟耗时保持在约 2 ms/frame,长时间持续运行不出现 NaNs,所有内容始终位于块体内部,船始终浮在水面。使用无头 Playwright 截图(SwiftShader WebGPU)验证,并进行端到端测试,操作每个按钮、点按目标、滑块和移动端抽屉,检查控制台错误为零。原文提示词(English)
PROMPT:
Build "Dam Jelly", a new piece in my "Material Studies" series: a single-file, self-contained interactive WebGPU diorama (one HTML file, all JS/CSS/WGSL inline, no network requests, no libraries). A mountain valley with a concrete gravity dam is cut out as a wobbly block of jelly sitting on a pale studio table, seen from above at three-quarters.
SCENE (block-local coords, origin at base centre, y up, block ~5.2 × 5.2 units):
- A river valley running back to front: steep rocky slopes with crags, scree and boulders, conifer and broadleaf woods, grassy shoulders. Where the block is cut, the side faces show layered grey bedrock in tilted beds with joints, a weathered brown band and dark topsoil at the top, and gravel and silt under the water. At the very bottom are thin coloured "jelly" strata in the current flavour.
- A long reservoir behind the dam, with a bare drawdown ring of rock round its shore, a floating log boom of orange and yellow floats in front of the spillway, and a small patrol boat lapping the lake.
- A concrete gravity dam across the valley, its ends let into rock abutments: a battered downstream face with lift lines, a crest road with railings and lamps, an intake tower with trash racks and three penstocks down the face.
- A central stepped spillway with three bays between piers. Each bay has a radial (Tainter) gate: a curved skin plate on arms that swing about trunnions on the piers, with hoist houses on top. Below is an ogee crest, a stepped chute, training walls and a plunge pool scoured into the riverbed.
- A powerhouse at the right toe: a concrete base in the river, a hall of siding and tall windows, tailrace mouths. Above it, a switchyard on a terrace with transformers and gantries, and lattice pylons climbing the right slope with sagging lines.
- A fish ladder up the left bank: 14 stepped concrete pools with weirs between them from the river up to the lake, an exit gate and a counting hut at the top.
- A visitor centre on the left abutment, roads with hairpins, a suspension footbridge over the river downstream, rocks, weed and gravel bars in the river.
SIMULATION:
- Shallow-water heightfield (about 168×168), split into two bodies by the dam (reservoir and river), each with its own still level, separated by flood-fill classification. Sources, sinks and current jets make visible flow: inflow at the back of the lake, a draw toward open gates and the intake, boiling outflow in the plunge pool and tailrace, and drainage at the front edge. Foam advects on the currents.
- Reservoir level ODE: dL/dt = (Qin − Qspill − Qturbines − Qover) / AREA, where Qspill ∝ gateOpening · (L − sill)^1.5 and Qover ∝ (L − crest)^1.5. The river level rises with total outflow.
- Head-based power: 3 units × 120 MW, scaled by head.
- An automatic dam keeper opens the gates (siren first) when the lake nears the crest or a flood is coming, and shuts them again once the water is back down.
- The jelly block itself wobbles, can be tipped by dragging its side, and settles back.
INTERACTIONS (right-hand glass panel, "The dam"):
- Open spillway: a 3.5 s siren, then the gates swing up over ~9 s, and white water streams down the steps with spray and mist. Press again to shut them.
- Turbines on/off: the units spin up or down, power rises or falls, the tailrace boils or goes still, and the powerhouse windows glow while running.
- Salmon run: salmon gather below the dam, try leaping at the falls, then climb the ladder pool by pool (a leap per pool, waiting their turn) and swim out into the lake. A counter tallies fish through. Runs also arrive on their own every few minutes.
- Flood: a storm builds, blows and eases (rain, darkening, lightning hitting pylons, ridges or the lake). A big inflow surge comes down the valley: the keeper pre-releases, the lake still rises over the crest, and a white overflow sheet pours across the whole dam face. The water turns muddy brown and clears slowly afterwards.
- Tap a gate, the powerhouse or the ladder to trigger the same actions. Tap the patrol boat for its horn. Space sounds the siren.
- Tallies: Power (MW), Head (m), Salmon. Status lines: Spillway, Powerhouse, Reservoir (Rising/Falling/Steady/Flood coming in/Over the crest, with level relative to the crest in metres).
- Drag on water makes waves, drag the block's side tips it, drag empty space or right-drag orbits, wheel or pinch zooms.
- Flavour swatches (Lime, Curaçao, Blackcurrant) tint the jelly and water. Sliders for Firmness, Wave damping and Wind. Reset, Pause, Sound on/off and View buttons.
LIFE: rainbow trout in the river and lake, salmon, mallards (drakes and hens) paddling and taking off, herons wading and stalking, ospreys circling and plunge-diving for fish, people walking the crest (who pause at the siren), the powerhouse yard, the visitor centre and the footbridge, and a fisherman on the bank. Animals startle at the siren, lightning and splashes.
SOUND (synthesised with WebAudio, events only, no constant ambience): motor siren, gate-hoist clunk and drone, the spillway's rush as the gates lift, turbine spin-up and spin-down whine, a rumble of overtopping, salmon leaps, a chime for each fish counted, osprey splashes, the boat horn, thunder, and wind and rain only while a storm blows.
RENDERING: WebGPU with MSAA, a sun shadow map, caustics on the riverbed, refraction and absorption through the water and the jelly, Fresnel reflections, translucent premultiplied passes for spray and mist puffs, white-water sheets, ladder pools and rain, and a muddy-water tint during floods.
UI and layout: editorial look with an italic serif masthead ("Material Studies" eyebrow, "Dam Jelly." title, a one-line description) and a "How to play" footer at bottom left. On mobile the controls panel becomes a bottom sheet. If WebGPU is unavailable, show a clear fallback card. Respect prefers-reduced-motion. No page scroll.
QUALITY: keep the sim around 2 ms/frame, no NaNs over long soaks, everything stays inside the block, the boat always afloat. Verify with headless Playwright screenshots (SwiftShader WebGPU) and an end-to-end test that drives every button, tap target, slider and the mobile sheet, and checks for zero console errors.