The user wants a realistic black hole using Three.js in a single HTML file. This is a classic shader-heavy task. Most realistic approach: render a black hole using a raymarched/raytraced shader on a fullscreen quad. Contents: 1. Schwarzschild geodesic approximation (gravitational lensing) — light bending 2. Accretion disk with Doppler beaming (relativistic beaming — one side brighter, blueshifted) and gravitational redshift 3. Photon ring / Einstein ring 4. Background starfield (procedural, or generated texture) 5. Gravitational lensing of the disk (upper and lower images of the disk appear above/below the black hole — like Interstellar's Gargantua) I should do this properly. Standard approach: fullscreen quad with a fragment shader that traces light rays backward from the camera through a curved spacetime around a Schwarzschild black hole. Geodesic integration step by step, at each step check for intersection with the disk plane (y=0 in the disk region), accumulate disk emission with Doppler factor and redshift, continue until either captured by the horizon or escaped to the sky, then sample the procedural starfield. Physical units: use r_s = 1 (Schwarzschild radius). Disk from ISCO (r=3 r_s) outward to ~12 r_s. Camera at about 15–20 r_s with a slight inclination. Integration: position update with a bending potential. A common trick (used in many WebGL black hole shaders) is: ``` vec3 dir; vec3 pos; for steps: float r2 = dot(pos,pos); float h2 = ... ``` Better approach: use the geodesic equation in the "equivalent potential" form. Popular simplified method: ``` accel = -1.5 * h2 * pos / pow(r2, 2.5) ``` where h2 = |pos × dir|^2 is a conserved quantity (squared specific angular momentum). This gives exact null geodesics for Schwarzschild in these coordinates (with r in units of r_s/… actually r_s = 1). Let me recall: for null geodesics in Schwarzschild, the orbit equation: d²u/dφ² = -u + (3/2) r_s u². A commonly used vector form in shaders: a = -1.5 h² r̂ / r⁵ (i.e. acceleration = -1.5 * h2 * pos / r^5). Yes, many shaders use: ``` vec3 h2 = cross(pos, dir); h2 = dot(h2,h2) — compute once, it's conserved dir += -1.5 * h2 * pos / pow(dot(pos,pos), 2.5) * dt pos += dir * dt ``` With adaptive step size (smaller near the hole). This is physically accurate enough. Event horizon: capture if r < 1 (in r_s = 1 units, photon sphere at r = 1.5). Capture condition r < 1.0? Event horizon r_s = 1. Escaped if r > some escape radius (~100) and moving outward. Disk intersection: check for sign change in pos.y between steps; compute crossing point; if radius is between diskInner and diskOuter, accumulate emission. Actually for realism we should handle multiple crossings (lensed image of the far side of the disk appearing above the hole) — with accumulation via semi-transparency, yes: keep marching, add emission with transmittance. Disk shading: - Keplerian velocity: v = sqrt(M / (r - 2M))? In Schwarzschild, orbital velocity measured by a static observer: v = sqrt(r_s/(2(r - r_s)))? Let me recall: in units of r_s=1, v = 1/sqrt(2(r-1))? Circular orbit Keplerian velocity for r > 3 (ISCO at 3 r_s = 6M): v = sqrt(M/(r - 2M)). With r_s = 2M = 1, M = 0.5, so v = sqrt(0.5/(r-1)). At ISCO r=3: v = sqrt(0.5/2) = 0.5. Right — ISCO orbital velocity is 0.5c, which is the known result. - Doppler factor: δ = 1/(γ(1 - v·n̂)) where n̂ is direction of photon propagation toward observer... In backward raytracing the ray direction is from camera toward scene; velocity at emission point: v_vec = ω × pos (tangential). Doppler: g = sqrt(1-v²)/(1 - dot(v̂, photonDirToCam)*v)... Standard: g = 1/(γ (1 - β cos θ)) where θ is angle between emitter velocity and photon direction in observer frame. When tracing backward, the photon direction traveling from disk toward camera is -dir_current (normalized). So doppler = 1/(γ(1 - dot(v, normalize(cameraPos - hitPos))... )) hmm, more simply: g = sqrt(1-β²)/(1 - β·cosθ), cosθ = dot(v̂_dir, dirToCamera). - Intensity scales by g^3 or g^4 (relativistic beaming; bolometric g^4, monochromatic g^3). For dramatic effect use around g^3.5. - Gravitational redshift: multiply by sqrt(1 - 1/r) (r_s=1). Can be folded into the combined shift. - Temperature/color: map effective temperature to blackbody color. Disk temperature ∝ r^{-3/4} (Shakura-Sunyaev). Inner hot (bluish-white), outer cooler (orange-red). Multiply by Doppler shift to shift color: implement color shift by temperature scaling — approximate with a blackbody palette function and sample at T*g. - Disk texture: procedural noise for turbulent filaments, differential rotation streaks: use polar-coordinate noise with rotation shear: angle + k*log(r) or streaks by r-dependent angular offset. Use fbm noise stretched in azimuth. Background stars: procedural hash-based stars + faint nebula/milky way with fbm. The lensing bends the ray, so sample by the final direction — that produces the lensed starfield. Also add subtle bloom/glow effect? Post-processing bloom without a render target is complex; instead do it in-shader: add an additive glow around the photon ring from the bending? Actually the photon ring emerges naturally from integration. But subtle vignette and film-grain-like treatment is nice. We can also do cheap bloom: render to a lower-resolution target and blur... that adds complexity. Alternative: single-pass shader already looks good. But "most realistic" — bloom helps a lot. Let me think about the architecture: - THREE.WebGLRenderer, scene with fullscreen triangle, orthographic camera, ShaderMaterial. - Uniforms: time, resolution, camera params (position derived from orbit angle, inclination), quality. - Mouse drag to orbit camera around hole; scroll to zoom. Slight auto-orbit. - Quality scaling: adaptive step count based on pixel ratio / device. Could also do a two-pass bloom: render scene to a render target, downsample + threshold, blur, composite. Three.js's UnrealBloomPass requires the postprocessing addon — external script. User said include ``` Then import EffectComposer, RenderPass, UnrealBloomPass, OutputPass. That's reliable. But UnrealBloomPass + tonemapping: fine. However — performance: full-res raymarching with 300+ steps + bloom on low-end hardware could be slow. Add quality selector and adaptive resolution (cap renderer pixel ratio, render at 0.75 scale option). Also auto-detect: measure fps and lower pixel ratio. Let me also add HUD: title, some live readouts (M = 4.3×10⁶ M☉ vibe, FPS, r coordinate), controls explanation. The deliverable is the black hole itself; a minimal observatory-style HUD overlay with distinctive typography pairs a display face with a mono for readouts. Good. Fonts: Google Fonts via . Display: something cinematic/technical — Michroma or Unica One; body/readouts: Space Mono or IBM Plex Mono. Michroma + Space Mono feels like a science-instrument interface. Use Michroma for title, IBM Plex Mono for data. UI design: corner-frame HUD, top-left title "GARGANTUA / SGR A*-class simulation" — or something like "SCHWARZSCHILD LENS — relativistic ray tracer". Bottom: controls hint, live telemetry (camera radius in r_s units, inclination, Doppler toggle?). Small buttons: disk temp palette? Let's keep it focused: orbit-drag, scroll-zoom, keys: [D] toggle Doppler beaming, [G] toggle lensing? Toggles are fun and educational. Buttons: small uppercase mono, invert on hover. Also a subtle "accretion" info panel showing physics notes. Keep it tasteful. Now the shader — the core. Let me write it carefully. Vertex shader: fullscreen triangle. ```glsl void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); } ``` Use raw BufferGeometry with 3 vertices for a big triangle. Fragment shader plan: Uniforms: - uTime - uRes - uCamPos (computed from spherical orbit: radius R, inclination θ, azimuth φ) - uCamMatrix (lookAt basis) or pass right/up/fwd vectors. - uFov (focal length) - Quality uniforms: uSteps, uDiskSteps? Use loop with #define MAX_STEPS. Camera basis computed CPU-side: fwd = normalize(target - pos), right = normalize(cross(fwd, up)), up2 = cross(right, fwd). Pass as mat3. Ray direction: rd = normalize(fwd + uv.x*tanFov*aspect*right + uv.y*tanFov*up2). Integration: ```glsl vec3 p = camPos; vec3 v = rd; float h2 = length(cross(p, v))^2? ``` Careful: for the geodesic equation in these "Schwarzschild-like" coordinates, we integrate: dv/dλ = -1.5 * h² * p / r⁵ h² = |p × v|² is conserved along the geodesic (computed once at start). dp/dλ = v. Units where r_s = 1 (so horizon at r=1, photon sphere at r=1.5, ISCO at r=3). Adaptive step: dt = clamp(0.02 * r? ...). Common choice: dt = 0.08 * max(r-1, 0.1)?? Let me think: near the photon sphere we need fine steps; far away, larger. dt = 0.05 + 0.1*clamp((r-3)/10, 0, 1)? Let me make it: dt = 0.035 * (0.4 + r*0.25) clamped... I'll tune in my head: camera is at r≈18; total path ~40; want 250-400 steps. dt avg ~0.12 → 330 steps. Near hole r~3 → dt small ~0.05. dt = 0.012 + 0.02*r, clamped to ≤ 0.15? r=18 → 0.37 clamped 0.15. r=3 → 0.072. r=1.5 → 0.042. Good. Total steps ~400 for far escape; many rays escape quickly once out past r=40 moving outward → break. Escape condition: r > 45 && dot(p, v) > 0 → sample sky with normalize(v). Capture: r < 1.0 + tiny value → black (well, horizon = pure black; maybe no faint contribution). Also if steps exhausted → treat as captured? Treat as sky to avoid artifacts; better: treat as escaped using current v. Disk crossing: prevY = p.y before step; after moving p.y has opposite sign → crossing. Compute tCross = prevY/(prevY - p.y); pcross = pprev + v*... Let me do this standard way: keep `pp` (prev position). After advancing, if sign(pp.y) != sign(p.y): t = pp.y/(pp.y - p.y); hit = mix(pp, p, t); rr = length(hit.xz). Hmm, hit radial distance: length(hit.xz). If rIn < rr < rOut: shade the disk, accumulate: col += trans * emission; trans *= (1 - alpha*something)? For realism, treat disk as emissive with slight absorption. Many implementations just accumulate with transmittance to preserve lensed multiple images. Use per-hit diskOpacity (e.g. density-based alpha 0.85); trans *= (1-alpha). If trans < 0.01 break. Disk emission shading function: ```glsl vec3 diskColor(vec3 hit, vec3 rd, float rr) { float angle = atan(hit.z, hit.x); // Keplerian angular velocity for texture shear: Ω ∝ r^{-3/2} float rot = uTime * omega(rr) — but shear in noise: use angle + k*sqrt... ``` For streaks: define a noise coordinate: vec2 q = vec2(log(rr)*4.0, angle*3.0 + uTime*Ω(rr)*something) — but angle wraps at ±π: seams in noise. Use 3D noise on hit position rotated by time*Ω? That requires rotating hit by angle depending on radius — per radius. Standard trick (from many black hole shaders): swirl = angle + 1.5*log(rr) etc, with noise(vec3(cos(sw)*rr, sin(sw)*rr, time))... hmm, actually using the hit.xz directly in noise already avoids seams; to create differential rotation, offset angle by time*Ω(rr) then reconstruct: vec2 pos2 = rr*vec2(cos(a'), sin(a')) where a' = angle + uTime*Ω(rr). That gives sheared rotating texture with no seam. Ω(rr) = k / pow(rr, 1.5) (Kepler). Density: fbm of pos2*freq, stretched azimuthally — use anisotropy: multiply angular coordinate before reconstruction by a factor... more simply: n = fbm(vec3(pos2*1.2, uTime*0.02))? Rotation already in pos2. Add fine filaments: 4-5 octaves. Radial falloff: brightness peaks near inner edge: I ∝ (rIn/r)^3 or use: bright = pow(rIn/rr, 2.6) with smoothstep cutoff near inner (no emission inside ISCO... actually there's some plunging region; add slight emission just inside ISCO tapering to horizon? keep cutoff smooth at rIn). Temperature → color: base T(rr) = Tmax * pow(rIn/rr, 0.75). Doppler/gravitational total shift g. Sample blackbody color at T*g. Implement blackbody approximation function that returns RGB from temperature (e.g. Tanner Helland fit or a simple polynomial). Range: Tbase inner ~6500K, outer ~1200K, times g. Blueshift side should look whiter/bluer, receding side redder — auto-handled by temp scaling. Doppler calc: velocity direction: tangential: v_dir = normalize(vec3(-hit.z, 0, hit.x)) (prograde). β = sqrt(0.5/(rr-1.0))? From earlier: v = sqrt(M/(r-2M)), M=0.5 → β = sqrt(0.5/(rr-1)). At rr=3 → 0.5 ✓. Clamp rr ≥ 3 (only disk is beyond ISCO anyway; plunging emission region would need separate velocity; fine). Photon direction toward camera ≈ normalize(camPos - hit)? More accurate: direction photon travels at emission ~ -v (our ray direction reversed) but the ray is bent; locally at hit the photon direction toward the camera is -normalize(v_current). Use that: dirToCam = -normalize(v). g_doppler = sqrt(1-β²) / (1 - β * dot(v_dir, dirToCam)). Wait, sign: standard relativistic Doppler: observed frequency f_o = f_e * sqrt(1-β²)/(1 - β cosθ) where θ is angle between source velocity and photon direction (from source to observer) measured in observer frame. If source moves toward observer, cosθ... photon direction from source to observer is d; source velocity v; approaching means dot(v, d) > 0 → denominator (1 - β·dot) < 1 → blueshift ✓. g_grav = sqrt(max(0, 1 - 1/rr)). g_total = g_doppler * g_grav. Intensity ∝ g^4-ish (beaming). Use pow(g, 3.5) for visual appeal. Also multiply base emission. Transparency: alpha = clamp(density * radialFalloff, 0, 1). Also the disk should be somewhat thin; no vertical extent needed (plane). Optionally add a slight volumetric haze above/below disk? skip; keep as plane with soft noise. Multiple crossings: since the lensed rays cross the plane multiple times, accumulation loop handles it. Sky: procedural. Function sky(rd): - Milky way band: intensity from fbm concentrated near a great-circle plane: band = exp(-pow(dot(rd, bandNormal)*2.5, 2)) times fbm turbulence, bluish/warm color variation. - Stars: hash grid — take rd, project to get cells: use 3D cellular: take rd, id = floor(rd * N)?? Stars by direction: standard: convert to spherical (θ,φ), cell on it, hash for star presence, brightness with falloff → but distortion near poles. Alternative: 3D Voronoi-ish on direction scaled: p = rd * 300; id = floor(p); star in each cell. In 3D grid the stars appear in shells but since we only see directions, looks OK; density roughly uniform. Cheaper: 2-octave: stars = pow(hash-based spike...). Let's do this: 3D grid of direction*220, random point per cell, distance to point → intensity = smooth falloff with tiny radius → gives nice round stars. 2 layers with different scales. Twinkle subtly with time? The lensing is static, but if rays move, the star field warps naturally. Slight twinkle is nice but might shimmer during camera motion; keep it modest. Nebula colors: teal/amber/deep blue. Use palette: deep blue #0a1030, warm dust #3a2a20, hint of teal. Milky way leans warm white. Tonemap: ACES-like. Then bloom pass adds glow. Also add subtle lens flare? No — keep physical. Gravitational dimming of the sky? skip. Now bloom via UnrealBloomPass with strength ~0.6, radius 0.8, threshold ~0.75. Tonemap afterward via OutputPass? Order: RenderPass (no tonemap in shader? renderer.toneMapping = ACESFilmic and OutputPass applies). With EffectComposer: set renderer.toneMapping = THREE.ACESFilmicToneMapping and outputColorSpace; RenderPass renders in linear, bloom in linear, OutputPass tonemaps. But my shader outputs already-tonemapped color? Better: shader outputs linear HDR values (intensity can exceed 1), let OutputPass do ACES. So fragment shader: compute color in linear, gl_FragColor = vec4(col, 1). Bloom threshold in linear ~1.0. Good. Exposure: uniform-driven exposure multiplying the linear color (or renderer.toneMappingExposure; OutputPass respects it? OutputPass reads toneMappingExposure — yes uses renderer settings). Camera controls: pointer drag → azimuth/elevation (clamp inclination to avoid poles: -1.35..1.35 rad?) actually allow near edge-on: default inclination is slightly above plane (Interstellar-like ~5-10°). Default camera radius 16 r_s? Distance in units where r_s=1: r_s of Sgr A* is huge; in our units the camera at r=16, hole visually subtends ~2*~(2.6)/16 rad (shadow radius 2.6 r_s) ~ nice. Zoom: 6..60. Slow auto-orbit when idle (dΩ/dt ~0.02 rad/s), pause on interaction, resume after 4s idle. Inertia on drag for smoothness (velocity decay). Also slight camera bob? No — keep stable, scientific. Telemetry HUD updates: camera radius (in r_s), inclination degrees, FPS, frame time, ray status? show "λ-integrator: 300 steps" etc. Also a toggle state indicator. Toggle keys: - [D] Doppler beaming on/off (uniform uDoppler) - [L] Gravitational lensing on/off? Turn lensing off = straight rays: cool comparison! When lensing off, h2 accel = 0 — disk looks like simple flat ring; good demo. - [B] Bloom? skip. - [Q] Quality cycle: Low/Med/High → adjust pixel ratio and step count (uniforms). Buttons in UI mirroring keys for touch users. Also touch drag. Now performance: full-res shader with 300+ steps + bloom on low-end hardware could be slow. Add quality selector and adaptive resolution (renderer pixel ratio cap, render at 0.75 scale option). Also auto-detect: measure fps and lower pixel ratio. Additional flourishes for polish: - Loading fade-in (shader compiles). - Subtle film grain in final composite to avoid banding in black regions. Add dithering in shader: col += (hash-0.5)/255. - Vignette? subtle. HUD styling: dark space background behind canvas; canvas fills viewport; HUD elements absolute; corner brackets via CSS borders; monospace readouts with wide tracking; small caps display font for title. Palette: HUD text warm white (#e8e4d8), accent amber (#ffb347?) — amber echoes the accretion disk. Plus secondary cool grey-blue. Add "event log" line? Might be too much. Small footer text: "Schwarzschild metric · null geodesics integrated per-pixel" etc. Intro: brief fade + HUD elements stagger in with CSS animation. The page itself is the black hole — full-bleed render with HUD overlay. Good. Now let me write the code. Structure: ```html SCHWARZSCHILD — Relativistic Ray Tracer

(or let renderer create it; use existing canvas)

``` Three.js version: use 0.160.0 via jsdelivr. Importmap: ```json { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" } } ``` Imports: EffectComposer, RenderPass, UnrealBloomPass, OutputPass. Renderer setup: antialias false (post FX), powerPreference 'high-performance'. Composer size = canvas size, handle resize. Quality presets: - LOW: pixelRatio 0.6, steps 180, disk substeps? also render bloom at low res (Unreal handles). - MED: 0.85, steps 260 - HIGH: min(devicePixelRatio,1.5)? cap at 1.25 or so, steps 340. Adaptive: monitor fps over 2 seconds; if < 30 downgrade a tier (once), if > 55 with headroom and below target... keep simple: only downgrade, show in HUD. Steps as uniform int float; loop: ```glsl for (int i = 0; i < MAX_STEPS; i++) { if (i >= uSteps) break; ... } ``` MAX_STEPS = 400. Full fragment shader — let me draft: ```glsl precision highp float; uniform vec2 uRes; uniform float uTime; uniform vec3 uCamPos; uniform mat3 uCamBasis; // columns: right, up, fwd uniform float uTanFov; uniform float uSteps; uniform float uDoppler; // 0..1 uniform float uLensing; // 0..1 uniform float uDiskOn? (probably not needed) uniform float uExposure; #define RS 1.0 #define DISK_IN 3.0 #define DISK_OUT 13.5 #define ESCAPE_R 60.0 #define MAX_STEPS 400 ``` Hash / noise: ```glsl float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx)*0.1031); p3 += dot(p3, p3.yzx+33.33); return fract((p3.x+p3.y)*p3.z); } float hash13(vec3 p3){ p3 = fract(p3*0.1031); p3 += dot(p3, p3.zyx+31.32); return fract((p3.x+p3.y)*p3.z); } vec3 hash33(vec3 p3){ ... } // maybe not needed float vnoise(vec3 p){ vec3 i = floor(p), f = fract(p); f = f*f*(3.-2.*f); // 8 corners ... } float fbm(vec3 p){ float a=0.5,s=0.; for(int i=0;i<5;i++){ s+=a*vnoise(p); p = p*2.03 + vec3(11.7, 7.3, 5.1); a*=0.5;} return s; } ``` vnoise uses hash13 on corners. Blackbody color approx (K → RGB): I'll implement a compact fit: ```glsl vec3 blackbody(float t){ t = clamp(t, 1000., 40000.) / 100.; vec3 c; c.r = t <= 66. ? 1.0 : clamp(1.2929*pow(t-60., -0.1332), 0., 1.); c.g = t <= 66. ? clamp(0.3903*log(t) - 0.6318, 0., 1.) : clamp(1.1298*pow(t-60., -0.0755), 0., 1.); c.b = t >= 66. ? 1.0 : (t <= 19. ? 0. : clamp(0.5432*log(t-10.) - 1.1962, 0., 1.)); return c; } ``` That's the Tanner Helland fit normalized roughly. Good enough. Disk emission: ```glsl vec4 sampleDisk(vec3 hit, vec3 rdLocal /*normalized backward ray dir at hit*/, float rr){ float ang = atan(hit.z, hit.x); float omg = 1.6 / pow(rr, 1.5); // Keplerian angular velocity (visual speed) float a2 = ang + uTime * omg; vec2 pz = rr * vec2(cos(a2), sin(a2)); // rotate with differential rotation // streaky turbulence: stretch azimuthally vec3 np = vec3(pz.x, pz.y, rr*0.4); Hmm, better: compute noise in a "swirl" space where radial and angular coordinates are separate: ``` Alternative: n1 = fbm(vec3(pz*0.55, 0.0) + vec3(0,0,uTime*0.015)); but rotation is already encoded. For filament streaks, sample fbm with coordinates that are sheared: (rr, ang*a + shear*rr)? Seams at angle wrap. Use two-sample trick: value noise on vec2(rr*2.0, ang*rr?) — seams again. Rotation vector approach is standard and seam-free; to get streaks, use fbm on vec3(pz * vec2(0.35, 0.35), uTime*0.02) plus an additional octave sampled at pz with angular compression... streaks arise naturally when differential rotation shears the noise over time — but our noise is sampled in a co-rotating frame per radius (a2 includes Ω(rr)*t), so the pattern rotates rigidly per radius with no shearing distortion. To get sheared filaments, add noise-based distortion of a2: a2 += 0.6*fbm(something)... Let me do this: ``` float nBase = fbm(vec3(pz*0.5, uTime*0.02)); float a2b = ang + uTime*omg + (nBase-0.5)*2.5; // distorted angle vec2 pzb = rr*vec2(cos(a2b), sin(a2b)); float n = fbm(vec3(pzb*vec2(0.9, 0.9), 0.0) * ...); ``` Hmm — noise is sampled on rotated points in 2D Cartesian, and since Ω depends on r, filaments get naturally stretched in azimuth: two points at slightly different radii rotate at different speeds → over time the pattern gets sheared into spirals. But we sample noise(pz) with pz already rotated by Ω(r)t — so pattern at each radius is rotating at Keplerian rate; relative shear between adjacent radii creates spiral streaks over time if the underlying noise is time-invariant... but pz itself is rotating, so the noise pattern at radius r is just noise rotated — shape doesn't shear, just rotates rigidly per radius. Shearing of features that span radii happens when we compare adjacent radii: features crossing radii get pulled into spirals because rotations differ. Yes — noise with structure spanning radii will shear into spirals over time. ✓. Initial noise at t=0 is isotropic blobs; after time, spiral filaments. But I want immediate streaks: add explicit anisotropy: sample noise with vec2 basis: radial vs tangential coordinate: tangential coord = ang*rr (=arc length) — seams at wrap ±π: seam at ang = π. Mitigate by using cos/sin pairs: noise on vec4? Can't. Use two 3D noises evaluated at rotated points with different frequencies — that's fine; plus add streak-like via pow of 1D fbm along... Accept: rotating turbulence + spiral shear looks great (I've seen this done, looks great). Density: ``` float dens = n * 1.2; dens = pow(clamp(dens, 0., 1.), 1.6) ... ``` Radial profile: ``` float x = (rr - DISK_IN) / (DISK_OUT - DISK_IN); float radial = smoothstep(0., 0.06, x) * (1.0 - smoothstep(0.55, 1.0, x)); ``` Actually want bright inner edge, fade gradually outward: radial = pow(smoothstep(DISK_IN-0.15, DISK_IN+0.6, rr) * (DISK_OUT-rr)/(DISK_OUT-DISK_IN), ...) Let's do: ``` float fall = smoothstep(DISK_IN - 0.3, DISK_IN + 0.35, rr) * exp(-(rr - DISK_IN) * 0.28); ``` At DISK_OUT radius exp(-10.5*0.28)=0.053 → naturally fades, cut hard at DISK_OUT with smoothstep(DISK_OUT, DISK_OUT-1.5, rr) to avoid pop. Temperature: T = 7400 * pow(DISK_IN/rr, 0.75) → at r=3: 7400K; at r=13: 7400*(3/13)^0.75 ≈ 7400*0.34 ≈ 2500K warm orange. Multiply by g_total for color shift. Base intensity: I = fall * (0.35 + dens) * pow(DISK_IN/rr, 2.2)? Combine: brightness profile that peaks strongly at inner edge. Let me define emission = fall * mix(0.3, 1.6, dens), then multiply by beaming g^3.5 and a scale of ~8 (HDR for bloom). Alpha for accumulation: alpha = clamp(fall * (0.25 + dens), 0., 1.) * uDiskDensity? OK. Doppler: ``` float beta = sqrt(0.5 / max(rr - 1.0, 2.0)); // at r=3 → sqrt(.25)=0.5 ✓; clamp below vec3 vdir = normalize(vec3(-hit.z, 0.0, hit.x)); // prograde CCW vec3 toCam = -rdLocal; // photon direction toward camera (ray is backward) float mu = dot(vdir, toCam); float gD = mix(1.0, sqrt(1.0-beta*beta) / (1.0 - beta*mu), uDoppler); float gG = sqrt(max(1.0 - 1.0/rr, 0.0)); // gravitational redshift float g = gD * mix(1.0, gG, 1.0)? Apply gG always (part of realism; toggle could include) → apply always. float shift = gD * gG; ``` Hmm wait: direction of orbit: if vdir = normalize(vec3(-z,0,x)), that's rotation around +y CCW viewed from above (from +y, x right, z down?). Whatever. Emission color: blackbody(T * mix(1.0, shift, uDopplerMix?)) — gravitational redshift should always shift color. Color temperature = T * shift (shift<1 far away redshifts... but observer is at r_cam ~16 too, potential difference from disk; gG at emission point approximates since observer potential is ~small). Beaming intensity factor: pow(shift, 3.6)? but that double-counts color; standard: I_obs = g³ I_em (monochromatic). Use pow(shift, 3.2). Also lensing magnification arises naturally. Accumulation loop: ```glsl vec3 trace(vec3 p, vec3 v, out bool captured){ float h2v = dot(cross(p,v), cross(p,v)); // conserved vec3 col = vec3(0); float trans = 1.0; float pp_y = p.y; vec3 pp = p; float r = length(p); for(int i=0;i= uSteps) break; float dt = 0.016 + 0.018 * clamp(r - 1.0, 0.0, 14.0) * ... ``` Let me define dt = clamp(0.03*r - 0.02, 0.018, 0.22)? r=16 → 0.46 → clamped to 0.22; r=3 → 0.07; r=1.5 → 0.025; r=1.05 → 0.018. OK. Actually dt=0.22 far is coarse for disk crossing detection? Crossing detection uses segment interpolation — fine. Midpoint-ish accuracy: simple Euler with small steps near hole is standard for these demos; use velocity Verlet-ish (kick-drift): ``` vec3 acc = -1.5 * h2v * p / pow(r2, 2.5) * uLensing; v += acc * dt; p += v * dt; ``` Recompute r each iteration. This works well (widely used). Sub-stepping near disk plane? Plane-crossing interpolation is OK. Break conditions: ``` if (r < 1.0 + 1e-3) { captured=true; break; } // hmm horizon radius 1 (r_s=1) if (r > ESCAPE_R && dot(p, v) > 0.0) { escaped } ``` On escape: col += trans * sky(normalize(v)); On capture: nothing (black). When lensing toggle off: h term is 0 → straight line; still fine. Disk crossing detection each step with sign change of y: ``` if (pp.y * p.y < 0.0) { float t = pp.y / (pp.y - p.y); vec3 hp = mix(pp, p, t); float rr = length(hp.xz); if (rr > DISK_IN - 0.4 && rr < DISK_OUT) { vec4 dcol = sampleDisk(hp, normalize(v), rr); col += trans * dcol.rgb * dcol.a? ``` Better: sampleDisk returns emission rgb and alpha; col += trans * emission; trans *= (1 - alpha); if trans < 0.02 break. Also, rays originating inside the disk plane... camera is above the plane, fine. Note: sampleDisk shading needs hit position in world coords — yes. Sky function: ```glsl vec3 sky(vec3 rd){ // base deep space vec3 col = vec3(0.0); // Milky way: band around normal n vec3 n = normalize(vec3(0.32, 0.85, -0.42));? Choose band tilted relative to disk plane for contrast. float band = exp(-pow(dot(rd, n)*3.0, 2.0)); // wait: dot small near plane of band → band large. exp(-(d*3)^2) with d=dot → max at d=0 ✓ width ~0.33 rad. float neb = fbm(rd*3.0 + vec3(1.7)); float neb2 = fbm(rd*6.0 - vec3(4.2)); col += band * (pow(neb, 2.2) * vec3(0.16, 0.2, 0.3)*1.4 + pow(neb2, 3.0)*vec3(0.3,0.2,0.12)); Also overall faint blue haze: 0.015*fbm(rd*2.) // Stars: 2 layers col += starLayer(rd, 140.0, 0.0016?) ``` Star layer: ```glsl float stars(vec3 rd, float scale){ vec3 p = rd * scale; vec3 id = floor(p); vec3 f = fract(p) - 0.5; float h = hash13(id); if(h < 0.85) return 0.; // sparse? but returns 0 for most cells → OK vec3 off = hash33(id) - 0.5; float d = length(f - off*0.8); float m = smoothstep(0.12, 0.0, d); float b = pow(h*... ``` Hmm, hash33 needed. Or offset = (vec3(hash13(id+1.7), hash13(id+2.3), hash13(id+4.1)) - .5). Star brightness ∝ pow(rand, 8) for few bright stars. Also color variation: warm/cool by another hash. Two layers with scale 90 and 160? Actually larger scale = smaller cells = more, smaller stars. Layer A: scale 60, brighter; Layer B: scale 130, fainter. Multiply total by 1.2. Stars should be subtle; HDR bright ones (b up to ~3) to get sparkle in bloom. Twinkle: multiply by 0.85+0.15*sin(uTime*3 + h*40)? Subtle. Stars lensed around hole — emerges automatically. Also faint gradient horizon glow? No. Tonemapping handled later by OutputPass; add dither in shader: col += (hash12(gl_FragCoord.xy) - 0.5) / 255. Fov: tanFov ~0.5 (vertical fov ~53°). Camera default radius 17, inclination ~0.13 rad (~7.5°) above plane? Interstellar view is nearly edge-on showing lensed arcs above/below. Elevation ~10°. Now camera basis CPU side: ```js function updateCamera(){ const r = state.dist, e = state.elev, a = state.azi; pos = (r cos e cos a, r sin e, r cos e sin a) target = (0,0,0) fwd = normalize(-pos) right = normalize(cross(fwd, up(0,1,0))) upv = cross(right, fwd) basis matrix columns (right, upv, fwd) → THREE.Matrix3().set(right.x, upv.x, fwd.x, ... ) — Matrix3.set is row-major: set( right.x, upv.x, fwd.x, right.y, upv.y, fwd.y, right.z, upv.z, fwd.z )? Column layout: GLSL mat3 m; m*vec3( u, v, 1 ) should = u*right + v*upv + fwd. So column j: col0=right, col1=upv, col2=fwd. THREE.Matrix3.set(n11..n33) is row-major so to make columns right/up/fwd: set(right.x, upv.x, fwd.x, right.y, upv.y, fwd.y, right.z, upv.z, fwd.z). Yes. } ``` Ray in shader: rd = normalize(basis * normalize(vec3(uv.x*uTanFov*aspect, uv.y*uTanFov, 1))). Pass aspect uniform. Pointer controls: pointerdown/move/up, track delta: azi -= dx*0.004; elev += dy*0.003 clamped ±1.35. Inertia: keep velocity, decay 0.92 per frame, apply when not dragging. Wheel: dist *= exp(dy*0.001) clamp [5.5, 80]. Touch pinch: handle via pointer events with cache for 2 pointers → pinch zoom. Idle auto-orbit: if now - lastInteract > 4000, azi += 0.03*dt. HUD elements: - Top-left: title block: small overline "RELATIVISTIC RAY TRACER · SCHWARZSCHILD METRIC", big title "EVENT HORIZON" hmm. Title: "GARGANTUA-1"? Let's name the object: "SGR A★ — SIMULATED" or fictional designation: "OBJECT K-2 // M = 4.1×10⁶ M☉". I like this: big display "SCHWARZSCHILD" + small "null-geodesic integrator · r_s = 2GM/c²". Good. - Top-right: live telemetry readouts: CAM RADIUS (in r_s), INCLINATION, INTEGRATOR steps, FPS, QUALITY. - Bottom-left: toggles with key hints: [D] DOPPLER BEAMING — ON, [L] GEODESIC LENSING — ON, [Q] QUALITY — HIGH. Rendered as buttons. - Bottom-right: control hints: DRAG ORBIT / SCROLL ZOOM. Plus small physics footnote: "Beaming: I ∝ g³·⁶ · ISCO at 3 r_s · photon sphere 1.5 r_s". - Corner brackets around the frame for instrument look. - Subtle crosshair in center? Might be distracting over the hole; skip, or make small reticle marks at screen edges (ticks). Keep the corner ticks. Type: Michroma (display) + IBM Plex Mono (data). Load via Google Fonts link. CSS: HUD text #cfc9bb-ish; accent #ffb85c (hot accretion); secondary #6b7686. Background black. Elements with mix-blend? Keep simple with rgba backgrounds for readability: maybe no background, use text-shadow. Animations: fade/slide-in on HUD children with staggered delays; a small "REC"-like blinking dot? Add a pulsing "LIVE INTEGRATION" dot. FPS update in JS. Loading overlay: black div with title + thin progress shimmer; fade out after first rendered frame (requestAnimationFrame after composer.render). Also handle import failure if WebGL not available → show message. Wrap init in try/catch. Now let me double-check UnrealBloomPass import path for r160: 'three/addons/postprocessing/UnrealBloomPass.js' ✓, OutputPass ✓ (exists in r160? OutputPass was added ~r152; yes). EffectComposer ✓ RenderPass ✓. Renderer settings: ```js renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1; ``` OutputPass applies tonemap + sRGB. RenderPass renders scene → material's fragment writes linear color. My material: ShaderMaterial's default output is written raw to RT (linear). OK. Note: ShaderMaterial with composer — ensure material.toneMapped default true is irrelevant for raw shader. Bloom: UnrealBloomPass(resolution, strength .55, radius .85, threshold .85). In linear HDR, threshold .85 catches disk hotspots and bright stars. Good. Also renderer's clearColor black. Performance consideration: fbm in shader with 5 octaves × (disk + 2 for sky) — fine. One concern: step count uniform float and `if (float(i) >= uSteps) break;` — fine. Also for low-quality: reduce uSteps to 170 and pixelRatio 0.6. Define quality: ```js const QUALITY = [ { name:'LOW', pr:0.55, steps:170 }, { name:'MED', pr:0.8, steps:260 }, { name:'HIGH', pr:1.0, steps:340 }, ]; ``` pr multiplied by min(devicePixelRatio, 2)? On desktop HIGH: pr = min(dpr, 1.5)? On Retina full-res raymarching is heavy. HIGH: Math.min(dpr, 1.25)? Let's set HIGH pr = dpr>=2? 1.33 : 1.0. Simpler: base = Math.min(window.devicePixelRatio||1, 2); then pr is a multiplier: LOW .5, MED .75, HIGH 1 → effective pixel ratio = base*mult, but cap effective at 1.6 for sanity. Let's do: effective = Math.min(dpr, 1.75) * mult... hmm keep straightforward: per-quality pixelRatio values: LOW 0.6, MED 0.9, HIGH min(dpr, 1.5). Adaptive drops the tier index. Apply: renderer.setPixelRatio(q.pr); composer.setPixelRatio? EffectComposer also has setPixelRatio and setSize. Yes composer.setPixelRatio exists. Call both on change and resize. FPS meter: rolling avg over 30 frames, display + ms. Auto-degrade: keep ema of frame dt; after 180 frames of warmup, if ema > 34ms and tier>0 → tier--, apply, reset counter; can only degrade twice. Now toggles: uniform uDoppler (animate to 0/1 smoothly — lerp for nice transition), uLensing likewise. Keys d/l/q and click. Edge cases: lensing off → also skip disk shading change? Keep everything else; straight rays still hit the disk (flat appearance) and sky is not warped. Good comparison. Now let me write the disk sampling detail (final GLSL): ```glsl vec4 diskShade(vec3 hp, vec3 rd, float rr){ float ang = atan(hp.z, hp.x); // Keplerian rotation with turbulent distortion float nPre = fbm(vec3(hp.xz*0.55, 3.1)) ; // static base distortion (seamless since xz) float omg = 2.2 * pow(rr, -1.5); float a2 = ang + uTime*omg + (nPre-0.5)*1.8; vec2 pz = rr*vec2(cos(a2), sin(a2)); float n = fbm(vec3(pz*0.62, 7.7)); float n2 = fbm(vec3(pz*1.9 + 13.1, 2.2)); // fine detail float dens = n*0.72 + n2*0.42; dens = smoothstep(0.28, 1.05, dens); ``` Wait — the fbm 3rd coord: vnoise is 3D; OK. Radial: ```glsl float inner = smoothstep(DISK_IN-0.25, DISK_IN+0.45, rr); float outer = 1.0 - smoothstep(DISK_OUT-3.0, DISK_OUT, rr); float glowFall = pow(DISK_IN/rr, 2.4); float radial = inner*outer*mix(0.55, 1.0, glowFall); ``` Hmm let me simplify: emission scale = inner*outer*pow(DISK_IN/rr, 2.0)*(0.3+dens). Temperature and shift: ```glsl float beta = sqrt(0.5/max(rr-1.0, 2.0)); vec3 vd = normalize(vec3(-hp.z, 0.0, hp.x)); float mu = dot(vd, -rd); float gD = sqrt(1.0-beta*beta)/(1.0-beta*mu); gD = mix(1.0, gD, uDoppler); float gG = sqrt(max(1.0 - 1.0/rr, 0.001)); float g = gD*gG; float T = 6800.0*pow(DISK_IN/rr, 0.75) * g; // color shift vec3 c = blackbody(T); float I = pow(g, 3.4); // beaming float e = (0.35 + dens*1.5) * pow(DISK_IN/rr, 2.1) * inner*outer; vec3 col = c * e * I * uDiskBrightness; // ~ 6.0 float alpha = clamp(e*2.2, 0.0, 1.0)*0.92; return vec4(col, alpha); } ``` Check brightness magnitude: inner edge e ≈ (0.35+1.5)*1* ≈ 1.85; I at blueshift side: g ~ up to sqrt(1-.25)/(1-.5*~1)*sqrt(1-1/3) = (0.866/0.5)*0.816 ≈ 1.41^? compute: 0.866/(1-0.5)=1.732; gG=0.816; g≈1.414 → g^3.4 ≈ 3.17. Redshift side: mu≈-1 → 0.866/1.5=0.577*0.816=0.471 → g^3.4 ≈ 0.079. Ratio ~40:1 — strong beaming, dramatic (Interstellar shows this). Maybe soften exponent to 3.0 → ratio ~22. OK, use 3.0, with uDiskBrightness 5.0 → peak ~1.85*3*5*blackbody≈ 25+ HDR — bloom picks it up; ACES will roll off. Redshift side ~0.6 → dim ember. Nice visual asymmetry. Alpha clamp: ensure multiple images accumulate nicely. Also add subtle vertical thickness glow? Skip. Subtle addition: emission just inside ISCO (plunging flow)? Skip for clarity; the inner-edge cutoff smoothstep 0.25 gives thin bright rim — actually photon ring will provide the inner brightness. One more realism flourish: gravitational time delay / nothing. Fine. Escape sky brightness scale: stars up to ~4 HDR for sparkles; nebula ~0.05-0.2 — dim relative to disk, correct. Also double-check geodesic constant h2 with camera at r=17: rays aimed near center have small h; bending produces the shadow. Photon capture: rays with impact parameter b < b_crit ≈ 2.6 r_s fall in. Integrator handles it. Steps: rays grazing photon sphere orbit many times — need enough steps; with dt~0.025 near r=1.5, orbit circumference ~9.4 → ~380 steps per orbit. A ray doing half orbit before escaping needs ~200 steps near sphere + approach/exit. uSteps 340 at HIGH OK; LOW 170 may truncate grazing rays → cap with sky fallback (treat as escaped using current v) — acceptable. Actually let me treat steps exhaustion as escaped to avoid black speckle artifact: `escaped` path. Hmm, but truly captured rays that get exhausted near hole would show sky wrongly... rays that are captured but didn't reach r<1 in budget are ones lingering around photon sphere; rendering them with final direction sky will make weird smears near ring edge on low quality. Alternative: make captured = black. Both risks. Most real implementations: exit → treat as escaped but those rays are mostly unstable orbit → either way visually fine. Let me: exhausted → sample sky (smoother). Actually think: on low step count, area right outside shadow boundary gets black or sky noise — either way subtle thin ring. Choose sky for continuity. Hmm wait, another consideration: rays escaping upward, dot(p,v)>0 and r>ESCAPE_R: fine. Initial dt from camera r=17: dt=0.22 OK. Another subtle point: disk crossing detection when step is large (0.22) near outer disk plane — intersection interpolation linear between steps; ray curvature small far away — fine. Star hash33: let me implement: ```glsl vec3 hash33(vec3 p){ p = fract(p * vec3(0.1031, 0.1030, 0.0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx); } ``` Star layer function: ```glsl vec3 stars(vec3 rd, float sc, float thresh, float gain){ vec3 p = rd*sc; vec3 id = floor(p); vec3 f = fract(p)-0.5; float h = hash13(id); if(h < thresh) return vec3(0); vec3 o = hash33(id)-0.5; float d = length(f - o*0.75); float b = pow(max(0., 1.0 - d*4.0), 4.0) ... ``` Let me make: float m = exp(-d*d*90.0); brightness = m * pow((h-thresh)/(1.-thresh), 6.0)*gain? Simpler: float amp = pow(h, 30.0)*gain? Use two hashes: h for presence, h2=hash13(id+7.7) for brightness: b = pow(h2, 8.)*gain... Let me write: ```glsl vec3 starLayer(vec3 rd, float scale, float gain){ vec3 p = rd*scale; vec3 id = floor(p); vec3 f = fract(p) - 0.5; float h = hash13(id); if(h > 0.16) return vec3(0.0); // ~16% of cells have star vec3 o = (hash33(id + 19.1) - 0.5) * 0.8; float d2 = dot(f - o, f - o); float tw = 0.8 + 0.2*sin(uTime*2.0 + h*87.0); float m = exp(-d2 * 140.0) * tw; float h2 = hash13(id + 41.7); vec3 tint = mix(vec3(1.0,0.82,0.65), vec3(0.72,0.82,1.0), step(0.5,h2)); float b = pow(h2, 6.0); // most dim, few bright return tint * m * (0.35 + 14.0*b) * gain; } ``` gain ~0.5. Bright stars b max ~ (0.35+14)*0.5 ≈ 7 HDR → bloom sparkle. Might be too many sparkles; OK. Milky way: pick band normal nearly perpendicular to disk plane? If band nearly parallel to disk plane, lensed view aligns; tilted feels more dynamic. n = normalize(vec3(0.35, 0.6, 0.72))? Band = great circle perpendicular to n. Color: base warm-white dust + darker lanes: ```glsl vec3 sky(vec3 rd){ vec3 col = vec3(0.0); float nb1 = fbm(rd*2.6 + vec3(2.9)); float nb2 = fbm(rd*5.5 - vec3(1.4)); vec3 bn = normalize(vec3(0.35, 0.72, 0.59)); float d = dot(rd, bn); float band = exp(-d*d*14.0); // wide soft band float lane = smoothstep(0.35, 0.9, nb2); // dust clumps col += band * (vec3(0.10,0.13,0.22)*1.2*pow(nb1,1.5) ... ``` Let me write in code finally. Also all-around faint cosmic glow: col += vec3(0.010,0.014,0.028)*fbm(rd*1.7). Then stars: col += starLayer(rd, 70., 1.0) + starLayer(rd, 160., 0.55). Also sky should have deep blue base, not pure black: vec3(0.004,0.006,0.012). Main: ```glsl void main(){ vec2 uv = (gl_FragCoord.xy - 0.5*uRes)/uRes.y; // aspect handled by y-normalize vec3 rd = uCamBasis * normalize(vec3(uv*uTanFov, 1.0)); // hmm uv.x already aspect-included since divide by uRes.y. ✓ bool cap; vec3 col = trace(uCamPos, rd, cap); // subtle vignette vec2 q = gl_FragCoord.xy/uRes; col *= 1.0 - 0.35*pow(length(q-0.5)*1.5, 2.5); col *= uExposure; col += (hash12(gl_FragCoord.xy + fract(uTime)*61.7) - 0.5)*(1.0/255.0); gl_FragColor = vec4(max(col, 0.0), 1.0); } ``` uTanFov: tan(vertical fov/2). If uv is divided by Res.y, then vertical half-extent is 0.5*uTanFov → tan(fov/2) = 0.5*uTanFov... let me set uTanFov = 2*tan(fov/2) = focal scale. fov 48° → tan24≈0.445 → uTanFov=0.89. Just call it uFocalScale and set to 0.95 (slightly tele, cinematic). rd = basis*normalize(vec3(uv*0.95... wait, normalize(vec3(uv*uTanFov? no: vec3(uv, 1/uTanFov)) equivalently. Use rd = basis * normalize(vec3(uv, 1.0/uFocal)). uFocal ~1.05. Zoom: scroll changes distance — OK, no fov change. CPU uniform updates each frame: time, camPos, basis, doppler/lens lerp values. Now HUD/JS wiring details: State: ```js const state = { azi: 0.65, elev: 0.18, dist: 16.5, va: 0, ve: 0, dragging:false, lastX,lastY, doppler: 1, lensing: 1, dopplerT:1, lensingT:1, tier: 2, lastInteract: 0, }; ``` Default elev 0.18 rad ≈ 10° — nice lensed arcs visible. Telemetry update every ~150ms: r = dist toFixed(2) r_s; incl = (elev*180/π).toFixed(1)°; fps; quality name; steps. Buttons: 3 toggle rows with kbd hints. Style: mono 10px letter-spacing 0.15em uppercase; border 1px rgba(255,200,140,.25); hover: border amber, bg rgba(255,180,90,.08); active state: "ON" filled with accent color. Use . Style .st with "on" class. Key handling: window keydown: KeyD/KeyL/KeyQ toggles. Quality toggle cycles tier and updates label + applies. Also add pause? Not needed. Loader: id=loader with text "CALIBRATING NULL GEODESICS" + bar animation; after first frame hide via JS (composer.render done → add .done → opacity 0 → display none after 900ms). Title font loading flash — acceptable. Error fallback: if module import fails (offline), show message in loader: window.addEventListener('error')? For robustness wrap dynamic imports in try/catch: ```js let THREE, EffectComposer...; try { THREE = await import('three'); ... } catch(e){ loader text = "FAILED TO LOAD three.js — check network"; } ``` Use top-level await in module script — supported in modern browsers. Importmap + dynamic import works. Let me write CSS carefully; ensure canvas fixed full behind HUD (z-index), HUD pointer-events none except buttons (pointer-events auto on buttons). Drag on canvas: attach pointer handlers on window/canvas — canvas is behind HUD with pointer-events none except where allowed — fine. Wheel: attach to canvas/wrapper with passive false. Cursor: grab/grabbing. Telemetry rows markup draft: ```html

RADIUS16.5 r_s

``` sub inside mono fine. Rows: RADIUS, INCLINATION, SOLVER, FRAME, QUALITY, plus LIVE dot header "TELEMETRY ●". Now JS code for animation loop: ```js const clock = new THREE.Clock(); function tick(){ requestAnimationFrame(tick); const dt = Math.min(clock.getDelta(), 0.05); const t = clock.elapsedTime; // inertia if(!dragging){ azi += va; elev += ve; va*=0.9; ve*=0.9; } // idle auto-orbit if(performance.now() - lastInteract > 4000){ azi += dt*0.035; } clamp elev. // lerp uniforms ... updateCam(); uniforms.uTime.value = t; composer.render(); fps counter... } ``` va is per-frame delta: on pointermove set target velocity = delta*0.005 and add directly to azi; save last delta for inertia: on move va = dx*0.0042; applied per-frame while dragging? Standard: on move apply directly and store as va; on release inertia continues with decay. Pinch: pointer Map cache; on two-pointer move compute distance ratio → dist /= ratio. Also prevent context menu? Fine. Quality apply function: ```js function applyQuality(){ const q = QUALITY[tier]; const pr = Math.min(window.devicePixelRatio||1, q.prCap) * q.prMul ... ``` Simplify: define absolute pixel ratios per tier: LOW .55, MED .85, HIGH Math.min(dpr, 1.4)? But HIGH dpr cap 1.4 on retina — visually slightly soft but perf. Alternatively HIGH = min(dpr, 2) only on desktop with strong GPU — can't detect easily. Let me pick HIGH = min(dpr, 1.5). Adaptive downgrade: if ema>38ms over 120 frames → tier-- apply (min tier 0), show notice "AUTO" in quality label. Steps uniform from q.steps. Now let me assemble everything, being careful with GLSL compilation correctness. Let me write the final fragment shader completely and mentally check syntax. ```glsl precision highp float; uniform vec2 uRes; uniform float uTime; uniform vec3 uCamPos; uniform mat3 uCam; uniform float uFocal; uniform float uSteps; uniform float uDoppler; uniform float uLensing; uniform float uExposure; #define DISK_IN 3.0 #define DISK_OUT 13.0 #define ESCAPE_R 48.0 const int MAX_STEPS = 400; float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * 0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } float hash13(vec3 p3){ p3 = fract(p3 * 0.1031); p3 += dot(p3, p3.zyx + 31.32); return fract((p3.x + p3.y) * p3.z); } vec3 hash33(vec3 p3){ p3 = fract(p3 * vec3(0.1031, 0.1030, 0.0973)); p3 += dot(p3, p3.yxz + 33.33); return fract((p3.xxy + p3.yxx) * p3.zyx); } float vnoise(vec3 p){ vec3 i = floor(p); vec3 f = fract(p); f = f * f * (3.0 - 2.0 * f); float n000 = hash13(i); float n100 = hash13(i + vec3(1,0,0)); ... mix chain } ``` Write mix chain: ```glsl return mix( mix(mix(n000, n100, f.x), mix(n010, n110, f.x), f.y), mix(mix(n001, n101, f.x), mix(n011, n111, f.x), f.y), f.z); ``` fbm 5 octaves. blackbody(t): as above; guard log of positive: t/100 min... let me write: ```glsl vec3 blackbody(float T){ T = clamp(T, 900.0, 20000.0); float t = T * 0.01; vec3 c; c.r = t < 66.0 ? 1.0 : clamp(1.2929 * pow(t - 60.0, -0.1332), 0.0, 1.0); c.g = t < 66.0 ? clamp(0.3903 * log(t) - 0.6318, 0.0, 1.0) : clamp(1.1298 * pow(t - 60.0, -0.0755), 0.0, 1.0); c.b = t > 65.0 ? 1.0 : (t < 20.0 ? 0.0 : clamp(0.5432 * log(t - 10.0) - 1.1962, 0.0, 1.0)); return c; } ``` At T=900 → t=9 → g: 0.3903*ln9-0.6318=0.857-0.632=0.225; b: t<20 → 0. Deep red ✓. At 6800: t=68 → r: 1.2929*(8)^-0.1332=1.2929*0.759=0.981; g: 1.1298*8^-0.0755=1.1298*0.854=0.965; b=1 → slightly cool white ✓ good. Disk: ```glsl vec4 diskShade(vec3 hp, vec3 rd, float rr){ float ang = atan(hp.z, hp.x); float w = fbm(vec3(hp.x * 0.5, hp.y... ``` Wait, hp.y at crossing ≈ 0 — use hp.xz only: ```glsl float wob = fbm(vec3(hp.xz * 0.5, 3.7)); float omg = 1.7 * pow(rr, -1.5); float a2 = ang + uTime * omg + (wob - 0.5) * 1.6; vec2 pz = rr * vec2(cos(a2), sin(a2)); float n1 = fbm(vec3(pz * 0.55, 9.2)); float n2 = fbm(vec3(pz * 1.7 + 37.0, 5.1)); float dens = smoothstep(0.30, 1.02, n1 * 0.75 + n2 * 0.45); ``` Hmm, wob is computed from hp.xz before rotation — static distortion pattern fixed in space while disk rotates through it → evolving structure, nice. Radial: ```glsl float rim = smoothstep(DISK_IN - 0.22, DISK_IN + 0.55, rr); float edge = 1.0 - smoothstep(DISK_OUT - 3.5, DISK_OUT, rr); float prof = pow(DISK_IN / rr, 2.0); float fall = rim * edge * prof; ``` Shift: ```glsl float beta = sqrt(0.5 / max(rr - 1.0, 2.05)); vec3 vd = vec3(-hp.z, 0.0, hp.x) / rr; float mu = dot(vd, -rd); float gD = sqrt(max(1.0 - beta*beta, 0.0)) / max(1.0 - beta * mu, 0.08); gD = mix(1.0, gD, uDoppler); float gG = sqrt(max(1.0 - 1.0 / rr, 0.0)); float g = gD * gG; float T = 6800.0 * pow(DISK_IN / rr, 0.75) * g; vec3 tint = blackbody(T); float beam = pow(g, 3.0); float e = fall * (0.25 + dens * 1.45); vec3 col = tint * e * beam * 7.0; float alpha = clamp(fall * (0.4 + dens) * 2.0, 0.0, 1.0); return vec4(col, alpha); } ``` vd normalized: length of (-z,0,x) = rr ✓ so divide by rr. Sky: ```glsl vec3 starLayer(vec3 rd, float scale, float gain){ vec3 p = rd * scale; vec3 id = floor(p); vec3 f = fract(p) - 0.5; float h = hash13(id); if(h > 0.14) return vec3(0.0); vec3 o = (hash33(id + 19.19) - 0.5) * 0.85; vec3 dv = f - o; float d2 = dot(dv, dv); float h2 = hash13(id + 41.7); float tw = 0.82 + 0.18 * sin(uTime * (1.0 + h2 * 3.0) + h2 * 40.0); float m = exp(-d2 * (90.0 + h2 * 400.0)) * tw; vec3 tint = mix(vec3(1.0, 0.78, 0.6), vec3(0.7, 0.82, 1.0), step(0.5, h2)); return tint * m * (0.4 + 13.0 * pow(h2, 9.0)) * gain; } vec3 sky(vec3 rd){ vec3 col = vec3(0.006, 0.008, 0.016); vec3 bn = normalize(vec3(0.36, 0.78, 0.53)); float d = dot(rd, bn); float band = exp(-d * d * 12.0); float nb1 = fbm(rd * 2.7 + vec3(2.9, 1.3, 4.1)); float nb2 = fbm(rd * 6.1 - vec3(7.7, 2.2, 1.9)); col += band * (vec3(0.10, 0.13, 0.23) * pow(nb1, 1.4) * 1.1 + vec3(0.23, 0.16, 0.10) * pow(nb2, 2.6) * 1.2); col += band * vec3(0.28, 0.24, 0.22) * pow(max(0.0, nb1 * nb2 * 2.2 - 0.35), 3.0) * 2.0; // bright knots col += vec3(0.010, 0.013, 0.026) * fbm(rd * 1.6 + 9.0); col += starLayer(rd, 64.0, 1.0); col += starLayer(rd, 131.0, 0.6); col += starLayer(rd, 263.0, 0.35); return col; } ``` Trace: ```glsl vec3 trace(vec3 p, vec3 v, out bool captured){ captured = false; vec3 hv = cross(p, v); float h2 = dot(hv, hv); vec3 col = vec3(0.0); float trans = 1.0; vec3 pp = p; float r = length(p); for(int i = 0; i < MAX_STEPS; i++){ if(float(i) >= uSteps) break; float dt = clamp(0.035 * r - 0.03, 0.02, 0.26); float r2 = dot(p, p); vec3 acc = (-1.5 * h2 * uLensing / (r2 * r2 * sqrt(r2))) * p; v += acc * dt; p += v * dt; r = length(p); if(pp.y * p.y < 0.0){ float tHit = pp.y / (pp.y - p.y); vec3 hp = mix(pp, p, tHit); float rr = length(hp.xz); if(rr < DISK_OUT && rr > DISK_IN - 0.3){ vec4 dc = diskShade(hp, normalize(v), rr); col += trans * dc.rgb; trans *= (1.0 - dc.a); if(trans < 0.02){ return col; } } } pp = p; if(r < 1.0){ captured = true; return col; } if(r > ESCAPE_R && dot(p, v) > 0.0){ return col + trans * sky(normalize(v)); } } return col + trans * sky(normalize(v)); } ``` Wait — the accel formula: -1.5*h2 * p / r^5. r^5 = (r2)^2 * sqrt(r2) ✓. Multiplied by uLensing toggle ✓. dt depends on r before step — fine. Check sign of dt clamp near horizon: r=1.0 → 0.005 clamped to 0.02. OK. Also: rays behind camera... none. Main + vignette + dither as above. Potential issue: `if(float(i) >= uSteps) break;` — OK. Uniform mat3 set from JS: uniforms.uCam.value = new THREE.Matrix3(); update .set(...) each frame. Basis columns: right, up, fwd as calculated. In JS: ```js const fwd = new THREE.Vector3().copy(camPos).multiplyScalar(-1).normalize(); const right = new THREE.Vector3().crossVectors(fwd, UP).normalize(); const upv = new THREE.Vector3().crossVectors(right, fwd); uCam.set(right.x, upv.x, fwd.x, right.y, upv.y, fwd.y, right.z, upv.z, fwd.z); ``` Matrix3.set takes row-major args, so columns become those triplets ✓. Edge case elev near ±π/2: clamp elev to ±1.3 rad (~74°) so cross with UP stays safe. Focal: 1.0. Exposure uniform 1.0; renderer.toneMappingExposure 1.15. Bloom: strength 0.9, radius 0.7, threshold 0.9? In linear pre-tonemap, disk peak ~20 → strong bloom; threshold 0.85. Star peaks ~7 sparkle. Maybe strength 0.7. Let's set (0.8, 0.75, 0.85). Hmm — one concern: UnrealBloomPass over very dark scene: nebula is below threshold, OK. Also renderer.outputColorSpace default sRGB; OutputPass handles conversion. Render targets linear. ShaderMaterial with composer — ensure material's fragment writes linear color. My material: ShaderMaterial's default output is written raw to RT (linear). OK. Now HUD JS: getElementById refs; update telemetry every 6 frames. Quality auto: frame time accumulator. I think it's also worth adding a small "photon ring" annotation? A toggleable annotation line pointing to features ("PHOTON SPHERE", "BEAMED APPROACHING LIMB") — could clutter; add a subtle one-time hint? Skip annotations; keep clean instrument look. Actually one nice touch: on first load, show key hints in a small bottom-center toast that fades after 6s: "DRAG TO ORBIT · SCROLL TO ZOOM · D / L TOGGLES". Bottom right already has hint; enough. Also title: include object name "GARGANTUA"? Let me use fictional catalog: overline: "DEEP-FIELD OBSERVATION // 26 kpc", title "SAGITTARIUS A★"? Rendering realistic Sgr A* implies huge mass. Sub line: "Schwarzschild solution · null geodesics · real-time". Good. Let me reconsider title typography: Michroma only has weight 400. Size clamp(26px,4.5vw,52px). "SAGITTARIUS A★" is long — maybe "SGR A★" big + smaller "SAGITTARIUS A-STAR"? Let's do title: "SGR A★" and overline: "SAGITTARIUS A* — GALACTIC NUCLEUS · 26,673 LY". Nice hierarchy. Star character ★ is fine in UTF-8. Loader text: "CALIBRATING NULL GEODESICS…" plus animated thin bar (CSS keyframe translate). After ready: fade. Also noscript / webgl failure message: in try/catch set loader text. Now let me write CSS in full. Sizes/responsive: on width < 640px hide footnote (#br .phys), shrink title, maybe hide telemetry (keep minimal FPS?) keep telemetry but smaller. Frame corners: ```css .corner{position:fixed;width:22px;height:22px;border:1px solid rgba(255,179,92,.5);pointer-events:none;z-index:5} .corner.tl{top:14px;left:14px;border-right:none;border-bottom:none} ... ``` Plus edge ticks: 1px 10px amber .35 lines at edge centers? Use .tick.h/.tick.v. Optional — include 4 small ones. HUD z-index 10; canvas z 0. Buttons container pointer-events:auto. Also ensure text is selectable: no; user-select none. Font stack: 'Michroma', 'IBM Plex Mono', monospace. Colors: --amber: #ffb35c; --ink:#efe9db; --mut:#9aa0ab; --dark:#050607. Telemetry layout: right-aligned rows, label muted small, value ink; values amber maybe for radius. Add subtle scanline/grain overlay? Shader already dithers; skip CSS noise (perf OK but keep clean). OK now count: also handle visibilitychange → clock.getDelta handles with clamp. Wheel zoom clamp [6, 60]. Also zoom affects slight fov? no. Also dblclick → reset view (nice): reset azi/elev/dist with smooth? Just set targets instantly; fine, add smoothing? Keep simple: assign to state with lerp targets for distance and elevation? For polish implement target-based smoothing for dist and elev: state.distT etc; lerp per-frame. Drag modifies angles directly (with inertia). Wheel modifies distT; dblclick resets all targets (with inertia zero). Smoothness. elev also smoothed? drag sets elev directly; fine. OK let me write it out. Also ensure I don't include backticks inside the shader template literal. Avoid `${}` inside GLSL — none. One more: `renderer = new THREE.WebGLRenderer({canvas, antialias:false, powerPreference:'high-performance'})`. renderer.toneMapping = ACESFilmic; toneMappingExposure=1.12. Composer: ```js composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, orthoCam)); bloom = new UnrealBloomPass(new THREE.Vector2(w,h), 0.85, 0.75, 0.85); composer.addPass(bloom); composer.addPass(new OutputPass()); ``` Mesh: fullscreen triangle: ```js const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array([-1,-1,0, 3,-1,0, -1,3,0]), 3)); const mat = new THREE.ShaderMaterial({uniforms, vertexShader, fragmentShader, depthWrite:false, depthTest:false}); scene.add(new THREE.Mesh(geo, mat)); ``` orthoCam = new THREE.Camera() is enough? Shader ignores matrices. Use new THREE.Camera(). Orthographic camera not needed for fullscreen triangle with raw clip coords. Resize: ```js function resize(){ const w = innerWidth, h = innerHeight; renderer.setSize(w,h); composer.setSize(w,h); const db = renderer.getDrawingBufferSize(new THREE.Vector2()); uniforms.uRes.value.set(db.x, db.y); } ``` Called on load + on resize + on quality change. Adaptive: track ema of dt; after 120 frames of warmup, every 60 frames check if ema>36ms → drop tier if >0. Also cap: if initial dpr is huge → already covered by quality pr. Now let me write out the HUD JS: ```js const $ = id => document.getElementById(id); function setTgl(btn,on){ btn.classList.toggle('on',on); btn.querySelector('.st').textContent = on?'ON':'OFF'; } ``` Key Q: tier=(tier+1)%3 apply. applyQuality(): ```js function applyQuality(){ const q = QUALITY[tier]; const pr = q.pr(); renderer.setPixelRatio(pr); composer.setPixelRatio(pr); resize(); uniforms.uSteps.value = q.steps; $('tQual').textContent = q.name + (auto? '·AUTO':''); } ``` composer.setPixelRatio exists ✓. FPS: accumulate frames over 500ms → fps display + ms (ema frame dt). Telemetry update per frame cheap enough but throttle to 150ms. Inclination display: elev deg. Solver: `${q.steps} STEPS`. Now loader dismissal: after first composer.render in tick, if(!shown){loader.classList.add('done'); shown=true; setTimeout remove}. Also document.fonts.ready could delay, but fine. Edge: iOS Safari importmap support — modern is OK. Final check of numbers for visual composition: default dist 16.5, focal 1.0, hole shadow diameter ~5.2 r_s → angle ≈ 5.2/16.5 ≈ 0.315 rad ≈ 18°, on screen: half-height = 0.5 (uv units), focal 1 → half-fov angle atan(0.5) ≈ 26.6°. So shadow spans ~0.315/ (2*0.4636?) in vertical extent fraction of half-height ...: screen y per radian ≈ 1/focal (small angle) → shadow radius in uv ≈ 2.6/16.5 = 0.157 → hole diameter ~0.31 vs screen height 1.0 → about 31% of frame height. Disk extends to 13 r_s → visually ~0.79 radius?? Outer edge on-plane projected ≈ 13/16.5 = 0.79 half-height — spans nicely. Lensed arcs above add. Good composition. Maybe distance 18 for more breathing room; let's set dist 18, distT 18. Zoom range [7, 70]. At 7 close-up dramatic; step coverage OK. Also disk outer 13 → visually fades by ~10-11 due to exp falloff (0.28*(10-3)=1.96 → e^-1.96=0.14). OK. uExposure default 1.0. Beaming brightness scale 7.0 might blow out to huge on blueshift side: e inner ≈ fall(1)*(0.25+1.45)=1.7*? dens≤1 → (0.25+1.45)=1.7*rim*prof(1) ≈1.7; beam max: g=1.414^3=2.83 → col ≈ tint*1.7*2.83*7 ≈ 33 * tint (≤1) → peak 33. ACES rolls to white; bloom strong. Maybe scale 5.5. Let me set 5.0, exposure 1.1. Red side: g=0.47 → beam 0.104; e similar 1.7*0.104*5 = 0.88 * redshifted tint (T*0.47 → 6800*0.47≈3200K orange) → dim ember ✓. Mid-disk r=6: prof=(3/6)^2=0.25; T=6800*(0.5)^0.75=4039K; e≈1.0*0.25*(0.25+~0.9)=0.29*5*beam(~1) ≈1.4 moderate ✓. Alpha: fall*(0.4+dens)*2 clamp: inner 1*(0.4+1)*2=2.8→1 → opaque core ✓ outer partial. Multiple images: lensed upper arc is a second crossing at larger rr? Actually the upper image is rays crossing plane behind/above hole — same plane, different radius region (near photon ring). Accumulation handles it. Rays that cross plane outside DISK_OUT → ignored, continue ✓. One more physical flourish: add subtle lens flare? No — keep physical. Gravitational dimming of sky? Skip. Confident. Also let me verify the GLSL ternary chain for blackbody is valid GLSL (nested ternary OK). `c.r = t < 66.0 ? 1.0 : ...` fine. Also note: `float tw = 0.82 + 0.18*sin(uTime*...)` in starLayer uses uTime ✓. Also: three star layers × (hash etc) per escaped ray — fine. Edge: when uLensing = 0, hv/h2 unused but accel zero → straight; disk crossing works; horizon check: straight ray passing within r<1 of center → captured → correctly drawn as black disk of radius 1 (smaller than the lensed shadow but fine as toggle demo). Now let me finalize copy for HUD. Overline: "DEEP FIELD // GALACTIC NUCLEUS · 26 673 LY" Title: "SGR A★" Sub: "Schwarzschild metric · real-time null-geodesic ray tracer" Telemetry panel header: "TELEMETRY" + pulsing dot. Rows: - RADIUS → "18.00 r_s" - INCLINATION → "10.3°" - SOLVER → "340 STEPS" - FRAME → "16.6 MS · 60 FPS" - RENDER → "HIGH" Bottom-left buttons: [D] DOPPLER BEAMING [L] GEODESIC LENSING [Q] RENDER QUALITY (value shown: HIGH) Bottom-right: "DRAG — ORBIT · SCROLL — ZOOM · DBL-CLICK — RESET" physics: "PHOTON SPHERE 1.5 r_s · ISCO 3 r_s · I ∝ δ³" Loader center: "CALIBRATING NULL GEODESICS" + bar + small "three.js · WebGL2". Mobile: reduce padding, hide #br .phys and sub, smaller title. Also add slight parallax on HUD? No — instrument is static. Add CSS animations: fadeUp for header items with staggered delays; corner scale-in. Also let's handle cursor: canvas {cursor:grab} body.dragging canvas{cursor:grabbing}. Final check on Q toggle label update + quality auto badge. Also keyboard: prevent scroll on space? Not used. Let me write it out. Also, one subtle bug risk: composer.setPixelRatio — does EffectComposer have setPixelRatio? Yes (this._pixelRatio). And setSize uses it. OK. getDrawingBufferSize needs a target vector ✓. Ensure uRes matches actual buffer (w*pr). ✓ Dither uses gl_FragCoord ✓. Also ensure canvas element has id="view" for renderer param. Also handle context lost: canvas.addEventListener('webglcontextlost') → show loader text. Minor; skip? Include a simple handler for good measure. Now let me write the complete file text. Careful with GLSL string quotes (backticks) — no backticks inside. One more: `uniform mat3 uCam;` Matrix3 passed via ShaderMaterial uniforms works with {value: new THREE.Matrix3()} ✓. JS matrix set rows: uCam.value.set(right.x, upv.x, fwd.x, right.y, upv.y, fwd.y, right.z, upv.z, fwd.z); Column 0 = (right.x, right.y, right.z)? Matrix3.set(n11,n12,n13,n21,...) row-major: row1 = right.x, upv.x, fwd.x; so M*v = v.x*col0 with col0=(n11,n21,n31)=(right.x,right.y,right.z) ✓. Time to write it out. Here's a single-file, physically-grounded black hole: per-pixel null-geodesic integration through the Schwarzschild metric, so you get the true photon ring, the lensed top/bottom images of the disk, Doppler beaming (one limb glaring blue-hot, the other dimmed), gravitational redshift, Keplerian disk turbulence, and a lensed starfield — finished with HDR bloom and an instrument-style HUD. Drag to orbit, scroll to zoom, and use `D` / `L` to toggle beaming and lensing mid-flight. ```html SGR A★ — Relativistic Ray Tracer

◉ DEEP FIELD // GALACTIC NUCLEUS · 26 673 LY

SGR A★

Schwarzschild metric · real-time null-geodesic ray tracer

TELEMETRY

CAM RADIUS—

INCLINATION—

SOLVER—

FRAME—

RENDER—

DRAG ORBIT · SCROLL ZOOM · DBL-CLICK RESET

PHOTON SPHERE 1.5 r_s · ISCO 3 r_s
BEAMING I ∝ δ³ · REDSHIFT √(1 − r_s/r)

CALIBRATING NULL GEODESICS

three.js · WebGL · GR/2025

``` **What makes it physically honest** - **Real geodesics** — every pixel integrates `d²x/dλ² = −1.5·h²·x/r⁵` (the exact Schwarzschild null-geodesic equation in these coordinates), so the shadow, photon ring, and the arcs of the disk appearing *above and below* the hole all emerge from the math, not from tricks. - **Relativistic disk** — Keplerian differential rotation (ISCO at 3 rₛ), Doppler beaming `I ∝ δ³`, gravitational redshift `√(1−rₛ/r)`, and a blackbody temperature profile `T ∝ r^(−3/4)` — the approaching limb blazes blue-white while the receding limb fades to a dim ember. - **Multi-image accumulation** — rays that cross the disk plane several times (lensed far side) composite with transmittance, and the starfield behind the hole is genuinely lensed. - **HDR pipeline** — linear render → Unreal bloom → ACES tonemap, with adaptive resolution tiers (`Q`) if the frame rate dips. Try turning lensing off (`L`) while beaming stays on — the contrast between the flat Newtonian view and the warped one is the whole lesson of the simulation.

Black hole