WebGL Ripple Effect
This is a grid of triangles all programmatically laid out. Each vertex is oscillating on it's Z-coordinate.
Using WebGL vertex and fragment shaders, I'm coloring the triangles based on their Z coordinate.
As the value gets more positive, it is colored more red. And as gets more negative, it is colored more blue.
THE CODE...
initializes all the vertices and triangles on the grid with an X, Y, and Z coordinate. An update loop moves their positions up and down.
THE VERTEX SHADER...
assigns a color to each vertex based on its Z coordinate. The higher up it is, the lighter in color it is.
THE FRAGMENT SHADER...
takes the color information for each vertex, and rounds its value to only one decimal. This loss causes the banding effect on each triangle.
Things that work well:
- Triangle Coloring: While positive, the triangles get more hot colors. While negative, they are colored more cool colors
- Color Band Effect: The fragment shader is not doing much but I really like the effect that it creates.
- Random Speed: Once the triangles start moving at random speeds, it is much easier to see that what the effect is doing.
- Toggle-able Shaders: In order to see what each shader is bringing to the table it would be nice to be able to toggle them on/off.
Things I'd like to impove:
- Vertex Pointers: Right now, every triangle is given its own three vertices. Many of these vertices share the same XYZ coordinates. It would be better if I could just modify the XYZ coordinate and redraw the triangles using the coordinate rather than the vertex.
Debug:
Any debug information will be printed out here.