SPACEto play / pause
Lto go forward
Jto go backward
ARROW UPto increase volume
ARROW DOWNto decrease volume
Fto toggle fullscreen
Mto toggle mute
0 to 9to go to the corresponding part of the video
,to decrease playback speed
;to increase playback speed
Want to learn more?
If you are here, you probably already know what Three.js is but let's talk about it and see why we need this library.
Here's a preview of what you can achieve with Three.js:
Before going further, we need to know what WebGL is exactly.
What is WebGL? 10:21
WebGL can draw more than triangles and can also be used to create 2D experiences, but we will focus on 3D experiences using triangles for the course's sake.
The GPU can do thousands of parallel calculations. Imagine that you want to render a 3D model and this model is constituted of 1000 triangles—which, come to think about it, is not that many. Each triangle includes 3 points. When we want to render our model, the GPU will have to calculate the position of these 3000 points. Because the GPU can do parallel calculations, it will handle all the triangles points in one raw.
Once the model's points are well placed, the GPU needs to draw each visible pixel of those triangles. Yet again, the GPU will handle the thousands and thousands of pixels calculations in one go.
The instructions to place the points and draw the pixels are written in what we call shaders. And let me tell you, shaders are hard to master. We also need to provide data to these shaders. For example: how to place the points according to the model transformations and the camera's properties. These are called matrices. We also need to provide data to help colorize the pixels. If there is a light and the triangle is facing that light, it should be brighter than if the triangle isn't.
And this is why native WebGL is so hard. Drawing a single triangle on the canvas would take at least 100 lines of code. Good luck if you want to add perspective, lights, models, and animate everything in that case.
But native WebGL benefits from existing at a low level, very close to the GPU. This enables excellent optimizations and more control.
Three.js to the rescue 18:52
Because Three.js is right above WebGL, we can still interact with it in some ways. At some point, we will get to writing shaders and create matrices.
Ricardo Cabello, aka Mr.doob (Website, Twitter), is the developer who created Three.js. He is still working on it, but now he's helped by a large community. You can check the list of contributors here: https://github.com/mrdoob/three.js/graphs/contributors
Currently, the library gets an update every month and you can see what's changed in the releases page here: https://github.com/mrdoob/three.js/releases
You can discover many exceptional projects using Three.js on the website's homepage: https://threejs.org/
There is also some well-maintained documentation that we will use a lot: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
And you can find hundreds of examples with public code here: https://threejs.org/examples/#webgl_tonemapping
If you want to follow updates and discover exceptional projects, I advise you to follow the Mr.doob and Three.js twitter accounts:
What about other libraries? 23:01
Three.js is the most popular WebGL library for good reasons that we already covered. It's very stable, it provides many features, the documentation is remarkable, the community is working hard on updates, and it's still close enough to native WebGL.
That's why it's probably better to learn Three.js.
But there are many other libraries, and some of them are amazing as well. Be curious, try them out, and experience their strength for yourself. You might even learn things that will be useful for your Three.js projects.
How to use it
(if your browser detects a menace, do not worry, it is not)
- Unzip it
- Open your terminal and go to the unzip folder
npm installcommand to install dependencies
npm run devto launch the local server
(your browser should start automatically)
You can now start coding.
- The JS is located in
- The HTML is located in
- The CSS is located in
Any trouble? Go to the discord server: