Want to keep learning?

This content is taken from the Pompeu Fabra University Barcelona's online course, 3D Graphics for Web Developers. Join the course to learn more.

Skip to 0 minutes and 19 seconds Hi! In this video I’m going to introduce you to the concept of a 3D camera. When we have a 3D environment as we have here, we need some kind of device that helps us to transform from the 3D world data that we have to a to 2D image that we can show on the screen. This device is usually called a camera because it resembles the concept of a camera in the real world. So, right now, in this 3D environment, I have, we could say we have two cameras.

Skip to 0 minutes and 45 seconds I have one camera here that is pointing to this position here, I’ll move it around later so you understand better but we also have another camera, which is the camera I’m using right now to see the 3D environment. So the best way to understand when we have a camera and we perform some actions on this camera, how they affect the final view of the scene is, in this case, to see through that camera. So right now, I have one camera, I have this camera which is looking at this camera over here. What I’m going to do is, I’m going to switch this view over here to the camera itself.

Skip to 1 minute and 20 seconds So now this view over here is the view that we will see if we look through this camera. To see that, if I click in this camera and I move it around, you could see that the camera is moving and the view is also changing, so if we move the camera up, you can see that it looks from high up, and if we move it down, we are closer to the ground. So, when we have a camera, there are some properties that we have to keep in mind if we want to use it for our 3D environment The first property, obviously, is the position of the camera, as I’m moving right now here.

Skip to 1 minute and 55 seconds But as you can see, when I move the camera, the point where the camera is aiming is fixed, it’s this point over here, so it doesn’t matter how much I move the camera, the camera is always pointing at this position. This position, the position where the camera is aiming at, it’s usually called the centre of the camera. Be careful, because it could be kind of confusing. When we talk about the centre of the camera it’s not the position of the camera, this is the centre. Also, to differentiate, usually the position where the camera is is called the eye of the camera.

Skip to 2 minutes and 25 seconds So now we have the eye of the camera and we also have the centre of the camera, where the camera is aiming at. But the camera could have lots of properties. It depends on the kind of render engine that you’re using, maybe there’s more properties to try to resemble closely to real cameras like the aperture or, I don’t know, the kind of lens you’re using. But there are some very basic properties you’ll find in all 3D engines because those are the properties that we usually need when we are constructing a camera.

Skip to 2 minutes and 57 seconds The first one is called the field of view, “fov”, and it’s usually expressed in degrees, and it’s the angle, the angle that’s formed in the aperture of the camera. So, if the camera’s aiming here, it would be this tiny angle that we have here. So this angle is the one that is going to decide how much of the world we are seeing. If the angle is very low, like in this case, we are just looking at this tiny part of the world. If the angle is wider, you will be looking at a much bigger area of the world.

Skip to 3 minutes and 33 seconds But, because of that, when we are watching the world through a bigger, if we’re watching more area, the things look more tinier, and if we reduce the “fov”, objects will look bigger. So this is, more or less, as changing the zoom in a real camera. This value here allows us to focus on a distant object to make it look bigger or trying to have more field of view and to see more space on the 3D environment. Usually you want to keep this number between 45º and 60º. If you go higher than that you will start having this kind of distortion due to the way that usually cameras work, so try to keep it between 45º and 60º.

Skip to 4 minutes and 23 seconds There are other properties that are interesting about the cameras. Another one is the aspect ratio, which defines the proportion of the area we are looking at. Usually, the aspect ratio is computed dividing the width of the screen by the height of the screen. In my application you will see that here we have a “1” which is not, as I said before, because this screen shouldn’t be square, but you will have an aspect of “1” when the screen is square. But anyway, if you don’t have the right aspect, what you will see is that the image looks kind of stretched, as you can see here if I stretch the image.

Skip to 5 minutes and 1 second So when you have a camera always remember to compute the right aspect. Besides, another two numbers that you will find in all cameras. The first one is called the near plane and the second one the far plane, and those one define which, how much distance you are going to see from the near and from the far plane. So just so you can see it better, I’m going to reduce the far plane. So, this plane, this value tells us, the far plane, how far can we see. In this case, if I move it further, you will see more world, if I move it closer, we see less world. The same happens with the near plane.

Skip to 5 minutes and 41 seconds If we move it forward, you will see that we see less world in the front or more. Those two values, they have some properties that you have to keep in mind. So, if they are very very small, or the near plane is very very small or the far plane is very very big, you will start having some artifacts. So always try to keep these numbers between the planes that you would think matches better your scene. So in my case I’m going to put “1” and “1000”, ok? So in the next video we will talk a little bit more about the 3D environment and we will talk about 3D objects.

Using a 3D camera

In order to show a ‘3D’ world on a 2D screen, we use the concept of a 3D camera.

In the video, Javier explains this basic concept and how it works. You may find the terms below helpful as you watch:

  • Eye of the camera: The position in the world from which we are watching the scene.
  • Centre of the camera: The position that we are looking at.
  • Field of view (FOV): The angle of the cone of vision.
  • Aspect ratio: The ratio of image width to image height.
  • Near plane: An imaginary plane close to the camera. This is where we start painting the world.
  • Far plane: An imaginary plane far from the camera. This is where we stop painting the world.

Have you used a 3D camera before? Tell us about your experiences in the Comments.

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Get a taste of this course

Find out what this course is like by previewing some of the course steps before you join: