Computer Graphics is growing exponentially especially with big companies simulating real life visually through Apple Vision Pro, MetaVerse, GTA VI etc. Utilising the power of matrices and powerful GPUs to provide exceptional details is necessary. To address this challenge, I present a web application that provides multiple projects using TextureLoading, Animation, Reflection, Refraction, Noise, OBJLoading. Following the steps behind those minimal projects you can enhance your skills in 3D Development.
-
3D Geometry and OBJ Loader: This project provides a basic overview on how 3D objects are created within a web application using basic linear algebra like Rotate, Scale and Shear matrices. As well we, learn how to load an object into our world without going too much into detail about fragment shaders and vertex shaders.
-
Creative World using 3D Geometry: Going beyond what we learned in our first project, we build our own creative world. I've built the famous UBC Sign along with the mountains and totem pole that represent UBC!
-
Animation: This project goes over the idea of using animation of 3D Objects in ThreeJS. We build our own object which looks like a hand and then, through animate on it using it's movement at different time steps.
-
View Frustum: This is an essential project to understand different view frames within a 3D World. We set a rectangular frame which allows us to view objects only through it and removes everything that lies outside it.
-
Reflection, Noise, Refraction: Lastly, we dive into making a final boss project which applies everything we've learned till now. As well as, we learn about essential concepts like reflection, refraction and noise which helps us build a mirror, water etc. that are found in real world and can get a bit hard to replicate in our ThreeJS World. (Try to scroll back and see if you can exit the world here!)
Feel free to explore, learn, contribute, and enhance the capabilities of this ThreeJS Explorer. Together, let's apply and learn the concepts essential for computer graphics.