Create Magnetosphere Three.js Demo

Let me start by understanding the task. The task is "Wake up and do as you please." This is quite open-ended. Given my purpose described in the system prompt — creating cool Three.js demos in /space/demos/ — I should probably create a new impressive Three.js demo.

Let me first check the current state of the demos folder to see what exists.

Let me install shell tools and check the state.

Now let me check the current state of the demos folder.

The demos folder has 33 demos already. The task is "Wake up and do as you please." — an open-ended task. My purpose is to create cool Three.js demos. So I should create demo #34 with something impressive, feature-rich, and not duplicating existing themes.

Let me look at the index.html to see the existing demo list and format, so I can add a new entry consistently.

The index page has a list of demos. Let me look at a couple of card entries to match the format, then decide on a new demo concept. Let me see the most recent entries.

I see the pattern. The demos are impressive, with generative WebAudio, GPU simulations, UnrealBloom, adaptive quality tiers, PNG snapshots, keyboard shortcuts, touch support, etc.

The task is "Wake up and do as you please." Given my purpose, I should create demo #34. Let me think of a concept that hasn't been covered yet:

Existing demos:

1. Spinning cube
2. Nebula galaxy (particles)
3. Mandelbulb explorer (ray marching fractals)
4. Fluid dynamics
5. Gravity sandbox
6. Event horizon (black hole)
7. Sonic reactor
8. Void runner (game)
9. Azure odyssey
10. Abyssal bloom
11. Physarum garden (slime mold)
12. Powder alchemy (falling sand)
13. Clockwork nebula
14. Neon rain
15. Aurora borealis
16. Skitter
17. Coral resonance
18. Threshold
19. Attractorium (strange attractors)
20. Murmuration (boids flocking)
21. Terraforge (terrain)
22. Cloudsea (clouds)
23. Frostline (frost/ice)
24. Koi pond
25. Ferrofluid
26. Synchrony (fireflies/Kuramoto)
27. Cymatics (Chladni plate)
28. Teslasphere (plasma globe)
29. PyroSymphony (fireworks)
30. Morphogenesis (Gray-Scott reaction-diffusion)
31. Galton Cascade (probability/Galton board)
32. Wavefront (ripple tank/wave equation)
33. Gossamer (spider web/verlet cloth + Karplus-Strong)

New ideas that haven't been done:

• Voronoi fracture / demolition — breakable glass/geometry with physics
• DLA (diffusion-limited aggregation) crystal growth — maybe overlaps morphogenesis
• Magnetic field lines / iron filings in 3D
• L-system plants / procedural tree growth with wind
• Tensegrity / soft-body physics
• Crowd simulation / boids predator-prey — murmuration covers flocking
• Rain on window glass — droplet simulation (metaballs merging)
• Sand pendulum harmonograph drawing
• Marble machine / Rube Goldberg — kinetic sculpture
• Origami / paper folding
• Double pendulum chaos garden — many pendulums, phase space
• Geodesic dome construction
• Voxel world with water flow
• Electrical tree / Lichtenberg figure growth
• Dune field / sand ripple simulation with wind transport (aeolian)
• Rainbow optics / prisms, ray tracing dispersion through glass
• Hyperbolic tessellation / Escher circle limits
• Spirograph / harmonograph 3D with ribbon trails
• Magnetosphere / solar wind particles around earth dipole
• Tide pool ecosystem simulation
• Ant colony pheromone simulation — overlaps physarum
• Cellular automata 3D (Game of Life on GPU)
• Flocking predator-prey ecosystem
• Lava lamp metaballs (raymarched) — overlapping ferrofluid?
• Pendulum waves — the classic "pendulum wave" machine with 15 pendulums forming mesmerizing patterns. This is a great physics visualization! Could combine with audio (each pendulum chimes), phase-space plot, etc.
• Rainfall / monsoon scene
• Origami crane flock
• Kaleidoscope shader
• Cloth flag tearing in wind
• Ink diffusion in water (raymarched volumetric ink)
• Newton's cradle
• Double pendulum chaos — beautiful chaos visualization with trails
• Solar system orbital mechanics with N-body — gravity sandbox covers that
• Mandelbox / kaleidoscopic IFS raymarching — mandelbulb covers fractal
• Snow globe / avalanche
• Whirlpool / vortex particles
• Starling murmuration over city at dusk — murmuration done
• Bioluminescent plankton — abyssal bloom might cover
• Turing machine / rule 110 visualization
• Spirograph harmonograph — "Harmonograph": draw with pendulums

Let me think about what would be fresh, wow-factor, and technically distinct:

Option A: "Prism" / "Refraction" — a glass optics playground. Ray-traced dispersion through glass prisms, lenses; split white light into rainbow; interactive with draggable prisms. Technically: screen-space ray tracing or 2D optics with spectral rendering. A 2D optics lab with ray bundles, spectral dispersion, lenses, mirrors, prisms — could be very beautiful. But maybe less 3D wow.

Option B: "Pendulum Wave" — the mesmerizing physics demo: row of pendulums with slightly different periods producing traveling waves, snakes, double-helix patterns. Could be done in 3D with glass orbs, chimes, trails, phase space visualization, and a "chaos twin" double pendulum section. Elegant but maybe simpler than the recent demos.

Option C: "Lichtenberg / Dendrite" — electric discharge tree growth in 3D on GPU, dielectric breakdown model (DBM), glowing plasma trees etched in a glass block, then lit up. Similar to Teslasphere though (lightning).

Option D: "Dune" — aeolian sand ripple simulation. Cellular automaton sand transport, wind streaks, barchan dunes migrating. Beautiful but maybe static.

Option E: "Ink / Sumi-e" — volumetric ink drops in water with GPU fluid — overlaps fluid dynamics.

Option F: "Marbleworks / Kinetic machine" — a Rube-Goldberg marble machine: tracks, lifts, gears, xylophone keys — physics + generative music. Wow factor high! Marbles roll down tracks, hit chimes, switches; user can place pieces? That's complex but very impressive.

Option G: "Tensegrity / soft-body creature" — softbody physics with pressure soft bodies. Overlaps with verlet (gossamer).

