Black Hole v2

Prompt

Crea DESDE CERO una simulación interactiva de un agujero negro relativista, hiperrealista y funcional para navegador. No recibes archivos, código previo ni assets. Decide la arquitectura por tu cuenta. No hagas preguntas. Razona internamente y entrega directamente la implementación. ## OBJETIVO Genera un único `blackhole.html` autocontenido que, al abrirse, muestre inmediatamente una escena espacial viva con: - agujero negro central y sombra negra - disco de acreción caliente y dinámico - lente gravitacional fuerte - photon ring - fondo estelar procedural - distorsión de estrellas por lensing - lado posterior del disco visible por curvatura de la luz - Doppler beaming dependiente de la cámara - redshift gravitacional aproximado - profundidad y perspectiva - cámara orbital - UI científica/cinematográfica - controles en tiempo real - calidad adaptable Debe parecer una visualización científica avanzada en tiempo real, no una ilustración, un gif ni un efecto CSS. ## SALIDA Entrega SOLO un archivo HTML completo. Todo debe estar dentro del mismo archivo: HTML + CSS + JavaScript + GLSL + shaders + UI + física + rendering. No crear `.js`, `.css`, `.json`, módulos locales, imágenes, modelos, carpetas, backend ni build step. Usa WebGL2 directamente siempre que sea posible y evita dependencias externas. La respuesta final debe contener únicamente el HTML completo, listo para guardar como `blackhole.html`. ## ARQUITECTURA Usa preferentemente: - fullscreen quad - WebGL2 - fragment shader como renderer principal La CPU debe ocuparse principalmente de: - inicialización WebGL - cámara - input - UI - tiempo - uniforms - resize El GPU debe realizar la mayor parte de: - trayectoria de rayos - lensing - disco - estrellas - iluminación - efectos relativistas - postprocesado Mantén el código compacto y eficiente. ## MODELO FÍSICO Representa preferentemente un agujero negro de Schwarzschild. Relaciones internas: - `Rs = 2GM/c²` - esfera de fotones = `1.5 Rs` - ISCO = `3 Rs` - radio de sombra aparente ≈ `1.30 Rs` No necesitas resolver Einstein de forma exacta si resulta demasiado costoso. Sí debes implementar una aproximación coherente de: - curvatura gravitacional - captura de rayos - lente gravitacional - sombra - disco deformado - órbita del gas - Doppler - redshift Una aproximación simple y coherente es preferible a una solución incompleta y frágil. ## RAY TRACING Para cada píxel, conceptualmente: 1. generar rayo desde la cámara 2. transformarlo al marco del agujero negro 3. aproximar su trayectoria gravitacional 4. comprobar captura o intersección con el disco 5. si escapa, obtener el fondo estelar 6. calcular emisión 7. aplicar efectos relativistas 8. producir el color final Son válidos: - integración incremental - ray marching - aproximación analítica - método híbrido Usa más precisión cerca del campo fuerte y pasos mayores lejos. Implementa: - máximo de pasos - early exits - epsilons - protección contra `NaN`/`Infinity` El photon ring debe surgir de rayos cercanos a trayectorias críticas o de una aproximación matemáticamente ligada a ellas. ## SOMBRA La región capturada debe ser completamente negra. No la representes como una esfera iluminada. La transición debe ser ópticamente natural: fondo → lensing → photon ring → sombra. No dibujes un borde decorativo para fingir esa transición. ## LENSING La lente gravitacional debe afectar tanto al disco como al fondo. Debe producir: - deformación del disco - imágenes múltiples - curvatura alrededor de la sombra - aparición del lado posterior del disco - distorsión de estrellas - fuerte distorsión cerca de la sombra El disco físico puede permanecer plano, pero su imagen observada debe deformarse por la trayectoria de la luz. La geometría debe cambiar realmente al orbitar la cámara. ## PHOTON RING Debe: - rodear la sombra - ser fino e intenso - variar con la orientación - integrarse con el disco - aumentar de importancia con zoom No lo implementes como una circunferencia CSS o una línea fija independiente. ## DISCO DE ACRECIÓN Genera un disco procedural continuo dentro del shader. Debe tener: - radio interno cercano al ISCO - radio externo configurable - densidad radial - temperatura radial - velocidad orbital diferencial - turbulencia - filamentos - ondas/estructuras finas - regiones calientes - evolución temporal estable - grosor visual sutil La velocidad orbital debe disminuir aproximadamente con el radio. La zona interna debe ser más caliente, rápida y brillante. La zona externa debe degradarse progresivamente. Usa ruido procedural a varias escalas, evitando patrones repetitivos. Debe parecer plasma/gas caliente, nunca un torus sólido. ## EMISIÓN La emisión debe depender aproximadamente de: - temperatura - densidad - radio - orientación - longitud recorrida por el rayo dentro del disco Usa una aproximación de transferencia radiativa cuando sea viable, por ejemplo una forma de: `Iout = Iin*exp(-tau) + S*(1-exp(-tau))` No uses únicamente un color fijo por radio. ## TEMPERATURA Utiliza una paleta térmica físicamente inspirada: - interior: blanco/amarillo - medio: amarillo/naranja - exterior: naranja/rojo Puedes aproximar blackbody/Planck eficientemente. Conserva detalle en altas luces y evita que el disco quede completamente blanco. ## DOPPLER RELATIVISTA Calcula Doppler a partir de: - velocidad orbital - dirección tangencial del gas - dirección de cámara El material que se aproxima debe tender a ser: - más brillante - más energético en color El material que se aleja debe tender a ser: - más tenue - más frío/rojizo MUY IMPORTANTE: el lado brillante debe cambiar cuando la cámara orbita. NO hardcodees “lado izquierdo brillante”. No exageres hasta hacer desaparecer media estructura. ## REDSHIFT GRAVITACIONAL Calcula una aproximación dependiente de la distancia al agujero negro. Debe modificar moderadamente: - energía - color - intensidad - temperatura aparente Combínalo con Doppler. ## ESTRELLAS Genera proceduralmente un campo con: - muchas estrellas débiles - algunas medianas - pocas muy brillantes - distintos tamaños - distintas temperaturas de color - diferentes profundidades - distribución no uniforme No uses una fotografía como fondo principal. Las estrellas cercanas al campo de lente deben poder: - desplazarse - duplicarse - estirarse - aumentar su brillo Las lejanas deben permanecer casi estables. ## PROFUNDIDAD Usa: - perspectiva - parallax - distintas profundidades - escalas aparentes - movimiento diferencial sutil La escena debe sentirse tridimensional. ## ÓPTICA Añade con moderación: - bloom - tone mapping - exposición - halos de fuentes intensas - antialiasing - aberración cromática muy leve Los efectos ópticos nunca deben utilizarse para ocultar errores geométricos. ## CÁMARA Implementa cámara orbital suave enfocada al 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 Debe permitir: - 360° de yaw - vistas superiores e inferiores - vistas casi de canto - zoom extremo - zoom lejano Suaviza el movimiento y evita clipping o saltos. ## AUTO-ORBIT Auto-orbit lento y cinematográfico. La interacción manual lo desactiva. Debe poder reactivarse. Respeta `prefers-reduced-motion`. ## ZOOM Permite: - ver la escena completa - inspeccionar disco - inspeccionar lensing - observar photon ring - acercarse a detalles del plasma Sin romper la geometría. ## UI Crea una interfaz compacta de estilo científico/cinematográfico: - botón de configuración - panel translúcido - sliders - valores numéricos - estados discretos - pequeño trackball/orbit control Controles: - Black Hole Size - Lensing Strength - Disk Inner Radius - Disk Outer Radius - Disk Temperature - Disk Brightness - Accretion Speed - Relativistic Beaming - Gravitational Redshift - Disk Detail - Star Density - Star Brightness - Photon Ring - Bloom - Exposure - Simulation Speed - Rendering Quality - Auto Orbit Los cambios deben actualizarse en tiempo real sin reconstruir innecesariamente toda la escena. Temas opcionales: - Golden - Blue - Violet - Emerald La sombra central debe permanecer negra. ## TRACKBALL Incluye un pequeño control para yaw/inclinación. Debe ser interactivo con mouse/touch y reflejar la orientación actual. ## PAUSA Pause detiene: - órbita del disco - turbulencia temporal - auto-orbit - tiempo de simulación pero mantiene funcionales: - cámara - UI - sliders - debug ## RENDIMIENTO Prioriza GPU. Evita: - allocations por frame - memory leaks - creación masiva de objetos - loops CPU innecesarios - ray loops infinitos Implementa: `ULTRA / HIGH / MEDIUM / LOW` Ajustando: - ray steps - sampling - resolución interna - detalle del disco - estrellas - bloom Usa resolución adaptable si es viable. Añade histéresis para evitar cambios constantes de calidad. Si el rendimiento cae sostenidamente, reduce calidad gradualmente. Si se mantiene alto, increméntala gradualmente. ## RESPONSIVE Debe funcionar en: - desktop - laptop - tablet - móvil Gestiona correctamente: - `devicePixelRatio` - `visualViewport` - `ResizeObserver` - resize - orientation changes Limita DPR cuando sea necesario. Evita scroll/zoom del navegador durante los gestos de la escena. ## ESTABILIDAD TEMPORAL El ruido y las estructuras del disco deben ser deterministas y continuas. Evita: - flickering - saltos de partículas - cambios aleatorios frame a frame - inestabilidad al mover cámara Interpola suavemente cámara, zoom, inclinación y parámetros. ## DEBUG `D` muestra: - FPS - frame time - resolución interna - DPR - quality - ray steps - simulation time - zoom - yaw - inclination - lensing - exposición - parámetros del disco - cantidad de estrellas - errores Normalmente oculto. Soporta `?debug`. Con `?debug`, expón: `window.__blackHole` con métodos como: `setZoom()`, `setYaw()`, `setInclination()`, `setQuality()`, `pause()`, `resume()`, `reset()`, `stats()`. ## COMPATIBILIDAD Usa GLSL ES 3.00 válido para WebGL2. Mantén consistencia entre uniforms, atributos, tipos y nombres. Si WebGL2 no está disponible, muestra un mensaje de error claro. Si compila mal un shader, muestra diagnóstico en debug. ## ANTI-FALSIFICACIÓN NO resuelvas esto mediante: - círculo negro + anillo naranja - torus 3D - esfera texturizada - sprite fijo - photon ring estático - fondo plano sin lensing - textura circular giratoria - Doppler fijo - arcos manuales para cerrar huecos - gradiente + ruido presentado como ray tracing Las aproximaciones matemáticas están permitidas; una simulación puramente decorativa no. ## ANTI-ARTEFACTOS Evita especialmente: - disco cortado - huecos arriba/abajo - anillos en forma de C - doble borde de sombra - estrellas dentro de la sombra - flickering - z-fighting - aliasing fuerte - sobreexposición - clipping al hacer zoom - `NaN`/`Infinity` - inversión incorrecta de orientación - deformaciones que cambien incorrectamente con el tamaño de pantalla ## CÓDIGO Organiza internamente: 1. configuration 2. state 3. utilities 4. WebGL 5. shaders 6. physics 7. camera 8. disk 9. stars 10. input 11. UI 12. postprocess 13. debug 14. resize 15. main loop 16. boot No gastes salida en comentarios extensos; prioriza implementación. ## AUTOVERIFICACIÓN Antes de entregar, revisa y corrige internamente: - HTML/CSS/JS válidos - WebGL2 inicializado - shaders compilables - uniforms/atributos correctos - DOM IDs existentes - listeners correctos - variables inicializadas - sin archivos externos obligatorios - sin pseudocódigo - sin funciones vacías - sin bucles infinitos - protección contra `NaN`/`Infinity` Comprueba conceptualmente que: - la sombra aparece - el disco aparece y gira - existe velocidad diferencial - existe lensing - existe photon ring - el lado posterior del disco es visible - las estrellas aparecen - las estrellas reaccionan al lensing - el Doppler cambia con la cámara - el redshift afecta la emisión - zoom/orbit/touch/pinch funcionan - auto-orbit funciona - pause funciona - sliders funcionan - bloom funciona - reset funciona - resize funciona Si una técnica avanzada compromete la funcionalidad, usa una aproximación más simple pero coherente. ## PRIORIDAD Ante cualquier conflicto: 1. funcionalidad 2. estabilidad 3. física/óptica coherente 4. interacción 5. realismo visual 6. rendimiento 7. UI 8. detalles secundarios Una excelente simulación Schwarzschild es preferible a una Kerr incompleta. ## FINAL Genera AHORA el único `blackhole.html` completo desde cero. Debe permitir: ABRIR → VER → ORBITAR → HACER ZOOM → OBSERVAR LENSING → VER EL DISCO DEFORMADO → ACERCARSE AL PHOTON RING → PAUSAR → CAMBIAR PARÁMETROS → EXPLORAR. Entrega únicamente el HTML completo.

A system prompt was added to support web rendering