섬 젤리: Argon 대 Opus

PROMPT 

# Task: Build "Island Jelly", an interactive 3D diorama with a plush surfing rooster

Build a single self-contained `index.html` (no build step) using **three.js r165** via an importmap from jsDelivr (`three` + `three/addons/`). Use OrbitControls, RoomEnvironment and BufferGeometryUtils (`mergeGeometries`). It must run from any static server (e.g. `npx http-server`). It must look like a premium "material study": soft, tactile, toy-like, with cohesive materials. No cheap low-poly look.

---

## 1. Page & UI

- Background is warm paper `#E8E5DC`. Fonts are **Instrument Serif** italic for headings and **Inter** for UI, from Google Fonts.
- Top-left title block: tiny eyebrow "MATERIAL STUDIES", a big italic "Island Jelly.", a short rule, then a one-line subtitle: "A sandbar, three palms and a sea that wobbles back. Joe the rooster rides whatever you stir up."
- Top-right: a small pill showing the WebGL version and three.js revision.
- Right panel (frosted, 200px wide) contains:
  - **The sea:** buttons "Drop a pebble" and "Drop a coconut", plus counters for Afloat / Sunk / Ashore.
  - **Flavour:** three swatches that recolor the water: Lagoon `#35C8CC`, Raspberry `#F0457E`, Lime `#B4E03A`. Each has a matching deep and highlight color.
  - **Sliders:** Firmness (wave speed and stiffness), Wave damping, and Tide (raises or lowers the sea level and recomputes which cells are land).
  - **Buttons:** Reset, Pause, Reset view.
- Bottom-left "How to play" text. Hide the secondary text on mobile (<700px) and move the panel to the bottom-right.

## 2. Scene & rendering

- Renderer: antialias, alpha, pixel ratio capped at 2, PCFSoft shadows (2048 map), NeutralToneMapping.
- Environment: PMREM from RoomEnvironment at intensity ~0.55.
- Camera: perspective with a narrow 28° FOV, near-isometric view from (15.5, 14.5, 19).
- OrbitControls: damped, no pan, distance 12–50, max polar ~1.42. Left/right drag orbits, scroll zooms.
- Lights: a warm hemisphere light, plus a warm directional sun from the upper left that casts soft shadows.
- A large ShadowMaterial ground plane under the block.

## 3. The diorama block (10×10 units, everything in a `diorama` group that can tilt)

- **Sediment sides:** four planes whose UVs wrap around the block, textured with a procedural canvas showing strata. Layers from top to bottom: cream sand, a thin pink band, ochre, then dark brown. The band edges are wavy. Add soft grain and pale mineral inclusions in the lower bands. Close the block with a dark underside.
- **Terrain:** a 160×160 heightfield shared by seabed and island. The island is an irregular ellipse (perturbed with sin terms on its angle) that rises gently above sea level and falls off exponentially into the seabed. Add subtle ripple noise. Use sand vertex colors with slight variation.
- **Terrain shader** (onBeforeCompile):
  - Wet darkening near the waterline and a thin dark line exactly at the waterline.
  - Underwater tint from the water color to the deep color, by depth.
  - Animated procedural **caustics**, modulated by a texture built from the water heightfield's Laplacian, so caustics focus under wave crests and fade with depth.
- **Palms:** 3 curved trunks (CatmullRom tube) with ring-banded vertex colors and taper. Each crown has 8–9 droopy procedural fronds: a rib plus triangular leaflets in several greens. Add 3 coconuts in each crown. The crowns sway gently.
- **Pebbles:** a few squashed icosahedron pebbles in pastel greys and pinks around the island rim.

## 4. Water (the "jelly sea")

- A 100×100 heightfield wave simulation with a fixed step of 1/120 s:
  - Laplacian wave equation, plus a restoring spring and damping, all controlled by the sliders.
  - Land cells are masked out. Clamp the height range.
