En este artículo explico de forma práctica cómo implementar mapas de sombras para WebGPU y por qué son la técnica estándar cuando el trazado de rayos es demasiado costoso. A grandes rasgos hay dos enfoques comunes para sombras en gráficos 3D: el raytracing, que es exacto pero caro, y el shadow mapping, que es barato y suficientemente efectivo para la mayoría de aplicaciones a medida y videojuegos.
La intuición es sencilla: tratamos cada luz como si fuera una cámara y renderizamos una imagen de profundidad de la escena desde esa luz. Esa imagen es el mapa de sombras. Al renderizar la escena normal, para cada fragmento transformamos su posición mundial a las coordenadas de la luz y comparamos su profundidad con la almacenada en el mapa. Si la profundidad del mapa es menor, el fragmento está ocultado y debe oscurecerse.
Direccionales y spotlights. Las luces direccionales se modelan como cámaras ortográficas porque no tienen perspectiva. Hay que elegir una posición de referencia y unos límites de frustum para la matriz ortográfica; la elección afecta la cobertura y la resolución del mapa de sombras. Los spotlights usan cámara en perspectiva, conceptualmente igual pero con frustum con perspectiva. Las point lights son más complejas porque requieren seis vistas para construir un cubemap de profundidad.
Implementación en WebGPU. Paso a paso:
1 Crear pipeline de sombra depth only
Renderizar la geometría sin fragment shader de color y habilitar solo la escritura de profundidad. El objetivo es producir una textura depth32float usable como mapa de sombras.
2 Crear la textura y el sampler
Los mapas de sombras son texturas de profundidad y necesitan un sampler de tipo comparación con compare less. Las depth textures no admiten capas en muchos entornos, así que suele ser necesario reservar un número fijo de bindings y rellenar huecos con texturas dummy o placeholder.
3 Matrices y bind groups
Hay que generar y subir las matrices view y projection de la luz en buffers uniform o storage para poder convertir posiciones mundo a espacio de luz en el shader principal. Es útil empaquetar por luz campos como projectionMatrix, viewMatrix, hasShadow y shadowMapIndex.
4 Offset vertical y flip de coordenadas
En WebGPU y varios backends la coordenada V de la textura puede ir invertida respecto a la proyección; al mapear de espacio de clip a UV suele ser necesario invertir la Y con 1.0 menos el valor mapeado. Detectar y corregir este detalle evita horas de depuración.
5 Comparación en el shader
En el fragment shader transformamos la posición mundial por projectionMatrix por viewMatrix, dividimos por w, mapeamos xy de rango -1..1 a 0..1 para obtener UV y usamos textureSampleCompare con el sampler_comparison y la profundidad objetivo. El resultado no es booleano estricto cuando se usan filtros lineales, lo que permite suavizar sombras mediante PCF implícito.
6 Bias y slope scale
Para reducir artefactos de self shadowing y shadow acne se usan dos estrategias: agregar un bias al comparar profundidades o aplicar depthBias y depthBiasSlopeScale al renderizar el mapa de sombra en la definición del pipeline de profundidad. También es habitual ajustar el bias según el ángulo entre normal y dirección de luz para reducir errores en caras oblicuas.
7 Múltiples luces
Como las depth textures no se pueden agrupar arbitrariamente, lo práctico es asociar a cada luz un índice de mapa de sombras y crear un bind group con un máximo fijo de depth textures y samplers. En el shader se iteran las luces, se consulta si tienen hasShadow y se aplica la contribución de sombra por luz de forma independiente, acumulando el resultado.
8 Debugging y calidad
Visualizar el depth buffer ayuda mucho. Cuando se usan filtros lineales en el sampler la textura de profundidad devuelve valores intermedios y puede producir sombras más suaves. Aumentar la resolución del mapa de sombras reduce aliasing, pero sube coste de memoria. Técnicas avanzadas como cascaded shadow maps CSM, perspective shadow maps o PSSM permiten equilibrar calidad y coste para escenas grandes.
Consideraciones prácticas en WebGPU: las operaciones que menciono usan conceptos como texture_depth_2d, sampler_comparison, textureSampleCompare y bind groups con layouts adecuados. También conviene controlar el orden y la exactitud de los buffers que se suben y verificar que los índices de sombras y las vistas no se sobrescriben; en algunos sistemas el número de bind groups utilizable es limitado, por eso conviene optimizar y no reservar de más.
Resulta común combinar estas mejoras: ajustar frustum de la luz para minimizar desperdicio de texels, usar linear filtering o PCF para suavizar bordes, aplicar depthBias y slope scale en la renderización de la sombra y aumentar resolución donde importe. Para point lights, renderizar un cubemap de profundidad de 6 caras es análogo pero más costoso; las optimizaciones descritas siguen siendo aplicables.
Si buscas integrar estas técnicas en proyectos profesionales, en Q2BSTUDIO desarrollamos soluciones de gráficos y motores a medida integrados con servicios cloud y soluciones de inteligencia artificial. Podemos adaptar pipelines WebGPU y motores de renderizado a tus necesidades dentro de desarrollos de software a medida y aplicaciones a medida; conoce nuestros servicios de desarrollo en desarrollo de aplicaciones y software multiplataforma. También ofrecemos consultoría para integrar modelos de inteligencia artificial que optimicen procesos de render o generen activos procedurales mediante agentes IA.
Además, Q2BSTUDIO cubre otras áreas complementarias que son críticas para proyectos productivos: ciberseguridad y pentesting para asegurar despliegues, servicios cloud aws y azure para escalabilidad, servicios inteligencia de negocio y power bi para análisis y visualización, y automatización de procesos para optimizar pipelines de producción. Palabras clave que usamos en nuestros servicios incluyen 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.
Si quieres que te ayudemos a integrar mapas de sombras eficientes en WebGPU, optimizar el coste vs calidad, o añadir capacidades de IA a tu motor o pipeline, en Q2BSTUDIO podemos asesorarte y desarrollar la solución a medida que necesites.
.jpg)