Back to Qt.io
Contact Us Blog Download Qt
このページでは

Qt 3D：シンプルなカスタムマテリアル QML の例

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

赤い四角のイラスト

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

例の動作確認

以下の手順で例を実行できます：

シーンの指定

この例では、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 プロファイルに対応するテクニックで、これらのシェーダープログラムが使用されます。

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

サンプルプロジェクト @ 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.