- **Tilt:** the block can be tilted by dragging its sides. Tilt is a damped spring. The equilibrium surface of the water tilts with it, so water sloshes from the walls. Local gravity is rotated into diorama space.
- **Surface mesh:** a 100×100 grid updated every frame with normals. Use MeshPhysicalMaterial with transmission 1, IOR 1.33, attenuation, and a tiling procedural ripple normal map that scrolls slowly.
- **Skirt:** a transmissive wall around the perimeter that follows the water edge height, plus thin bright highlight lines along the exposed water edges.
- **Interaction:**
  - Dragging on the water stirs waves, with strength based on drag speed.
  - Pebbles and coconuts can be grabbed and thrown.
  - Random drips make small ripples.
- **Objects:**
  - Pebbles sink. Coconuts float (they are plush spheres).
  - Both splash on entry, get buoyancy and drag, and are pushed by the wave gradient.
  - They collide with the terrain and walls, roll visually, and keep a state (air / afloat / sunk / ashore) that drives the counters.

## 5. Plush fur shader (used by the character and the coconuts)

Use shell fur: the base mesh plus N shells (10–12), each a copy of the mesh pushed out along its normal by `shell * len`. Implement it in `onBeforeCompile` on a MeshPhysicalMaterial (roughness ~0.92, sheen ~0.9, sheen color = base color lerped toward cream). Cache one material per (color, shell, len, rep, grav).

- **Vertex:** `transformed = position + normal*shell*len; transformed.y -= grav*shell²*len;`. This makes longer fur droop.
- **Fragment:**
  - Split the UVs into cells: `uv * vec2(rep, rep*0.5)`.
  - Each cell gets one **round strand** with a random height (0.4–1.0) and a jittered center.
  - Taper the radius toward the tip, and discard pixels outside the strand or above its height.
  - Shade darker at the roots and brighter at the tips: `mix(0.58, 1.07, pow(shell, 0.7))`. Add per-strand brightness variation.
- Only the base mesh casts shadows.
- Use a high strand density (rep ~200–250 on the main parts). Coarse strands look like needles up close.

## 6. The character: "Joe", a plush tribute to Chicken Joe from *Surf's Up*

**The goal is personality, not "a rooster".** He must be instantly recognisable as that laid-back, sleepy surfer chicken: lanky, slouched, half-asleep eyes, a lazy open-beak grin, a floppy red mohawk comb, a long scraggly neck, a pot belly and skinny legs. Render him as a high-quality plush toy (fur shader everywhere, felt for beak, legs and lids). Do not use flat feather cards.

Hierarchy: `surfer` (scale 1.35) → `boardTilt` → surfboard + `rooster` (scale ~0.56, rotated ~0.5 rad on the board) → `body` group (sways). All units below are rooster-local, with feet at y=0 and the character facing +z.

Palette:

| Name | Hex |
|---|---|
| Orange | `#EE9532` |
| Gold | `#F5B140` |
| Belly yellow | `#F8C653` |
| Rust | `#D9692A` |
| Comb red | `#DF2A2C` |
| Wing tips | `#26322A` |
| Beak | `#F7C433` |
| Legs | `#F4B43A` |

- **Surfboard:** a flattened sphere (0.34 × 0.045 × 0.82) in clearcoated cream, with a coral center stripe and a fin.
- **Legs:**
  - Thin felt tubes along a curve: foot (±0.16, 0.03) → bent knee (±0.155, 0.25, +0.08 forward) → hip (±0.1, 0.5).
  - Knobbly knee spheres.
  - Big feet: three long front toes splayed ±0.5 rad plus one back toe, as capsules.
  - A wide, relaxed stance.
- **Body (the slouch):**
  - Fuzzy rust "shorts" on the thighs.
  - An orange body ellipsoid, plus a yellow **pot belly pushed forward**, plus an upper chest/back leaning **backward**.
- **Neck:** a long fur tube along a curve from (0, 0.9, −0.05) to (0, 1.33, 0.13), curving forward. Use long drooping fur (len 0.06, grav 1.4). Wrap it in a **scraggly mane**:
  - About 6 rings of thin fuzzy cones pointing down and out, longer toward the bottom, plus a shaggy bib onto the chest.
  - Merge all the cones into two geometries (gold and orange) and plush each once, which saves draw calls.
  - Bury the cone roots inside the neck so no seams show.
- **Head:**
  - A fur sphere r=0.15 at (0, 1.38, 0.14).
  - A small tuft of fuzzy spikes at the back of the head.
