So What Do You Need to Run a three.js App Anyway? 0.1

SO WHAT DO YOU NEED TO RUN A three.js APP ANYWAY?

Let’s quickly go over what you need to run a three.js app. First of all, you need a computer or a smartphone, but I’m going to assume that since you are reading this ebook then you already have one of those. Aside from that, you will need…

A three.js Developer

Yes, that means you! You are now a three.js developer. Congratulations!

We will be covering everything that you need to know as we go along, however, this book will be easier to follow if you are already familiar with a couple of things.

In particular, you should have a basic understanding of the structure of an HTML page as well as how to use simple CSS and JavaScript. It will also help if you know your way around the developer console of your favorite browser. Press CTRL + SHIFT + I, or CMD + SHIFT + I on Mac, to open it now.

If you need a refresher on any of that, go ahead and take it now. We’ll wait here for you.

A Modern Browser

Any modern browser can run three.js, where ‘modern’ means anything released in the last 5 years or so. You can even, technically, get a three.js app to run in Internet Explorer 9, released way back in 2011. Are you going to have a good time doing so? Probably not, but fortunately nowadays the amount of people using IE9 is somewhere below 0.1% of internet users.

You can also get three.js apps to run in all kinds of exotic environments like Node.js, Electron.js, or React Native. These are beyond the scope of this book though. Here we’ll be focussing exclusively on running your app in a web browser such as Firefox, Chrome, Edge or Safari.

JavaScript

Yes, you will need JavaScript to use three.js. However, these days there are a couple of flavors of the language. We’ll be using the most up to date flavor possible while keeping things simple and not confronting you with too much new syntax. This is not a JavaScript book after all. However, let’s take a quick look at the state of the language today and the position that puts us in, as three.js developers.

A Very Brief History of JavaScript

The JavaScript language has gone through something of a rebirth in recent years, during which time it went from being an ugly duckling to something that you might call a disgruntled swan. Not quite beautiful yet, and still with its annoyances and problems, but much, much better than it used to be.

The committee that oversees the development of the language is called Ecma International and the technical standard that JavaScript follows is called ECMAScript.

JavaScript has gone through various iterations, from Version 1 way back in 1996, through to version 5 in 2009. It stagnated there for a couple of years, with a single minor update to 5.1 in 2011.

Finally, a much-needed Version 6 was released in 2015, dubbed ECMAScript 2015, commonly called ES6 for short. There was a lot of new syntax introduced here, but this release also marked a change in the way versions will be released going forward. From now on there will be one version per year, called ES2016, ES2017 etc. Collectively, these are sometimes referred to as ESNext.

At the same time, browsers have largely switched to an evergreen updating system. If you use Firefox, you’ll frequently see the “Updating Firefox…” message. Chrome does the same, but silently. This means that your browser automatically supports a lot of the new syntax, with more being added all the time.

You can see a big and ugly support table for everything related to JavaScript support, new and old, on kangax's site or a much nicer but less complete list on caniuse.com, both of which you can use to judge whether you should use a new JavaScript (or CSS) feature or not.

JavaScript Used in This Book

We’ll be using a kind of ES6-lite version of JavaScript, especially in the early chapters.

In particular, we’ll be using arrow-functions, const and let, which will work directly in most browsers but might cause issues in Internet Explorer 11 and below (globally accounting for around 2% of users). If you need to support these, you’ll have to compile your code down using a tool like Babel.

WebGL

TL;DR: You don’t need to worry about WebGL support, basically every browser and device made in the last 5 years or so supports it.

WebGL is an API for connecting your browser up to your graphics card, providing you with a lot more graphical processing power than is traditionally available on a website. You can use this power in any way that you like, but as the name suggests, three.js generally uses it for displaying 3D graphics. However, it is equally good at 2D graphics, and can even be used for GPGPU (General Purpose Graphical Processing Unit) computing, as you can see in the flocking behavior and protoplanet examples.

Of course, to use WebGL we need a device and browser that supports it. Not so long ago, this was something that we had to worry about, but these days you can largely take it for granted that all users will have WebGL and that every modern smartphone, tablet, PC or laptop has a graphics card capable of running at least a basic scene.

Here are two places that track current WebGL support:

Before you decide that you need to target these users, take into consideration that they probably represent people using old computers, possibly on old corporate networks. Or who knows, these days perhaps they are internet connected fridges, toilets, and wine bottles.

They are not likely to be your target for a fancy WebGL app in the first place. Your audience on the internet is huge, so focus on the people that you can reach and don’t worry about the couple of percent that you can’t.