p5.js estrena compute shaders para enseñar programación de GPU
Dave Pagurek añade compute shaders y filtros propios a la build experimental con WebGPU de p5.js, para que quien nunca ha tocado un shader pueda empezar sin aprender antes el pipeline
p5.js ya tiene compute shaders. La librería, que además de herramienta para artistas funciona desde hace años como material de enseñanza en asignaturas de introducción a la programación, ha metido esa pieza en p5.strands, su sistema de shaders, sobre la build experimental con WebGPU que publicó a principios de año. El objetivo no es pelearse con three.js en proyectos de producción, sino poner un primer escalón a quien nunca ha escrito un shader.
Lo cuenta Dave Pagurek, que participa en el desarrollo de p5.js y firma la nota. Su punto de partida lo reconoce cualquiera que haya dado clase de gráficos: levantar un triángulo en Vulkan desde cero son miles de líneas de código, y eso no sirve como primer ejercicio. La salida que se está asentando en la docencia es el andamiaje: se tapa lo que no hace falta al principio y se destapa por capas conforme el alumno avanza, de modo que cada pieza nueva se apoye en lo que ya sabía hacer.
Menos pipeline, más código que ya conoces
Los andamiajes habituales suavizan la API de gráficos, pero dejan en pie buena parte del pipeline clásico. El estudiante sigue teniendo que entender cómo fluyen los datos de vertex a fragment, cómo se pasan del CPU al GPU y cómo se escribe en otro lenguaje. Pagurek sostiene que eso sigue siendo demasiado para arrancar, y el suyo lo esconde del todo al principio.
Los requisitos que p5.strands da por supuestos son cortos: saber hacer bucles y condicionales, manejar variables, llamar a funciones, declarar funciones globales con nombre al estilo de setup y draw, y algo de matemáticas en JavaScript. Nada de uniformes, variables varying ni etapas del pipeline. Se aprenden más adelante, cuando hacen falta para algo concreto, no antes.
Filtros propios en una función
El primer ejercicio que propone el anuncio es escribir un filtro. Quien haya usado filter(BLUR) tiene medio camino hecho: se declara una función, se construye el filtro con buildFilterShader y se pasa a filter(). El objeto filterColor se rellena con .set() y el color va de 0 a 1. El ejemplo mínimo pinta el lienzo de rojo.
La propiedad interesante es texCoord, que da la coordenada del píxel dentro de la textura del lienzo en dos ejes, también de 0 a 1. Sirve directamente como color, así que el degradado sale de pasarla a la salida, y de ahí a meterla en noise() hay un paso: el ruido ya existe en el resto de p5, y con él salen texturas generativas sin escribir una función propia. Para animar basta con tirar de millis() como en cualquier sketch.
Todo esto entró con el pull request 8531 sobre la build WebGPU, que es la que habilita los compute shaders.
El interés para quien ya trabaja con GPU no está en el API, sino en la decisión de diseño: p5 quiere ser cómodo hasta que el proyecto crezca, sin obligar a desaprender hábitos al saltar a sistemas orientados a ingeniería. Queda por ver si el andamiaje aguanta ese salto sin quedarse corto, y cuánto tarda en llegar a la versión estable de la librería.