Qt 3D:シンプルなカスタム素材 QML の例

Qt 3D でカスタムマテリアルを作成する例を示します。

この例では、簡単なカスタムマテリアルを作成します。

例の実行

から例を実行します。 Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

シーンの指定

サンプルは、カスタムマテリアルを使用するシーンをレンダリングするために Scene3D を使用します。シーンには、カスタムマテリアルを使用する平面モデルが含まれています。

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)
    }
}

マテリアルの指定

マテリアルはsimplecustommaterial/SimpleMaterial.qml でMaterial タイプを使って指定します。まず、マテリアルはパラメータを指定します。このパラメータは、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)
    }
]

次に、どのシェーダーを読み込むかを指定します。OpenGL ES 2と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"

頂点シェーダでは、変換行列によって位置を変換するだけです。

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);
}

フラグメントシェーダでは、フラグメントカラーをマテリアルで指定されたメインカラーに設定します。

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

次に、シェーダからShaderPrograms を作成します。

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)
}

最後に、特定のApiプロファイルに対応するTechniquesでシェーダープログラムを使用します。

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

プロジェクト例 @ code.qt.io

© 2025 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.