Exhibit #1: Fun with Vertex Shaders

Sine Curve

Cardioid

Morton Code

What We Did

• The main purpose of a vertex shader is to transform vertex position.
• This means you can use the vertex shader to draw graphs and complex shapes.
• In these examples, we use a new primitive gl.LINE_STRIP.
• In all the examples, the vertex attributes are just linearly spaced numbers in some intervals.
• GLSL has some limitations, as demonstrated by the Morton Code renderer.
  • There's no "mod" operator (%), but there is mod function, which only applies to floats.
  • In the vertex shader, you cannot write a for loop whose number of iteration is not known at compile time.
• This exhibit also shows how to run multiple WebGL instances inside the same page.
  • Important: Each canvas must have its own WebGL context and rendering loop.