Cómo sombrear el movimiento: guía de shaders en WebGPU

Fuentes: Shading Motion

Maxime Heckel, autor del blog de programación gráfica, publica una guía para tratar el movimiento como una nueva fuente de entrada en shaders de pantalla, frente al uso habitual de luminancia, profundidad o píxeles vecinos. El artículo explica paso a paso cómo construir una pequeña canalización con compute shaders de WebGPU que detecta el movimiento mediante frame differencing —la resta en valor absoluto entre la luminancia del frame actual y la del anterior— y lo codifica en máscaras y mapas de velocidad.

El texto aborda los problemas típicos de esta técnica, como el parpadeo y la discontinuidad de la salida, y propone suavizarlos con un sistema de decadencia temporal que acumula fotogramas previos y los atenúa progresivamente, generando estelas controlables. A partir de esa máscara de movimiento, Heckel describe una serie de efectos aplicables: desde rastros simples hasta blob tracking, efectos direccionales, motion blur y smearing de objetos, cada uno con sus propios retos de sombreado. Se incluyen fragmentos de código en WGSL para el compute shader, recomendaciones de parámetros (umbral de movimiento, tasa de decadencia) según el tipo de escena, y widgets interactivos que muestran el resultado. La guía combina teoría, ejemplos prácticos y referencias a herramientas como TouchDesigner y al ecosistema React Three Fiber.