For one of my 100-Day Challenges, I chose to dive into Three.js, a JavaScript 3D library. It's easy to start learning, and it becomes difficult to master with the inclusion of shaders.
If you're too lazy to click that and don't know, it leverages WebGL . For the portion of readers who are consistently and ignorantly (fair, we all do it) in character:
- WebGL is OpenGL wrapped up for the web.
- OpenGL is an API for rendering 2D and 3D vector graphics.
- Vector graphics are defined by equations (like SVG - Scalable Vector Graphics) instead of storing data for each pixel (like JPEGs!)
Those are important to acknowledge. Three.js requires an understanding of multiple things to make decent headway:
- Foundations of programming
- Solid vanilla JavaScript skills, along with HTML and CSS
- Understanding of the DOM - how to access elements and manipulate them
- 3D modelling skills; building models, lighting, structuring scenes, and so on
- Art! Understanding colour, perception, and so on to make something appealing
Three.js is a library sitting staunchly in that intersection of tech and art.
That's not to say someone couldn't get started without those. These skills have to be developed anyway to create beautiful pieces of work - either before starting Three.js or along the way. Personally, I wouldn't recommend learning Three.js to someone who just started learning how to code, but I wouldn't stop them if they had the determination either. I could just imagine their developer training montage set to Eye of the Tiger, burning their retinas instead of the midnight oil. Developers may be masochists but individuals who persevere through Three.js (or WebGL, or OpenGL - or to be honest, any graphics coding) early into their programming foray are next-level. 💀
3D modelling
Three.js is particularly intertwined with skill in 3D modelling; the best experiences feel like a brilliant combination of art and technology. It's best to start with Blender early - it's forever free, and open source. Autodesk's Maya is also freely available for students with an academic email address; I'd recommend it for someone who wants employment at places that consider Maya the industry standard - a contentious topic if Xwitter is anything to go by!
Shaders
Shaders, the little programs that manipulate images before they're rendered, are where mastery lies. Shader programming can be a bitch and relies heavily on maths and understanding textures. Have a look at Shadertoy to see what people accomplish without much on the 3D model front.
I found myself needing to go back and refresh my maths to understand some of the programming involved. This process can be complex and take quite some time; I had to return to maths at the pre-calculus level and take it from there because the kind of work I do requires none of that whatsoever. If matrices, vectors, geometry, and the like aren't things you're intrinsically motivated to understand, you'll cap out at which level you can use Three.js.
Tips for your learning journey
If you're not going to do a solid course on Three.js, I suggest having a look at their syllabi, ensuring you learn about the topics listed. Do a 3D course of some kind if you have no familiarity with 3D modelling at all. Watching people build models is also useful once you have some understanding of the software; live and recorded videos have different advantages so give them both a shot.
Make a pathway based on what you lack. I wouldn't recommend trying to get all the maths sorted early on, unless you're motivated to do exactly that. You could make Agile finally useful for something and cycle around 3D, art, programming, and maths as you manoeuvre the output into increased complexity as your capabilities expand.
It'll take time, but make sure you're enjoying the process. I still lurk in the recesses of Three.js noobdom and have to revisit various topics every so often in between my other projects and obligations, but the continued enjoyment makes the long journey worth it.
glhf 💖
Top comments (0)