NEXUS Loja Geek
- ESTUDIO
- MILWEB
- TIPO
- EXPERIENCIA WEBGL
- ESTADO
- EN LÍNEA
02 / LA IDEA
Hero agujero negro 3D (R3F) · posprocesamiento de cine
Las marcas geek y gamer necesitan una vitrina con cara de producto premium, con un impacto visual que las diferencie de la competencia.
01 / 01
Disco de acreción, anillo de fotones y núcleo calculados por píxel con FBM, sin ninguna textura.
02 / 02
Effect de posprocesamiento propio (deflexión ~1/d²) que curva estrellas y nebulosa alrededor del horizonte de eventos.
03 / 03
El scroll de la página frota una timeline de cámara con keyframes, sin lib de scroll externa.
04 / 04
IntersectionObserver apaga el frameloop de R3F fuera del viewport; dpr limitado y antialiasing off.
0102030404 / BAJO EL CAPÓ
01El hero no usa ningún asset de agujero negro listo: es un shader GLSL escrito a mano (BlackHoleScene.jsx) corriendo en un único plano dentro…+
El hero no usa ningún asset de agujero negro listo: es un shader GLSL escrito a mano (BlackHoleScene.jsx) corriendo en un único plano dentro de React Three Fiber. FBM (fractal Brownian motion) genera la turbulencia del disco de acreción en dos capas de ruido, un perfil radial separa disco fino de núcleo, y el anillo de fotones y el "efecto Doppler" (lado que se acerca más claro) se suman por encima, todo calculado por píxel y sin textura. Sobre eso se suma un planeta con atmósfera en fresnel aditivo y un campo de asteroides vía instancedMesh (38 instancias, una única draw call) girando con ruido propio de rotación.
02La distorsión gravitacional es un efecto de posprocesamiento propio, no un filtro listo: una clase LensingEffect que extiende Effect de la l…+
La distorsión gravitacional es un efecto de posprocesamiento propio, no un filtro listo: una clase LensingEffect que extiende Effect de la lib postprocessing y se conecta al pipeline de R3F vía wrapEffect. El shader de la lente desplaza el UV de muestreo del frame entero en función de la distancia al horizonte de eventos (deflexión ~1/d²), curvando estrellas y nebulosa alrededor del agujero como una lente de Einstein real. La cámara, a su vez, no sigue el scroll directamente. Una timeline de Theatre.js (heroSheet, con keyframes de posición y FOV guardados en theatre-state.json) se 'frota' (sequence.position = t * SEQ_LEN) proporcionalmente al scrollY, y el resultado se suaviza con lerp antes de aplicarlo a la cámara. Es lo que da la inmersión cinematográfica en el agujero sin depender de ninguna lib de scroll externa.
03El costo de GPU se trata como presupuesto, no como detalle. El dpr está limitado a [0.75, 1], el antialiasing queda apagado (compensado por …+
El costo de GPU se trata como presupuesto, no como detalle. El dpr está limitado a [0.75, 1], el antialiasing queda apagado (compensado por el bloom y el noise del posprocesamiento), y un IntersectionObserver en el wrapper del Canvas alterna frameloop entre 'always' y 'never'. Apenas el hero sale del viewport, R3F deja de renderizar frames por completo, en vez de solo quedar invisible consumiendo GPU en el resto del scroll. Es el mismo razonamiento de rendimiento que se aplicaría a un dashboard con gráficos pesados: renderizar solo lo que de hecho está en pantalla.
04Debajo del hero, la tienda es datos puros y componentes sin backend. Seis catálogos (héroes, cómics, series, games, setup, gear) viven en sr…+
Debajo del hero, la tienda es datos puros y componentes sin backend. Seis catálogos (héroes, cómics, series, games, setup, gear) viven en src/data/products.js como arrays simples, y el ProductCard resuelve la imagen en una cadena de fallback resiliente: intenta la foto real (.jpg, después .png si la primera falla), cae al emblema vectorial del héroe si no hay foto, y cae a un visual SVG procedural (hexágono, núcleo y partículas, generado a partir del accent color) si ni eso existe. Ningún card se rompe por imagen ausente. La sección de Games tiene filtro client-side por categoría (cat) que reconstruye el carrusel (key={filter} fuerza una reentrada animada), y toda la UI tiene sonido: bips procedurales vía WebAudio (useSound.js) sin ningún archivo de audio, con AudioContext creado bajo demanda en el primer gesto del usuario, que es la forma de sortear las autoplay policies de los navegadores.
CONSTRUIDO CON — React · Vite · Three.js · R3F · react-postprocessing · Theatre.js · GLSLCÓDIGO ↗
06 / RESULTADO
RJjstore
