WebGPU desde cero Parte 8: Iluminación basada en física (PBR)

Aprende a aplicar PBR con difusión y especular realistas (GGX, Fresnel, G), F0 y metalness, iluminación IBL y tone-mapping y corrección gamma para soluciones gráficas a medida.

9 sept 2025 • 5 min de lectura • Equipo Q2BSTUDIO

Inteligencia-Artificial-

No esperaba abordar esto tan pronto pero la textura de rugosidad realmente me impulsó a mejorar la iluminación hacia PBR (renderizado físicamente basado). Afortunadamente no es tan complicado: hay que aplicar unas cuantas fórmulas y organizarlas en el shader, sin trampas raras de empaquetado alineado. La idea clave es que el color de un píxel proviene de toda la luz entrante y de la fracción que se refleja hacia la cámara, lo que implica el producto punto entre la dirección de la luz y la normal. Esto ya lo veníamos usando, pero PBR añade la restricción física de conservación de energía: la luz entrante debe ser absorbida, transmitida o reflejada, no puede aparecer más luz de la que hay.

PBR separa la reflexión en componentes difusa y especular y modela la superficie como millones de microfacetas que reflejan la luz en distintas direcciones. Al estar cada microfaceta por debajo del tamaño de píxel, usamos estadística: si el 30 por ciento de las microfacetas apuntan al observador, el aporte se escala por 0.3.

El núcleo matemático es la BDRF (bidirectional reflectance distribution function). En práctica se descompone en difuso y especular con la condición de energía s más d igual a 1. En modelos como Cook-Torrance el término Fresnel se aplica al especular y la parte difusa queda modulada por 1 menos Fresnel, además de introducir parámetros físicos como roughness y F0.

Difuso. El difuso más común es Lambertiano: la contribución difusa es el albedo del material multiplicado por la componente N por L, es decir por max(dot(N,L), 0).

Especular. Para la reflexión especular usamos el modelo Cook-Torrance con tres funciones claves: D normal distribution function que describe la orientación estadística de las microfacetas (una elección común es GGX o Trowbridge-Reitz), G la función de geometría o shadowing-masking que modela auto-sombreado entre picos (una aproximación extendida es Schlick-GGX) y F el término Fresnel que indica qué fracción de luz se refleja en función del ángulo (Schlick ofrece una aproximación eficiente). En el cómputo final el término especular suele tener forma D por G por F dividido por 4 por N·L por N·V, con pequeñas correcciones numéricas para evitar divisiones por cero y clamp para evitar valores negativos.

Implementación práctica. En un pipeline típico vertex/fragment cargamos mapas de albedo y roughness, opcionalmente un mapa de metalness y normales. En el fragment calculamos los vectores normalizados hacia la cámara y hacia la luz, el half vector entre ambos, el Fresnel mediante la aproximación de Schlick, la distribución GGX, la geometría Schlick-GGX y finalmente la suma de difuso y especular. Para mantener estabilidad numérica es habitual usar max(dot(...), 0.0) y añadir pequeñas epsilons en denominadores, además de forzar un roughness mínimo para evitar singularidades en D.

Metales. Los metales se comportan distinto: prácticamente no tienen componente difusa y su F0 varía por canal RGB y suele ser mucho mayor que el valor dieléctrico típico de 0.04. Para manejar esto se usa un parámetro metalness que mezcla entre el F0 por defecto de los dieléctricos y el F0 específico del metal. La reflexión difusa se atenúa por 1 menos metalness. Así podemos, por ejemplo, lograr un aspecto dorado usando un F0 específico para oro y metalness cercano a 1.

Iluminación y atenuación. Para luces puntuales aplicamos ley de caída cuadrática inversa multiplicando por 1 dividido por distancia al cuadrado. Para luces direccionales (sol) tratamos la luz como de tamaño infinito y usamos su dirección negativa como vector hacia la luz, sin atenuación por distancia. En código shader esto implica distinguir el tipo de luz y calcular to_light según si la luz es puntual o direccional.

Tone mapping y corrección gamma. Antes de escribir color al frame buffer conviene hacer tone mapping, por ejemplo la operatoria de Reinhard color sobre color más 1 para comprimir rangos altos, y después aplicar corrección gamma aproximada con pow(color, 1.0 dividido 2.2) para mapear lineal a espacio perceptual. También es habitual permitir intensidades de luz mayores a 1 en los colores de las fuentes y luego tonemapear.

Mejoras y consideraciones prácticas. Para un resultado más rico es recomendable añadir iluminación ambiente realista mediante mapas de entorno con convolución (IBL), o técnicas avanzadas como path tracing para rebotes reales, oportuna gestión de normales y mapas metalness/roughness/ao. En la implementación conviene añadir controles de material como uso de mapa de especular, roughness, metalness y base reflectance.

En Q2BSTUDIO aplicamos estos principios cuando desarrollamos soluciones gráficas y aplicaciones a medida. Nuestra experiencia en software a medida y en proyectos de inteligencia artificial nos permite integrar shaders PBR en aplicaciones verticales, desde visualizadores 3D personalizados hasta apps industriales. Si buscas desarrollar una solución de aplicaciones a medida puedes conocer nuestro enfoque en desarrollo de aplicaciones y software multiplataforma y descubrir cómo adaptamos técnicas como PBR a productos reales.

Servicios complementarios. Además de gráficos y desarrollo, en Q2BSTUDIO ofrecemos servicios de inteligencia artificial para empresas, agentes IA y soluciones de analítica con Power BI para transformar datos en decisiones. Si te interesa explorar posibilidades de IA aplicadas a tus procesos consulta nuestra oferta de inteligencia artificial para empresas. También cubrimos ciberseguridad, pentesting, servicios cloud aws y azure, y servicios inteligencia de negocio para proyectos que requieren datos seguros, escalables y explotables.

Palabras clave y cierre. Nuestro trabajo abarca aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi, integrando lo último en prácticas PBR cuando la visualización realista es un requisito. Si quieres que te asesoremos para llevar a producción una solución gráfica, IA o una plataforma segura y escalable, en Q2BSTUDIO combinamos experiencia técnica y enfoque de negocio para entregarte productos a medida.

¿UNA PAUSA?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.