Solo project: FordieVue, Kim-Chan Tze Hui, Louiz (483)
[app] [source]


I always liked the idea of higher dimensions, they are used all the time in mathematics, but so hard to visualize. Ever since I picked up graphics programming, I wanted to try something that would push my theoretical understanding of concepts such as projection and perspective to the limit. If I could manipulate 4d objects and make them viewable in 2d, how hard could the practical, everyday 3d objects be!

What it does

Using a console controller or keyboard, you can rotate a hypercube over multiple axes/planes of rotation. If you ever wondered what the fourth dimension entails, you can use this to gain an intuition behind it! You can rotate about the three axes (x, y, z), as well as the three planes (xy, xz, yz). With a pair of 3d glasses, you'll be able to get the best glimpse of a projection of 4d objects into 3d that you've probably ever had.

How I built it

The main technologies were WebGL running on the browser, as well as GLSL, which is programmed for the GPU. The hypercube has vertices in 4 dimensions. The four dimensions (x, y, z, w) are projected into 3d using a projection factor, where the values of x, y, z are divided by 1/(d-w), to generate 3d vectors, which are then projected into 2d for viewing. Controller input was done using PxGamepad.

Challenges I ran into

It was difficult to get the projection of 4d into 3d. I was using some mathematics I learnt at an introduction to graphics course, but quickly found that the knowledge was not suitable for GLSL's GPU programming (for those curious, it was due to perspective divide, which changes the way we should teach perspective/projection matrices). I spent a great deal of time trying to find out what was wrong with my math, before I found alternative projection equations online. Another challenge was line thickness. I spent a lot of time trying to thicken my lines because they are rather thin. WebGL doesn't support line-width, so workarounds are pretty tough. Eventually, I settled with just the lines I had, because the 3d effect still worked. I will likely address this in the future.

Accomplishments that I'm proud of

I managed to do up a scratch 5x5 matrix library that appears relatively bug free, and managed to handle 5d vector multiplication, which is not natively supported by the GPU, in the shader. I managed to project a 4d object into a 3d space that could then be projected into a 2d screen. I built an app that has a high amount of user interaction, even supporting the use of a console controller. I built something that let me better understand something that has always fascinated me, with more freedom and understanding (also due to the 3d anaglyph mode) than I could find before.

What I learned

I learned some of the mathematics behind 3d perspective matrices. Writing a lot of the matrix logic has given me a much deeper understanding of the math behind 3d graphics as well. I learned and felt firsthand the difficulty of working with the GPU; the GPU cannot "console.log" like most languages can. I even turned to MATLAB to check my calculations. Eventually, I had to find an equation that I was not was taught in school. I learned that sometimes, sheer passion and will power cannot overcome a lack of domain knowledge, and you really need to just see how others have solved similar problems, and gain experience like that.

What's next for EN_FordieVue

Next, some fuller lines with lighting for a more visually stunning graphics, possibly more shapes, more freedom of movement, and perhaps even a vertex editor!

Built With

Share this project: