The Prompt I Used to Build a Punch-Through Ice Wall in Three.js (Voronoi Shatter + Refracted Hero Reveal)

Build a WebGL landing page with **three.js**. Real 3D — meshes, shaders, render targets, post-processing. Do **not** implement this with a 2D canvas, CSS filters, or an SVG fallback. ## Stack - `three` (latest), ES modules, `import * as THREE from 'three'` - From `three/addons/`: `EffectComposer`, `RenderPass`, `UnrealBloomPass`, `ShaderPass`, `OutputPass` - `troika-three-text` for the hero type (so the glass can actually refract it) - Vite if the environment supports it; otherwise a single `index.html` with a `<script type="importmap">` pointing at `https://unpkg.com/three@latest/build/three.module.js` and `https://unpkg.com/three@latest/examples/jsm/` - **No physics library.** No `cannon-es`, no `rapier`, no `ammo`. The motion is 40 lines of hand-rolled Euler integration and a physics engine will only fight the art direction. - **No CSG library.** The fracture is 2D Voronoi + triangulation, described below. - No images, no textures loaded from disk. Everything procedural. Files: `index.html`, `main.js`, `ice.glsl.js` (exported vertex/fragment strings), `fracture.js`, `style.css`. Every tunable number lives in one `CONFIG` object at the top of `main.js`. ## The concept The visitor lands facing a full-screen sheet of frosted mint-green ice. Behind it, blurred and refracted, they can *almost* read a name. They click to punch the ice. Each punch opens a hole with straight angular cracks radiating out. After five punches the entire wall shatters into real Voronoi shards that tumble **toward the camera and past it**, out of frame — and the hero resolves into focus behind them. The whole point is the fourth wall. The glass is between the viewer and the page, and they break it with their own hand. Every choice below serves that. ## Architecture — two-pass render (this is the important part) Naive approach: transparent WebGL canvas over DOM content. **Don't.** WebGL can't refract DOM, so you'd end up faking it with `backdrop-filter` and the whole thing falls flat. Instead: sceneWorld → renderTarget (half resolution is fine) ├─ background plane, procedural aurora shader ├─ hero text (troika-three-text) └─ ambient + one soft point light sceneIce → screen (via EffectComposer) ├─ fullscreen quad sampling renderTarget (the world, undistorted) └─ the ice: one PlaneGeometry, then N shard meshes after the break → their fragment shader samples renderTarget So: render `sceneWorld` into `rtWorld` each frame. Then render `sceneIce`, whose ice material reads `rtWorld` as `uScene` and offsets its lookup by the ice surface normal. That gives you genuine refraction, chromatic aberration, and blur-behind-glass for free. **Keep sampling the live render target after the shatter.** As the shards tumble away they'll refract the revealed hero text in real time. That is the money shot of the whole page — do not freeze a snapshot to "optimise" it. Camera: `PerspectiveCamera(50, aspect, 0.1, 100)` at `z = 5`. Size the ice plane to exactly fill the frustum at `z = 0` (compute it: `h = 2 * tan(fov/2) * 5`, `w = h * aspect`) and recompute on resize. Perspective, not orthographic — the shards need real depth to fly past the lens. ## The ice material `ShaderMaterial`, `transparent: true`, `depthWrite: false`. Uniforms: `uScene` (the world RT), `uDamage` (damage texture, below), `uTime`, `uResolution`, `uMouse`, `uOpacity`, `uTintA` `#dff3ec`, `uTintB` `#7fd6ac`, `uTintC` `#5fc0a2`, `uRefract` 0.045, `uAberration` 0.006, `uFrostScale` 3.2. The **damage texture** is the one place a 2D canvas is legitimate: keep an offscreen `canvas` at viewport resolution wrapped in a `THREE.CanvasTexture`, and paint damage into it on each punch. Channel layout: - **R** = hole mask (white where the ice is gone → shader alpha goes to 0) - **G** = crack intensity (drives a specular ridge and a normal kink) - **B** = bruise / micro-fracture haze around impacts (whitens the frost, no hole yet) Set `texture.needsUpdate = true` only on the frames a punch happens. Fragment shader — implement essentially this: varying vec2 vUv; uniform sampler2D uScene, uDamage; uniform float uTime, uRefract, uAberration, uFrostScale, uOpacity; uniform vec3 uTintA, uTintB, uTintC; // hash / value noise / fbm — standard 3-octave fbm, write it inline float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } float noise(vec2 p){ /* smoothstep-interpolated value noise */ } float fbm(vec2 p){ float a=.5, s=0.; for(int i=0;i<4;i++){ s+=a*noise(p); p*=2.03; a*=.5; } return s; } void main() { vec3 dmg = texture2D(uDamage, vUv).rgb; // ---- frost surface normal ---- // two fbm samples at slightly offset uvs give a cheap gradient float e = 1.5 / 1000.0; float f = fbm(vUv * uFrostScale * 40.0); float fx = fbm((vUv + vec2(e,0.)) * uFrostScale * 40.0); float fy = fbm((vUv + vec2(0.,e)) * uFrostScale * 40.0); vec2 grad = vec2(fx - f, fy - f) * 40.0; // cracks kink the normal hard — that's what makes them catch light like glass grad += (dmg.g * 2.2) * normalize(grad + 0.001); // ---- refraction with chromatic aberration ---- vec2 off = grad * uRefract; float r = texture2D(uScene, vUv + off * (1.0 + uAberration)).r; float g = texture2D(uScene, vUv + off).g; float b = texture2D(uScene, vUv + off * (1.0 - uAberration)).b; vec3 behind = vec3(r, g, b); // blur-behind-glass: mix in 4 wide taps, weighted by how frosted this pixel is vec3 diffuse = vec3(0.0); for (int i = 0; i < 4; i++) { float a = float(i) * 1.5707 + uTime * 0.02; diffuse += texture2D(uScene, vUv + off + vec2(cos(a), sin(a)) * 0.012).rgb; } behind = mix(behind, diffuse * 0.25, 0.75); // ---- the ice itself ---- float marble = fbm(vUv * uFrostScale * 1.6 + uTime * 0.01); vec3 ice = mix(uTintC, uTintB, marble); ice = mix(ice, uTintA, pow(f, 1.6)); ice = mix(ice, vec3(1.0), dmg.b * 0.5); // bruised = whiter vec3 col = mix(behind, ice, 0.78); // 0.78 = how opaque the frost reads // long thin skate scratches float scr = smoothstep(0.975, 1.0, fbm(vUv * vec2(2.0, 90.0) + 5.0)); col += scr * 0.16; // crack specular: bright core, mint bloom shoulder col += dmg.g * vec3(0.85, 1.0, 0.94) * 1.6; // rim light around holes so broken edges catch the light float rim = smoothstep(0.35, 0.5, dmg.r) - smoothstep(0.5, 0.72, dmg.r); col += rim * vec3(0.8, 1.0, 0.92) * 1.4; // pane vignette col += pow(length(vUv - 0.5) * 1.4, 3.0) * 0.22; float alpha = (1.0 - smoothstep(0.42, 0.58, dmg.r)) * uOpacity; gl_FragColor = vec4(col, alpha); } Vertex shader: pass `vUv`, and additionally displace `position.z` by `-dmg.b * 0.06` so bruised regions dish inward slightly. Sample the damage texture in the vertex shader for that (needs enough plane subdivision — use `PlaneGeometry(w, h, 120, 120)`). ## Punching Raycast from the pointer onto the ice plane. On `pointerup`: 1. **Paint the damage texture** at the hit UV: - Hole: an irregular 16-vertex blob, radius `CONFIG.holeRadius * (0.75 + hits*0.16)`, vertex radius jitter only `0.80–1.14` of nominal. Fill into the **R** channel with a 3px blur. Deep notches make it look like a starfish, not broken glass. - Bruise: a soft radial gradient ~2.2× the hole radius into **B**. - Cracks into **G** — read the next section, it's the detail everyone gets wrong. 2. **Displace the mesh**: push the plane vertices near the impact backward by `-0.12 * falloff` for one frame, then spring them back over ~180ms. The wall should visibly *take* the hit. 3. **Spawn debris**: ~18 small shard meshes (random 3–6 gon `ShapeGeometry`, ~0.02–0.09 world units) flying outward from the impact, plus ~30 additive point sprites as sparks. 4. **Shake the camera**: offset `camera.position` by random ±`0.02 * strength` and roll `camera.rotation.z` by ±`0.004`, decaying over 400ms. Shake the *camera*, never a CSS transform on the canvas. 5. **Flash + sound**: bump a `uFlash` uniform in the final pass to 0.4 and decay it. Synthesise the sound with WebAudio, no files: a 0.4s white-noise buffer with `(1-t)^5` decay through a highpass sweeping 900→3500 Hz as damage accumulates, layered with a sine thud 150 Hz → 42 Hz. Rising pitch each hit. Mute toggle in the corner. 6. Escalate the centred hint text: `PUNCH THE ICE` → `AGAIN` → `HARDER` → `ALMOST THROUGH`. Tick an `INTEGRITY 100%` readout down toward zero. ## Cracks — get this right or the illusion dies Glass cracks are **straight and angular**. Organic wandering lines read as lightning, roots, or veins, and instantly kill it. - ~13 radial arms from the impact point. - Each arm is built from long rigid segments of **26–54 px**, with only **±0.14 rad** of direction drift per segment. Long and stiff. - With ~22% probability per segment, a splinter forks off at a **sharp 0.45–1.0 rad** angle and dies within half the parent arm's remaining length. Thinner stroke. - Then **3 concentric rings** joining the arms — this is the actual signature of impacted glass. 20–28 segments each, radius jitter ±7%. **They must stay inside the radial reach** (`ring_radius ≈ arm_length * (0.26 + i * 0.21)`). Rings drawn larger than the arms look like giant floating hexagons and destroy the effect. - Stroke into the **G** channel with a small blur so the shader gets a soft ridge, not aliased hairlines. ## The collapse — Voronoi fracture Trigger after `CONFIG.hitsToBreak` (5) punches. In `fracture.js`, implement Voronoi by **half-plane clipping**, not a library: // for each seed i: start with the full plane rect as a polygon, // then clip it by the perpendicular bisector against every other seed j function clipHalfPlane(poly, normal, midpoint) { /* Sutherland–Hodgman */ } ~90 seeds, biased toward the final impact point (sample `r = pow(random(), 0.6)` around it) so the break originates where they hit. 90 seeds × 89 clips is instant — do it once, on the click. Turn each cell polygon into a mesh: - Fan-triangulate the convex cell from its centroid. - **UVs must be the original plane UVs** (`uv = (localXY / planeSize) + 0.5`), so every shard carries the exact patch of wall it came from and keeps refracting correctly. Getting this wrong is the #1 way this looks cheap. - Recentre each shard's geometry on its centroid and put the centroid in the mesh's `position`, so it rotates about itself. - Same ice `ShaderMaterial`, cloned, with a per-shard `uOpacity`. - Optional and worth it: `ExtrudeGeometry` with `depth: 0.012` and a tiny bevel so shard edges catch the light as they tumble. Then hide the intact plane and animate every shard: direction = normalize(shardCentroid - impactPoint) boost = clamp(0.9 / distance, 0.5, 3.2) // near the fist = launched hardest velocity.xy = direction * rand(0.6, 2.2) * boost velocity.z = rand(0.9, 3.4) * boost // POSITIVE — toward the camera angularVel = random on all three axes, ±3 rad/s gravity = -3.2 units/s² on y Shards get **bigger as they approach the lens** — that's the perspective camera doing the work, and it's what makes it feel like the wall broke *at you* rather than away from you. Let them fly past `camera.z` and out of frame; cull each shard once `z > 6` or its opacity hits 0. Fade `uOpacity` over ~1.1s. Simultaneously: hard camera shake, bloom intensity spikes to 2.2 and eases back to 0.6, and a low WebAudio rumble (1.6s brown-noise buffer through a 320 Hz lowpass). ## Hero reveal While the wall is intact, the hero already exists in `sceneWorld` as `troika-three-text` — that is *why* the glass has something to refract, and why the visitor can half-read a name and wants to break through. Keep it slightly out of focus by rendering `rtWorld` at 0.5× and letting the shader's blur taps do the rest. On collapse: 1. Ease `rtWorld` scale to 1.0 and the shader's diffuse mix to 0 — the world sharpens. 2. Animate the text material opacity and a per-glyph `translateY` in, staggered ~35 ms apart. 3. Ease the background plane's scale 1.06 → 1.0, a slow settling exhale. 4. **Then cross-fade the troika text out and a real DOM hero in**, absolutely positioned over the canvas. WebGL text is not selectable, not readable by a screen reader, and not crawlable. The DOM version is the one that ships — the WebGL one exists only to be refracted. Do this; don't skip it because it's two implementations of the same words. 5. Show a `REFREEZE` button that resets damage texture, shard list, hit count and material uniforms so it can be replayed. ### Hero content eyebrow PORTFOLIO // 2026 h1 Avi Vashishta light weight, clamp(38px, 10.5vw, 150px), per-letter stagger rule thin mint gradient line, scales in from centre role SOFTWARE DEVELOPMENT ENGINEER uppercase, letter-spacing .5em, mint tagline one muted line buttons "View work" / "Get in touch" as pill outlines Type: `Space Grotesk` for display, `JetBrains Mono` for the HUD. Palette: void `#04110d`, deep `#0a2a22`, mint accent `#7cf0b4`, ice `#dff3ec`. ## Post-processing `EffectComposer`: `RenderPass` → `UnrealBloomPass(strength 0.6, radius 0.8, threshold 0.72)` → custom `ShaderPass` (barrel distortion 0.015, RGB shift 0.0012, film grain 0.035, vignette, plus the `uFlash` white additive) → `OutputPass`. Grain and a hair of barrel distortion are what make it read as *looking through something* rather than at a flat render. Don't drop them. ## Details that matter - **No native cursor over the canvas.** Draw a reticle: a thin ring mesh (or an additive sprite) tracking the pointer at `z = 0.1`, radius easing down ~35% on `pointerdown` so it reads as a fist closing. Add four small tick marks that slowly rotate. - `renderer.setPixelRatio(Math.min(devicePixelRatio, 2))`. Half-res render target. - Resize: rebuild the damage canvas, re-stamp stored impacts (keep `{uv, strength}` for each), recompute plane size from the frustum, resize the RT and the composer. - Touch: `touchend` punches. On mobile drop to 45 shards, bloom off, no barrel pass. - `prefers-reduced-motion`: no camera shake, no pulsing hint, one click breaks it. - Target 60fps on an M1 MacBook Air and ≥30 on a 3-year-old Android. - The hint, integrity meter and mute toggle live in a DOM `#hud` overlay, not in WebGL. ## Do not - Do not use `MeshPhysicalMaterial` with `transmission` for the wall. It's the obvious reach and it can't do the crack normals, the hole mask, or the frost marbling. (It *is* fine for the small debris shards if you want them cheap.) - Do not add a physics engine, a CSG library, or GSAP-driven DOM animation of the shards. - Do not let the shards fly *away* from the camera. The direction is the entire idea. - Do not make the cracks curve. - Do not ship WebGL-only text. ## Acceptance checklist Before you tell me it's done, verify each of these yourself: 1. On load: a frosted mint wall fills the viewport, and a name is faintly legible behind it. 2. Moving the pointer shows a custom reticle; the OS cursor is hidden. 3. First click: a hole appears with **straight** radial cracks and visible concentric rings inside the crack reach. Camera shakes. A crack sound plays. 4. Through the hole, the hero text is visibly **sharper** than through the ice — proving the refraction path is wired to the render target and not faked. 5. Clicks 2–4 escalate: bigger holes, longer cracks, higher-pitched crack sound, integrity dropping. 6. Click 5: the full wall becomes ~90 distinct polygonal shards. They tumble, **grow as they approach**, and leave the frame. Each shard visibly refracts what's behind it while flying. 7. Hero animates in sharp, letters staggered, and the final text is selectable with the mouse. 8. `REFREEZE` fully restores the intact wall and it's replayable. 9. Resizing the window doesn't stretch, blur, or misalign the ice, and existing damage survives. 10. No console errors. No WebGL warnings about render target feedback loops.