Introduction
Welcome
I’m really excited to have you here!
You might be someone looking to make a career out of this, whether it's just in 3D experiences on the web or in full-blown game development. Or a 3D artist wanting to explore the technical side. Or maybe you’re just curious and want to see how far you can take it.
Whatever your background, this course is designed to grow with you. From simple scenes to full game systems.
Thanks for being here, and I hope this enables you to build something you’re proud of.
What This Course Is About
Over the past few years, I’ve published a lot of deep-dive graphics content on YouTube and in my Shader course. Topics like advanced shader techniques, shaping functions, AAA-style grass, flexible particle systems, and GPU-driven effects weren’t widely covered in the Three.js space until I broke them down for a broader audience.
This course continues in that same spirit: bringing high-level, production-quality techniques into the web graphics space.
As of April 2025, this is still the only Three.js course that covers topics like:
- Smooth streaming
- Streaming infinite worlds
- Proper mesh and texture compression
- GPU memory and data structures
- Resource management and debugging
- Entity management systems
- Scalable game architecture and design patterns
You’ll learn how to build real systems from scratch. Not just follow along, but understand why things work and how to improve or extend them on your own.
Who am I?
Hi, I’m Simon—a senior graphics engineer with 20+ years of experience. You might know me from my YouTube channel, where I do deep-dives on content like real-time graphics, performance, and game development.
I started in the early 2000s as a graphics programmer on the original Xbox and PlayStation 2, focusing on 3D rendering and performance. I built engines, shader tools, and effects pipelines—and even presented a custom shader graph system at GDC in 2007, long before visual shader editors became common.
Later, I joined Google and spent ~7 years on the Chrome team, working on performance, infrastructure, and regression tooling at scale.
In between, I’ve built and operated an MMO with millions of players, helped ship a few indie iPhone games, and rebuilt a mobile game’s backend—cutting server costs from $10k/month to ~$50.
These days, I run a YouTube channel and build technical demos to teach everything I’ve learned.
In the course of building my YouTube channel, I’ve shown that Three.js can scale to some truly massive projects. Here are a few examples:
A MineCraft inspired game, build entirely in JavaScript. Watch the video to see how it was made: https://www.youtube.com/watch?v=MQt0exToUEY
A working FPS prototype to test how well Three.js held up to the demands of first person shooters. Full video here: https://www.youtube.com/watch?v=3DMZETkPieI
An MMORPG-style game running fully in the browser—complete with login, chat, combat, and server-side logic. Check it out: https://www.youtube.com/watch?v=IptkgFOoci0
What's Possible?
3D Web Experiences
Real Games Built with These Techniques
On the top you have Coastal World, and on the bottom you have Vocation Vista.
These may look challenging, but I actually designed and implemented most of the base architecture for Vocation Vista. The techniques and systems covered in this course were used to build the full game environment for a publicly released, web-based game. This should be a great example that every concept taught here is production-tested. If you're curious, you can even explore the live game and spot the same patterns in action. It’s a great example of how these workflows scale up to support a full, real-time experience.
Technical Demos
If you want to see some in-browser experiments that push Three.js further than andybody thought was possible at the time:
Requirements
This course is beginner-friendly. If you have a basic understanding of programming (variables, functions, that sort of thing), you’ll be just fine.
You don’t need prior experience with 3D or graphics programming. That’s all covered from the ground up. And you definitely don’t need to be “good at math.” As a game developer, you should get comfortable with it eventually.
But that's exactly why you have this course, to help you get there.
How to Study / Use the Course
There’s a lot of content here, but don’t feel like you need to finish everything.
If You're Completely New:
GameDev: You can start with the "Basic Three.js" in the GameDev course. Most of it will be very accessible, even with no math or shaders background.
Math: If you can, skim through and just roughly understand the Math course, you want to have some idea of how vectors and trigonometry work. You don't need to master them, but be familiar with them.
Shaders: After you've done a quick pass on the Math course, feel free to start going through the Shaders course, the early chapters. We don't touch on shaders much in the "Basic Three.js" section, so this will give you a chance to warm up to them. I'd recommend working your way up to "Vector Operations & Math". Or, if you're feeling adventurous, go up until "Vertex Shaders".
If You Already Have Experience:
Feel free to jump ahead to the more advanced topics, or specific systems you want to learn. There will probably still be value in those early sections though. As some of my testimonials mention, even experienced devs have made comments like:
"this course still managed to clarify concepts I thought I already understood"
"It’s not just a how-to—it’s a why-it-works, and that makes it incredibly useful, even for experienced devs."
So start with what interests you most.
For everyone:
Build as you go. Revisit lessons after you've had more hands-on time, they'll probably sit with you a bit differently the 2nd time around, and you may even pick up new details.
And don’t forget: you're not on your own. Join the Discord to get help, share progress, or ask questions. I'll be there to help you out if need be.
Ongoing Updates
This course is currently in early release (as of April 2025), and new sections will be added over time.
Like all of my courses, this one will be kept up to date. That said, Three.js does evolve steadily, so even if minor differences appear between the code in videos and the latest release, things generally stay compatible. In fact, many older Three.js projects still run just fine years later.
As new features are added or breaking changes occur, I’ll do my best to call them out. And yes, more content is coming. The Shader course has already had multiple new sections added in the last year, and I expect to do the same here as new sections and projects get built out.
You’ll get access to everything as it's released, at no extra charge.
Do We Use React Three Fiber?
Yes and no. Let me explain.
React Three Fiber is often pitched as the fastest way to get started with Three.js, unfortunately by engineers who haven’t tried to build something bigger. There's a reason why every demo seems to be a small scene or simple web embed. It works fantastic for that.
But once things get more complex, R3F quickly turns into a performance and architecture bottleneck. I’ve personally been brought in to help rescue R3F-based codebases after they ran into serious scaling issues.
It’s a great tool for adding some 3D to a site or prototyping a quick idea.
That said, you can still get the best of both worlds: use vanilla Three.js for the core logic, and React or Vue for the UI. That’s the approach I lean toward. It gives you a clean separation that keeps your logic flexible, performant, and easy to debug.
Welcome Aboard
Thanks for joining, and welcome aboard.
There's a lot of content in the course. You're not expected to get everything on the first try. The more you build things, the more you try things, the better you'll get. As your experience grows, you’ll start connecting different ideas together, and that’s where things really start to click!
Remember, you can always go revisit earlier lessons, after you've learned something new, and you may be surprised to find details in there that deepen your understanding.
Just take it one step at a time, find something that excites you and start building it.
If you ever feel stuck, have questions, or just want to show off what you’re making, make sure to join me and the rest of the community on Discord. You can always find me on social media (@iced_coffee_dev on X or @simondev on BlueSky).
Cheers,
Simon