Interstellar Black Hole — Simulation

Interstellar Black Hole — Controls

Time Dilation 1.00x

Gravitational Lensing

Quantum Jets

Volumetric Dust

VR Mode

Interstellar style • Use mouse / touch to explore • Press UI for sound cues

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { VRButton } from 'three/addons/webxr/VRButton.js'; import createScene from './scene.js'; import { createRenderer, composerLoop } from './postprocessing.js'; import { setupUI } from './ui.js'; import { setupAudio } from './audio.js'; // Renderer & Canvas const renderer = createRenderer(); document.body.appendChild(renderer.domElement); // Scene, camera, controls const { scene, camera, resizeObservers, update } = await createScene(renderer); // Orbit controls for non-XR interaction const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minDistance = 1; controls.maxDistance = 500; // Enable XR VR button document.getElementById('vrBtn').appendChild(VRButton.createButton(renderer)); renderer.xr.enabled = true; // Postprocessing composer and passes const { composer, updateComposerUniforms } = composerLoop(renderer, scene, camera); // Audio const audio = await setupAudio(); // Provide audio triggers to UI later // UI const ui = setupUI({ renderer, camera, controls, composer, audio, updateComposerUniforms }); // Resize handling function onWindowResize() { const w = window.innerWidth; const h = window.innerHeight; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); composer.setSize(w, h); updateComposerUniforms(); resizeObservers.forEach(fn => fn(w, h)); } window.addEventListener('resize', onWindowResize, { passive: true }); onWindowResize(); // Animation loop let last = performance.now(); function animate(now) { renderer.setAnimationLoop(() => {}); // keep XR friendly } // Use RAF that also plays nicely with XR function raf(now) { const dt = (now - last) / 1000; last = now; // scaled time for dilation const scaledDT = dt * ui.timeScale; // scene update update(scaledDT, now * 0.001, ui); controls.update(); // Render through composer (postprocessing) composer.render(scaledDT); requestAnimationFrame(raf); } requestAnimationFrame(raf); import * as THREE from 'three'; import { BoxGeometry, Mesh, MeshStandardMaterial } from 'three'; import { createAccretionDisk, createEventHorizon, createStarfield, createJets, createVolumetricDust } from './shaders.js'; export default async function createScene(renderer) { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); // Camera const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 2000); camera.position.set(0, 10, 40); // Resize observers for small things that need size const resizeObservers = []; // Add ambient and cinematic rim lights const ambient = new THREE.AmbientLight(0xffffff, 0.08); scene.add(ambient); const rim = new THREE.PointLight(0xffaaee, 2.0, 200); rim.position.set(-30, 40, 50); scene.add(rim); // Create starfield const starfield = createStarfield(); scene.add(starfield); // Accretion disk const disk = await createAccretionDisk(); scene.add(disk.group); // Event horizon (black sphere + shader rim) const horizon = createEventHorizon(); scene.add(horizon); // Jets const jets = createJets(); scene.add(jets.group); // Volumetric dust const dust = createVolumetricDust(); scene.add(dust.group); // Small debug helper (can be hidden) //const box = new Mesh(new BoxGeometry(1,1,1), new MeshStandardMaterial({color:0x00ff00})); //box.position.set(10,0,0); //scene.add(box); // Update function called every frame (dt seconds, t seconds total) function update(dt, t, ui) { // Star twinkle starfield.material.uniforms.uTime.value = t; // Disk rotation, Doppler subtle shift disk.group.rotation.z += dt * 0.12 * disk.params.rotationSpeed; // Jets flicker and advance jets.update(dt, t, ui); // Volumetric haze subtle motion dust.update(dt, t); // Event horizon shader time horizon.material.uniforms.uTime.value = t; // Toggle visibility from UI disk.group.visible = ui.diskVisible !== false; jets.group.visible = ui.jetsVisible; dust.group.visible = ui.volumetricVisible; } return { scene, camera, resizeObservers, update }; } import * as THREE from 'three'; // Utilities const rand = (a,b) => (Math.random()*(b-a))+a; // Starfield: shader on big sphere with procedural stars & gravitational warp support via uniform export function createStarfield() { const geom = new THREE.SphereGeometry(900, 64, 32); // Invert normals to view from inside geom.scale(-1, 1, 1); const mat = new THREE.ShaderMaterial({ side: THREE.BackSide, uniforms: { uTime: { value: 0 }, uWarpCenter: { value: new THREE.Vector2(0.5,0.5) }, uWarpStrength: { value: 0.7 } // controlled by postprocessing lensing pass too }, vertexShader: ` varying vec3 vPos; void main(){ vPos = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } `, fragmentShader: ` varying vec3 vPos; uniform float uTime; // Simple blue-white twinkling stars using noise-ish hashing float hash(vec2 p) { return fract(sin(dot(p,vec2(12.9898,78.233))) * 43758.5453); } void main(){ vec3 dir = normalize(vPos); // map spherical coords float lat = asin(dir.y); float lon = atan(dir.z, dir.x); vec2 uv = vec2((lon / 3.1415926) * 0.5 + 0.5, lat / 3.1415926 + 0.5); float h = hash(floor(uv*1000.0)); float tw = pow(h, 20.0); // sparse bright stars float shimmer = 0.5 + 0.5 * sin(uTime*2.0 + h*30.0); vec3 col = mix(vec3(0.7,0.8,1.0), vec3(1.0,0.9,0.8), h); col *= tw * (0.6 + 0.4*shimmer); // background faint nebula float neb = 0.02 * (0.5 + 0.5 * sin(dir.x*2.0 + uTime*0.05)); gl_FragColor = vec4(col + neb, clamp(col.r+col.g+col.b+neb,0.0,1.0)); // soft tone mapping gl_FragColor.rgb = 1.0 - exp(-gl_FragColor.rgb*2.0); } ` }); const mesh = new THREE.Mesh(geom, mat); return mesh; } // Accretion Disk: ring mesh with shader material that simulates Doppler shift via view-tangent dot product export async function createAccretionDisk() { const group = new THREE.Group(); const innerR = 2.5; const outerR = 30; const segments = 256; const geom = new THREE.RingGeometry(innerR, outerR, segments, 1); geom.rotateX(-Math.PI/2); const mat = new THREE.ShaderMaterial({ side: THREE.DoubleSide, transparent: true, uniforms: { uTime: { value: 0 }, uInnerRadius: { value: innerR }, uOuterRadius: { value: outerR }, uBaseColorA: { value: new THREE.Color(0xff6600) }, // warm uBaseColorB: { value: new THREE.Color(0x66b3ff) }, // cool uCameraPos: { value: new THREE.Vector3() }, uRotation: { value: 0.0 } }, vertexShader: ` varying vec2 vUv; varying vec3 vPos; void main(){ vPos = position; vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } `, fragmentShader: ` varying vec2 vUv; varying vec3 vPos; uniform float uTime; uniform float uInnerRadius; uniform float uOuterRadius; uniform vec3 uBaseColorA; uniform vec3 uBaseColorB; uniform vec3 uCameraPos; uniform float uRotation; // simple pseudo-random float rand(float x){ return fract(sin(x*12.9898)*43758.5453); } void main(){ float r = length(vec2(vPos.x, vPos.z)); if(r < uInnerRadius) discard; // radial falloff float t = smoothstep(uInnerRadius, uOuterRadius, r); // add small-scale turbulence for streaks float streak = pow(abs(sin((vPos.x+vPos.z)*0.5 + uTime*2.0))*0.6 + rand(r)*0.2, 0.9); // compute tangent direction to disk for Doppler: approximate using derivative rotation vec3 worldPos = vec3(vPos.x, 0.0, vPos.z); vec3 toCam = normalize(uCameraPos - worldPos); vec3 tangent = normalize(vec3(-worldPos.z, 0.0, worldPos.x)); // rotated 90 degrees in disk plane float dop = dot(normalize(tangent), toCam); // -1..1 // map doppler into hue shift between base colors float shift = smoothstep(-0.8, 0.8, dop); vec3 col = mix(uBaseColorA, uBaseColorB, shift); // radial color gradient and emissive brightness float emiss = (1.0 - t) * 3.0 * (0.6 + 0.6*streak); // rim brightening near inner edge (photon ring) float rim = exp(-pow((r - uInnerRadius)*6.0, 2.0)); emiss += rim * 6.0; vec3 final = col * emiss; // soft alpha by radial distance float alpha = smoothstep(uOuterRadius, uOuterRadius-1.5, r) * 0.95; gl_FragColor = vec4(final, alpha); // tone-map gl_FragColor.rgb = 1.0 - exp(-gl_FragColor.rgb*0.5); } ` }); const mesh = new THREE.Mesh(geom, mat); mesh.rotation.x = -Math.PI/2 * 0.999; group.add(mesh); // Thin bright photon ring near inner radius const ringGeom = new THREE.TorusGeometry((innerR+0.2), 0.25, 16, 256); const ringMat = new THREE.MeshBasicMaterial({ color: 0xffffff, blending: THREE.AdditiveBlending, transparent:true, opacity:0.8 }); const ring = new THREE.Mesh(ringGeom, ringMat); ring.rotation.x = Math.PI/2; group.add(ring); return { group, params: { rotationSpeed: 1.0 }, material: mat }; } // Event Horizon: central dark sphere plus shader rim that simulates gravitational bending glow export function createEventHorizon() { const geom = new THREE.SphereGeometry(2.4, 64, 32); const mat = new THREE.ShaderMaterial({ side: THREE.FrontSide, transparent: true, uniforms: { uTime: { value: 0 }, uRadius: { value: 2.4 }, uGlowColor: { value: new THREE.Color(0x6600ff) }, uGlowIntensity: { value: 1.6 } }, vertexShader: ` varying vec3 vPos; void main(){ vPos = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } `, fragmentShader: ` varying vec3 vPos; uniform float uTime; uniform float uRadius; uniform vec3 uGlowColor; uniform float uGlowIntensity; void main(){ float r = length(vPos); // event horizon completely black inside if(r < uRadius - 0.01){ gl_FragColor = vec4(0.0,0.0,0.0,1.0); return; } // rim glow based on r distance float rim = smoothstep(uRadius + 0.0, uRadius + 0.6, r); float glow = (1.0 - rim) * uGlowIntensity * (0.6 + 0.4*sin(uTime*3.0 + r*10.0)); vec3 col = uGlowColor * glow; gl_FragColor = vec4(col, clamp(glow, 0.0, 1.0)); } ` }); const mesh = new THREE.Mesh(geom, mat); // make sure it's centered return mesh; } // Jets: particle cones using Points and shader for plasma look export function createJets() { const group = new THREE.Group(); const particles = 1200; const geometryTop = new THREE.BufferGeometry(); const positionsTop = new Float32Array(particles * 3); const sizes = new Float32Array(particles); for(let i=0;i { p.mesh.position.x += Math.sin(t*0.03 + i)*0.02 * (0.6 + i*0.03); p.mesh.rotation.z += dt * 0.02 * (1 + i*0.2); // slight breathing opacity to react to proximity (crudely) p.mat.opacity = 0.03 + 0.12 * (0.5 + 0.5*Math.sin(t*0.5 + i)); }); } return { group, update }; } // Helper to create a soft radial sprite using canvas function createSpriteTexture() { const size = 256; const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); const grad = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2); grad.addColorStop(0, 'rgba(255,255,255,1)'); grad.addColorStop(0.4, 'rgba(200,180,255,0.6)'); grad.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = grad; ctx.fillRect(0,0,size,size); const tex = new THREE.CanvasTexture(canvas); tex.minFilter = THREE.LinearFilter; tex.magFilter = THREE.LinearFilter; return tex; } import * as THREE from 'three'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { FilmPass } from 'three/addons/postprocessing/FilmPass.js'; // Lensing shader pass: screen-space radial distortion based on center and strength const LensingShader = { uniforms: { "tDiffuse": { value: null }, "uStrength": { value: 0.8 }, "uCenter": { value: new THREE.Vector2(0.5, 0.5) }, "uRadius": { value: 0.28 }, "uTime": { value: 0 } }, vertexShader: ` varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } `, fragmentShader: ` varying vec2 vUv; uniform sampler2D tDiffuse; uniform vec2 uCenter; uniform float uStrength; uniform float uRadius; uniform float uTime; void main(){ vec2 uv = vUv; vec2 dir = uv - uCenter; float dist = length(dir); float effect = smoothstep(uRadius, 0.0, dist); float distortion = uStrength * effect * (0.5 + 0.5*sin(uTime*2.0 + dist*30.0)); vec2 displaced = uv + normalize(dir) * distortion * (0.6 + pow(dist,1.5)*2.0) ; // sample the scene with displaced coords vec4 color = texture2D(tDiffuse, displaced); // darken inside the innermost radius to simulate event horizon shadow float shadow = smoothstep(uRadius*0.6, uRadius*0.35, dist); color.rgb *= (1.0 - 0.8*shadow); gl_FragColor = color; } ` }; // Chromatic aberration + subtle film grain shader const ChromaticShader = { uniforms: { tDiffuse: { value: null }, uOffset: { value: 0.002 } }, vertexShader: ` varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); } `, fragmentShader: ` varying vec2 vUv; uniform sampler2D tDiffuse; uniform float uOffset; void main(){ vec2 d = vec2(uOffset, uOffset); float r = texture2D(tDiffuse, vUv + d).r; float g = texture2D(tDiffuse, vUv).g; float b = texture2D(tDiffuse, vUv - d).b; vec3 col = vec3(r,g,b); gl_FragColor = vec4(col,1.0); } ` }; export function createRenderer() { const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMappingExposure = 1.0; // Enable physically correct lights later return renderer; } export function composerLoop(renderer, scene, camera) { const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const lensPass = new ShaderPass(LensingShader); lensPass.uniforms.uStrength.value = 0.85; lensPass.uniforms.uRadius.value = 0.28; composer.addPass(lensPass); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.9, 0.5, 0.9); bloomPass.threshold = 0.1; bloomPass.strength = 0.9; bloomPass.radius = 0.6; composer.addPass(bloomPass); const chromaPass = new ShaderPass(ChromaticShader); chromaPass.uniforms.uOffset.value = 0.004; composer.addPass(chromaPass); const filmPass = new FilmPass(0.15, 0.025, 648, false); filmPass.uniforms.nIntensity.value = 0.05; composer.addPass(filmPass); // For UI access function updateComposerUniforms() { lensPass.uniforms.uCenter.value.set(0.5, 0.5); } // expose composer and controls return { composer, updateComposerUniforms, setLensingEnabled(enabled) { lensPass.enabled = enabled; }, setLensingStrength(s) { lensPass.uniforms.uStrength.value = s; }, setTime(t) { lensPass.uniforms.uTime.value = t; } }; } // UI wiring: connect sliders/buttons to scene/postprocessing/audio import * as THREE from 'three'; import { MeshBasicMaterial } from 'three'; export function setupUI({ renderer, camera, controls, composer, audio, updateComposerUniforms }) { const timeSlider = document.getElementById('timeScale'); const timeVal = document.getElementById('timeVal'); const lensBtn = document.getElementById('lensingToggle'); const jetBtn = document.getElementById('jetToggle'); const volBtn = document.getElementById('volumetricToggle'); // state that other modules read const state = { timeScale: parseFloat(timeSlider.value), lensing: true, jetsVisible: true, volumetricVisible: true, diskVisible: true }; timeSlider.addEventListener('input', (e) => { state.timeScale = parseFloat(e.currentTarget.value); timeVal.textContent = state.timeScale.toFixed(2) + 'x'; // modulate audio pitch/volume for time dilation immersion if(audio) audio.setTimeScale(state.timeScale); // subtle UI beep if(audio) audio.playBleep(0.02, 120 + state.timeScale*40); }); lensBtn.addEventListener('click', () => { state.lensing = !state.lensing; // composer has a lens pass as pass 1 composer.passes.forEach(p => { if(p && p.uniforms && p.uniforms.uStrength !== undefined) { p.enabled = state.lensing; } }); if(audio) audio.playBleep(0.08, state.lensing ? 880 : 220); }); jetBtn.addEventListener('click', () => { state.jetsVisible = !state.jetsVisible; if(audio) audio.playBleep(0.05, state.jetsVisible ? 660 : 300); }); volBtn.addEventListener('click', () => { state.volumetricVisible = !state.volumetricVisible; if(audio) audio.playBleep(0.04, state.volumetricVisible ? 520 : 320); }); // expose function to XR and others // Insert VR button handled in main.js; keep VR interaction hooks minimal // Return state plus small helpers used by scene update return { ...state, setDiskVisible(v) { state.diskVisible = v; }, get diskVisible() { return state.diskVisible; }, get jetsVisible() { return state.jetsVisible; }, get volumetricVisible() { return state.volumetricVisible; }, timeScale: state.timeScale }; } // Lightweight WebAudio-based sound design: infrasound drone + UI bleeps export async function setupAudio() { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const master = ctx.createGain(); master.gain.value = 0.6; master.connect(ctx.destination); // Infrasound drone (sub-bass) using oscillator and low-pass const droneOsc = ctx.createOscillator(); const droneGain = ctx.createGain(); const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.value = 60; droneOsc.type = 'sine'; droneOsc.frequency.value = 36; // deep sub-bass droneGain.gain.value = 0.8; droneOsc.connect(lp); lp.connect(droneGain); droneGain.connect(master); droneOsc.start(); // Slow LFO to modulate drone amplitude const lfo = ctx.createOscillator(); lfo.frequency.value = 0.05; const lfoGain = ctx.createGain(); lfoGain.gain.value = 0.25; lfo.connect(lfoGain); lfoGain.connect(droneGain.gain); lfo.start(); function playBleep(duration = 0.06, freq = 440) { const now = ctx.currentTime; const o = ctx.createOscillator(); const g = ctx.createGain(); o.type = 'sine'; o.frequency.value = freq; g.gain.setValueAtTime(0.0001, now); g.gain.exponentialRampToValueAtTime(0.12, now + 0.01); g.gain.exponentialRampToValueAtTime(0.0001, now + duration + 0.01); o.connect(g); g.connect(master); o.start(now); o.stop(now + duration + 0.02); } function setTimeScale(scale) { // change drone frequency subtly and LFO speed droneOsc.frequency.setTargetAtTime(28 + (scale-1)*10, ctx.currentTime, 0.5); lfo.frequency.setTargetAtTime(Math.max(0.02, 0.05 * Math.max(0.5, scale)), ctx.currentTime, 0.5); } // Resume audio on first user interaction to satisfy browsers' autoplay policy function resumeOnGesture() { const resume = () => { if (ctx.state === 'suspended') ctx.resume(); window.removeEventListener('pointerdown', resume); window.removeEventListener('keydown', resume); }; window.addEventListener('pointerdown', resume); window.addEventListener('keydown', resume); } resumeOnGesture(); return { playBleep, setTimeScale }; }