WebGPU Engine from Scratch Part 6 Diffuse Lighting presenta cómo añadir iluminación difusa a una escena para mejorar el realismo y el contraste visual
Empezamos por definir una entidad Light que contiene los atributos esenciales tipo posición dirección y color Esta clase almacena los datos como vectores de punto flotante y enteros para facilitar su empaquetado hacia la GPU
La inicialización de luces usa una colección Map y un método initializeLights que crea una luz tipo point colocada mediante una conversión esférica a cartesiano sphericalToCartesian Este patrón permite gestionar múltiples luces de forma ordenada
El reto principal es calcular el tamaño del buffer y los offsets correctos para cada campo en memoria GPU Para ello se introduce una utilidad packStruct que toma un objeto y un esquema ordenado y genera un ArrayBuffer con los valores empacados respetando alineación y endianness La función cubre por ahora tipos u32 vec3f32 y vec4f32 escribiendo los elementos con DataView para garantizar la posición exacta
Sobre packLight se construye un esquema con las propiedades typeInt position direction y color y se solicita un tamaño mínimo de 64 bytes Esto permite preparar un bloque de memoria uniforme que represente una luz completa listo para ser enviado al dispositivo
Para pasar la luz al shader se crea un buffer GPU con usage UNIFORM COPY_DST STORAGE y se escribe su contenido con queue writeBuffer Además se crea un buffer adicional para el contador de luces LightCount que debe ser un struct con un campo count ya que WebGPU no permite enlazar escalares sueltos directamente
Se define un bind group de luces que incluye el buffer de datos y el buffer contador y se adjunta al passEncoder en el binding group 2 Así el pipeline tiene acceso tanto a la matriz de luces como al número de luces válidas
En WGSL se declaran las estructuras Uniforms Light y LightCount y se enlaza el arreglo de luces con var storage read lights array Light Este arreglo puede tener longitud controlada por la binding pero no expone su tamaño en el shader por eso se pasa adicionalmente light_count count
Como prueba inicial el fragment shader puede devolver directamente el color de la primera luz para verificar que el empaquetado y la transferencia de datos funcionan correctamente Esto ayuda a depurar offsets y problemas de alineación antes de implementar la iluminación real
La iluminación difusa se implementa pasando desde el vertex shader la posición en mundo y la normal Los pasos básicos en el fragment shader son muestrear el color de la textura calcular la dirección hacia la luz normalizar y calcular el producto punto entre la normal y la dirección a la luz para obtener la intensidad multiplicar por el color de la luz y acumular sobre todas las luces finalmente mezclar con el color superficial
Para soportar arreglos de luces se crea packArray que calcula el tamaño del struct empaquetado y reserva structSize multiplicado por la longitud del arreglo luego invoca packStruct para cada elemento desplazando el offset adecuadamente Esto asegura que cada elemento empieza en una frontera de alineación adecuada
Un error común detectado durante el desarrollo fue que las normales aparecían invertidas o giradas La causa fue no transformar correctamente las normales al hornearlas con las transformaciones del modelo Para convertir normales hay que tomar la submatriz 3x3 superior izquierda de la matriz de modelo calcular la inversa y luego la transpuesta NormalMatrix equals transpose inverse trim model matrix Al aplicar NormalMatrix a las normales y normalizarlas se corrige la iluminación
Otros puntos importantes a comprobar son que el packing de un mat3x3 requiere el mismo tipo de padding por columna que un mat4x4 con ceros al final de cada columna y que las matrices suelen ser column major lo que cambia el orden de indexado respecto a las convenciones utilizadas en JavaScript
Con todas esas correcciones en el empaquetado y la transformación de normales se consigue un resultado estable y escalable pudiendo representar varias luces que interactúan correctamente con la geometría
En Q2BSTUDIO somos una empresa de desarrollo de software que ofrece aplicaciones a medida y software a medida para clientes que necesitan soluciones gráficas avanzadas como motores WebGPU integración con servicios cloud aws y azure y despliegue seguro en entornos corporativos
Nuestro equipo de especialistas en inteligencia artificial trabaja en proyectos de inteligencia artificial e ia para empresas diseñando agentes IA análisis de datos y soluciones de servicios inteligencia de negocio además ofrecemos integración con herramientas como power bi para visualización y reporting
También proporcionamos servicios de ciberseguridad auditorías y hardening de infraestructuras y consultoría para asegurar sus aplicaciones y datos Nuestra oferta incluye despliegue en servicios cloud aws y azure para garantizar escalabilidad disponibilidad y cumplimiento
Si desea una solución personalizada para visualización 3D en WebGPU o integrar capacidades de inteligencia artificial y agentes IA en su aplicación contacte con Q2BSTUDIO desarrollamos aplicaciones a medida software a medida e implementamos soluciones completas que combinan AI ciberseguridad y cloud
El repositorio de referencia y las muestras del proyecto contienen el código final y ejemplos prácticos para empacar estructuras gestionar bind groups y calcular matrices normales que pueden servir como base para su propio motor gráfico o proyecto de visualización
Para más información sobre servicios soluciones y consultoría en proyectos de gráficos en tiempo real inteligencia artificial y seguridad empresarial visite Q2BSTUDIO y descubra cómo podemos ayudar a transformar su idea en una aplicación de alto valor
.jpg)
.jpg)
.jpg)
