Qt 3D: Exemple QML de matériau personnalisé simple

Démonstration de la création d'un matériau personnalisé dans Qt 3D.

Illustration d'un carré rouge

Cet exemple illustre la création d'un matériau personnalisé simple.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Spécification de la scène

L'exemple utilise Scene3D pour rendre une scène qui utilisera le matériau personnalisé. La scène contient un modèle d'avion qui utilise le matériau personnalisé.

Entity {
    id: root

    components: [transform, mesh, material]

    SimpleMaterial {
        id: material
        maincolor: "red"
    }

    Transform {
        id: transform
        rotationX: 45
    }

    PlaneMesh {
        id: mesh
        width: 1.0
        height: 1.0
        meshResolution: Qt.size(2, 2)
    }
}

Spécification du matériau

Le matériau est spécifié dans simplecustommaterial/SimpleMaterial.qml à l'aide du type Material. Tout d'abord, le matériau spécifie des paramètres, qui sont mappés aux uniformes correspondants dans les shaders afin qu'ils puissent être modifiés à partir du qml.

property color maincolor: Qt.rgba(0.0, 0.0, 0.0, 1.0)

parameters: [
    Parameter {
        name: "maincolor"
        value: Qt.vector3d(root.maincolor.r, root.maincolor.g, root.maincolor.b)
    }
]

Ensuite, nous spécifions les shaders à charger. Des versions distinctes des shaders sont fournies pour les moteurs de rendu OpenGL ES 2 et OpenGL.

property string vertex: "qrc:/shaders/gl3/simpleColor.vert"
property string fragment: "qrc:/shaders/gl3/simpleColor.frag"
property string vertexRHI: "qrc:/shaders/gl45/simpleColor.vert"
property string fragmentRHI: "qrc:/shaders/gl45/simpleColor.frag"
property string vertexES: "qrc:/shaders/es2/simpleColor.vert"
property string fragmentES: "qrc:/shaders/es2/simpleColor.frag"

Dans le vertex shader, nous transformons simplement la position par les matrices de transformation.

void main()
{
    // Transform position, normal, and tangent to world coords
    worldPosition = vec3(modelMatrix * vec4(vertexPosition, 1.0));

    // Calculate vertex position in clip coordinates
    gl_Position = mvp * vec4(worldPosition, 1.0);
}

Dans le nuanceur de fragment, nous définissons simplement la couleur du fragment comme étant la couleur principale spécifiée dans le matériau.

uniform vec3 maincolor;
void main()
{
    //output color from material
    fragColor = vec4(maincolor,1.0);
}

Ensuite, nous créons ShaderPrograms à partir des shaders.

ShaderProgram {
    id: gl3Shader
    vertexShaderCode: loadSource(parent.vertex)
    fragmentShaderCode: loadSource(parent.fragment)
}
ShaderProgram {
    id: es2Shader
    vertexShaderCode: loadSource(parent.vertexES)
    fragmentShaderCode: loadSource(parent.fragmentES)
}
ShaderProgram {
    id: rhiShader
    vertexShaderCode: loadSource(parent.vertexRHI)
    fragmentShaderCode: loadSource(parent.fragmentRHI)
}

Enfin, les programmes de shaders sont utilisés dans les techniques correspondant à un profil Api spécifique.

// OpenGL 3.1
Technique {
    filterKeys: [forward]
    graphicsApiFilter {
        api: GraphicsApiFilter.OpenGL
        profile: GraphicsApiFilter.CoreProfile
        majorVersion: 3
        minorVersion: 1
    }
    renderPasses: RenderPass {
        shaderProgram: gl3Shader
    }
},

Exemple de projet @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.