Option H: "Hyperbolic" — Poincaré disk with animated tessellation and fish swimming (Escher's Circle Limit III) — fish swimming in hyperbolic plane, rendered in WebGL shader with hyperbolic tiling, user navigates hyperbolic space. Very unique! Fish tessellation, hyperbolic geometry, geodesics. Could be gorgeous: animated Circle Limit III with hyperbolic motion, you steer a fish/school through hyperbolic space. Audio generative. Hmm, it's 2D-ish though; can be done full-screen shader. But demos so far are 3D scenes with OrbitControls... though not all (wavefront is 3D surface, cymatics 3D plate).

Option I: "Avalanche / Granular" — powder alchemy covered granular.

Option J: "Solar wind / Magnetosphere" — charged particles spiraling around magnetic dipole, aurora at poles. Particles tracing field lines, van Allen belts, user flips dipole, aurora glow. Nice space physics. Overlaps a bit with aurora borealis but distinct (particle physics of magnetosphere).

Option K: "Koch snowflake crystal growth / snowflakes" — procedural snowflake generator using DLA/hexagonal CA, infinite unique flakes falling with wind, zoom macro lens. Frostline is frost on window maybe? Snowflake growth could be gorgeous — "every flake unique", hexagonal dendrite CA on GPU... but frostline might overlap in theme (frost).

Option L: "Rain window" — raindrops on a window pane at night with city bokeh lights behind, droplets wobble, merge, streak down, refracting the lights. This is a classic beautiful effect (like the famous "rain on glass" demo). Combined with generative rain audio + thunder. It'd be a shader-heavy demo: droplet simulation on texture, refraction of a bokeh city. Very atmospheric. Theme overlaps "neon rain" perhaps — neon rain is probably rain in a neon city. Hmm.

Option M: "Harmonograph" — kinetic drawing machine: 3 pendulums drawing Lissajous ribbons in glowing ink, decaying over time; user controls frequencies; beautiful luminous trails. Maybe too simple.

Option N: "Chaos garden / double pendulums" — dozens of double pendulums with rainbow trails showing sensitivity to initial conditions, phase portraits. Elegant physics art.

Option O: "Origami" — folding paper simulation — hard.

Option P: "Sediment / strata" — geological layers forming. Meh.

Option Q: "Aqua / Raymarched ocean" — azure odyssey/cloudsea likely cover water.

Option R: "Tides" — gravitational tides visualization with moon. Meh.

Option S: "Pinball / Pachinko generative music" — overlaps Galton cascade (pegs, plinks).

Option T: "Magnetite / magnetic field viewer" — iron filings around magnets in 3D, draggable magnets, field lines glowing. Nice physics, maybe overlaps ferrofluid.

Option U: "Whalesong / deep sea" — abyssal bloom covers deep sea.

Option V: "Star trails / night sky timelapse" — meh.

Option W: "Boids predator + obstacle + 3D" — murmuration done.

Option X: "Clock / orrery" — clockwork nebula covers clockwork; orrery maybe overlaps gravity sandbox.

Option Y: "Fire / campfire" — volumetric fire shader with sparks, smoke, audio crackle. Pyrosymphony has fireworks. A campfire might be redundant.

Option Z: "Labyrinth / maze generation + solver" — maze generated live with algorithms (recursive backtracker, Prim), then A* solver fluidly traverses; 3D walls; you can walk first-person. Games-y.

Let me weigh "wow + feasible + distinct":

1. Hyperbolic "Circle Limit" explorer — very distinctive, mathematical beauty, nothing like previous demos. Fish/ships swimming hyperbolic plane; Poincaré disk shader with animated geodesic tiling; steering through hyperbolic space with proper Lorentz boosts; generative audio. Risk: 2D look.

2. Rain on glass ("Condensation/Rainlight") — atmospheric, shader-heavy, gorgeous bokeh refraction; droplet sim merging; thunder; rain audio. Risk: overlap neon rain.

3. Magnetosphere ("Solarwind") — particles + dipole + aurora. Distinct enough.

4. Pendulum wave — beautiful, musical, simple but perhaps too simple compared to recent demos.

5. Double pendulum chaos garden — art piece.

6. Marble machine — wow but heavy build; risk of time overruns.

7. Snowflake forge — hex CA growth; frostline overlap risk.

Let me check what neon-rain and frostline actually are, plus a few others (azure-odyssey, threshold, skitter) to avoid overlap and understand the house style. Let me grep the descriptions from index.html.

Now I have a full picture of all 33 demos. Let me pick a fresh concept for #34:

Themes covered: particles galaxy, fractal raymarch, fluid, n-body, black hole lensing, audio visualizer, endless runner game, sailing ocean, deep sea boids, physarum, falling sand, gears/orrery, cyberpunk rain city, aurora, creature locomotion, cymatics lagoon, portals first-person, attractors GPGPU, boids murmuration, terrain erosion, volumetric clouds, frost crystal sim, koi pond, ferrofluid, fireflies sync, chladni, plasma globe, fireworks, reaction-diffusion, galton board, ripple tank, spiderweb.

Fresh candidates:

1. Pendulum wave / chaos — physics art. Could combine: "Harmonic Pendulum Garden" — a field of pendulums (pendulum wave machine) + double pendulum chaos + chimes. Fresh theme (no pendulum yet).
2. Rain on window glass — overlaps neon rain (rain) but different: macro droplet sim on a pane with bokeh. Frostline is "winter window" though — a "rainy window" might feel like a sibling of frostline (both window-pane sims). Hmm.
3. Magnetosphere — space physics, charged particles in dipole field, aurora caps. Distinct from aurora borealis (that's ground-level volumetric curtains). This one: Earth's magnetosphere, solar wind streamlines, van Allen belts, CME events, compressing magnetopause. Could be gorgeous with glowing particle streamlines.
4. Hyperbolic Circle Limit explorer — unique math art.
5. Marble machine — kinetic + music. Overlaps Galton slightly (balls + pegs + notes) but a full marble machine with lifts and tracks is distinct. Risky build.
6. DLA dendrite growth — overlaps morphogenesis/frostline (growth sims).
7. Tensegrity/softbody — overlaps gossamer verlet.
8. Origami — hard.
9. Lava lamp metaballs raymarch — ferrofluid overlaps.
10. Prism optics lab — spectral dispersion. Nice but 2D-ish; could do 3D glass sculpture with real spectral dispersion shader. Hmm — could be cool: "Refraction" — drag prisms, split light. Actually a 2D optics sandbox is a classic and could look gorgeous with bloom. But recent demos are 3D scenes; a 2D optics lab might stand out less.
11. Knots / topology — torus knots morphing, knot energy minimization. Meh.
12. Starling... done.
13. Tidal pool / ecosystem — overlaps.
14. Fire — pyro done.
15. Crowd — meh.
16. Whirlpool/vortex — fluid overlaps.
17. Pendulum wave machine — I like this: "Pendulum Wave" — a kinetic light sculpture: row of glowing orbs swinging at slightly different frequencies creating snake/zipper patterns; plus double-pendulum chaos column in the middle? Or separate. With generative chimes, phase-space readouts, presets. It's physics-precise and mesmerizing. Fresh theme.

Another strong candidate: "Orrery... " no, clockwork nebula covers.

"Dune field" — aeolian sand: cellular automata sim of sand transport forming barchan dunes that migrate; wind streaks; you can blow wind with pointer; night/day. Distinct but maybe slow.

"Ink in water" — GPU fluid dye... fluid dynamics covers.

"Tornado / waterspout particle vortex" — particle tornado you steer. Could be pretty but shallow.

"Kaleidoscope" — meh.

"Lichen/moss growth" — growth covered.

"Ant colony" — physarum covers.

"Traffic flow / city" — meh.

"Newton's cradle + wave pendulum" combo — "kinetic sculpture museum"! Actually a beautiful idea: a kinetic sculpture gallery with several exhibits: pendulum wave, double pendulum, Newton's cradle, harmonograph drawing board... That's ambitious. Maybe focus on pendulum wave with extras.

"Magnetosphere" — I keep coming back to it:

• Glowing solar wind particles (instanced, tens of thousands) streaming from the sun, deflected around a dipole field (semi-analytic: particles follow advection + magnetopause deflection), some trapped in van Allen belts spiraling along field lines (helix motion around dipole field lines with bounce between mirror points — real physics!).
• Field lines rendered as glowing curves, dipole tilt/rotate.
• Polar aurora ovals that brighten when particles precipitate — could render as additive shader caps.
• CME event button: a shock wave sweeps the field, compresses magnetopause, triggers aurora storm.
• Day-night terminator, atmosphere fresnel, stars, sun with flare.
• Audio: solar wind hiss, aurora chorus (whistlers!), CME rumble.
• Interactive: rotate/tilt Earth, drag to orbit, toggle field lines, adjust solar wind speed, launch CME.

That's a strong space-physics demo distinct from event horizon (black hole) and aurora borealis (ground view). The physics: guiding-center approximation — particles gyrate around field lines, gradient/curvature drift, mirror bounce. Simplified: spawn particles, advect them along dipole field lines with bounce motion + azimuthal drift + gyration → classic van Allen belt visualization. Plus solar wind streamers bypassing around a magnetopause boundary (Chapman-Ferraro).

Hmm, but simulating realistic magnetosphere dynamics is complex. Simplified approach:

• Solar wind: particles stream in -x direction; near Earth, deflect around a sphere (magnetopause) using potential flow around sphere + field-aligned entry at cusps. Visually compelling.
• Belts: trapped particles on dipole field lines L=1.5..6, bounce along field line, drift around Earth. Beautiful glowing donut.
• Aurora ovals: rings at poles that pulse.

Could be great. Name: "Magnetosphere" or "Solarwind" or "Van Allen". Hmm.

Alternative: "Pendulum Wave Garden" — also strong and more "physics art".

Let me also consider "Tessellated hyperbolic fish" — cool but 2D.

Another idea: "Ripple... " done. "Sonic..." done. "Voronoi shatter" — smash glass sculpture, fracture physics with convex pieces falling; could be fun (break stuff!) but less "wow-pretty".

"Boids + predator" done-ish.

"Firefly..." done.

"Whale..." deep sea done.

"Seismic waves / earth interior" — waves propagate through layered earth. Educational but niche.

"Raytraced hall of mirrors / caustics" — caustics! "Caustics" — light through a glass surface onto a floor — gorgeous. Could do water caustics... koi pond has water. Hmm.

"Prism / dispersion" — spectral caustics through crystal — "prism break": white beam through a rotating crystal casts dancing rainbow caustics. Technically: could fake with layered dispersion renders. There's a classic technique: render scene multiple times with slightly different IOR per channel. A demo with a rotating glass sculpture on a pedestal splitting light into rainbow fans could be stunning with bloom. Interactivity: drag the light, rotate facets, switch shapes. It's doable: raytracing in shader or screen-space. Risky to make look right, but the multi-pass dispersion approach on a real refractive mesh (like three.js dispersion demos) looks fantastic.

Hmm, actually three.js r160+ can do transmission with dispersion? WebGLRenderer transmission supports dispersion? There's material.dispersion in newer three for MeshPhysicalMaterial (r167+). With r160+, maybe not. Could fake with 3 renders.

Let me think about scope/risk. Recent demos follow a strong template: fullscreen Three.js scene, EffectComposer + UnrealBloom + custom grade pass, HUD, generative WebAudio, adaptive quality, snapshots, keyboard shortcuts, touch. I should reuse that template (I can adapt from an existing demo file to keep consistent style) and pour effort into the core simulation/visual.

Given one-day demos, I'll pick the magnetosphere — it's visually stunning (glowing particle streams, belts, aurora ovals, CME shockwaves), physics-rich, distinct, and feasible with instanced particles + custom shaders. Let me name it "034-magnetosphere" with title "Magnetosphere". Or "Solarwind"... "Magnetosphere" is clear.

Hmm wait — aurora borealis (015) already did polar lights from ground. Mine is from space: whole-Earth magnetosphere. Distinct enough. Also event horizon is space. Fine.

Actually, let me reconsider once more. Another cracker: "Kinetic pendulum garden" — pendulum wave + chimes — very musical and mesmerizing, and simpler. But maybe less "epic" than recent entries. The magnetosphere will have:

• 30-60k GPU-instanced particles (solar wind + belts + aurora drizzle)
• dipole field line glow curves (tube/line shaders)
• Earth with day/night shader, city lights on night side, atmosphere fresnel, clouds
• Sun with animated flares, lens glow
• CME shockwave event
• aurora ovals with curtain shader
• generative audio: solar wind noise, whistlers, chorus, CME rumble
• HUD with controls: solar wind speed/density, dipole tilt, field lines toggle, CME launch, presets (quiet/storm)
• OrbitControls, bloom, grade, snapshots, adaptive quality, touch

Great. Let me check one existing demo (e.g., 033-gossamer) to reuse the boilerplate structure (import map versions, composer setup, HUD styles, snapshot function). Reusing house style keeps consistency and speeds development. Let me look at gossamer's head/boilerplate.

Plan:

1. Read parts of an existing demo (gossamer) for CDN versions and structure patterns.
2. Write /tmp/magnet/index.html in chunks (it's big; build in temp then copy to /space/demos/034-magnetosphere/).
3. Validate JS with node --check.
4. Copy to /space/demos/034-magnetosphere/index.html.
5. Update /space/demos/index.html with the new card.
6. Checkpoint status.

Let me first check the gossamer file structure (imports, composer, grade shader, HUD CSS).

Good — three@0.170.0 with import map from unpkg. House style established.

Now let me design 034-magnetosphere — I'll call it "Magnetosphere". Let me flesh out the design in detail before writing code:

Concept: "Magnetosphere" — a solar-wind space physics observatory

A view from deep space: Earth in center-right, Sun far left (-x), solar wind streaming. Visual elements:

Scene composition

• Deep space: procedural starfield (points) + milky way band (fbm in sky shader or points).
• Sun: at (-90, 0, 0), glowing sphere with shader (granulation + limb darkening), corona (camera-facing radial shader billboard or sprite layers), occasional flare arcs. Point light + ambient.
• Earth: sphere radius ~6 at origin with:
  • Day/night shader: procedural continents? That's heavy; use stylized Earth: fbm continents with ice caps, ocean specular, night side city lights (from the same fbm mask), clouds layer (separate sphere, fbm alpha, slowly rotating), atmosphere fresnel shell (backside additive).
  • Dipole axis: tilted ~11°, slowly rotating? Actually Earth rotates around its geographic axis; the dipole is tilted from that. Keep Earth spinning slowly (y-axis) and dipole tilt fixed in the Earth frame for aurora placement.
• Magnetopause: faint transparent teardrop shell (analytic shape) — show on toggle, shimmering fresnel; compresses during CME.
• Field lines: dipole field lines for L shells — render as Line/curves with flowing-dash shader (moving pulses along them showing direction), toggleable, colored cyan-ish.

Particles (the star of the show)

Three populations, all updated on CPU? Better GPU... but physics is complex; CPU with typed arrays for ~20-40k particles at 60fps is feasible if the per-particle work is cheap (a few vector ops). Let me use CPU update with THREE.Points + custom shader (attribute buffers updated each frame, DynamicDrawUsage). House demos use GPGPU for 1M, but CPU for ~25k with simple ops is fine (Galton used CPU physics for hundreds; Gossamer ~1000 knots CPU). 25k particles × cheap ops ≈ fine in JS (each particle maybe 20 flops → 500k flops/frame, trivial).

Populations:

1. Solar wind (~14k): spawn in a disc upwind (plane x = -85, random r up to 40), velocity +x with slight thermal jitter. Deflection: model magnetopause as impenetrable — use potential-flow-around-sphere-ish steering: compute magnetopause standoff distance R_mp (depends on wind pressure; compresses during CME), treat obstacle as sphere of radius R_mp centered slightly sunward; particle velocity = free stream deflected by analytic "flow around sphere" gradient (potential flow: v = U(1 - R³/r³ stuff)). Actually potential flow around sphere: velocity field known analytically — good cheap deflection, looks right (streams part around Earth). Then particles near the polar cusps can "enter": small probability near cusp regions get captured into aurora drizzle. Also add slight gyration? Skip.
   • Color: warm near sun, cooler downstream; brightness by density. Additive points, small.
   • During CME: a shock shell (expanding sphere/plane front) sweeps through; particles within front get boosted & deflected more; magnetopause compresses (animate R_mp), aurora brightens, audio rumble.
2. Van Allen belt particles (~8k): trapped particles: each has an L shell (1.3–5), bounce phase along field line, drift phase around Earth. Position computed analytically each frame: dipole field line r = L cos²λ (λ = latitude); particle bounces λ between ±λ_m (mirror latitude), drifts in longitude with speed depending on L. Add gyration shimmer (small perpendicular jitter). Color: inner belt proton pink/orange? Classic: inner belt red-ish (protons), outer belt electron blue/cyan? I'll use teal→violet gradient by L. Very beautiful torus glow.
3. Aurora drizzle (~4k): particles precipitating along field lines into the auroral ovals — spawn high on L≈6-8 field lines near aurora latitude (~67°), accelerate down, fade at atmosphere; their flux modulates aurora oval brightness. Color green→purple.
   • Aurora itself: two "curtains" — a ring/tube geometry around each magnetic pole with a shader: vertical streaking fbm, animated, brightness uniform modulated by drizzle flux + CME. Build as a band of geometry: for N angles around oval, a vertical ribbon segment from r1 to r2 (altitude 0.9→2.5 Earth radii?) — aurora altitudes ~100-300km so just above surface; make them visually taller for drama (0.15R to 0.5R). Use a custom BufferGeometry ribbon ring with additive shader, scrolling fbm curtains, color green (557.7nm) bottom to purple/red top.

CME event

Button (and auto rare): launches a dense plasma cloud from sun toward Earth: visualized as expanding bright shell + particle burst; travel time few seconds; on arrival: magnetopause compress animation, field line shudder, aurora storm mode (ovals expand equatorward, brighten, color shifts), geomagnetic "substorm" — belt particles get injections. Audio: deep rumble + chorus swell.

Audio (WebAudio, all synthesized)

• Solar wind: filtered noise (bandpass, slow LFO on cutoff), stereo width.
• Whistler/chorus: occasional descending chirps (osc freq glide) — very quiet, eerie. Trigger more during storms.
• Low drone pad tied to solar wind speed.
• CME launch: whoosh; arrival: deep boom + rumble.
• UI clicks, toggle blips.
• Mute button.

UI/HUD (house style)

• Title header: "MAGNETOSPHERE" + subtitle.
• Top-right: sound toggle, snapshot, help.
• Bottom-left panel:
  • Solar wind speed slider (calm ↔ storm)
  • Buttons: "Launch CME ☀" , "Field lines ⌁" toggle, "Magnetopause ⬡" toggle, "Belts ●" toggle
  • Presets? maybe: Quiet Sun / Active / Storm buttons (set wind speed/density + CME frequency).
  • Quality badge + fps stats.
• Hint bottom center: "drag to orbit · scroll to zoom · C to launch CME · F field lines…"
• Help overlay with controls list.
• Legend? Maybe small labels: "solar wind", "van Allen belts", "aurora". Could add toggleable labels via sprites. Keep minimal: status line showing condition (Quiet / Storm watch etc.)

Tech structure

• three@0.170.0 import map, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, ShaderPass (grade: vignette/grain/chromatic aberration), OutputPass.
• Adaptive quality tiers: particle counts & pixel ratio & bloom resolution. Auto-detect via fps; manual toggle by clicking quality badge.
• Snapshot: render then toDataURL download PNG.
• Keyboard: C CME, F field lines, M magnetopause, B belts, A audio, H help, P snapshot, 1/2/3 presets.
• Touch: orbit/pinch via OrbitControls; double-tap to launch CME? Maybe not; buttons suffice.

Let me now define the math carefully.

Dipole field: B(r) = μ0/(4π) * (3(m·r̂)r̂ - m)/r³. In units where Earth radius = 1, m along dipole axis.

Field line equation: r = L cos²λ where λ magnetic latitude. Points: for λ from -λ_max..λ_max, r(λ) = L cos²λ, position in dipole coords: x = r cosλ, z = r sinλ (2D), then rotate around dipole axis by longitude φ.

Line exists for λ_max where r(λ) >= 1 (surface): cos²λ_max = 1/L → λ_max = acos(1/√L). For each L in {1.5, 2, 2.5, 3, 4, 5, 6, 8} draw some lines at K longitudes.

Belt particle motion: particle i: L_i, mirror latitude λm_i, bounce phase bi, bounce frequency ωb_i ∝ (something like v/L), drift phase φi, drift frequency ωd_i ∝ L (drift period roughly ∝ 1/L² for relativistic electrons? Empirically drift period ~ some hours; visually we want nice differential rotation: outer drift faster? Actually gradient-curvature drift period is shorter for higher energy, and roughly scales... for visual appeal: ωd = base / L^0.5? Hmm. For aesthetics, let's make inner belts drift faster (like Keplerian-ish): ωd ∝ 1/L^1.5 looks nice (inner faster). Choose ωd = 0.25 / L^1.2 rad/s visual.

Position at bounce phase: λ = λm * sin(b). Then r = L cos²λ, local coords: along meridian: (r cosλ, r sinλ) in the dipole meridian plane, rotate by φ around dipole axis. Then transform dipole coords to world: dipole axis tilted by 11° from Earth's spin axis (Earth spins slowly around y; for simplicity keep dipole fixed in world tilt: tilt toward +z? Let's tilt dipole axis in world frame and let Earth surface rotate under it — actually geomagnetic poles rotate with Earth in reality, but for the visual simplicity keep dipole world-fixed, tilted 11° toward camera-ish, Earth spin independent. Fine — it's art.

Gyration: add tiny perpendicular offset with high frequency — cheap shimmer: offset ∝ sin(t*20 + i). Maybe skip or tiny.

Solar wind deflection (potential flow around sphere): Uniform flow U along +x past sphere radius R: Velocity potential φ = U (r + R³/(2r²)) cosθ... let me recall: flow around sphere: φ = U (r + (R³)/(2r²)) cosθ where θ from flow axis. Velocity: v_r = U cosθ (1 - R³/r³) v_θ = -U sinθ (1 + R³/(2r³)) In Cartesian, easier: for flow around a sphere with center at origin, free stream U along x: v(x) = U [ x̂ - (R³/2r⁵)(3(x·r̂... hmm let me just derive in code: compute in spherical-ish local frame: r_vec = p - C (center of obstacle), r = |r_vec|, cosθ = (r_vec·x̂)/r, e_r = r_vec/r, e_θ = (cosθ e_r - x̂)/sinθ (careful at axis). v = U[ e_r cosθ (1 - R³/r³) - e_θ sinθ (1 + R³/(2r³)) ]. That's analytic and cheap. For particles inside r < R... shouldn't happen if R is obstacle; clamp: if r < R*1.02 push out. Since spawn points upwind and deflection handles it, few will penetrate; clamp anyway.

Magnetopause obstacle center: slightly sunward of Earth? The magnetopause is not spherical (teardrop), but sphere approx centered at Earth with R_mp ~ 10 Re is standard first approx; compressed side ~10, tail long. For visual: use sphere R ≈ 2.2 (Earth radius 6 world units?? let me set scale).

Scale decision: Earth radius = 1 unit? Then magnetopause 10 units, sun distance 200 units real (215 Re). For visuals: compress distances: Earth radius = 2 units, magnetopause nose at ~7 units (3.5 Re — compressed for drama), sun at -60 units with big glow. Belts L up to 5 Re = 10 units. Field lines to L=8 → 16 units. Camera start at ~(26, 14, 34). Wind spawn plane at x=-55. Sun sphere radius 6 at (-70,0,0) — actually sun should be much bigger/farther but artistic license.

Hmm, but potential-flow sphere R should match magnetopause nose ~ 7-8 units. Tail: potential flow closes behind the sphere, but real magnetotail is long — visually acceptable; wind streams past.

Capture into aurora: particles passing near Earth within r < R_cusp near cusp latitudes (~±70°) with some probability → switch them to "precipitating" mode: they then spiral down along local dipole field direction: velocity = along -B (downward) with accelerating speed, gyration offset, die at r ≈ 2.3 (atmosphere), tint green. Simple: for precipitating particle, compute dipole B direction, move along -B toward Earth (both hemispheres—choose nearest), speed increases as r decreases. When r < 2.2: die → respawn as wind.

Simplest robust implementation: single particle system (THREE.Points) with per-particle mode attribute; CPU updates positions array; color/size from shader attributes updated occasionally. 20k points CPU update per frame with ~30 flops each is OK (600k flops) — JS handles this fine.

Actually let me structure particles:

• WIND: free stream + potential deflection; life: spawn at x=-58 plane, despawn x>60 or |y|,|z| > 55 → respawn.
• PRECIP: captured wind: follow -B, accel, die near surface → respawn as wind (recycle).
• BELT: analytic position from phases (no integration), infinite life. Counts: wind 15000, precip pool 2500 (drawn only when active; inactive parked far away / alpha 0), belt 8000. Total 25.5k points in one geometry; use aMode attribute for shader tweaks (size/color boost). CPU writes positions every frame for wind+precip (17.5k) and belt (8k analytic = cheap).

Colors: precomputed base color attribute; brightness/alpha in shader via attribute aGlow updated rarely (belt shimmer via time in shader using aSeed). Use additive blending, depthWrite false.

CME: object {t0, speed, radius}; visual: expanding sphere shell shader (fresnel-ish additive, noise-streaked) + burst of extra wind particles? Simpler: a bright expanding "cloud": sphere with fbm shader, scale grows from sun to beyond Earth, fades after passing. Effect on sim: when front radius crosses R_mp region (~2-4s), trigger storm mode for T seconds: R_mp compresses (multiply 0.62), aurora brightness ×3, ovals widen, whistler rate up, wind deflection uses compressed R, belt injection (temporarily raise belt glow + maybe shift L distribution slightly), status text "GEOMAGNETIC STORM". Also screen-space subtle shake? maybe tiny camera impulse. Audio boom.

CME visual cloud: custom shader sphere, additive, fbm stripes, expanding. Plus a planar "shock front" ring? Keep cloud only.

Magnetopause shell: analytic shape: use sphere scaled along x (teardrop: scale down tail side?) — simplest: an oblate shape via vertex displacement: direction d; r(θ) where θ from sun direction: r = R_mp * (1.15 - 0.35 cosθ)... teardrop: nose flatter. Use r(θ) = R_mp * (0.9 + 0.25(1-cosθ)) / hmm. Let me define: θ = angle from +x?? sunward direction is -x (sun at -x). Nose toward sun at angle π from +x. Let's param by μ = cos of angle from sunward axis (sunward = -x̂). r(μ) = R_mp * (1.1 - 0.45μ)?? At nose μ=1: r=0.65 R_mp... I want nose AT R_mp: r(1) = R_mp, flanks μ=0: r=1.35R, tail μ=-1: r=1.8R? Real tail widens then cylinder. Visual: r(μ) = R_mp * (1 + 0.45(1-μ)) → nose R_mp, flank 1.45R, tail 1.9R. Good enough teardrop. Fresnel additive shader, subtle scrolling noise lines (bow-shock texture), opacity low (0.05-0.12), brightness up during storm + ripples.

Also bow shock could be second shell slightly larger, redder? Maybe skip; one shell + wind deflection is enough. Actually a bow shock makes it richer: slightly larger shell (1.25×), even fainter, with flowing streaks. Cheap to add (same geometry scaled). Yes, add both, toggle together ("shrouds").

Field lines: Build LineSegments? Better: THREE.Line with per-vertex color + custom shader for animated flow pulses. House style uses fancy shaders; use LineBasicMaterial? Basic lines are 1px, a bit thin but with many lines + bloom can look good. Alternative: tube-ish via instanced segments — heavy. Let's use additive LineBasicMaterial with vertexColors, opacity ~0.5, plus a second overlay: moving "pulse" points along lines (small Points cloud, ~600 pulses traveling along field lines using same param functions — cheap analytic, drift along λ). That gives flowing directionality.

Line count: L shells [1.4, 1.8, 2.4, 3.2, 4.2, 5.5, 7] × 8 longitudes = 56 lines × 96 pts = 5376 verts, trivial. Colors: cyan-blue gradient by L; inner shells slightly teal, outer violet.

Aurora curtains: geometry: for each hemisphere: ring of N=160 segments; each segment a vertical quad strip from bottom radius rb(θ) to top; but curtains should stand on the oval around the magnetic pole at magnetic latitude ~67° → circle in dipole coords at λ_a = ±67°, radius r≈1.15 (just above surface 2.0 units? Earth radius = 2 units → surface r=2; aurora bottom 2.06, top 2.7). Circle radius = 2.06cos(67°)=0.805 from axis at height z=2.06sin(67°)=1.9. Build ribbon: for i in 0..N: angle φ; bottom point p_b, top p_t = p_b * (top/bottom ratio) slightly outward-expanded; quad strip with uv.x=φ/2π, uv.y=0 bottom 1 top. Shader: color = mix(green#39ff8c, purple#8a2be2 → red top?), alpha = fbm(uv.xfreq - tspeed, uv.y)edge fade(brightness uniform). Additive, doubleside, depthWrite false. During storm: uniform brightness up, oval radius expands: rebuild? no—scale group by factor around pole axis (scale x/z in dipole frame) and lower latitude → bigger ring = equatorward expansion.

Position the curtain groups in the dipole frame (tilted 11°).

Earth shader: one sphere r=2, custom ShaderMaterial:

• fbm continents: use 3D noise of position → mask continents vs ocean. Color: ocean deep blue gradient, land green/brown with latitude-based ice caps white.
• Night side: city lights = landMask * noise clusters * warm color * nightFactor.
• Terminator soft. Specular ocean sun glint: blinn from sun dir.
• Atmosphere rim: fresnel additive blue — do in same shader (facing ratio) or separate backside shell sphere r=2.06 (classic). Separate shell easier.
• Clouds: second sphere r=2.03, fbm alpha, drifting offset by time, white with day shading, casts nothing.
• Earth rotates slowly (rotation.y += dt*0.02); clouds slightly faster.

Sun dir fixed from sun position.

Sun: sphere r=5 at (-70,0,0)? With camera near Earth at ~40 units away, sun subtends nice angle. Shader: granulation fbm scrolling, limb darkening, hot yellow-white core → orange limb. Corona: big billboard plane(s) at sun with radial streaks shader (fbm polar), additive, scale ~30. Or sprite. Camera-facing quad with radial noise — good. Also sun emits the wind particles visually — wind spawns near sun plane.

Lighting: mostly custom shaders; add PointLight at sun for any standard materials (none? belt points custom; maybe none needed). Keep an ambient for safety. Actually all materials custom ShaderMaterial/Points/Lines — no lights needed. Good for perf.

Sky: big inverted sphere r=800 with stars? Use points starfield (3000 stars, random sphere, size attenuation off, subtle twinkle in shader) + milky way: fbm band in a sky shader sphere (like previous demos "fbm milky way"). Do sky sphere shader: stars via hash grid + fbm band. Simpler: sky shader with hash-based stars (cheap) + fbm band. One pass, fine.

Post: EffectComposer: RenderPass → UnrealBloomPass (strength ~0.9, radius 0.6, threshold 0.55) → grade ShaderPass (vignette, grain, chromatic aberration, slight teal-orange grade?) → OutputPass. Reuse typical grade shader from house style. Let me peek at gossamer's grade shader to reuse verbatim-ish.

Adaptive quality: tiers: HIGH (25.5k particles, bloom high res, pixelRatio min(dpr,2)), MED (15k, dpr 1.5), LOW (8k, dpr 1, reduced bloom). FPS monitor: if avg fps < 45 for 3s → step down; if > 57 for 10s → step up (max HIGH). Particle count changes: rebuild geometry (or just change draw range + reduce active counts!). Trick: allocate max, use setDrawRange? Points drawRange draws first N — but populations are contiguous segments; better keep per-population arrays & rebuild buffer on tier change (rare event). Simpler: allocate max; maintain activeCount per population mapped into layout [wind(0..Wmax), precip(Wmax..+Pmax), belt(...)]; on tier change set per-pop active counts; inactive particles get alpha 0 via aAlpha attribute (or position them at NaN? alpha 0 + additive = invisible but still vertex cost — fine). Use drawRange not possible for middle segments; alpha approach good.

HUD: follow gossamer layout: header top-left, top-right round buttons (sound 📢/🔇, snapshot 📷, help ?), bottom-left panel with: wind slider, CME button, toggles (field lines, shrouds, belts), status line ("solar wind 420 km/s · Kp 2"), bottom hint, help overlay. Also "auto CME" checkbox? Add preset buttons Quiet/Active/Storm.

Status readouts: wind speed (mapped 250–800 km/s), Kp index derived from storm state, particle counts. Nice "data" feel.

Audio design (WebAudio):

• master → (compressor) → destination. Reverb: convolver with generated impulse (noise decay), wet mix low.
• Wind bed: bufferSource noise loop → bandpass (freq ~400-900 LFO) → gain (mapped to wind speed slider) → stereo (two detuned paths merged).
• Drone: 2 osc (sine 55Hz + 110.3 detune) through lowpass, slow gain LFO, gain by activity.
• Chorus/whistlers: schedule random chirps: osc sine glide from e.g. 1800→500 Hz over 1.2s with bandpass, quiet; rate ∝ storm level. Also "dawn chorus" rising chirps.
• CME launch: filtered noise sweep up + sub sine drop. Arrival: boom (sine 45Hz decay + noise thump) + rumble loop for storm duration (gain envelope).
• UI: short blips.
• Start on first user gesture (pointerdown/keydown) — standard.

Names: folder 034-magnetosphere, title "Magnetosphere".

Now, index card description (for /space/demos/index.html) — write in house style.

Time to write the code. It's a big file (~1500+ lines). I'll write it in chunks to /tmp/mag/index.html via heredocs (cat >> ), then node --check the extracted module, fix, deploy.

Let me plan module structure:

Key coordinate frames:

• Earth spin: earthGroup rotates around y slowly; contains surface + clouds.
• Dipole frame: dipGroup with fixed tilt: rotate around z by 11°? Let's tilt dipole axis: dip axis unit vector m = normalize(sinTilt, cosTilt, 0)? Tilt in x-y plane: m = (sin(11°), cos(11°), 0)?? Let's tilt toward sun slightly: axis in x-y plane tilted from +y toward -x by 11°: m = (−sin11, cos11, 0). dipGroup.quaternion = rotation mapping +y → m. All dipole-frame geometry (field lines, belts, aurora, magnetopause?) children of dipGroup. Magnetopause/shrouds are sun-direction aligned, not dipole aligned → keep in world (sun dir fixed at -x). Aurora + field lines + belt in dipGroup.

Dipole B at world point: transform point into dipole frame (inverse rotate), compute B with m = +y, transform back. For precip motion (precip particles live in world) — do via dipGroup.worldToLocal? Costly per particle w/ matrix ops... Instead implement tilt manually: tilt quaternion q_dip (fixed). For each precip particle: p_local = p * q_dip⁻¹ (quaternion rotate vector), B_local = dipoleB(p_local) (m=ŷ), v_dir_world = q_dip * (-normalize(B_local)). That's ~one quat rotate + field eval per precip particle (2500) — fine.

Belt particles analytic in dipole frame, then rotate to world once — cheap.

Wind deflection: potential flow sphere centered at origin (world), radius R_mp(t). Nose toward sun (-x): potential flow symmetric anyway (sphere). Good: no asymmetry needed.

Wind spawn: x = -58, disc radius 42 in y-z; but particles that will hit obstacle need aim toward Earth; uniform disc fine (those passing far are barely deflected — natural).

Speed: base wind speed param S (slider 0..1) → v = 6 + S*10 units/s? Distances: spawn at -58 to Earth 0: ~58 units → 4-10 s travel. Good.

CME: t0; radius R(t) = 8 + (t-t0)*vCME, vCME ≈ 22 units/s → reaches Earth from sun (-70): ~2.6s. Storm trigger when R crosses 0 (Earth) i.e. when R(t) >= distance from sun center to earth = 70 → storm for 12s. CME visual: sphere shell centered at sun expanding, shader alpha fades with radius after passing Earth. Also boost wind speed ×1.6 during storm.

Precip capture: wind particle with r < R_mp0.75 and |magnetic latitude| in cusp zone? Simpler: if r < 6.5 (close) and random chance per second 0.8 → convert to precip, choose hemisphere by sign of local z? In dipole frame, precip moves along -B; B points "downward" toward Earth naturally following field line curvature: moving along -B or +B? Field lines go from south pole to north pole externally (dipole moment north... magnetic field lines exit from south magnetic pole? Ugh, details). For visuals: choose direction sign s=±1 per particle; p += s * B̂ * speed; but need it to head toward Earth: pick s so that radial component decreases (s = -sign(B̂·r̂) → moves inward). Speed grows as B magnitude grows (dipole ∝ 1/r³): speed = k(1 + 8*(2/r)³). Add slight gyration perpendicular for sparkle: offset small random each frame (jitter). Die when r < 2.25 (atmosphere) → becomes wind respawn (fade?). Points pop; acceptable at small sizes. Also aurora brightness accumulates: when precip dies, add to auroraFlux (smoothed).

Aurora flux → uniform brightness; also base level + storm boost.

Belt visuals: 8000 particles analytic: per particle: L ∈ [1.35, 5.2] biased (inner belt L 1.3-2.5 sparse, outer 2.8-5 dense — slot region gap: sample two gaussians), λm random 10°-35°, bounce freq ωb = 0.5 + 1.2/L (arbitrary, faster inner), drift ωd = 0.35/(L^1.1) (inner faster), phases random. λ = λm sin(ωb t + φ0); φ = ωd t + φ1. r = L cos²λ (in Earth radii → ×2 units). Position dipole frame: x = r cosλ cosφ... wait dipole axis = local y. In dipole frame with axis +y: latitude λ from equator (x-z plane): point = (r cosλ cosφ, r sinλ, r cosλ sinφ). Good.

Sizes: belt 1.6px glow; wind 1.3; precip 2.0.

Colors: wind: pale blue-white (0.55,0.7,1.0)*brightness, sunward warmer; precip: green (0.35,1,0.55); belt: gradient inner (1,0.45,0.25)?? Let me pick: inner belt amber (1.0,0.55,0.2), outer belt cyan-violet (0.3,0.75,1) → nice slot contrast. Mix by L.

aGlow attribute: per particle brightness multiplier, updated: wind glow up during storm & near shock; belt shimmer via shader time*seed; precip bright.

Star points + everything additive — with bloom it'll glow nicely.

Also add subtle tail plasma sheet? Skip — enough.

Labels: small floating text? Skip; status line describes.

Legend in help overlay: explain colors: solar wind (blue), belts (amber/cyan), aurora rain (green).

Now, the grade shader — reuse pattern: uniforms tDiffuse, time, resolution; vignette + grain + slight chromatic offset + subtle saturation/contrast. I'll write my own compact version.

Snapshot: composer.render(); canvas.toBlob → download. Need preserveDrawingBuffer or render immediately before toDataURL — render right before capture works without preserve.

Now HUD details:

Header: "MAGNETOSPHERE" letterspaced, subtitle "solar wind × earth's magnetic shield". Panel bottom-left:

• row: label SOLAR WIND [range 0..1] value km/s
• row buttons: [☀ Launch CME] [Field ⌁] [Shrouds ◠] [Belts ●] (toggles show .off class)
• row: presets: Quiet | Active | Storm; quality badge; stats Status line under header: mode text e.g. "QUIET SUN · Kp 1.3" / "CME EN ROUTE" / "GEOMAGNETIC STORM · Kp 7.8". Hint: "drag orbit · wheel zoom · C launch CME · F field lines · B belts · M shrouds · A audio · H help". Top-right: 🔊 📷 ?. Help overlay: table of shortcuts + legend + about. Close button.

Keyboard: c,f,b,m,a,h,p, 1/2/3 presets, esc close help.

Mobile: buttons work; sliders fine.

Now — write the code. I'll write in ~6 chunks with heredocs. Must be careful with $ in JS template strings inside heredoc — use quoted heredoc delimiter ('EOF') to prevent shell expansion. GLSL has no backticks issue if I quote heredoc. I'll use cat > file <<'CHUNK1_EOF'.

Let me also double-check three r170 addons paths: EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass exist at examples/jsm/postprocessing/. Yes.

OrbitControls r170 fine.

Points material: custom ShaderMaterial with attributes position(vec3), aColor(vec3), aSize(float), aGlow(float). Vertex: gl_PointSize = aSize * uPx * (300/dist) clamp; varying color*glow. Fragment: circular soft sprite falloff: d=length(gl_PointCoord-0.5); alpha = smoothstep(0.5,0.0,d)^? ; additive blending, depthTest true (so Earth occludes particles behind) depthWrite false.

Belt particles behind Earth should be occluded — depthTest true handles with Earth writing depth. Aurora curtains: depthTest true. Field lines depthWrite false, depthTest true. Good.

Wind particle respawn: maintain arrays Float32Array positions etc. Update loop fills posAttr.array; needsUpdate = true. Also aGlow updates occasionally (every frame cheap too—skip per-frame glow updates for wind except storm lerp; do in shader with uniform uStorm and aSeed-based variation). Simplify: shader: glow = aGlow * (1 + uStorm0.8(0.5+0.5sin(time7+aSeed*40))) for sparkle. Add aSeed attr.

Precip conversion: mode array Uint8 (0 wind,1 precip,2 inactive); precip has target hemisphere? auto by B direction. Add per-particle data in side arrays (vx? wind velocity uniform +x mostly — store per-particle velocity vector? potential flow changes direction — compute velocity each frame from field, no storage needed except precip speed maybe derive from r). Wind: pos += velField(pos)dt. velField = U + deflection (potential flow) + small jitter (curl-ish wobble via sin). Precip: pos += dirspeed*dt + gyration jitter.

Belt: analytic each frame into its slice of position array.

Total per-frame CPU: wind 15k * (~60 flops) + belt 8k * (~40) + precip 2.5k * (~120) ≈ 1.5M flops + overhead — fine at 60fps in modern JS; quality tiers reduce.

Potential flow formula check (uniform flow past sphere, stream along +x, sphere radius R center O): In spherical coords around O with polar axis = x: v_r = U cosθ (1 − R³/r³) v_θ = −U sinθ (1 + R³/(2r³)) Cartesian: e_r = p̂ (from O), cosθ = p̂·x̂ = px/r. e_θ = (cosθ p̂ − x̂)/sinθ... sign: θ measured from +x axis; e_θ points in direction of increasing θ (away from axis, "southward" from x-axis). Standard: e_θ = (cosθ cosφ, cosθ sinφ, −sinφ) in (x,y,z) with φ azimuth in y-z... Let me just compute: with polar axis x̂, define s = sinθ, c = cosθ. e_r = p̂. e_θ = (c·p̂ − x̂)/s. Then v = v_r e_r + v_θ e_θ. At s→0 (on axis): limit — handle by if s<1e-4 use free stream (or axial formula: on axis upstream, flow purely −x̂·(1−R³/r³)... at θ=0 (downstream axis, +x side): v = U(1−R³/r³) x̂. At θ=π (−x side, upstream): cosθ=−1, v_r=−U(1−R³/r³), v = −U(1−R³/r³)(−x̂)= U(1−R³/r³)x̂. OK just clamp s and use formula with guarded division.)

This gives nice parting streams. R = R_mp (nose radius). During storm, R animates 7.5→4.6.

Wind speed U = base + jitter per particle (thermal): store per-particle speed factor f ∈ 0.85..1.15 → v = f * U * fielddir... potential flow scales linearly with U so multiply.

CME effect on wind: during storm, U×1.7 globally + extra turbulence jitter; plus CME shell visual.

Bow shock/magnetopause shaders: fresnel = pow(1−|dot(N,V)|, 2.5); alpha = fresnel * (0.10 + storm*0.15) * streaknoise; color: magnetopause cyan-blue (0.3,0.6,1.0); bow shock slightly magenta/faint. Streaks: fbm(angle around sun axis − time) modulates.

Aurora shader detail: uniform float uBright, uTime; varying vUv, vR (radius factor for fade). color ramp: bottom (0.2,1.0,0.45) green → mid teal → top (0.7,0.25,0.9) violet; red fringe during storm: mix toward (1,0.25,0.3) at top by uStorm. alpha = curtain fbm: n = fbm2(vec2(uv.x24.0, uv.x7.0 − t0.35))?? Curtains vary along oval with time; vertical rays: n = fbm(vec2(uv.x40 − t0.6, uv.y1.5)); rays stronger with 1−uv.y shaping; alpha = smoothstep(0.35,0.85,n) * (1−uv.y)^0.7 * vEdge * uBright. Additive.

fbm2: 2D value-noise fbm 3 octaves — write GLSL noise helpers (hash without textures). I'll include a compact GLSL noise lib used by several shaders.

Earth shader noise: need 3D fbm for continents — 3D value noise 4 octaves in fragment... cost per pixel on one sphere — fine.

Simplest: reuse 2D fbm on equirect uv? Causes pole pinching — acceptable with domain warp? 3D noise cleaner: implement 3D value noise (hash from integer lattice via fract sin). OK.

City lights: lights = land * pow(fbm(p*8),3) * night * warm.

Clouds: sphere r1.02, alpha = smoothstep(0.5,0.75,fbm(p3 + t*wind)) * day-ish shading *0.8; white. Blending normal transparent, depthWrite false.

Atmosphere: backside sphere r*1.06, additive fresnel blue.

Corona: camera-facing quad at sun: radial rays: n = fbm(polar angle6 + t0.2, r3 − t0.5)... alpha = pow(1−r_norm,2.2) * (0.55 + 0.45 n) * color(white-gold→orange). Size ~22 units (diameter). Two crossed quads? Single billboard enough (always face camera).

Also sun lens flare-ish glow sprite: another additive radial smooth glow quad bigger, faint. Corona + glow.

Sky sphere shader: stars via cell hash on direction octahedral? Simple: 3D hash: s = hash(floor(dirN))... star field from 3D grid cells with random points — classic "stars" shader: for direction d, project to cube? Cheap approach: use 2 layers: bright stars from hash grid on d using floor(dG) cell → random point in cell → distance → point falloff. Might shimmer when rotating; demos do fine. Plus milky way: band = exp(−|dot(d,bandN)|²k) * fbm(d3) bluish-purple; plus faint nebula color patches. Write it.

Point light: not needed (all custom). Skip lights entirely.

Camera/controls: PerspectiveCamera fov 55, near 0.1 far 2000; pos (24, 12, 34) target (0,0,0); damping; minDistance 5 maxDistance 220; autoRotate slight (0.15 speed) toggled off on interaction? House demos often have gentle idle rotation. Add slow autoRotate that pauses while dragging (OrbitControls handles with listenTo? just controls.autoRotate = true and set false on 'start' event, re-enable after 8s idle). Nice touch.

Resize handler; DPR cap per tier.

Adaptive: track EMA fps; every 2s evaluate; downgrade at <45, upgrade at >58 sustained 8s. Tiers:

• 0 LOW: wind 6000, precip 1200, belt 3500, dpr≤1, bloom res half, disable grain? keep.
• 1 MED: wind 10000, precip 1800, belt 6000, dpr≤1.5
• 2 HIGH: wind 15000, precip 2500, belt 8000, dpr≤2 Start MED? Start HIGH, downgrade as needed (house demos seem to autodetect). Start: guess by dpr/mobile: if mobile → MED else HIGH.

Particle buffers allocated at max (25.5k); active counts control update ranges; inactive → alpha 0 via aGlow=0 (belt/wind) — for shader they're still drawn; 25k points vertex cost negligible.

Snapshot key P + 📷 button; flash effect: brief white overlay div fade.

Help overlay content with shortcut grid.

Audio implementation details:

Reverb impulse: stereo buffer 1.8s exponential decay noise.

Master limiter: DynamicsCompressor.

OK — also "sound on" default off until gesture; button toggles muted; on first gesture auto-start unmuted (common pattern: audio starts on first interaction; button reflects state).

Now the index.html card text:

"034 · Magnetosphere — A solar-wind space observatory — ..." Let me draft:

"A solar-storm observatory at the edge of space — up to 25,000 CPU-simulated particles: a solar wind that streams from a granulated shader sun and parts around Earth’s magnetosphere (analytic potential-flow deflection), gets captured at the cusps and rains down field lines into flickering auroral ovals, while two Van Allen belts (inner amber, outer cyan) bounce and drift along true dipole field lines r = L cos²λ. Launch a CME and watch the shock sweep in, the magnetopause and bow-shock shrouds compress, the belts surge and the aurora explode equatorward as a Kp meter climbs. Featuring a procedural Earth (fbm continents, night-side city lights, drifting clouds, fresnel atmosphere), flowing dipole field-line pulses, a procedural starfield + milky way, generative WebAudio (solar-wind hiss, whistler chorus, sub-bass CME booms), UnrealBloom plus vignette/grain/chromatic grade, adaptive quality tiers, PNG snapshots, keyboard shortcuts and full touch support."

Good.

Alright, let me also double check gossamer's grade/snapshot approach quickly? I'll just write my own standard one; I know the pattern well. But let me glance at their OutputPass usage & grade shader to stay consistent (order: bloom → grade → OutputPass; toneMapping settings). Let me grep gossamer for composer setup.

Let me see the grade shader and snapshot code from gossamer to reuse the exact pattern.

Interesting — gossamer doesn't use OutputPass; grade pass is last (and renders to screen). But note: when using EffectComposer with tone mapping, the final pass outputs to screen; without OutputPass the tone mapping/color space conversion may not apply in the shader pass... In r152+, renderer.outputColorSpace = SRGBColorSpace default; when rendering via composer, passes render to linear HDR buffers, and the final ShaderPass renders to screen — tone mapping applied? ShaderPass materials don't apply tone mapping by default. Actually gossamer sets renderer.toneMapping = ACESFilmic — with composer, the tone mapping is applied only if the final pass uses OutputPass. Without OutputPass, colors render raw (no ACES). It still looked fine presumably (they tuned it that way). Whatever — I'll follow the same pattern (bloom → grade last, no OutputPass) since house demos look good with it. Hmm, but actually recent three versions: UnrealBloomPass works in whatever space; final ShaderPass writes to canvas directly. The result: no tone mapping applied — brighter highlights may clip; bloom softens. The house style clearly works. I'll do the same but design colors to not clip badly.

Actually wait — does the RenderPass apply tone mapping when rendering to render target? In three r150+, when rendering to a render target, tone mapping and color space conversion are NOT applied (they're only applied when rendering to screen/canvas... actually tone mapping is applied in the material shaders based on renderer.toneMapping, regardless of target! Each material's fragment includes tonemapping when renderer.toneMapping set... hmm: In three.js, tone mapping is part of the material shader (tonemapping_fragment chunk) applied when material.toneMapped=true and renderer.toneMapping set — applied whenever rendering, including to render targets. Hmm, actually no: WebGLRenderer checks _currentRenderTarget === null? Let me recall... In three.js, tone mapping chunk is included in materials and applied based on renderer state at compile; render targets... I believe tone mapping applies to materials whenever renderer.toneMapping != NoToneMapping, even to render targets. And color space conversion (linear→sRGB) is applied only when rendering to canvas (or target with sRGB texture). EffectComposer targets are usually HalfFloatType linear in newer versions; then OutputPass does tone mapping + sRGB. Without OutputPass, if materials already tone-mapped into the buffer and final pass writes raw to canvas (which expects sRGB), the image would look dark (linear written to sRGB canvas without conversion)... but ShaderPass's CopyShader/our grade shader outputs gl_FragColor directly; the renderer will NOT auto-convert for ShaderMaterial? ShaderMaterial doesn't include colorspace_fragment chunk... hmm, actually ShaderMaterial does include colorspace conversion? No — RawShaderMaterial/ShaderMaterial: the fragment shader gets #include <colorspace_fragment> only if the shader author includes it. Custom ShaderPass shaders typically don't, so no conversion — output written as-is to the sRGB canvas → looks darker unless values already ~sRGB.

Since all materials here are custom ShaderMaterials (mostly additive glows), tone mapping chunks are only in built-in materials. My custom shaders output final colors directly; additive blending in linear-ish buffer; bloom adds; grade pass writes to canvas unconverted. So effectively everything is "what you write is what you get" — full control. I'll just tune colors empirically to look good. That's exactly what gossamer did (its scene is all custom shaders too, except maybe standard materials? spider/web lines...). OK.

I'll set renderer.toneMapping = NoToneMapping implicitly (leave default? default IS NoToneMapping). Gossamer set ACES explicitly — that affects built-in materials (the spider?). For mine everything's custom, so default no tone mapping is fine; keep exposure control in my own hands.

Decision: skip toneMapping; final grade pass writes direct. Keep bloom threshold ~0.5, strength ~0.85.

Now, write the demo. Directory: build in /tmp/mag/, then deploy to /space/demos/034-magnetosphere/.

Let me now carefully write the full HTML. I'll write it in sequential chunks with careful attention to correctness. Since I can't run WebGL here, I must be extra careful with GLSL/JS syntax. I'll node --check the module at the end.

Let me draft the whole file mentally, then write chunks.

Key structures:

Constants:

GLSL noise chunk (shared string):

Sky shader: sphere r=900, BackSide:

Star approach: use 3D cell: cell = floor(dS); star position in cell random; point dist... d is unit vector; cells near poles distort but stars random anyway. For each fragment, compute cell of floor(dS), star center = cell + hash3 offsets (normalize? no—use as direction approx), brightness if length(d - normalize(center))... normalize mismatch causes streaks. Alternative standard cheap: use 2D from octahedral mapping:

Then grid on octa uv (range -1..1): uv60 cells; star at hash position in cell; d2 = length(fract(uv60)-starPos); star = smoothstep(0.08,0.0,d2)*brightness; twinkle by time. Octahedral seam minor. I'll do that — compact and fine.

Stars: two layers (fine dense dim + sparse bright). Milky way band + dust lanes (fbm subtract).

Sun shader sphere r=5: vertex: pass normal & pos. fragment: granulation = fbm3(normalize(pos)6 + t0.15) etc.; limb: mu = dot(N, V); col = mix(limbColor(1.0,0.45,0.08), coreColor(1.0,0.95,0.75), pow(mu,0.55)) * (0.85+0.5*gran); add sunspot darkening via fbm. Output ~ (2.2..3.5) brightness for bloom.

Corona quad: PlaneGeometry(46,46) at sun, lookAt camera each frame (or use Sprite). Shader: uv → p = uv2-1; r=length(p); ang=atan(p.y,p.x); rays = fbm2(vec2(ang3.0 + t0.05, r4.0 - t0.15)); alpha = pow(max(0.,1.-r),2.6) * (0.35+0.65rays) * 1.4; col = mix(vec3(1,0.6,0.2), vec3(1,0.9,0.6), 1.-r); discard r>1. Additive, depthWrite false, depthTest false? Should be occluded by nothing (sun at edge); keep depthTest true, fine. Also inner glow disc: separate smaller quad smooth radial pow for the "blinding" core — actually bloom handles.

Earth surface shader: sphere r=2, 96x64 segments. uniforms: uSunDir (normalized world dir to sun: normalize(SUN_POS - earthPos) = (-1,0,0) approx), uTime. fragment:

Need vWorld varying. OK.

Clouds sphere r=2.045: alpha = smoothstep(0.48,0.72, fbm3(p3.2 + vec3(t0.008,0,t0.004)) ) * 0.85; shading: dayF similar; color white(0.12+dayF*1.1). Transparent, depthWrite false. Rotation: rotate clouds mesh slowly y.

Atmosphere shell: sphere r=2.14, BackSide, additive: alpha = pow(1 - dot(N,V)...) for backside: use intensity = pow(0.72 - dot(vNormal, V)... classic:

Standard atmospheric glow (from atmosphere scattering tutorials) for BackSide sphere:

I'll do world: V = normalize(cameraPosition - vWorld); f = pow(1.0 - abs(dot(normalize(vWorldNormal), V)), 3.2); color vec3(0.3,0.55,1.0)f1.6; alpha=f. BackSide, additive, depthWrite false. With abs() it glows around limb nicely.

Dipole math (CPU):

B field at local point p (dipole coords, m=(0,1,0), Earth radii units where Re=2 world units — I'll do dipole math in world units with m strength arbitrary):

Field line point for shell L (in units of Earth radii; world units = L*EARTH_R):

Field lines mesh: for each L of [1.5,1.9,2.4,3.0,3.8,4.8,6.0], for each of 10 longitudes (fewer for inner? fine all), lamMax = acos(1/sqrt(L)) - small ε (so endpoints slightly above surface), sample 80 points from -lamMax..lamMax. BufferGeometry with positions & colors (color per L gradient: inner (0.3,0.85,1.0)? choose cyan→deep violet by L: mix((0.25,0.8,1),(0.55,0.3,1), t)). LineBasicMaterial({vertexColors:true, transparent:true, opacity:0.4, blending:Additive, depthWrite:false}). One merged geometry with line strip per line — need separate primitives: use LineSegments by duplicating points (segments pairs) — 71079 segments *2 verts = 11k verts, fine. Build positions array pairs.

Flow pulses on field lines: Points with ~700 particles; each: L, phi, lamPhase moving: lam(t) = lamMax * sin(tspeed + ph)? Real flow direction is along line both ways... pulses travel from one foot to other along line: param s∈[-1,1] → lam = slamMax, s advances with time (bouncing? wrap around). Let pulses go from south to north continuously: s = fract(t*w + ph)*2-1. Position = flPoint. Points small bright white-cyan, glow. These live in dipGroup → world transform automatic.

Aurora curtains: build in dipole frame as described; ring at |lat| 67°:

uv: u = i/N, v=0 bottom,1 top. aRand per column (hash of i) for flicker variation. Shader as planned with uBright, uStorm, uTime. Additive, DoubleSide, depthWrite false. Group scaled during storm around the pole axis: scale.set(s,1,s) with s 1→1.5 — expanding ring radius = equatorward.

Magnetopause: sphere geometry (r=1, 64x48) displaced in shader? Easier CPU-build displaced geometry once, scale via mesh.scale for storm compress (uniform scale ≈ shrink toward earth — acceptable). Build teardrop: for each vertex dir d (unit), μ = dot(d, sunDir=(-1,0,0)); r = Rmp * (1 + 0.5*(1-μ)0.9)?? Let me define: r = Rmp(1.0 + 0.55*(1-μ)); nose (μ=1): Rmp; flank μ=0: 1.55R; tail μ=-1: 2.1R. Also tail should pinch closed? Real magnetotail is open cylinder; visual: close it — fine. Rmp base = 7.2 world units (3.6 Re). Shader: fresnel + streaks (fbm2 on (μ angle, azimuth) - t) + storm brighten; alpha low. Additive, DoubleSide? FrontSide with depthWrite false. Bow shock: same geometry scaled 1.28, fainter, pinker.

Wind deflection uses Rmp_eff = current nose radius = mpScale*7.2. Storm: mpScale 1→0.62 tween with overshoot wobble.

Particles — one THREE.Points:

Uniforms: uTime, uPx (pixel ratio scale), uStorm. Vertex:

Hmm — shimmer should maybe apply mostly to belts; fine globally subtle. Fragment:

Wind update per frame:

Potential flow sphere centered at Earth origin; sun along -x; flow along +x (from sun to Earth). θ measured from +x axis: upstream is θ=π. At θ=π: c=-1, e_r=-x̂..., v_r = U(1-q)(-1), v_θ=0 → v = -U(1-q) e_r = -U(1-q)(-x̂)=+x̂U(1-q). Good: decelerates toward nose stagnation at r=R. Flanks speed up 1.5U.

eθ=(c·e_r − x̂)/s: at general point: eθ points "increasing θ" = away from +x axis toward... at nose side (θ→π): eθ = (c e_r − x̂)/s; c≈-1, e_r≈-x̂ → c e_r ≈ x̂ → eθ→(x̂−x̂)/0 → 0/0; but v_θ ∝ s → product finite: v_θ eθ = -U(1+q/2) s * (c e_r − x̂)/s = -U(1+q/2)(c e_r − x̂). No division needed! Compute directly:

So v = U[ (1 + q/2) x̂ − 1.5 q c e_r ] where q=R³/r³, c = x/r.

Verify nose (e_r=-x̂, c=-1): v = U[(1+q/2)x̂ + 1.5q(-x̂)·... wait −1.5 q c e_r = −1.5q(−1)(−x̂) = −1.5q x̂. v = U x̂ (1 + q/2 − 1.5q) = U x̂ (1 − q). At r=R, q=1 → v=0 stagnation ✓. Flank (e_r=ŷ, c=0): v = U(1+q/2)x̂; r=R → 1.5U ✓. Far: q→0 → U x̂ ✓.

So per particle: q = R³/(r²)^1.5, c=x/r → v = U[(1+0.5q), 0,0] − 1.5q·c·(x,y,z)/r·U. Very cheap! Plus small perpendicular turbulence: add U0.04(sin(t+seed)...).

Precip update:

Precip pool management: freeList array; activeFlags. Simple: precipSlots[i] = {active, x,y,z stored directly in position array}. On capture: find slot via rotating cursor scanning for inactive (cheap).

Belt update analytic: per particle precomputed: L, lamM, wB, wD, ph0, ph1 in Float32Arrays. Per frame:

Quaternion rotate per belt particle: implement inline quaternion-vector rotation (fast formula). Precompute q components.

Colors set at init:

• wind: base (0.45,0.62,1.0) scaled 0.5..1 random; slightly warmer for slow ones.
• precip: (0.3,1.0,0.5) * (0.7..1.2)
• belt: by L: t=(L-1.3)/(5.2-1.3): color = mix(amber(1.0,0.5,0.15), cyan(0.25,0.7,1.0), smoothstep(0.25,0.55,t)) with slot gap: two populations: inner L∈[1.3,2.4] amber-ish; outer L∈[2.8,5.2] cyan→violet. Sample: 30% inner, 70% outer.

Sizes: wind 1.2-2.0; precip 1.8-2.6; belt 1.2-2.2 (smaller, denser = glow body).

aGlow: wind 0.55-1.0; belt 0.5; precip 1.3.

Storm effects on particles: uStorm uniform boosts brightness via shader; also wind U multiplied; belt injection: during storm, shift some belt particles' L? Recompute distribution — skip; instead boost belt aGlow via second uniform? Just uStorm shimmer + aurora boost is enough. Also during storm add "injection" particles: recycle some precip... precip rate naturally up because wind faster & Rmp smaller → more captures.

CME cloud mesh: sphere r=1 shader, scale = R(t). Shader: fresnel edge glow + fbm streaks, alpha = edge * fade(t). Color hot orange-white → cool as expands. Centered at sun. Hide when inactive. Additive, depthWrite false, depthTest false? It should engulf Earth visually — with depthTest true, Earth occludes back half — correct 3D feel. Keep depthTest true.

CME timeline: t=0 launch (audio whoosh, status "CME ERUPTION — en route"); R(t)=6+21t; arrives when R > 62 (sun-to-earth 70 minus mp 7.2): t≈2.7s → stormOn 12s: mpScale→0.62 (spring), aurora uBright ×2.8, wind U ×1.6, Kp→7.7, whistlers ↑, rumble. Then recover over 8s: storm lerps down. Auto mode: storm preset auto-launches every ~45s; active preset rare; quiet never.

Status/Kp: kp = base by wind slider (1..4) + storm (→ 7-8). Display with 1 decimal.

UI wiring straightforward.

Audio: as planned.

Main loop:

Also idle auto-rotate: controls.autoRotate with timer.

Edge: renderer.setAnimationLoop for loop.

Snapshot:

FPS stats element updates every 0.5s: fps + particle count.

Quality badge click cycles Auto→High→Med→Low.

Now — sizes/perf: position updates 25.5k×3 floats/frame = 300KB write/frame — OK.

One more consideration: additive blending with depthTest true for particles: particles behind earth occluded ✓, in front glow ✓. Points sorted not needed for additive.

Aurora curtains depthTest true — Earth occludes far side ✓.

Field lines: LineBasicMaterial linewidth ignored (1px) — with bloom they'll be subtle; opacity 0.35, many lines → decent. Pulses points add life. Good.

Also add a dipole axis indicator? Small line through poles? Skip.

Comets? skip.

Let me also include a subtle "plasmasphere" torus glow? Skip — enough elements.

Camera start: (30, 14, 40) looking at origin; sun off to the left. FOV 55.

Earth at origin. Wind flows +x. Camera will see streams parting around Earth — money shot.

Sun glare: place sun at (-70, 0, 0), radius 5.5, corona quad 48. From camera (30,14,40), sun visible when orbiting left. Good.

Extra: shooting stars? skip.

Write order (chunks to /tmp/mag/index.html):

1. DOCTYPE/head/CSS/HUD DOM (chunk A)
2. importmap + module start: imports, config, quality tiers, renderer/scene/camera/controls, GLSL lib string, sky, sun+corona (chunk B)
3. earth+clouds+atmosphere, dipole group, field lines + pulses, shells (mp+bs), aurora (chunk C)
4. particles system (buffers, init colors, update functions) (chunk D)
5. CME + audio engine (chunk E)
6. HUD wiring, keyboard, snapshot, post-processing, resize, main loop, adaptive quality (chunk F)

Then extract JS and node --check.

Careful bits:

• Quat rotate function:

With dipGroup quaternion (0,0,sin(θ/2),cos(θ/2)). I'll store qd={x,y,z,w} and qdi (conjugate).

• Belt & pulse positions are computed in dipole-local then rotated by qd manually into world (particles are in world space since Points added to scene root). Field-line geometry & aurora & pulses: I could add pulses Points to dipGroup instead → then compute local positions directly, transform automatic. Pulses: add to dipGroup ✓. Belt particles: part of the big Points in scene root → rotate manually. Fine.

• Aurora curtain geometry in dipole local coords, mesh added to dipGroup ✓.

• Shells (mp/bs): scene root, sun-axis aligned ✓.

• Sun/earth/sky: scene root.

Camera-space V in shaders: use cameraPosition uniform (built-in in ShaderMaterial vertex/fragment when using cameraPosition — available in vertex shader as built-in uniform in three's ShaderMaterial? cameraPosition is a built-in uniform in vertex shaders (part of common uniforms). In fragment shader it's NOT automatically available — need to pass varying (vWorldPos) and use cameraPosition... Actually three injects uniform vec3 cameraPosition; into vertex shader prelude for ShaderMaterial. For fragment, it's not included by default. Simplest: compute view dir in vertex shader: vViewDir = cameraPosition - worldPos; pass varying. ✓

Earth fragment needs uSunDir uniform: value = normalize(SUN_POS − 0) = (−1,0,0)... sun at (-70,0,0), earth at origin → direction TO sun from earth = (-1,0,0). Lighting: day side faces -x. In shader: day = dot(nrm, -sunDirToSun?) Define uSunDir = normalize(sunPos) = direction from Earth toward Sun = (-1,0,0). day = dot(n, uSunDir) > 0 on sun side ✓.

Camera initial pos (26, 13, 36): dot with sun dir... camera at +x side sees Earth's night side initially! Earth dayside faces -x. So initial camera should be at sunward side: (-26, 13, 36)? Then looking at Earth: day side visible, sun behind camera-left... Sun glare out of frame; wind streams coming toward viewer-ish. Better: camera at (4, 16, 44) side view: sees terminator, wind flowing left→right, bow shock visible, sun at left edge maybe in frame. Side view is the money shot for the magnetosphere (classic diagram). Camera (6, 15, 42), target (0,0,0). Sun at (-70,0,0) — direction from camera: (-76,-15,-42) — to the left and slightly behind target; FOV 55 vertical; horizontal wider; sun might be just outside frame at start; orbiting reveals. Fine. Earth day side (-x) visible at glancing angle — terminator view, pretty.

Hmm — but with day side facing -x and camera at +z, we see half-lit Earth: dramatic crescent-ish.

• Points size: gl_PointSize = aSize * uPx * (240.0 / dist). At dist 45: size 1.62(dpr)5.3 ≈ 17?? too big. Let me calibrate: worldSize≈0.06 units for wind particle? gl_PointSize = size_world * screenH / (2tan(fov/2)dist). screenH≈900, fov55 → factor 900/(20.5206)=864. size 0.06864/45 ≈ 1.15px. So use gl_PointSize = aSize * uScale / dist with uScale ≈ 8640.06 ≈ 52. Set aSize wind≈0.9-1.5 (then px ≈ 1.0-1.7 at 45 dist, 3-5 when close at 15). Clamp 1..8uPx... uPx multiply for dpr: points are in device px: uScale = pixelRatio. I'll set uScale uniform = renderer.domElement.height/(2tan(fov/2)) * 0.055, updated on resize/tier. Sizes per particle ~0.7..1.6 multipliers. Good.

• Additive colors: keep small values (0.3-1.2) so thousands don't blow out; bloom threshold 0.55.

Let me also decide precip capture zone: r < Rmp*0.72 → with Rmp 7.2: r<5.2. Plus chance. Also require |lat|>50° in dipole frame so cusp capture looks right? Particles at low lat close to Earth are rare anyway (they're deflected). Add condition: local |py|/r > 0.55 (poleward). capRate tuned so a few hundred active at once.

Aurora flux: on precip death auroraFlux += 0.02; auroraTarget = base(0.55) + flux smoothed (decay 0.5/s) + storm*1.8; clamp ≤ 3.2.

Whistler rate: base 0.05/s + storm 0.5/s; schedule check each frame.

Also precip during quiet is rare → aurora mostly base glow + wind captures. Good.

Belt injection visual: on storm start, bump belt aGlow to 1.2 decaying — store beltGlow global uniform? aGlow is attribute; simpler uniform uBeltBoost in shader mixing... just reuse uStorm for shimmer; enough.

Now the HUD DOM ids: status, stats, quality, hint, help, panel controls: windRange, windVal, btnCME, tglField, tglShell, tglBelt, presets btnQ/btnA/btnS, btnSound, btnSnap, btnHelp. Flash div.

Let me write CSS similar to gossamer but space-blue theme: --amber → cyan (0.45,0.85,1) accent #7fd0ff, secondary #b79bff.

Title: MAGNETOSPHERE; subtitle: "SOLAR WIND × EARTH'S MAGNETIC SHIELD".

Help overlay: grid of keys + legend + credits.

I think I'm ready to write. Length ~1300-1600 lines. Let me write chunk by chunk, being careful with backticks inside JS template literals (GLSL) — inside single-quoted heredoc no shell interpolation, safe.

One important check: in fragment shaders, three r170 ShaderMaterial: gl_FragColor works (WebGL2 auto-converted by three? Three injects #version 300 es only for RawShaderMaterial... For ShaderMaterial, three uses GLSL1-style syntax transpiled: gl_FragColor OK (three prefixes with compatibility defines). Yes — all house demos use gl_FragColor with ShaderMaterial; fine.

texture2D OK.

Let me write Chunk A (head + CSS + HUD).

CSS plan (space theme):

Buttons etc. like gossamer.

HUD DOM:

Panel width min 240. Wind value shows km/s.

Help content:

Now chunk B: module top + renderer + sky + sun.

I'll be careful: import statements at top of module.

Quality tiers:

bloom = resolution scale.

Renderer: antialias true (with composer MSAA doesn't apply to RT... composer renders to non-MSAA targets; antialias:true on canvas has no effect with composer. Common approach: composer with multisampled RT: composer.renderTarget1.samples=4? In r170, can set renderer.getPixelRatio ... Simplest house style: no MSAA, rely on bloom/grain. Fine — glowy scene, no hard edges except Earth sphere edge (slight alias acceptable; could enable FXAA... skip).

Set renderer.setPixelRatio(min(dpr, tier.dpr)).

Camera: fov 55, near 0.1, far 3000. pos (6,15,44).

controls: enableDamping .06, minDistance 4.5, maxDistance 260, autoRotateSpeed 0.4.

Sky sphere:

Force far depth trick. Sphere radius 1200 (far 3000 ok).

Fragment sky:

Careful: loops with different constants — just write two blocks manually.

Star brightness: additive into col; values moderate so bloom picks up brights.

Sun sphere:

sunMat fragment: as planned; uniforms uTime. vNormal (object space = normalized pos for sphere), vWorld, vView.

Corona: PlaneGeometry(52,52), MeshBasic? custom shader additive; onBeforeRender? Simply each frame corona.quaternion.copy(camera.quaternion) (billboard). Position sun. depthWrite false, depthTest true... sun sphere writes depth; corona drawn after? renderOrder: corona.renderOrder=1; fine.

Also add tiny "flare" brightening: uFlare uniform boosted at CME launch (decays) — corona brightness ×(1+flare), nice cue.

Earth group: earthSpin group (rotates y): contains surface mesh; clouds mesh separate child with faster rotation. Tilt Earth? Geographic axis — keep y-up no tilt for simplicity (dipole tilt provides the visual asymmetry). Actually add slight axial tilt -x? Dipole tilt is what matters; keep Earth untilted.

Atmosphere shell in scene root (not spinning).

Chunk C: dipole helpers, field lines, pulses, shells, aurora.

Field lines construction:

Wait flPoint with EARTH_R multiplier: r_world = LEARTH_Rcos²lam. L=6.2 → equatorial radius 12.4 ✓ inside mp nose 7.2? Field lines at L=6.2 cross equator at 12.4 > mp nose 7.2 on sunward side — real field lines beyond ~10Re are swept into tail (open). Our closed dipole lines to 12.4 poke through the sunward shroud — visually a bit off but lines are symmetric; real magnetosphere: dayside lines compressed. Improvement: dayside compression — squash field lines on sunward (-x) side: scale x: if x<0, x *= 0.62 for outer shells progressively... Simple: apply compression factor to all field-line points: x' = x * (x<0 ? comp(L) : 1) with comp = 1 for L<3, down to 0.55 for L=6.2 — creates realistic asymmetric dayside. But then belt particles analytic should match? Belts are L≤5.2 — slight mismatch acceptable (belts drift mostly symmetric). Hmm, mismatched lines vs belt particles might look sloppy up close. Alternative: don't compress; keep pure dipole (textbook look) — fine and honest; the shroud at 7.2 vs outer lines 12.4 crossing it — actually visually INTERESTING (lines threading the boundary, like reconnection). Real magnetosphere has open lines tailward. I'll compress mildly: factor 0.8 for outermost shell only? Let me keep pure dipole — cleaner code, fine look. Actually, hmm, lines visibly poking through the magnetopause shell toward the sun looks wrong to anyone who knows. Compromise: limit LSET to ≤ 5.0 (equator 10 units) and set mp nose 7.2, flank 11.2, tail 15 → outermost line 10 < flank 11.2 ✓ mostly inside; near nose 10 > 7.2 ✗ pokes. Dayside field lines ARE compressed inside 10Re in reality...

Decision: implement dayside compression properly in flPoint for BOTH lines and belts:

smoothstep JS impl. L=6.2: 0.62 factor → nose extent 12.4*0.62=7.7 ≈ at shroud ✓ nice. L=3: 1.0 ✓. Apply same in belt positions — consistent.

Pulses: 600 pts on random L∈LSET subset & φ, param s. Update per frame CPU (600 cheap), geometry in dipGroup → local coords, so flPoint local ✓.

Chunk D: particles. All buffers; update fns wind/precip/belt with dt & t; capture; storm factor; quality setter (active counts).

Chunk E: CME + Audio.

Chunk F: HUD, post, loop, resize, snapshot, adaptive.

Uniform sharing: many shaders need uTime; create const uTime={value:0} and reuse object in all materials ✓ (three allows same uniform object across materials — yes, commonly done).

Storm state: let storm=0, stormTarget=0; storm lerps toward target at rate 0.8 up / 0.12 down. uStorm={value:0} shared.

mpScale current: spring: mpS += (mpTarget-mpS)*min(1,dt*2.2); plus wobble: mpS_eff = mpS + 0.03sin(t3)*storm? Add turbulence in shader instead.

Wind speed: sliderU 0..1 → U = 7 + 13sliderU (units/s) × stormBoost(1+0.7storm). km/s display: 280 + 520sliderU(1+0.6*storm).

Kp: 1+3sliderU + storm(5) → clamp 9, display 1 decimal.

Capture rate: 0.55dt chance when in zone × (1+2storm).

Now audio engine code (compact but complete):

Graph:

whistler():

cmeLaunch(): noise src → hp 300→ sweep gain env 0.001→0.25→0 (2.5s); osc saw 90→40 drop 2s gain 0.12. cmeHit(): sine 46 Hz gain 0.5 decay 3s exp; noise → lowpass 120 → gain 0.4 decay 2s; rumbleGain swell 0→0.22 over 1s hold while storm, release after: implement rumble as persistent noise→lp(90)→rumbleGain(0)→master; setRumble(level). ui blip: square 720Hz, 0.04s, gain 0.05. setWind(v): windGain.gain target 0.04+0.13v; bp.frequency 320+820v. mute toggle: master.gain.

Impulse:

All start calls after ctx.resume() (gesture). AudioSys.init() called on first pointerdown/keydown; btnSound toggles muted → master.gain.value = muted?0:0.9, update icon.

Watch out: AudioContext creation might throw in some browsers if not allowed — wrap try/catch.

Main loop pseudocode:

Adaptive: every frame accumulate; each 2.5s: avg fps; if auto mode: if fps<44 && tier>0 → tier--, apply; if fps>57 sustained (count) && tier<2 → tier++. applyTier: set dpr, bloom res (bloomPass.setSize? UnrealBloomPass resolution via setSize — composer.setSize handles; recreate bloom pass? Simplest: bloomPass.resolution? UnrealBloomPass has setSize(w,h) called by composer. For tier bloom scale, recreate composer? Overkill — bloom perf scales with canvas size anyway (dpr). Keep bloom fixed; tier changes dpr + particle counts only. ✓ simpler.)

applyTier(i): active counts set; renderer.setPixelRatio(min(devicePixelRatio, tier.dpr)); onResize(); update badge text.

Particle count change: windActive etc.; update loops iterate to active count; beyond → park positions far (do once at apply: fill inactive range with 1e6? alpha: set aGlow 0 for inactive at init/apply ✓ AND position (0,-1e6,0) once).

Precip slots: precipActive target count per tier; capture only fills up to active; existing beyond tier limit: let them finish naturally (kill switch: if slotIdx>=precipActive && active → force kill → respawn wind). Simple.

Belt: beltActive; inactive parked.

Now write everything. Also remember <div id="app"> container? Canvas appended to body directly; gossamer used #app fixed. I'll do renderer.domElement → document.body.appendChild with CSS canvas fixed inset 0.

Snapshot flash: #flash div white opacity transition.

Also touch: OrbitControls handles; buttons fine. preventDefault context menu? Add cvs.addEventListener('contextmenu',e=>e.preventDefault()) hmm right-drag orbit pan — leave.

Double-click canvas → launch CME too (nice for touch). dblclick event + also two-finger? dblclick ok. Mobile double-tap fires dblclick in most browsers with touch-action none? Not guaranteed. CME button exists; fine.

Now write the files. I'll assemble with a few heredoc chunks. Watch: content contains EOF? no. Use unique delimiters.

Let me carefully compose the code now. I'll write chunk A+B first.

Additional detail — grade pass shader (cool space grade):

Order: bloomPass → gradePass (grade last, writes to screen ✓).

Bloom: strength 0.9, radius 0.55, threshold 0.5.

Let me now also define belt sampling:

Bounce: lamM = 0.18+rand*0.5 (10°-30°); wB = 0.6+1.3/L * (0.8+0.4rand); wD = 0.30/Math.pow(L,1.15) * (0.85+0.3rand) → inner L1.5: 0.30/1.6=0.19 rad/s → full drift 33s; outer L5: 0.30/6.4=0.047 → 134s. Differential visible ✓. Hmm inner faster — good look.

Precip: speed = 2.5 + 30pow((EARTH_R1.05)/r, 3)? At r=2.1: 2.5+30~0.95≈30 units/s too fast; travel from r=5 to 2.1 quick. Use speed=3+9pow(2.2/r,2)? r=5: 3+1.7=4.7; r=2.3: 3+8.3=11. OK decent (~0.7s fall).

Gyration jitter: perpendicular random: add (rand-0.5)*0.05 each axis per frame → random walk shimmer ✓ cheap.

Wind spawn: x=-58; disc: y=(rand-0.5)*84, z=(rand-0.5)84 → square; use disc radius 42: r=42sqrt(rand), θ. Some biased toward center for density near earth? uniform ok.

Despawn: x>64 or |y|>52 or |z|>52 or r<... (if somehow inside earth r<2.5 → respawn).

Capture check zone: r < R*0.75 and poleward in dipole frame: compute local y: py_local = rotation... need worldToDipole per candidate only (rare) ✓.

On capture: find precip slot: cursor scan up to 40 tries; if none free, skip.

Precip die → auroraFlux += 0.012*(1+storm) and respawnWind(i_slot?) — precip slot frees; the WIND particle that was captured... when captured, wind particle i is deactivated?? Wind particles are fixed-count active. On capture: convert THAT wind particle: mark mode[i]=PRECIP, move its position data to a precip slot — but position array layout fixed per index. Simpler: when wind i captured: copy its position to free precip slot j (activate), and respawn wind i immediately (new at spawn plane). Wind count constant ✓. Precip slot count fixed pool ✓.

mode array only for precip slots active flag: precipOn Uint8Array(MAXP).

Now belt positions rotate by dipole quat: qd fixed. rotV per particle ✓.

Pulses: geometry positions local (no rotation needed, added to dipGroup).

Also add faint equatorial ring current glow? skip.

Compose the aurora geometry:

Note dy for south: sign=-1 ✓ ring mirrored.

Aurora shader:

Additive DoubleSide depthWrite false. renderOrder after earth.

Note uv.x wraps 8× — fbm2 continuous? vnoise2 uses floor(p) — continuous across uv.x integer boundary ✓ (fbm of lattice noise is continuous). ✓

Shell shader (mp/bs): geometry: SphereGeometry(1,72,48) displaced CPU:

then mesh.scale.setScalar(R). Wait scale scalar scales teardrop ✓ (shape fixed, size animates). R = 7.2mpS; bow shock scale = 8.9mpS? Bow shock shouldn't compress as much... same factor fine.

Shell fragment:

Side: DoubleSide? FrontSide with depthWrite false; seeing both near/far side fresnel — additive DoubleSide nicer. Use DoubleSide, alpha modest (0.10 mp, 0.055 bs). transparent true.

vP = local position before scale — pass object-space position ✓ (teardrop baked, mu from object space ✓).

CME cloud shader: sphere r=1 displaced with fbm bumps in vertex:

scale=R(t). uAlpha ramps in 0→0.5 first 0.4s, fades after passing earth (t>tHit+2 → fade to 0 by +5). Also cloud center sun + slight drift +x? Centered at sun expanding — engulf ✓.

Storm trigger at R(t)≥ 70-6=64 → tHit=(64-6)/21≈2.76s after launch. Then stormTarget=1; after 11s stormTarget=0. CME visual continues to R=150 fade.

Also auto-CME in storm preset: every 40±15s if no active CME.

Pulses: 550 particles: random L from LSET weighted outer more visible? uniform; φ rand; speed w = 0.35/L; s0 rand. Update: s = fract(s0 + tw)... direction: from -lamMax..+lamMax maps fract 0..1. Position flPoint(L, (s2-1)*lamMax, φ). Both hemispheres covered across particles ✓. Color: white-cyan (0.7,0.95,1.2), size ~1.4, alpha in shader pulse brightness×(0.6+0.4 sin). Add to dipGroup, Points shader similar to main points but local.

Actually reuse same Points ShaderMaterial? Different uniform set fine — make small dedicated material; simpler: clone of pointMaterial with own uniforms. I'll write a makePointsMaterial() factory used by both (main world points & pulses in dipGroup). ✓

Now HUD status text: SOLAR WIND 462 km/s · Kp 3.2 · QUIET|ACTIVE|STORM WATCH etc. Also CME transit: "⚠ CME IN TRANSIT".

Stats: fps 60 · 25.6k particles.

I think the design is fully baked. Write code now.

Chunk sizes manageable: A ~130 lines, B ~230, C ~330, D ~260, E ~230, F ~330.

One more check — three r170: SphereGeometry, fine. THREE.MathUtils.degToRad ✓.

Points frustumCulled: set false (positions dynamic) ✓ important! Same for pulses; shells static keep culling (scaled — culling uses geometry bounding sphere × scale ✓ fine).

Corona: frustumCulled false (billboard moves only by rotation—position fixed; fine keep true).

CME sphere frustumCulled true fine (scaled r up to 150 — boundingSphere scales ✓).

Set posAttr.setUsage(THREE.DynamicDrawUsage) ✓.

For aGlow updates for precip slots (activate/deactivate) — set glowAttr needsUpdate when changed (rare writes but flag every frame cheap for 25k*1 floats? glow updates: I'll just mark needsUpdate when any precip spawn/die happened this frame (flag).

Wind colors: slight blue variance + slow particles warmer: f factor.

Let me now write. Also make sure NO backtick template literals containing ${} unintentionally... I'll use them intentionally for shaders (no ${} inside GLSL). In JS strings with ``` careful.

Also HUD: wind slider input event → sliderU; presets set slider + storm modes: quiet: slider 0.18, autoCME off; active: 0.45, autoCME rare (60s); storm: 0.75, autoCME 35s. Preset buttons update .off classes.

Toggle buttons field/shell/belt: visibility flags on groups + .off class.

Keys: c (CME), f, m, b, a (audio), p (snapshot), h (help), Escape, 1/2/3, + maybe 'o' autorotate? skip.

Status element id status; hint fade after 12s (opacity 0 via style transition).

Let me write chunk A & B now.

Actually also decide: canvas cursor grab. ✓

Writing Chunk A+B:

********************************************************************************************************na.

Whoa — time progress is already 78%?! The maxTime threshold is at 50%. Wait, "timeProgress":0.78 means I've used 78% of the allocated time already? That's strange — I've only done a few operations. Maybe the clock started at the task's scheduled time (9:20 AM) and includes idle time. Iteration progress is 0.01 though.

Either way, I need to move FAST. Let me accelerate dramatically: write the remaining chunks quickly but efficiently, then validate and deploy. I must be efficient — write big chunks in fewer operations.

Let me write chunks C, D, E, F in as few commands as possible, then node --check, deploy, update index, done.

I'll write C+D in one command, E+F in another.

*****************************************************************************************************************************************************************************************ng.