Inspiration
I was inspired by teamLab light show.
Light in my mind always represents hope and life. In their special time, we are in quarantine time and most people cannot go to see this fantastic show by themselves. This is my initial wish: build up a light project in digital form, and people can get access to it at home. Besides light, I was also inspired by the movie Interstellar.
It is shocking to see this fantastic multidimensional space in this movie. Since I tried to build up my beam system in WebGL, I thought that it is possible to create a similar incredible visual effect in my project.
Development
My project development is divided into three phases: the 3d grid system, the Beam system, and 3d Flowfield.
the 3d grid system
This is the first step of my project. Taking the idea from the 2d flowfield example code, I converted the 2d grid system setting into 3d mode. The first difficulty I encountered is how to deal with the Z-axis. In 2d mode, I only need to deal with x and y axes. But in WebGL, I need to code with the Z-axis. At the first beginning, I set up my 3d space by using Perspective() and Camera(), which are the content that we have not covered in the Nature of Code. These two “WebGL settings” are really tricky to play with. I spent almost one week to learn these things and it turned out that these efforts were meaningless and it resulted that I had less time for the rest of the project development. Another tricky thing is that the 3d’s axis is different from 2d’s. Even though I had learned that in the previous course, I still took the time to get used to the new setting.
As this image shows, the idea is really simple: based on the 2d grid system, I only add z for loop to go through the z-axis. I have to admit that something simple like this took most of my time throughout the whole project development process.
The beam system
The beam system is based on a 3d grid system. Basically, in the for loop that draws 3d grid system, every grid holds a beam
In order to make the line look more like a beam, I used changing RGB values to fill the line. Also, I added transparency into line. For the rotating angle, I used Perlin noise to control the rotation. The idea is as same as the previous flowfield code.
3d flowfield
Af first, I wanted to add a vehicle moving around the 3d space according to the flowfield angle, and then the beam system will track the vehicle. But I failed!
Technically, every time I draw a grid, there will be an angle value generated and stored into an angled array. When the vehicle reaches a certain grid, the vehicle will be affected by the vector which rotates with the assigned angle. However, when I brought vehicles into the flowfield system, it moved in the system but it would be stuck somewhere. I do not know what reason it is. However, even though I cannot achieve my initial goal, what I got, to some extent, is also satisfying.
It is really interesting to see the combination of 2d and 3d.
Interaction
Making a 3d space for exploration on the web is really cool! This is the part I am so proud of. I create an interactive web 3d project.
Demo:
Users can use Arrow keys and Key P and L to control the perspective. Also, QWASZX is the keys to rotation control. In GUI, users can build up their own 3d space by choosing to show boxes, lines, and shapes.
Final delivery
ConfiledChase Music video
Reflection
I am very proud of myself that I decided to get out of my comfort zone to learn relatively new things within this limited time. Learning WebGL is a new journey for me and it is quite challenging. During the process, everything supposed to be simple or as same as how it works in 2d becomes tricky. These features make me a lot of time to learn and get used to how 3d stuff work. Also, the wasted time on the wrong track(perspective() and camera()) caused that I did not have enough time for debugging and project development. I will conclude that my project is not a successful project, or at least it is not perfect. I appreciated all the things I have experienced on this fantastic journey.
Eventually, big thanks to my instructor Moon! Thanks for his patience and teaching.
Leave a Reply