- **Comb:**
  - A red base blade along the top of the head.
  - 5 fat rounded capsule lobes fanned from the forehead to the back (angles ~0.85 to −0.85 rad), with the middle lobes tallest and a slight alternating sideways flop.
  - Short velvet fur.
- **Eyes (the most important part):**
  - Big glossy white bulging eyes (r 0.075), close together and set high on the face. They must sit **outside** the head surface (eye center ≈ (±0.07, 0.085, 0.13), slightly turned outward). If they are buried, the lower white disappears.
  - Heavy **upper lids:** felt spherical caps covering ~56% of the sphere, tilted so the edge sits just at or below the eye's center. One lid is slightly droopier than the other. Add a thin darker rim torus on the lid edge.
  - A small **lower lid** cap pushed up from below, like cheeks from smiling.
  - Small dark pupils with a tiny highlight, peeking in the visible white band between the lids.
  - The resulting look is sleepy, stoned and content.
- **Beak (the grin):**
  - Upper beak: a long, wide, slightly flattened cone that curves gently downward at the tip (deform a ConeGeometry: widen x, flatten, bend by `hook * t^2.4`, and clamp t ≥ 0 to avoid NaN).
  - Lower beak: shorter, hinged open ~0.42 rad.
  - Dark red mouth interior and a pink tongue.
  - Orange-red cheek puffs at the corners of the mouth.
  - Two red wattles hanging under the beak.
- **Wings, held like loose arms:**
  - Shoulder pivots with rotation order ZYX.
  - A flattened orange fur forearm, a rust mid-section, and 5 dark fuzzy "finger" feathers fanned at the tip.
- **Tail:** a short, dark, scruffy spiky tuft angled up and back, on an orange fluffy base.

## 7. Animation & personality

- Ease everything. Nothing snaps and **nothing flaps**.
  - Smoothed wave energy: `enS += (en − enS) * min(1, dt*2.5)`.
  - Calm weight: `calm` eases to 1 when `enS < 0.3`, over ~1 s.
- **The groove** (beat = t·2.4):
  - Hips sway on the half-beat.
  - The head nods slightly behind the beat. The nod is stronger when calm.
  - The head is always cocked ~0.14 rad to the side and slowly looks around.
  - Comb lobes and wattles flop with a phase lag after the head.
  - The jaw breathes a little. The tail sways.
- **Wings:**
  - On rough water: both arms held out, slightly down, for balance. They lift a bit with energy and counter the board lean. They stay steady, with no flapping.
  - On calm water: the right wing blends into a lazy forward **shaka**, with a slow wrist-twist wiggle around the arm axis.
- **Blink:** slow and sleepy, every ~4.2 s. The lids close over ~0.5 s with a sine curve.

## 8. Surfing physics (he must surf, not fly)

- **Horizontal:**
  - He loosely circles the island at a target radius and is pushed by the water gradient.
  - Speed is capped. He is repelled from the island and bounces softly off the walls.
  - He leaves a wake (small negative disturbances behind him).
- **Vertical:**
  - Ride the surface **averaged over the board footprint**: center ×2, ±0.55 along the heading, ±0.22 across, divided by 6. This keeps single splash spikes from launching him.
  - Track the surface's vertical speed `svy`.
  - Below the surface: a firm spring, with velocity eased toward `svy`.
  - Slightly above it and not airborne: glue him to a dropping face.
  - Cap upward velocity at 2.2. In the air, use gravity ×1.8.
  - Hard clamps: never more than 0.04 below the surface and never more than **0.16 above it**. Airborne means more than 0.08 above.
  - A small splash on hard landings.
- **Board orientation:** follows the smoothed surface normal and yaws toward the direction of travel. Lean comes from lateral acceleration.
- **Target:** under extremely aggressive stirring, the median height above the surface stays ~0.01 and the maximum ≤ 0.16.

## 9. Verification

- Inspect the character in close-ups from front 3/4 (like the reference) and from the side.
  - Check that the eyes show white under the lids and the grin reads clearly.
  - Check for no visible cone-base seams on the mane and no NaN geometry warnings.
- Stress-test the waves and log the gap between the board and the averaged surface.
- Check the console for errors and keep draw calls reasonable (merge spike geometries).