A "Shape-Stamper" in WebGL
Click the
canvas
to add
a shape!
Click the
canvas
to add
a shape!
This is a demo version of a sample WebGL program, shape-stamper.html. There is not much to say about its functionality. Click the canvas to add a shape. When a shape is added, its properties are taken from the popup menus on the right. The "Clear" button will clear the canvas by filling it with white.
It's worth looking at the source code for both the sample program and the demo, since there is a significant difference in the way that they draw the shapes. The sample program uses a single VBO to hold the coordinates for the shape. When a shape is drawn, a new set of coordinates is computed and is loaded into the VBO. The demo uses four VBOs, one for each shape. Coordinates for the shape are computed and loaded into the buffers during initialization, and the contents of the buffers are not changed after that. However, since the coordinates for the shapes assume that the shapes are centered at (0,0), a translation was added to the vertex shader to move the shape into the desired position.
