Published
- 4 min read
Episode 8: Journey's End, and Its Beginning
What is Three.js? Froggy’s Journey into the Wonderful World of Browser 3D
Note
This story is written with the assistance of generative AI for the purpose of making Three.js learning enjoyable. While we pay careful attention to the accuracy of technical information, we cannot guarantee that all content is completely accurate. Please use this as a supplementary learning tool and enjoy it with a relaxed mindset.
Characters
- Froggy: An energetic young frog who recently started learning programming. While there’s still so much he doesn’t know, his curiosity knows no bounds. Known for his distinctive “~ribbit” speech pattern.
- Professor Saburo: A knowledgeable professor who is very well-versed in 3D graphics and web technologies. He kindly answers any question with patience.
Episode 8: Journey’s End, and Its Beginning
Froggy: “Professor! I feel like I’ve learned so much in this short time, ribbit! Code that looked like mere magic spells at first now looks like meaningful words to me, ribbit!”
Professor Saburo: “Oh, that’s wonderful growth, Froggy. Well then, let’s look back on this journey and review a bit. What was the revolutionary technology that first enabled 3D to work in browsers?”
Froggy: “Um… the one that eliminated the need for special preparation (plugins)… WebGL, ribbit! But WebGL uses very difficult spells, so we have the ‘magic translator’ that converts them into language we can understand… Three.js, ribbit!”
Professor Saburo: “Exactly right! Now, do you remember the three basic elements needed to create a world with Three.js?”
Froggy: “Of course, ribbit! The ‘Scene’ which is the stage where we place 3D objects, the ‘Camera’ which determines where we look at that stage from, and the ‘Renderer’ which is the painter that actually draws pictures from the scene and camera information! These three were the basics, ribbit!”
Professor Saburo: “Perfect. Now, that ‘Scene’ wasn’t just a big box for putting objects in. What was its true nature?”
Froggy: “A very clever hierarchical structure that manages the world through parent-child relationships… the ‘Scene Graph’, ribbit! When you move a parent, children and grandchildren follow along - thanks to that, even complex animations like planetary motion could be created intuitively, ribbit!”
Professor Saburo: “Indeed. And surprisingly, low-level WebGL had no concept of ‘scenes’ or ‘cameras’ for capturing the world at all. Three.js provided us with those convenient concepts and handled all the complex matrix calculations behind the scenes.”
Froggy: “That’s right, ribbit! When we just write camera.position.z = 5;, Three.js does all the difficult math for us… It’s really amazing, ribbit!”
Professor Saburo: “And finally, the final worker who brings all that information together and issues the ultimate command to the GPU to ‘render!’ - that was?”
Froggy: “Commander ‘Renderer’, ribbit! That single line renderer.render(scene, camera) contains such grand work - from scene graph analysis to WebGL command translation to issuing draw calls to the GPU, ribbit!”
Professor Saburo: ”…Perfect, Froggy. You now have a solid understanding of what Three.js is and how it works - its very essence. You’ve grown incomparably since you first came to me.”
Froggy: “Professor…! I’m so happy, ribbit! Hop hop hop!”
Professor Saburo: “Hehe. I’ve taught almost everything I can teach about the basics in this lecture series. So this ‘Froggy’s Journey into the Wonderful World of Browser 3D’ will come to an end for now.”
Froggy: “Eh!? It’s… it’s ending, ribbit!? I’m sad, ribbit…”
Professor Saburo: “Yes. But this isn’t an ‘end.’ It’s the ‘beginning’ of your true adventure. Today’s knowledge is merely a map and compass for you to create your own worlds. From here on, you’ll take that map in hand and journey to worlds no one has ever seen before.”
Froggy: “My… adventure’s beginning…”
Professor Saburo: “That’s right. Come here anytime you’re in trouble. But first, try creating something with your own hands. No matter how small it is. What you create yourself will speak more eloquently than anything else and show you the next path forward.”
Froggy: “Professor…! Thank you, ribbit! I’ll try it, ribbit! I’ll create my very own world, ribbit! Hop hop hop!”
(To be continued in Episode 9)