Mastering ThreeJS Instancing for Creative developers

Learn how to create amazing demos with instancing in this fun exercise-centered ThreeJS course.

The content is divided into two main projects where we will learn how instancing works, and how to use it to make amazing things with shaders:

• Shaders and gradients project
• Infinite tunnel Project
• Interactive Instancing Project
• Learn to create amazing things with ThreeJS.InstancedBufferGeometry and ThreeJS.InstancedMesh

We will have some extra lessons where I will show you how I explore and expand on the final demo. You'll learn how to take what you learn and expand on it by yourself. As well as some handy links and a cheat sheet as a guide.

The Curriculum

This curriculum teaches you everything you need to know to get started with instancing and creating awesome projects in the meantime

• 4+ hours of project-based lessons.

• 3 lessons to learn the basics of instancing and making Shaders and Gradients
• 3 lessons for making the "Infinite Tunnel" project
• 7 *NEW* lessons on Mouse Interactive ThreeJS.InstancedMesh.
• Exclusive source code for the "infinite tunnel" project
• 3 Bonus next steps lessons:
  • "Shaders and Gradients" -> Explore new effects, intro animation, and learn shader exploration
  • "Infinite Tunnel" Create -> Create a blackhole-like outro animation and shader tips.
  • ThreeJs Instancing -> A handbook of all the ways to do instancing in ThreeJS and their caveats.
• Free updates for newer versions of ThreeJS
• Access to exclusive Discord community

Frequently Asked Questions

• Should I take this course as a ThreeJS beginner?

If you know how to an object on the screen, you are good to go! This course is meant to teach you instancing from 0. However, while we are lightly going over our setup, we are not going too deep into how the ThreeJS rendering works.

• Do I need to know shaders?

We'll explain every line of GLSL in this course. However, I recommend you have a basic level of shader knowledge before taking this course. You can get up and running with my free "Intro to Shaders for Web Developers" course.

• Do I need a specific browser?

Any modern browser will work: Chrome, edge, firefox, arc.

• Can I use my favorite text editor?

Yes! You can use VSCode, sublime, or whatever you want. For the course, I'm using nvim.

• Will this work for every ThreeJS version?

ThreeJS may change over time, but the course content will update every time to match. At the bottom, you can check which is the latest ThreeJS version the course is in.

If you have any questions you can ask me through my social networks:

• WebGL Newsletter - Offscreen canvas
• Twitter

Current ThreeJS Version: 0.155.0