# Materials and Light

Up until now, we've only worked with basic materials. To create a convincing 3D scene, proper materials and more advanced lighting is needed. Qt Quick 3D supports a number of techniques to achieve this, and in this section we will look at a few of them.

## The Built-in Materials

First up, we will look at the built in materials. Qt Quick 3D comes with three material types: `DefaultMaterial`, `PrincipledMaterial`, and `CustomMaterial`. In this chapter we will touch on the two first, while the latter allows you to create truly custom material by providing your own vertex and fragment shaders.

The `DefaultMaterial` lets you control the appearance of the material through the `specular`, `roughness`, and `diffuseColor` properties. The `PrincipledMaterial` lets you control the appearache through the `metalness`, `roughness`, and `baseColor` properties.

Examples of the two material types can be seen below, with the `PrincipledMaterial` to the left, and the `DefaultMaterial` to the right.

![image](https://378126997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSh8Zb0vw9zlstTaGKIdC%2Fuploads%2Fgit-blob-a89cec34ae05e4e76ac5c8e2485f3c9f23d83a03%2Fmaterials.png?alt=media)

Comparing the two Suzannes, we can see how the two materials are set up.

For the `DefaultMaterial`, we use the `diffuseColor`, `specularTint`, and `specularAmount` properties. We will look at how variations of these properties affect the appearance of the objects later in this section.

```
Model {
    source: "meshes/suzanne.mesh"

    position: Qt.vector3d(5, 4, 0)
    scale: Qt.vector3d(2, 2, 2)
    rotation: Quaternion.fromEulerAngles(Qt.vector3d(-80, 30, 0))

    materials: [ DefaultMaterial {
            diffuseColor: "yellow";
            specularTint: "red";
            specularAmount: 0.7
        } ]
}
```

For the `PrincipledMaterial`, we tune the `baseColor`, `metalness`, and `roughness`properties. Again, we will look at how variations of these properties affect the appearance later in this section.

```
Model {
    source: "meshes/suzanne.mesh"

    position: Qt.vector3d(-5, 4, 0)
    scale: Qt.vector3d(2, 2, 2)
    rotation: Quaternion.fromEulerAngles(Qt.vector3d(-80, 30, 0))

    materials: [ PrincipledMaterial {
            baseColor: "yellow";
            metalness: 0.8
            roughness: 0.3
        } ]
}
```

### Default Material Properties

The figure below shows the default material with various values for the `specularAmount` and the `specularRoughness` properties.

![image](https://378126997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSh8Zb0vw9zlstTaGKIdC%2Fuploads%2Fgit-blob-77f7af80aebbc88022de9133dbad160629efcd99%2Fdefault-material.png?alt=media)

The `specularAmount` varies from `0.8` (left-most), through `0.5` (center), to `0.2` (right-most).

The `specularRoughness` varies from `0.0` (top), through `0.4` (middle), to `0.8` (bottom).

The code for the middle `Model` is shown below.

```
Model {
    source: "meshes/suzanne.mesh"

    position: Qt.vector3d(0, 0, 0)
    scale: Qt.vector3d(2, 2, 2)
    rotation: Quaternion.fromEulerAngles(Qt.vector3d(-80, 30, 0))

    materials: [ DefaultMaterial {
            diffuseColor: "yellow";
            specularTint: "red";
            specularAmount: 0.5
            specularRoughness: 0.4
        } ]
}
```

### Principled Material Properties

The figure below shows the principled material with various values for the `metalness` and `roughness`properties.

![image](https://378126997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSh8Zb0vw9zlstTaGKIdC%2Fuploads%2Fgit-blob-3b62b4bdcfc0f921eef062f2c31bd62e20cf32a2%2Fprincipled-material.png?alt=media)

The `metalness` varies from `0.8` (left-most), through `0.5` (center), to `0.2` (right-most).

The `roughness` varies from `0.9` (top), through `0.6` (middle), to `0.3` (bottom).

```
Model {
    source: "meshes/suzanne.mesh"

    position: Qt.vector3d(0, 0, 0)
    scale: Qt.vector3d(2, 2, 2)
    rotation: Quaternion.fromEulerAngles(Qt.vector3d(-80, 30, 0))

    materials: [ PrincipledMaterial {
            baseColor: "yellow";
            metalness: 0.5
            roughness: 0.6
        } ]
}
```

## Image-based Lighting

One final detail in the main example in this section is the skybox. For this example, we are using an image as skybox, instead of a single colour background.

![image](https://378126997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSh8Zb0vw9zlstTaGKIdC%2Fuploads%2Fgit-blob-a89cec34ae05e4e76ac5c8e2485f3c9f23d83a03%2Fmaterials.png?alt=media)

To provide a skybox, assign a `Texture`to the `lightProbe` property of the `SceneEnvironment` as shown in the code below. This means that the scene receives image-based light, i.e. that the skybox is used to light the scene. We also adjust the `probeExposure` which is used to control how much light is exposed through the probe, i.e. how brightly the scene will be lit. In this scene, we combine the light probe with a `DirectionalLight` for the final lighting.

```
environment: SceneEnvironment {
    clearColor: "#222222"
    backgroundMode: SceneEnvironment.SkyBox
    lightProbe: Texture {
        source: "maps/skybox.jpg"
    }
    probeExposure: 0.75
}
```

In addition to what we show, the orientation of the light probe can be adjusted using the `probeOrientation` vector, and the `probeHorizon` property can be used to darken the bottom half of the environment, simulating that the light comes from above, i.e. from the sky, rather than from all around.