蓝鲸果冻软体交互研究

Build "Blue Whale Jelly · Material Studies No. 058" — a single-page interactive soft-body study in three.js (r170, WebGL2, importmap from jsDelivr), matching the quality, layout and juicy colours of my earlier jelly whale studies (No. 043 humpback, No. 056 sperm whale).

Subject: a blue whale cast in two layers of jelly, resting on its belly on a pale studio sweep (#E2DFDA). Make it big and full-bodied — plumper than life, a well-fed jelly — so it fills the stage.

Shape (signed distance field):
- A superellipse section swept along the spine: round along the body, a little flatter and squarer at the head. Author it slender, then scale its girth (section height, width and the mouth line) by ~1.38 while keeping the length.
- A broad, flat, U-shaped head seen from above, with a long mouth line curving up toward a small dark eye.
- A splash-guard ridge in front of twin blowholes.
- Short, narrow, pointed flippers; a tiny dorsal fin far back; broad triangular flukes with a small notch. Scale all of these with the girth.
- Shader markings from rest-space coordinates: pale mottling on the back, throat pleats from chin to navel, a dark mouth-line groove, dark blowhole slits.

Inside:
- A milky belly layer that thins to a milky floor under the throat.
- The throat itself is a pouch of clear jelly.
- Rows of dark licorice baleen plates hang inside the upper jaw, visible through the head.
- About 28 trapped bubbles, kept out of the throat and stomach.

Physics:
- CPU XPBD tetrahedral soft body: snapped hex lattice, 5 tets per cell, h≈0.12, 60 Hz with 10 substeps, per-region compliance (fins firmest, then skin, milk, clear jelly).
- Barycentric skinning of the render surfaces; grab, drag and twist (wheel or second finger); orbit and zoom.

The gulp:
- Give each node of the throat a displacement at full inflation: down toward the table and out to the sides.
- On a gulp, blow up the rest shapes AND rest volumes of the pouch tets together by an amount 0…1. The throat then really fills (whale volume ≈ +35%), presses on the table and lifts the head, and the pleats spread apart.
- Add a lunge impulse forward and up. Fill fast, hold, then let the pouch slowly empty, as if the water were strained out through the baleen.
- 96 pink krill beads, each with a rest-space path: in at the lips → swirling in the full pouch → back to a stomach behind the flippers. Embed every point of every path in the tets so the krill rides the swelling, wobbling jelly.
- 32 krill per gulp; the oldest are digested when the pool cycles.

Spout:
- 72 rigid jelly drops forming a tall, slim twin column from the two blowholes.
- The crown of the head dips as the whale exhales.
- Drops bounce, roll and can be picked up and tossed.

Lights out:
- The room and page fade to near-black and the key light dims.
- The swallowed krill glows: a point light at the swarm's centre, filtered blue by the jelly it crosses, pooling on the table.
- Prodding the jelly makes the krill flicker.

Renderer (custom ShaderMaterials, one THREE.Scene per pass):
- Key-light shadow map (PCSS-lite) tinted by the jelly; top-down height map for contact AO.
- Scene pass (floor + all inner props) into a 4× MSAA half-float target; back-face depth for thickness.
- Jelly front faces with refraction, Beer–Lambert absorption, scattering, back-lit thin fins, Fresnel studio reflections and GGX highlights.
- Khronos PBR Neutral tone mapping, with the backdrop inverse-tone-mapped to land exactly on the page colour.

Palettes: Ocean (#3a8ef0), Arctic (#5fcaf2), Twilight (#6a6cf0); milky #f3efe6; coral-pink krill.

Camera:
- Fit the body closely and use a lens shift to keep the whale between the masthead and the control panel.
- Desktop fit Rh 1.3 / Rv 0.72; phone Rh 1.74 / Rv 0.9; elevation 0.36; target (0.16, 0.36, 0).
- Double-click returns to this view.

UI (editorial, serif italic masthead, mono readouts):
- Colour swatches; Firmness and Internal damping sliders.
- Gulp, Blow, Reset, ¼ speed, Show mesh, Pause, Lights out; keys G/B/R/L/space.
- Live readouts: Mass (g), Volume (% of rest, climbs during a gulp), Length (cm), Krill inside.
- An "Inside the experiment" notes panel; status pill "THREE.JS · LIVE"; WebGL2 fallback.
- Stacked layout on phones with no horizontal scroll.
- English UI, original content only.

出处：作者在原帖下的回复。提示词保留原文语言，未做改写。

作者提到的工具

更多3D 场景案例

• 5:06

  用共享提示词一夜生成的精致场景

  2021.1万 播放

• 0:17

  AI生成的奔跑奶牛动画

  138.2万 播放

• 0:53

  将视频重建为GLSL着色器

  111.4万 播放

• 0:22

  视频转4D高斯点云重建

  91.1万 播放

• 3:47

  程序化生成的海岛模拟场景

  90万 播放

• 0:40

  触手产卵装置绑定

  80.4万 播放