Black Hole Sim

Prompt

# MISIÓN Crea DESDE CERO una simulación interactiva de un agujero negro relativista, visualmente hiperrealista y funcional, ejecutable directamente en un navegador moderno. NO recibirás archivos de referencia, código previo ni assets. No hagas preguntas. No devuelvas teoría ni pseudocódigo: genera la implementación completa. ## OBJETIVO Entrega un único `blackhole.html` que muestre inmediatamente una escena viva con: - agujero negro central y sombra negra convincente - disco de acreción caliente, procedural y animado - lente gravitacional - photon ring - distorsión del fondo estelar - aparición visual del lado posterior del disco - Doppler beaming y redshift gravitacional aproximados - profundidad/parallax sutil - cámara orbital interactiva - UI científica/cinematográfica minimalista - calidad adaptable y rendimiento razonable Debe sentirse como una simulación en tiempo real, no como una imagen decorativa. ## RESTRICCIÓN ABSOLUTA Todo debe estar dentro de UN SOLO archivo HTML: HTML + CSS + JavaScript + GLSL + shaders + UI + simulación. NO crear archivos `.js`, `.css`, `.json`, módulos locales, imágenes locales ni assets locales obligatorios. Puedes usar CDN público solo cuando aporte valor real, pero la escena principal debe ejecutarse preferentemente con WebGL2. La respuesta final debe contener ÚNICAMENTE el HTML completo, listo para copiar a `blackhole.html`. ## MODELO FÍSICO Representa preferentemente un agujero negro de Schwarzschild con relaciones coherentes: - `Rs = 2GM/c²` - esfera de fotones: `r = 1.5 Rs` - ISCO: `r = 3 Rs` - sombra aparente aproximada: `1.30 Rs` de radio No necesitas resolver Einstein de forma exacta si es inviable en tiempo real. Usa una aproximación matemáticamente coherente y estable. La apariencia debe surgir del modelo, no solo de gradientes y anillos falsos. ## RENDERING La escena principal debe usar preferentemente un fragment shader WebGL2. Para cada píxel, implementa conceptualmente: 1. generar rayo desde cámara 2. transformar al sistema del agujero negro 3. aproximar/integrar su curvatura gravitacional 4. determinar si: - es capturado - intersecta el disco - pasa cerca de la esfera de fotones - llega al fondo estelar 5. calcular emisión y efectos relativistas 6. aplicar postprocesado moderado Son válidos: ray marching, integración incremental, aproximaciones analíticas o híbridas, siempre que sean funcionales en tiempo real. NO reemplaces la simulación por un simple círculo negro + halo. ## SOMBRA Y PHOTON RING La región central debe ser realmente oscura y absorber los rayos correspondientes. El photon ring debe estar ligado a rayos que pasan cerca de la esfera de fotones o a una aproximación física equivalente. Debe: - rodear la sombra - ser fino e intenso - variar con el ángulo - integrarse con el disco - ganar importancia al hacer zoom NO lo implementes como una circunferencia CSS independiente. ## DISCO DE ACRECIÓN El disco debe ser procedural, no una única textura estática. Debe incluir: - radio interno/externo - temperatura/emisión radial - movimiento orbital diferencial - turbulencia - filamentos y estructura fina - densidad variable - regiones calientes - degradado térmico La velocidad debe disminuir con el radio mediante una aproximación orbital coherente. El material debe parecer plasma/gas extremadamente caliente, no plástico, metal, donut ni nebulosa aleatoria. ## LENSING Implementa lente gravitacional aproximada de forma visible y coherente. Debe producir: - deformación del disco - imágenes múltiples - curvatura alrededor de la sombra - aparición del lado posterior del disco por encima/abajo de la sombra - distorsión del fondo estelar - fuerte aumento de distorsión cerca de la región central El disco físico puede permanecer plano; su imagen observada debe deformarse por la trayectoria de la luz. El efecto debe cambiar realmente cuando cambia la cámara. ## RELATIVIDAD VISUAL Implementa aproximaciones de: - Doppler beaming - redshift gravitacional El lado del disco que se mueve hacia la cámara debe tender a verse más brillante y el que se aleja más oscuro. La dirección de ese brillo debe CAMBIAR cuando el usuario orbita la cámara. NO hardcodees un “lado izquierdo brillante”. Usa velocidad orbital + dirección de movimiento + dirección de cámara. El redshift debe modificar moderadamente intensidad/color según la profundidad gravitacional. ## ESTRELLAS Genera proceduralmente un campo estelar con: - distintas magnitudes - tamaños - temperaturas de color - distribución no uniforme - distintas profundidades No uses una foto estática como fondo principal. Las estrellas cercanas al agujero negro deben responder al lensing; las lejanas pueden permanecer casi estables. ## PROFUNDIDAD La escena debe tener profundidad mediante: - parallax - distintas profundidades estelares - perspectiva - diferentes escalas aparentes - movimiento diferencial sutil NO permitas que parezca una simple pantalla 2D. ## CÁMARA E INTERACCIÓN Implementa cámara orbital suave con objetivo en el agujero negro. Mouse: - arrastrar = orbitar - rueda = zoom Touch: - un dedo = orbitar - dos dedos = pinch zoom Teclado: - `ArrowLeft/Right` = yaw - `ArrowUp/Down` = inclinación - `+/-` = zoom - `Space` = pausa - `O` = auto-orbit - `B` = bloom - `D` = debug - `R` = reset La cámara debe soportar 360° horizontal, amplia inclinación y zoom lejano/cercano sin clipping ni saltos. Al orbitar manualmente, el auto-orbit debe desactivarse. Respeta `prefers-reduced-motion`. ## AUTO-ORBIT Y ZOOM El auto-orbit debe ser lento y cinematográfico, configurable y desactivable. El zoom debe permitir: - ver la escena completa - inspeccionar el disco - acercarse al photon ring - apreciar detalles finos del plasma Usa interpolación suave y evita inestabilidad numérica. ## UI Crea un panel compacto y elegante, de estilo científico/cinematográfico, con fondo translúcido y blur moderado. Controles mínimos: - Black Hole Size - Lensing Strength - Disk Inner Radius - Disk Outer Radius - Disk Temperature - Disk Brightness - Accretion Speed - Relativistic Beaming - Gravitational Redshift - Star Density - Star Brightness - Photon Ring - Bloom - Simulation Speed - Rendering Quality - Auto Orbit Actualización en tiempo real, sin reiniciar la aplicación. Añade varias paletas opcionales: - Golden - Blue - Violet - Emerald Incluye un pequeño trackball/orbit interactivo que represente yaw e inclinación. ## PAUSA Al pausar deben detenerse: - disco - estrellas dinámicas - auto-orbit - tiempo de simulación pero seguir funcionando: - cámara - UI - sliders - interacción ## BLOOM Y POSTPROCESADO Añade bloom moderado principalmente a: - disco caliente - photon ring - zonas muy brillantes - estrellas intensas No sobreexpongas toda la imagen. ## RENDIMIENTO Prioriza GPU y WebGL2. Evita allocations por frame, memory leaks y trabajo de CPU innecesario. Implementa niveles `ULTRA / HIGH / MEDIUM / LOW` y, cuando sea útil, resolución interna adaptativa. La calidad puede controlar: - ray steps - sampling - resolución interna - detalle del disco - estrellas - bloom Si el rendimiento cae, baja gradualmente la calidad; si hay margen, súbela gradualmente. ## RESPONSIVE Debe funcionar en: - desktop - laptop - tablet - móvil Usa correctamente cuando corresponda: - `devicePixelRatio` - `visualViewport` - `ResizeObserver` - resize/orientation handling Limita DPR si es necesario. En touch, evita scroll/zoom accidental del navegador sobre la escena. ## ERROR HANDLING Si WebGL2 no está disponible, muestra una pantalla de error limpia explicándolo. Si un shader falla, muestra información de diagnóstico en modo debug. No dejes la pantalla completamente negra sin explicación. ## DEBUG `D` debe mostrar un panel discreto con: - FPS - frame time - resolución interna - DPR - quality level - ray steps - simulation time - zoom - yaw - inclination - parámetros principales - errores Opcionalmente soporta `?debug`. Si `?debug` está activo, expón `window.__blackHole` con métodos como: `setZoom()`, `setYaw()`, `setInclination()`, `setQuality()`, `pause()`, `resume()`, `reset()`, `stats()`. ## ESTABILIDAD Y SHADERS Cuida especialmente: - divisiones por cero - `NaN` - `Infinity` - normalización de vectores degenerados - rayos atrapados indefinidamente - exceso de iteraciones - discontinuidades en el borde de la sombra Usa epsilons, clamps, límites de pasos, convergencia y early-exits. Los shaders deben ser GLSL ES 3.00 válido para WebGL2, con uniforms/atributos/entradas/salidas consistentes. NO dejes TODOs esenciales, funciones vacías ni pseudocódigo. ## ANTI-FALSIFICACIÓN NO hagas la simulación mediante: - círculo negro + anillo naranja - torus 3D con textura de fuego - sprite pegado a pantalla - photon ring estático - fondo estelar plano sin lensing - textura circular girando sin geometría/óptica coherente - Doppler fijo en un lado - duplicación manual de arcos solo para ocultar huecos - gradientes + ruido presentados como ray tracing Las aproximaciones matemáticas están permitidas; una simulación meramente decorativa, no. ## ARQUITECTURA Organiza el HTML en secciones claras: 1. configuration 2. state 3. utilities 4. WebGL 5. vertex shader 6. fragment shader 7. physics 8. camera 9. input 10. stars/disk 11. UI 12. postprocess 13. debug 14. resize 15. main loop 16. boot ## AUTOVERIFICACIÓN Antes de entregar el código, revísalo internamente y corrige problemas. Comprueba: - HTML/CSS/JS válidos - WebGL2 inicializado - shaders compilables - uniforms y atributos existentes - DOM IDs existentes - listeners correctos - sin referencias a archivos inexistentes - sin pseudocódigo esencial - sin funciones vacías - sin bucles infinitos - sin `NaN/Infinity` obvios Y verifica conceptualmente que: - aparece el agujero negro - aparece la sombra - aparece y se mueve el disco - existe lensing - existe photon ring - las estrellas aparecen - el Doppler cambia con la cámara - cámara y zoom funcionan - touch funciona - pause funciona - auto-orbit funciona - sliders funcionan - debug funciona - resize funciona ## PRIORIDADES Ante cualquier conflicto: 1. funcionalidad 2. código completo y ejecutable 3. estabilidad 4. física/óptica coherente 5. interacción 6. calidad visual 7. rendimiento 8. UI 9. detalles secundarios No hagas preguntas. Toma las decisiones técnicas necesarias por tu cuenta. ## RESULTADO FINAL Genera AHORA el archivo HTML completo desde cero. Debe permitir: ABRIR → VER → ORBITAR → HACER ZOOM → OBSERVAR EL LENSING → ACERCARSE AL PHOTON RING → PAUSAR → CAMBIAR PARÁMETROS → EXPLORAR. Entrega únicamente el HTML completo.

A system prompt was added to support web rendering