Qt 3D: 简单自定义材质 QML 示例

演示如何在 Qt 3D 中创建自定义材质。

此示例演示了创建一个简单的自定义材质。

运行示例

要从 Qt Creator 中运行此示例，打开欢迎模式并从示例中选择示例。有关更多信息，请参阅构建和运行示例。

指定场景

该示例使用 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