jshrake / p5js-vertex-shader

Animating vertex attributes on the GPU w/ p5.js

Vertex Shader Programming with p5.JS

Getting started

You can run any of the examples locally with Python's SimpleHTTPServer:

cd step-0
python -m SimpleHTTPServer

Then open localhost:8000 in your browser. Or just follow along online with the p5.js editor.

Note that this tutorial uses WEBGL2 and will only work on browsers that support WEBGL 2. In practice, this means you need to use Firefox or Chrome. Safari will not work!

Step 0: Draw one square

p5.js editor

• Understand how to configure p5js for WebGL 2
• Understand the jobs of the vertex and fragment shaders
• Configure a simple sketch with shaders

Step 1: Multiple animated squares

p5.js editor

• Understand how to animate attributes
  • Attributes are properties such as position, color, alpha, scale, rotation
• Distinguishing geometry with gl_VertexID
  • For each vertex, we want to know which square the vertex belongs to
  • If we want to specify per-square attributes (position, color, scale), then all vertices belonging to the same square should share the same attributes
  • If each square has 6 vertices, then we can calculate a unique id for each square as int square_id = floor(gl_VertexID / 6)
• Random number generation
  • Use the square id as a seed, then hash the value

Step N: Fragment Shading, Noise Functions, and User interaction

p5.js editor

• Drawing outlined circles in each square
• Specifying user interaction through uniforms
• Noise functions
• Correct aspect ratios

Resources

• GLSL shader functions
• p5 js shader guide
• p5js shader examples (Adam Ferriss)
• Book of Shaders (Patricio Gonzalez Vivo & Jen Lowe)
• vertex shader art tutorial
• 2D SDF
• OpenGL coordinate system