SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Others
- stats.js
- Chrome without framerate limit (gist)
- Spector.js (Chrome extension)
- TinyPNG
- Basis (repository)
- Lewy Blue
- Big List of three.js tips and tricks
Three.js documentation
Shortcuts ⌨️
⚠️ Update
Since the version 0.125
of Three.js, all Geometries
are now BufferGeometries
without having to write Buffer
. Thus, making this point irrelevant.
⚠️ Update
In the latest versions of Three.js, BufferGeometryUtils
must be imported like this:
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
⚠️ Update
In the latest versions of Three.js, mergeBufferGeometries
has been renamed mergeGeometries
:
const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries)
Unlock content 🔓
To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 🤘
That's the end of the free part 😔
To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
As we said in one of the first lessons, you should target a 60fps experience, at least. Some users might even have configurations where the experience should run at a higher frame rate. Those are usually gamers and are even more exigent in terms of performances and frame rate.
There can be two main limitations:
- The CPU
- The GPU
You need to keep an eye on the performances and test across multiple devices with different setups and don't forget mobile devices if your website is supposed to be compatible with those.
It would help if you also kept an eye on the overall weight of the website. When we are developing in local, things load remarkably fast, but once online, it depends on the user connection and the server speed. We need to keep the assets as light as possible.
There are many tips to improve both performances and weight, and we've already seen most of them, but here's an exhaustive list.
Setup 01:35
Some of the following tips have code examples in the starter, and each tip has a number. Uncomment the corresponding code part if you want to test it.
Monitoring 02:02
First, we need to measure the performance and not just eyeball it.
1 - Monitor FPS
Chrome used to have a nice FPS meter but not anymore. Instead, we can use a JavaScript FPS meter like stats.js.
Add it to the dependencies with npm install stats.js
.
Import it and instantiate it
import Stats from 'stats.js'
const stats = new Stats()
stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom)
Call it's begin()
and end()
methods in the tick
function
const tick = () =>
{
stats.begin()
// ...
stats.end()
}
You should get a nice looking FPS meter.
2 - Disable FPS limit
There is a way to unlock Chrome frame rate regardless of the screen capabilities.
That will enable frame rate monitoring even on good computers. For example, if you are developing on a good computer and you see 60fps
, you might think it's okay. But maybe your website can only run at 70~80fps
on that good computer, but the frame rate will drop below 60fps
on other computers, and you won't know it.
If you unlock the frame rate limit, you'll see that the performances aren't good enough, and you should run at something like 150~200fps
on this computer to be safe.
To unlock Chrome framerate:
- Close it completely —write the following instructions somewhere else if you are looking at this lesson on Chrome.
- Open the terminal.
- Open the following Github gist and launch the right command —Mac or Windows: https://gist.github.com/brunosimon/c15e7451a802fa8e34c0678620022f7d
Chrome should open without the frame rate limit. You can test it on with the exercise by opening the FPS meter again. If it didn't work, close it and retry. If it still doesn't work, you'll have to do without it.
Be careful; doing this will draw much more power from your computer and might result on Chrome crashing.
3 - Monitoring draw calls
Draw calls are actions of drawing triangles by the GPU. There will be many draw calls when we have a complex scene with many objects, geometries, materials, etc.
Usually, we can say that the less draw calls you have, the better. We will see some tips to reduce these, but first, we would like to monitor them.
There is a great Chrome extension named Spector.js that can help you with that.
- Install the extension: https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk
- On the WebGL page, click on the extension icon to activate it.
- Click again to open the extension panel.
- Click on the red circle to record the frame.
Wait a little, and a new page will open with many intricate details about the recorded frame.
In the Commands tab, you'll see how the frame has been drawn step by step. We won't explain everything here, but the blue steps are draw calls, and the other steps are usually data sent to the GPU such as the matrices, attributes, uniforms, etc.
The less you have, the better.
4 - Renderer informations
The renderer
can provide some information about what's in the scene and what's being drawn.
Just log the renderer.info
to get this information:
console.log(renderer.info)
How to use it 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(project should open on your default browser automatically) - Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css