# Master Prompt: Photorealistic 3D Gold Medal Ram-Air Parach...

Prompt

# Master Prompt: Photorealistic 3D Gold Medal Ram-Air Parachute Simulation (Three.js Edition) （Not use WEBGL anymore below) **Role:** Senior 3D WebGL / Three.js Creative Developer & Procedural Geometry Engineer. ## 1. Core Mission Build a single-file, self-contained HTML app using **Three.js (ES Modules via Importmap, r160)** as the sole rendering engine — replacing any native Canvas2D software rasterizer — to deliver a photorealistic, 360° interactive "Gold Medal Ram-Air Parachute Descent Simulation" at a locked 60 FPS. It must fuse: - A Claymorphism/toy-vinyl aesthetic for the canopy and medal (rich volume, bevels, saturated colors) rendered via real PBR metallic/roughness materials + image-based lighting. - A realistic atmosphere (sky gradient, solar bloom, parallax mountains, fog layer, procedural terrain, landing bullseye). - Full flight-dynamics simulation with staged camera choreography, HUD telemetry, and interactive orbit controls. ## 2. Rendering Pipeline & PBR Environment 1. **Renderer**: `THREE.WebGLRenderer({antialias:true})`; DPR=`Math.min(devicePixelRatio,2)`; `THREE.ACESFilmicToneMapping`, exposure 1.05; `outputColorSpace=THREE.SRGBColorSpace`. 2. **IBL**: Build an env map via `RoomEnvironment` + `THREE.PMREMGenerator` → `scene.environment`, for smooth metallic gold reflections. 3. **Lighting**: `THREE.HemisphereLight(0xffffff,0x6688aa,0.7)` + warm `THREE.DirectionalLight` (intensity 1.6, pos `[6,12,8]`) for crisp directional contrast and contact highlights. 4. **Sky**: Dynamic Rayleigh-style gradient (inverted sphere/shader or CSS fallback `linear-gradient(180deg,#123a6b 0%,#2f6fbf 35%,#5b9bd5 60%,#b7d5ee 100%)`), deep blue at 3000m → warm haze at 0m, plus a sun sprite with radial corona bloom. 5. **Controls**: `OrbitControls`, `enableDamping:true`, zoom 8–50, drag-orbit, wheel-zoom, right-click pan, double-click reset — a free-inspection mode layered alongside the scripted follow-cam. ## 3. Core Asset Ground Truth ### 3.1 Canopy (7-Cell Ram-Air Wing) Strict left-to-right stripe order: `[#FFC700 Yellow, #FF352B Red, #34C759 Green, #0A84FF Blue, #34C759 Green, #FF352B Red, #FFC700 Yellow]`. Must read as a true 3D airfoil (upper skin, lower skin, open leading-edge ram-air intakes, trailing edge, sealed wingtip endcaps), with a hyperbolic spanwise arch, per-cell billow bulge, dark recessed seam grooves, and soft rib-ridge specular highlights — never flat. ### 3.2 Suspension Lines (8 Groups) Crisp white lines anchored to the 7-cell seam dividers: left 4 groups (0–3) converge at the left riser attachment; right 4 groups (4–7) converge at the right riser. Never a single isolated convergence point. On touchdown, lines sag with gravity-driven catenary droop. ### 3.3 V-Ribbon & Golden Clasp Dual-tone overlapping V-ribbon: Sky Blue `#42A5F4` (foreground) + Deep Blue `#2F7FC9` (background), crossing into a physical V-fold; a solid rounded golden clasp threads through the fold and anchors to the medal's top cylinder. ### 3.4 Gold Medal — Official SVG Ground Truth (authoritative vector source for extrusion; thickness-to-diameter ratio ≈0.11; identical upright artwork on both faces): ```svg <svg xmlns="http://www.w3.org/2000/svg" width="1180" height="1530" viewBox="0 0 118 153"> <defs> <linearGradient id="goldFace" x1="0" y1="0" x2="0.75" y2="1"><stop offset="0" stop-color="#FFD24A"/><stop offset="1" stop-color="#FFC83D"/></linearGradient> <linearGradient id="goldRim" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFC53B"/><stop offset="1" stop-color="#FFB52E"/></linearGradient> </defs> <path d="M60.85 39.45 L79.75 39.45 L64.05 68.05 L48.05 68.05 Z" fill="#2F7FC9"/> <path d="M30.45 39.45 L50.15 39.45 L63.05 68.05 L48.05 68.05 Z" fill="#42A5F4"/> <path d="M42.55 65.90 L47.55 65.90 L47.55 68.75 L63.75 68.75 L63.75 65.90 L68.80 65.90 L68.80 72.70 C66.25 74.85 62.10 76.10 58.05 76.70 C61.45 77.60 64.15 79.10 66.25 81.10 L62.35 84.05 C60.30 81.85 58.20 80.80 55.70 80.80 C53.25 80.80 51.00 81.85 49.10 84.05 L45.20 81.10 C47.20 79.05 49.85 77.60 53.30 76.70 C49.25 76.05 45.05 74.85 42.55 72.70 Z" fill="#FFC338"/> <ellipse cx="55.45" cy="72.55" rx="1.35" ry="1.85" fill="#FFF2B4" opacity="0.92"/> <circle cx="55.70" cy="98.55" r="23.05" fill="url(#goldRim)"/> <circle cx="55.70" cy="98.55" r="20.65" fill="url(#goldFace)"/> <circle cx="55.70" cy="98.55" r="18.75" fill="none" stroke="#FFA83A" stroke-width="1.55" opacity="0.96"/> <circle cx="55.70" cy="98.55" r="17.55" fill="none" stroke="#FFD75B" stroke-width="0.55" opacity="0.90"/> <path d="M38.20 91.15 C40.55 84.75 45.05 80.55 50.15 78.95" fill="none" stroke="#FFF9D9" stroke-width="1.65" stroke-linecap="round" opacity="0.98"/> <path d="M69.95 107.45 C72.25 104.45 73.45 101.10 73.70 97.20" fill="none" stroke="#FFFBE4" stroke-width="1.85" stroke-linecap="round" opacity="0.98"/> <path d="M54.25 84.95 C53.35 86.00 51.85 86.95 49.85 87.55 L49.85 91.55 L53.15 90.70 L53.15 106.25 L49.80 106.25 L49.80 111.20 L62.15 111.20 L62.15 106.25 L58.75 106.25 L58.75 84.95 Z" fill="#FF9E35"/> <path d="M55.65 84.95 L58.75 84.95 L58.75 106.25 L62.15 106.25 L62.15 111.20 L55.65 111.20 Z" fill="#FFA23A" opacity="0.40"/> </svg> ``` ## 4. Geometric Construction (Three.js Procedural Engine) ### 4.1 Parametric Ram-Air Canopy Surface Double-skinned, fully enclosed volumetric arch. For spanwise `u∈[0,1]`, chordwise `v∈[0,1]` (trailing→leading), time `t`: - Spanwise arch: `θ=(u-0.5)·ARC` (ARC≈2.55, R≈6) - Cell bulge: `cell=|sin(u·CELLS·π)|^0.7`, with `CELLS=7` to match the 7-stripe ground truth (one bulge per stripe) - Chordwise camber: `camber=0.45·sin(v·π)` - Flutter ripple: `ripple=0.05·sin(11u+2t)·sin(vπ)+0.025·sin(7v-2.6t+3u)` - Outer(upper) radius: `r_outer=R+camber+0.16·cell+ripple` - Inner(lower) radius: `r_inner=R+0.6·camber+0.05·cell-THICK+ripple` (THICK≈0.32) Map the strict 7-color sequence (§3.1) onto 7 equal spanwise segments (upper+lower skins), with darker underside tones for AO realism. Seal the leading intake (`v=1`) and trailing edge (`v=0`) with interpolated quad closures, and seal wingtips (`u=0,1`) via `capFn` endcaps. Call `geometry.computeVertexNormals()` every frame after vertex updates, for correct specular response, rib-ridge highlights, and recessed seam grooves (thin groove geometry or boundary darkening at each stripe edge). ### 4.2 SVG-to-3D Solid Medal Extrusion Parse the §3.4 SVG path data directly into `THREE.Shape` via a custom `svgToShape(d)` tokenizer (M/L/C/Z), scale `S=1.5/23.05`, origin shift `(CX,CY)=(55.70,98.55)`: - **Clasp**: extrude with bevel (`depth:0.14, bevelThickness:0.015, bevelSize:0.015`), elliptical hole pushed into `shape.holes`. - **Medal Rim**: `CylinderGeometry(1.5,1.5,0.2,96)`, metalness 0.9, roughness 0.28. - **Recessed Face**: `CylinderGeometry(1.34,1.34,0.24,96)`, metalness 0.85, roughness 0.30. - **Relief Rings**: `TorusGeometry` pairs at radii `18.75S` and `17.55S`, mounted at `z=±0.12` on both faces. - **Numeral "1"**: extrude with bevel; front copy at `z=0.12`; back copy = cloned mesh, `rotation.y=Math.PI`, `z=-0.12` — guarantees the numeral stays upright/non-mirrored from any angle (equivalent to flipping the tangent basis `faceR=-rightT` in a software rasterizer). - **Rim integrity**: as true solid cylinder geometry (not a billboard), backface culling/normals are native to WebGL — no manual crescent/sliver mitigation needed; keep rim radial segments ≥36 for smooth metallic curvature and correct half-vector specular sheen. ### 4.3 V-Ribbon & Suspension Lines - Ribbon: two `THREE.Shape` straps via `ExtrudeGeometry(shape,{depth:0.06,bevelEnabled:false})` — foreground Sky Blue at `z=0.06`, background Deep Blue at `z=-0.03`, crossing physically; upper tips define `riserL`/`riserR` anchors. - Lines: `THREE.LineSegments` with a dynamic buffer attribute; sample an 8×3 grid of anchors along the lower canopy skin (`u=0.05…0.95` step 8, `v=[0.10,0.50,0.92]`), matching the 8-group/7-cell seam layout (§3.2). Each frame, read world-space anchor coordinates; left half (`u<0.5`)→`riserL`, right half (`u≥0.5`)→`riserR`. On touchdown, relax tension so lines visibly sag (catenary droop). ## 5. Environment System (Three.js Implementation) 1. **Sky Dome**: Inverted sphere/shader gradient mesh implementing Rayleigh-style scattering from stratospheric blue (3000m) to warm ground haze (0m), plus a sun sprite with corona bloom and hemisphere ambient fill. 2. **Parallax Mountains**: Multiple layered silhouette meshes at increasing depth, tinted via aerial-perspective fog blending, above the mathematical horizon plane. 3. **Cloud Layer (~2100m)**: Procedural `THREE.Sprite` particles (radial-gradient canvas textures), drifting/looping vertically; trigger a full-screen fog/whiteout overlay as the rig crosses this altitude band. 4. **Procedural Ground Terrain**: Large ground plane textured via an offscreen-baked canvas texture (multi-frequency noise) depicting patchwork farmland, forest, rivers, roads; instanced low-poly pine trees and micro-detail meshes fade in below 700m. 5. **Landing Bullseye & Contact Shadow**: High-contrast concentric-ring target mesh (white/blue/red/gold) directly below spawn origin; a soft, dynamically-scaling contact-shadow sprite grows beneath the medal/canopy as altitude nears zero. ## 6. Flight Dynamics, Scene Graph & Camera Choreography ### 6.1 Scene Graph & Kinematics `Scene → Root (Canopy + Lines + Pendulum) → Pendulum (Ribbon + Clasp + Medal Assembly)`. - **Root**: periodic pitch/roll rocking + vertical heave, driven by a 2nd-order aerodynamic pendulum response to simulated wind gusts. - **Pendulum**: phase-lagged secondary oscillation plus continuous slow self-rotation (`t*0.45`) around local Y, revealing front/back embossed medal detail and PBR specular sheen. - Recompute canopy vertices and line endpoints every frame in lockstep with root/pendulum transforms. ### 6.2 Flight Stages & Aero Model - Start altitude 3000m; nominal descent rate 5.2 m/s; time-scale multipliers 1×/2×/4×/16×. - **Cruise (3000m–200m)**: Follow-cam locked closely behind/above the medal, gentle downward pitch, framing both medal/ribbon detail and the full 7-cell canopy overhead. - **Cloud Penetration (~2100m)**: fog overlay + cloud sprite transition (§5.3). - **Touchdown & Collapse (0m)**: physical tip-over settle onto the bullseye; canopy deflates/collapses under simulated gravity (progressive loss of cell inflation + line slack); a celebratory burst of gold-foil/dust particle sprites; camera smoothly transitions into an automated slow 360° low-angle orbit. - Free-inspection `OrbitControls` (§2.5) remain available anytime, layered under/alongside the scripted follow-cam state machine. ## 7. HUD Telemetry & Interaction - **Left Glassmorphic HUD Panel** (HTML/CSS overlay): live altitude, vertical speed, flight time, cell specification. - **Right Altitude Ladder**: vertical tape track with sliding pointer. - **Control Bar**: Pause/Resume (Spacebar), speed selectors (1×/2×/4×/16×), Web Audio pink-noise wind toggle, Camera Reset ('R'), Respawn button. - **Orbit & Pan**: left-click/touch-drag orbit, right-click/Shift-drag pan, wheel/pinch zoom, double-click reset (mirrors §2.5 OrbitControls config). ## 8. Technical Deliverable Constraints 1. **Single-File Delivery**: One complete `.html` — embedded `<style>`, `<canvas id="c">`, `<script type="importmap">`, and ES-module `<script type="module">` — no separate asset files. 2. **Engine & Dependencies**: Three.js r160 + `OrbitControls` + `RoomEnvironment`, loaded exclusively via the official unpkg CDN importmap. Zero other external libraries, no remote raster images/audio — all textures, gradients, and geometry generated procedurally in code (canvas-baked textures permitted as Three.js texture sources). 3. **Zero Build Step**: Must run immediately by double-clicking the HTML file in any modern evergreen browser. 4. **Performance & Robustness**: Full DPR-aware rendering, responsive resize (`camera.aspect` + `renderer.setSize`), defensive guards against NaN/degenerate matrices, smooth 60 FPS even during particle bursts and full canopy vertex recomputation. ## 9. Quality Bar The final result must be physically and aerodynamically plausible (realistic canopy billow, catenary line sag, pendulum damping, gravity-correct collapse), with believable PBR lighting/shadow behavior and a visually appealing, toy-premium gold medal + parachute composition. Reference image for overall look/mood: `https://img.cdn1.vip/i/6abb239b030d0_1790649243.webp`

A system prompt was added to support web rendering