What Do You Need to Run a ThreeJs App Anyway?

-

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!
As a three.js developer, you will need to know some very basic HTML and CSS, and some slightly less basic JavaScript. If you are new to web development though, don’t worry because we’ll cover everything that you need to know in three short chapters at the end of this introductory section: 0.6, 0.7 and 0.8.
It will also help if you know your way around the developer console of your favorite browser. Press CTRL + SHIFT + I on Windows or Linux, or CMD + SHIFT + I on Mac, to open it now.

A Modern Web 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.

WebGL

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 GPU) 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 keep track of current WebGL support:
Before you decide that you need to target that missing ~5%, take into consideration that they probably represent people using old computers, possibly on old corporate networks, who would not be able to run your fancy new fangled graphics anyway. Or who knows, these days perhaps they are internet connected fridges, toilets, wine bottles, or shoes.
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.


Comments

Post a Comment

Popular posts from this blog

How to download a file using command prompt (cmd) Windows?

-
Image
If you’re like most Internet users, you download various types of files now and then. You either download these files with your web browser or some download manager software. Have you ever considered downloading files using the command prompt i.e. CMD? If not, we recommend you to try it. It’s quite interesting apart from being very useful as well. In this article, we’ll show you how to download a file using command prompt aka CMD. How to download a file using command prompt?   There are several useful commands for the Command Prompt and one of them is  bitsadmin . Though bitsadmin has several uses, here we shall limit this article to its role in downloading files only. If you want to read the details about bitsadmin syntax, continue reading this section. Otherwise, you can scroll down to the next section –  Downloading a file .   The syntax of bitsadmin is : BITSADMIN [/RAWRETURN] [/WRAP | /NOWRAP] command   As you know, the parts of the syntax inside ...
Read more

The future of Artificial Intelligence: 6 ways it will impact everyday life

-
Image
Technology moves at breakneck speed, and we now have more power in our pockets than we had in our homes in the 1990s. Artificial intelligence (AI) has been a fascinating concept of science fiction for decades, but many researchers think we’re finally getting close to making AI a reality.  NPR notes that in the last few years, scientists have made breakthroughs in “machine learning,” using neural networks, which mimic the processes of real neurons. This is a type of “deep learning” that allows machines to process information for themselves on a very sophisticated level, allowing them to perform complex functions like facial recognition. Big data is speeding up the AI development process, and we may be seeing more integration of AI technology in our everyday lives relatively soon. While much of this technology is still fairly rudimentary at the moment, we can expect sophisticated AI to one day significantly impact our everyday lives. Here are 6 ways AI might affect us in the ...
Read more

How to Include ThreeJs in Your Projects

-
Image
HOW TO INCLUDE three.js IN YOUR PROJECTS There are quite a few different ways to include three.js in your JavaScript application, some of them simple, some of them a little more complex, however, they all boil down to one simple idea: you need to include one (and  only one) of these three files in your project: three.js three.min.js three.module.js You can view them all  on the three.js GitHub repo , which we’ll explore in the next chapter. Each of these files a version of the three.js core, meaning that once you’ve included one of them in your application, you are all ready to get started in creating beautiful 3D scenes. There are two main ways to include these files in your project: include them in a  script tag  in your HTML import them directly into your JavaScript files. We’ll explore how to do in Section Two What’s the Difference Between these Files? The  three.js  file is intended to be included in a  <script> ...
Read more