Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

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

Illustre la création d’un matériau personnalisé dans Qt 3D.

Illustration d'un carré rouge

Cet exemple montre comment créer un matériau personnalisé simple.

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

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 de plan 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 défini dans simplecustommaterial/SimpleMaterial.qml à l’aide du type « Material ». Le matériau spécifie d’abord des paramètres, qui sont mappés aux uniformes correspondants dans les shaders afin de pouvoir être modifiés depuis le fichier 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 quels shaders sont chargés. 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 shader de sommets, nous nous contentons de transformer la position à l’aide des 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 shader 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 des « 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 sur 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.