Published
- 4 min read
Episode 2: The WebGL Revolution and the Birth of Three.js
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 2: The WebGL Revolution and the Birth of Three.js
Froggy: “Professor, I can’t wait to hear more, ribbit! How did that revolutionary ‘Web-gee-ell’ thing change the world, ribbit?”
Professor Saburo: “Ha ha ha, calm down, Froggy. Let me explain step by step. WebGL, officially called Web Graphics Library, appeared around 2011 as a kind of ‘magic spell’ for running 3D graphics in browsers.”
Froggy: “A magic spell! Just as I thought, ribbit!”
Professor Saburo: “You could say that. What made WebGL revolutionary was that it required ‘no plugins’ whatsoever. WebGL became available as a built-in browser feature that anyone could use.”
Froggy: “Ooh! So that means everyone could view 3D content the same way without any special preparation, ribbit!”
Professor Saburo: “Exactly right! Moreover, it could harness the full power of computer performance. Specifically, it became possible to directly utilize the power of the GPU (Graphics Processing Unit), which is the specialized brain for graphics processing. This enabled smooth and complex 3D expressions that were difficult even with plugins to run right in the browser.”
Froggy: “Gee-pee-you…? Some complicated words are coming up, ribbit…”
Professor Saburo: “Simply put, think of it as a specialist who’s incredibly good at drawing pictures. By being able to borrow the power of that specialist, browsers suddenly gained tremendous expressive capabilities. WebGL is now used in various fields like games, data and building visualization, and virtual reality (VR).”
Froggy: “I see, ribbit! So WebGL is a magic spell that can run amazing 3D without plugins, borrowing the power of specialists, ribbit! But Professor, where did today’s main topic ‘Three-jay-ess’ go, ribbit?”
Professor Saburo: “Now we’re getting to the main point. You see, that powerful magic spell WebGL was a bit… no, quite technical and difficult to master directly.”
Froggy: “Eh, really, ribbit?”
Professor Saburo: “Indeed. For example, just displaying a simple cube required chanting hundreds of lines of spells (code). This wouldn’t make people think ‘let me casually try using this magic,’ would it?”
Froggy: “Hmm, that’s true. I’d probably fall asleep after the first 10 lines, ribbit…”
Professor Saburo: “That’s where our savior Three.js appeared. Three.js is like a ‘magic translator’ that converts those complex and difficult WebGL spells into simpler, more understandable language.”
Froggy: “A magic translator! Hop hop! That sounds like something even I could use, ribbit!”
Professor Saburo: “Exactly! With Three.js, displaying a cube that required hundreds of lines can be written in just a few lines of code. Three.js maintains all of WebGL’s powerful capabilities while providing various features that let developers focus more on creative work.”
Froggy: “Specifically, what makes it so excellent, ribbit?”
Professor Saburo: “Good question, Froggy. Three.js has many excellent features, but if I had to list a few:
- Simple Code: It hides the complex WebGL processes and lets you control scenes, cameras, lights, and objects with intuitive commands.
- Rich Features: It comes with everything needed for 3D creation, like functions to load 3D models, control animations, and express various types of lighting and shadows.
- Huge Community: Since developers all over the world use it, there’s abundant information available, and it’s easy to find solutions when you run into trouble.
Three.js was created in 2010 by a single brilliant developer named Ricardo Cabello (also known as Mr.doob), and now it continues to evolve daily with contributions from countless contributors.”
Froggy: “Wow! So Three.js is an amazing translator that makes difficult magic spells easy, ribbit! And it has lots of convenient features, plus tons of friends ready to help when you’re in trouble - it’s the ultimate tool, ribbit! I want to try using Three.js too, ribbit!”
Professor Saburo: “That’s the spirit, Froggy! With the arrival of Three.js, web developers around the world gained the ability to casually and freely explore the possibilities of 3D expression. It truly was a huge, huge step forward in the history of browser 3D.”
Froggy: “Thank you, Professor, ribbit! I feel like I really understand how 3D works in browsers now, ribbit! Hop hop hop!”
Professor Saburo: “Hehe, that’s wonderful to hear. Let’s stop here for today’s discussion. Next time, it might be fun to actually use Three.js together to create a simple 3D world.”
(To be continued in Episode 3)