Three.js - how tech evolution let us create 3D graphics on the web

Today’s web is nothing like it was years earlier. Some of us may remember the times when websites were just a bunch of non-responsive, mostly table-structured views in the black, white, or gray color palette. Grid? Flexbox? Gradients? Forget about it. For sure, these websites weren’t something that we could call “beautiful,” but they were something that could be called “revolutionary.” What was important was that they were doing their job.

Now imagine that there’s a medium, a website, that can be accessed in almost any place in the world, by everyone who had a computer and an Internet connection. It’s not difficult, isn’t it? But then it was something out of extraordinary, so you didn’t really care about how it looks.

Websites weren’t meant to be pretty

And it was all that really mattered. Not a fancy look, advanced animations, or other things that are almost inevitable in today’s design, but the ability to be some kind of worldwide information carrier, easy to use, and content-focused. They were created to inform, advertise, or just simply make companies come into being on the Internet.

Also, those websites couldn’t be pretty, taking into account the technology that was available then. There were just not many things that developers and designers could do to make it look modern. And as technology grew stronger, websites and their design started to evolve.

The evolution of web development

The evolution of web development is pretty fast. For me, the day without a new library, framework, or some other solution is a day wasted. Really. Sometimes the impact of those new inventions is huge and opens new possibilities for developers, and sometimes these solutions just make the work of developers easier and more efficient. Either way, that’s how evolution works.

But in web development, it’s not only how we do it (which tools we use), but what we as developers do, so good design is a crucial thing. In addition, we must consider the state of technologybecause when creating a website, the designer must know what the developer is able to do. That’s why the work of a developer is strongly connected with the work of a designer, and nowadays, these two have a field to show off.

The sky is the limit

Nowadays, websites tend to serve more and more like an interactive experience than just a medium to just show some info to the viewer, like contact or social links. More often than ever, they start to use cool animations, play with the user, encourage him to do something else, to click on some button, scroll up a little, move the mouse in some place, just to see some cool things happen.

New solutions - RWD, Flexbox, Grid, and more

We have Responsive Web Design (RWD), so we can create apps for every kind of device. There are many new ways to handle the layout of a website. We are not limited only to tables and floats.

There’s Flexbox and Grid layout, so we can create almost any configuration of elements and then simply change it as the window gets smaller. We also have ways to change the appearances of elements, like gradients, colors, borders, shadows, SVGs, and many others.

In everyday development, we use a lot of Javascript to create interactions, animations, transitions, modals, event listeners, and so on. Nowadays, we can even write CSS in JS! That’s how far and fast technology has changed.

Of course, it doesn’t mean that you can’t do something interesting just using simple HTML and CSS solutions - sometimes beauty lies in simplicity, but there are times that we want something more, something that simply makes an impression.

From raw data to 3D wonders

The same can be said about modern design. Since the beginning of the technological revolution, we have come through a lot of styles of design. From minimalistic, elegant websites to amazing, effect-packed user experiences.

Somewhere on the way, they started to not only show raw data but to tell some kind of a story. That’s because we have animations, modern graphics, event-based user interactions, and many other things, which are really helpful in it. And all this evolution led to the origin of a technology that can be used to create almost movie-like experiences (as well as simple effects), and it’s called WebGL.

Let’s talk about WebGL

What is WebGL? It’s a Javascript extension that gives us access to 2D and 3D APIs in a compatible web browser. Simply saying - it’s a technology that can render triangles on an HTML canvas element really fast, using the power of GPU (Graphics Processing Unit), that’s capable of doing thousands of calculations in parallel.

WebGL isn’t new technology as it began in 2007, but especially in the last few years, it has been desired by developers and designers, as there are more and more website designs created having WebGL in mind. Not only do they use some single 3D elements to add some modernity to their designs, but they’re also creating websites where WebGL plays the main role.

But to be able to draw something in WebGL, we need to use something called shaders, which are pretty hard to learn. Those are the programs that are used for giving instructions to WebGL on how to position the vertices in a space, how to draw every pixel that lies between them, and so on. That’s why we need some help.

But you can do it easier

And that’s how we finally come to the main topic of this series - Three.js library. It’s a Javascript library and API released on Github in 2010 by Ricardo Cabello (mr.doob), which helps us to create and display animated, GPU-accelerated 3D graphics in a web browser with the use of WebGL.

It really simplifies the WebGL API and lets us create cool experiences on the web. Of course, we still can use the powers of shaders and other WebGL stuff in it (and then we still need to learn it then), but as you’ll see later, that’s the place when the fun begins.

So in the upcoming article, we’re going to learn a little bit more about this technology, and I’ll show you how to create 3D graphics on the web! It’s going to be a step-by-step tutorial, so don’t worry. It’s going to be fun. Here it is! → Three.js series – basic tutorial of Three.js

This article was written by Patryk Kapkowski, Software Developer at Gorrion.