WebGL Example: Electric Flower
Electric Flower is a WebGL project made by Henrik RydgŒrd that is part of the WebGL example collection available in this link.
I chose this rather simple example because it shows how we can make some incredible looking animations just by reutilizing some methods inside some custom libraries that we can define. This can help us get our future projects done in a shorter amount of time and with considerable less amount of lines of code.
The example visually consists of multiple waves of light expanding and spinning gradually over time. The waves also change of color from time to time and have their own brightness according to their position in the canvas. There’s also a simple menu where you can select your preferred postprocessing method so it applies instantly on the canvas.
The reason I chose this example is that there are some elements like the rotation and translation of elements, which we have already seen in class, and some elements like the handling of lights and brightness over time which we have yet to see.
As I said, the project is rather simple; it only has one html file with the WebGL script, and two js classes named flower.js and postprocess.js. Aditionally, they are using a library called TDL (Three D Library) for the reutilization of some code and the simplification of the methods written in the html file.
Understanding the library
TDL is a library made for agilizing the process of making some mathematical calculations in WebGL. With this kind of library, we only need to write the code once and we can reutilize it whenever we want. In this example, Henrik only uses some of his functions, majorly to optimize vector operations, handle some primitives for the creation of objects and defining some methods for things like the manipulation of shaders and programs.
Rendering the Flower
With the utilization of this library, we can see that the code that we are being presented in electricFlower.html is very straight forward and of high level. The first thing we do is define a mainLoop that is going to execute at every frame possible, hopefully establishing a FPS of 60 or more.
We notice that on every loop we do two main things: create a FlowerEffect and render the canvas. This is what lets the flowers appear constantly and change over time.
Flower Effect
This is the code that is being executed every time we call a new FlowerEffect:
As we can notice, we are creating a new flared Cube in every loop, so we can see the effects of a “flower” expanding from the core and to the edge of the canvas. We see that we are initializing two programs from every Flower: the flower_vs (VertexShader) and the flower_fs (fragment-Shader)
As we can see, the VS is the one who is doing all the job in aspects of the rotation in x, y and z. This is what creates the effect of the flower and makes it in a efficient manner by sending it all to the GPU. Aditionally, we are calling a render functon which is the one that shows every part of the flower. The key part of this snippet is the handling of perspectives and rotations in m4. This makes it possible for the object to appear on the screen and do rotation in the Y axis that gets higher the longer the object is in the canvas (so it gets faster).
By defining the flower at every loop we can then update the movement of the objects according to the time that has passed.
Finally, we have the hsv2rgb function that is used in the render every certain time. This is the function that makes the color of the petals change from time to time.
Final Result
The code with this example and the annotations of the importants parts of the code are available here.
