Nova Flow OS
Qt6 QML Book
Qt6 QML Book
  • Qt6 QML Book
    • Preface
      • Welcome!
      • Acknowledgements
      • Authors
    • Meet Qt
      • Qt and Qt Quick
      • Qt Building Blocks
      • Qt 6 Introduction
    • Getting Started
      • Quick Start
      • Installing Qt 6 SDK
      • Hello World
      • Application Types
      • Summary
    • Qt Creator IDE
      • Qt Creator IDE
      • The User Interface
      • Registering your Qt Kit
      • Managing Projects
      • Using the Editor
      • Locator
      • Debugging
      • Shortcuts
    • Quick Starter
      • Quick Starter
      • QML Syntax
      • Core Elements
      • Components
      • Simple Transformations
      • Positioning Elements
      • Layout Items
      • Input Elements
      • Advanced Techniques
    • Fluid Elements
      • Fluid Elements
      • Animations
      • States and Transitions
      • Advanced Techniques
    • Qt Quick Controls
      • UI Controls
      • Introduction to Controls
      • An Image Viewer
      • Common Patterns
      • The Imagine Style
      • Summary
    • Model View
      • Model View-Delegate
      • Concept
      • Basic Models
      • Dynamic Views
      • Delegate
      • Advanced Techniques
      • Summary
    • Canvas
      • Canvas Element
      • Convenience API
      • Gradients
      • Shadows
      • Images
      • Transformation
      • Composition Modes
      • Pixel Buffers
      • Canvas Paint
      • Porting from HTML5 Canvas
    • Shapes
      • Shapes
      • A Basic Shape
      • Building Paths
      • Filling Shapes
      • Animating Shapes
      • Summary
    • Effects
      • Effects in QML
      • Particle Concept
      • Simple Simulation
      • Particle Parameters
      • Directed Particles
      • Affecting Particles
      • Particle Groups
      • Particle Painters
      • Graphics Shaders
      • Shader Elements
      • Fragment Shaders
      • Wave Effect
      • Vertex Shader
      • Curtain Effect
      • Summary
    • Multimedia
      • Multimedia
      • Playing Media
      • Sound Effects
      • Video Streams
      • Capturing Images
      • Summary
    • Qt Quick 3D
      • Qt Quick 3D
      • The Basics
      • Working with Assets
      • Materials and Light
      • Animations
      • Mixing 2D and 3D Contents
      • Summary
    • Networking
      • Networking
      • Serving UI via HTTP
      • Templates
      • HTTP Requests
      • Local files
      • REST API
      • Authentication using OAuth
      • Web Sockets
      • Summary
    • Storage
      • Storage
      • Settings
      • Local Storage - SQL
    • Dynamic QML
      • Dynamic QML
      • Loading Components Dynamically
      • Creating and Destroying Objects
      • Tracking Dynamic Objects
      • Summary
    • Javascript
      • JavaScript
      • Browser/HTML vs Qt Quick/QML
      • JS Language
      • JS Objects
      • Creating a JS Console
    • Qt C++
      • Qt and C++
      • A Boilerplate Application
      • The QObject
      • Build Systems
      • Common Qt Classes
      • Models in C++
    • Extending QML
      • Extending QML with C++
      • Understanding the QML Run-time
      • Plugin Content
      • Creating the plugin
      • FileIO Implementation
      • Using FileIO
      • Summary
    • Qt for Python
      • Qt for Python
      • Introduction
      • Installing
      • Building an Application
      • Limitations
      • Summary
    • Qt for MCUs
      • Qt for MCUs
      • Setup
      • Hello World - for MCUs
      • Integrating with C++
      • Working with Models
      • Summary
    • About
      • Readme
      • License
Powered by GitBook
On this page
  • The Built-in Materials
  • Default Material Properties
  • Principled Material Properties
  • Image-based Lighting
  1. Qt6 QML Book
  2. Qt Quick 3D

Materials and Light

PreviousWorking with AssetsNextAnimations

Last updated 9 months ago

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.

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 roughnessproperties. 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.

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 roughnessproperties.

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.

To provide a skybox, assign a Textureto 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.

image
image
image
image