Contact FutureLearn for Support
Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Skip to 0 minutes and 19 secondsSo now we are in the second module, where we are going to talk about how to make things look more realistic and how to change the visual appearance of the objects that we have in our 3D environment. So, I have tweaked a little bit the scene we had before to make it look a little bit nicer. I’ve just changed the background colour and added some shadows but, still, this scene doesn’t look very realistic, mostly because all of the objects look like they are made of the same material.

Skip to 0 minutes and 45 secondsTo change that, we usually rely on lots of..., we try to change the way that the system paints every single pixel of the objects, and to do so, what we are going to need to change are the properties of the material of the object. So, for instance, I can click in this object right now and I can create a material. Material is the component that tells us all the information about what is made of, and because of that we can change the way this is going to be painted on the screen. So, for instance, if I click here and I change this property, we are going to change the colour of the object.

Skip to 1 minute and 21 secondsIt’s not only colours that we can change, there are also properties about how the light shines on the object for instance, the specular is the property that tells us how much light bounces and how the light bounces on the surface of the object. So, for instance, if we change the amount of specular we have, we can make an object look from more plastic to more metallic or more made of rubber. So there are different properties we can change and all of them are affecting the way the light behaves and how this object is going to be painted on the screen. We can do the same with every object, so every object can have different properties.

Skip to 2 minutes and 2 secondsDepending on the kind of material, you can have more properties. For instance, I have added a special material here to this teapot, so I can change the colour as I did before, but also I can change more properties. For instance, I can make this object shiny. So, for instance, if I change this property here, I’m going to make that the object is glowing, it’s not being affected by the light itself, or, for instance, if I want I even can change the way it looks depending on the point of view of the camera.

Skip to 2 minutes and 29 secondsSo, for instance, if I go here, I’m going to do this and I’m going to change the way that the colour of the object looks depending on the point of view of the camera. So, different materials, we have different effects on the way we paint objects, and the more complex the materials are, the more interesting the objects will look. So I’m going to remove this material I made here and I’m going to show you something else.

Skip to 2 minutes and 53 secondsOne of the problems we have right now with the materials, even if we change the colour of the material, still all the points of the surface of the object are going to look more or less the same, and that’s because the material is being applied exactly the same for every single point of the surface of the object. But, if we want to change that, what we need is to have some kind of information that tells for every single point of the surface of this object, different properties. To do so, we usually rely on images. We use images to tell every point of the surface what are the properties that it has.

Skip to 3 minutes and 25 secondsSo, in this case, I'm going to search for some images I have here on my hard drive. Let me see, here. So, what I’m going to do is, I’m going to click here, the floor of the scene, and I’m going to drag this texture. We can open the texture so you can see it. This image is like wooden planks. Just by applying this texture over the surface of this object, what I get is this nice looking surface that looks similar to to a wooden table.

Skip to 3 minutes and 59 secondsBut if we want to make it more realistic, usually tables they are a little bit shinier, so what I’m going to do is click in the table and I can change the specularity, and I’m going to change these two parameters here that define how the light bounces on the surface of the material. So now you can see that when I move the camera I have this beautiful bright spot on the surface. By the way, this is called the specular hotspot. Just by playing with different materials and different textures we can achieve a more realistic look on the objects. In the next video I will talk more about this point.

Creating a more realistic 3D scene

To make your scene look realistic, there are several basic properties you need to consider. These include:

  • Material: A material is the formal definition of the appearance of an object (ie its colour and how it reflects light). It is separate from the geometry, which is the definition of the object’s structure.
  • Colour: Defined as a mix of three channels; red, green and blue.
  • Specular: Specular colour is light that reflects directly from the surface in a single direction (ie the reflection you see in still water or a shiny floor). Diffuse colour, by contrast, is light which is reflected from a surface the same way in all directions.

Choosing your material is an important first step, because different materials have different properties.

The more complex your material, the more options you will have, and the more interesting your scene will be.

Share this video:

This video is from the free online course:

3D Graphics for Web Developers

Pompeu Fabra University Barcelona

Course highlights Get a taste of this course before you join:

  • Getting to know WebGL studio
    Getting to know WebGL studio
    video

    State-of-the-art tool for 3D graphics development, WebGLStudio. Watch Javi Agenjo explains basics of 3D graphics using WebGLStudio.

  • Learn 3D scene post-production
    Learn 3D scene post-production
    video

    Apply more effects, algorithms to have more realistic scene and learn about post-production. Watch Javi Agenjo explains more.

  • Implementing a basic 3D scene
    Implementing a basic 3D scene
    video

    Learn how Three.js API can be used to create 3D graphic scenes. Explore more about Three.js after watching Alun Evan's video lesson.

  • Creating complex 3D objects
    Creating complex 3D objects
    video

    Learn how to create complex 3D objects instead of simple spheres and planes. It uses external resources also. Watch Alun Evans explains more.

  • Loading textures and casting shadows
    Loading textures and casting shadows
    video

    Add complex textures and higher quality meshes in to a 3D scene using Three.js API. Watch how Alun Evans program these features.