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.
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.
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.
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.
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:
- caniuse.com, which reports a global rate of 93% WebGL enabled devices
- webglstats.com which reports a slightly higher 98%
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.