volverPRY 007 · 2026

Reflection Probes · Reflejos precalculados

Un cubemap horneado desde adentro de la escena, para que los materiales pulidos reflejen lo que tienen alrededor y no sólo el cielo.

  • 3D en tiempo real

  • Three.js
  • R3F
  • GSAP
  • WebGL

Un entorno HDRI ya le da reflejos a un material pulido, pero siempre los mismos: el cielo, nunca lo que tiene al lado. Un reflection probe resuelve eso fotografiando la escena de verdad - se planta una cámara cúbica en un punto, se renderizan sus seis caras a un cubemap y ese cubemap pasa a ser el envMap del material.

Hay dos detalles que deciden si se ve bien o mal. Las propias mallas reflectivas se ocultan durante el horneado, porque si no se fotografían a sí mismas con el reflejo de la pasada anterior y el efecto se realimenta. Y el render target va en half float con mipmaps, porque el filtrado por rugosidad que three arma encima lee esa cadena de mips y en ocho bits por canal los brillos se quiebran.

Cambiar de entorno obliga a rehornear, y ahí aparece el tercer problema: un material estándar no sabe mezclar dos cubemaps a la vez, así que pasar de uno al otro se ve como un salto. La demo lo cruza duplicando la malla - un fantasma transparente que conserva el reflejo viejo y se desvanece encima del nuevo.

Qué hace

  • Comparación lado a lado: con el probe y sin él
  • Se aplica a cualquier figura y a cualquier entorno
  • Cubemap en half float, para que los brillos no se quiebren
  • Cross-fade por malla fantasma al cambiar de entorno
Plataforma
Web (escritorio y celular)
Tecnología
Three.js · R3F · GSAP
Tipo
Laboratorio de render

Explorá más

proyecto 07 / 08
Tuxdi