Teaching GPU programming in p5.js: now with compute shaders
2 days ago
- GPU programming education faces a high barrier due to complex APIs; scaffolded learning helps by hiding non-essential details initially.
- p5.js is developing p5.strands, a shader system designed to make GPU programming accessible to those with basic JavaScript knowledge.
- Learners only need to know loops, variables, functions, and math to start creating custom shaders in p5.js.
- Custom filters can be built easily using the filterColor object, allowing manipulation of pixel colors and textures.
- Shape shaders use worldInputs to modify vertex positions, enabling animations and instanced rendering without complex vertex data management.
- WebGPU storage buffers and compute shaders allow running thousands of particles or agents in parallel, enabling flocking and physics simulations.
- p5.strands gradually introduces native shader languages (GLSL/WGSL) and lower-level functions like loadShader and createShader for advanced users.
- Compute shaders are slated for p5.js version 2.3, with a testable build available now, and community feedback is encouraged for improvement.