Blue whale jelly soft-body study

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.

Source: the creator's reply under the post. Kept in its original language, unedited.

Tools the creator mentioned

More 3d worlds

• 5:06

  Elaborate overnight scene from shared prompt

  20.2M views

• 0:17

  AI-generated running cow animation

  1.4M views

• 0:53

  Video recreated as a GLSL shader

  1.1M views

• 0:22

  4D gaussian splat reconstruction from video

  911.5K views

• 3:47

  Procedural ocean island simulation

  900K views

• 0:40

  Tentacle egg-laying rig

  804.1K views

Related articles

• A Practical Guide to Claude Code Skills: Your Secret Weapon for Developer Productivity

  A deep dive into Claude Code's Skills system, covering Design Skills evaluations, SEO audits, code quality guardrails, and other hands-on techniques.

• AI Productivity Tools Guide | 2025 Updated Edition

  A hands-on tested roundup of AI tools covering chat, search, coding, image generation, and audio/video — vetted across the web.

• Anthropic Claude Certified Architect Complete Roadmap: 8 Free Courses + $99 Exam

  Anthropic launched the Claude Certified Architect certification on March 12, 2026, with 13 self-paced courses — all completely free, no registration required, no paywalls. The exam itself costs just $99. This post walks through a 12-week roadmap covering the 8 key courses in Weeks 1–9, with direct links to each.

• How to Subscribe to Claude at Half Price with Bitget Wallet

  A step-by-step guide to subscribing to Claude at half price using Bitget Wallet — just align three things: IP, address, and card.