Three.js Concepts

[00:00:00]
>> Mathew DesLauriers: What we're gonna do is we're just gonna chat about some of the stuff around three.js. I'm just gonna introduce some of these concepts and then once we introduce them, we're gonna actually open up our own code and start to create our own three.js scene. So before we get too far into three.js there's this, these terms that I've been using already called material, and geometry and so what are these terms?

[00:00:22]
So a material in 3-D. This describes, at least in the context of three.js, it describes the surface quality of a mesh. And so for an example, you may have a sphere and the sphere is exactly always white. It looks like this. It doesn't always look like a sphere.

[00:00:40]
It looks more like a circle. It looks two dimensional. But, it is actually a sphere and we can tell it's a sphere by using a wire frame rendering mode. So this is a very useful mode, it's an attribute and it's a flag that you just set to true and it allows you to visualize the mesh itself because again if it's just white, you can't really tell what it is.

[00:01:02]
But when it's a wire frame, you can give a sense of its structure and so on. And so that's, this is called a mesh basic material and if you wanted to do a solid color or if you wanted to do a solid wire frame color, it can be any color can be red or blue or whatever.

[00:01:19]
Then you'd use a mesh basic material. And this means that there's no lighting information. It's always gonna be that color no matter where it's placed in the scene and no matter what lights might be around it. This is another material that's really handy to use for debugging purposes, it's called mesh normal material and it allows us to see and visualize the faces of the mesh.

[00:01:41]
So in a 3D mesh like in this sphere you can really see that this sphere is curving around like that. And it gives us a better sense of what the topology looks like. So it's very useful for debugging. And then when we start to try and replicate more of like, what's around us with lighting, shading, and lighting that's where we will use what's called a MeshStandardMaterial.

[00:02:07]
Standard just meaning like it's a standard pipeline or something like that. And it starts to introduce shading and shadows and lights so if you don't have a light in your scene, you're not going to be able to see anything. Because just like in real life, if you turn the lights off you can't see anything.

[00:02:23]
And so the standard material tries to be a bit more like real life. And just another thing to note is that, these two images are using the same material, sorry these two. The only difference in this material is that one of them is flat shaded. And one of them is smooth shaded.

[00:02:41]
And those are concepts that are kinda handy to know. And then the other thing I was mentioning and the other thing we were seeing in the documentation is geometry. So Geometry is just the actual typology that we're working with. Whether it's a sphere, or in this case a TorusGeometry, or it could be a BoxGeometry, or you could load models from the web.

[00:03:02]
We're gonna just stick with simple shapes for now just because we want to keep it simple. But you can get more advanced, you can create your own geometries, and so on. So that's geometry. So far we have material, we have geometry, then the next thing to understand would be mesh.

[00:03:17]
Mesh is where we, we take those two concepts, we take geometry and we take material and we combine them into a sort of wrapper around those two concepts. And so let's say we wanted to draw multiple circles or squares in this case two boxes, instead of having two separate box geometries, we're gonna have one box geometry, and we just create that once, and then we use two different meshes.

[00:03:42]
And so one of the things that trips a lot of people up when they start with 3D is that, let's say they want to draw a hundred circles or a hundred squares, they create a hundred box geometries, and then they're performance is gonna get really impacted. Their app is gonna be really slow because they have a 100 different of these big structures that are like, imagine them as like, really heavy data structures.

[00:04:07]
And so what we actually wanna do is we just wanna use the same instance, the same box geometry or the same sphere geometry and then basically replicate it like clone it many many times. And that's what we're doing here, we have one box geometry that's shared amongst two different instances.

[00:04:23]
And it's very cheap an very fast to create instances and to render lots of instances of the same geometry. You can also scale each instance differently, just like in the morning when we were scaling different grid cells, different radiuses. This is the same kind of concept. We can scale each of those in different ways.

[00:04:39]
We can apply different colors, different materials and so on. And so when you combine all that together and you mash up a bunch of meshes, you have like say 50 meshes or 100 meshes, combined, it forms the scene that you are rendering. In this case we have a scene which is, lots of different cubes, different colors, and it looks a bit like that.

[00:05:00]
And this is sort of one of the things we're gonna try and aim for in the afternoon. The last concept to sort of understand of all these terms that we're using like mesh and geometry and material is a camera, and so. Camera when we're talking about 3D is a virtual, almost like a virtual eye piece, or a virtual way of looking at the world.

[00:05:22]
And in this case the camera might be somewhere in the air just like if you're in a helicopter or something like that. And we can see that it's giving us a sense of depth. We can see that the squares in the top and the distant are sort of getting smaller and growing smaller.

[00:05:39]
So this is what a PerspectiveCamera is called. OrthographicCamera, this is another type of camera. Three.js has two main types, one of them is called Perspective, one of them is called Orthographic. And it just changes the way that we see this virtual world. So when we have a perspective camera, we are seeing two-point perspective sort of like a vanishing points on the sides, you can imagine like if you've ever drawn one of those scenes where you have a point on left and a point on the right and all the lines go towards the points, that's a similar concept.

[00:06:12]
Or you can also see that there's foreshortening in the way that the square gets smaller and gets sort of noticeably more distant. Whereas here with an orthographic camera. Everything looks kind of flat and it looks kind of two-dimensional and it's actually a very good camera for our sort of artsy purposes.

[00:06:30]
And it has some other uses as well. So Monument Valley, if you guys are familiar with that video game, it's using a sort of form of orthographic camera to produce some of their lines and some of their shapes. And as well, if you wanted to create 2D artworks, or if you wanted to create maybe a game or some sort of visualization that's 2.5D or 2D, then you might be using an orthographic camera.

[00:06:54]
And when you combine all that you end up with an image, or in this case, an animation. And that's what we're going to be doing today is a bit more animation now rather than just still images. Here's another animation. This example is a little bit more complicated, but the code for it is also in the repo.

[00:07:13]
And you can see it's really just a bunch of cubes. It's using with a graphic perspective, the cubes are scaling in and out and actually, they're scaling in and out using a noise function, just the same type of noise function we're using earlier in the day. And they're moving up constantly and eventually they're disappearing and eventually they're starting again from the bottom.

[00:07:34]
So that's maybe something we can build our way up to. We'll start simple, just like we did this morning. And we might not get there necessarily, but we'll try and get as close as we can. Here's another output of the same generative sort of loop, or generative artwork.

[00:07:50]
Yeah, you can see that it's really just cubes. And one of the things actually that I did in this particular piece is that instead of randomly generating cubes all over the place, I'm generating them within a three dimensional grid. But that's something we can maybe get into later, because it's a bit more tricky.

[00:08:08]
And we just want to start with the basics first.