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 read • Q2BSTUDIO Team

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.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.