Qt官方示例-QML创建简单的自定义材质

❝此示例演示如何创建简单的自定义材质。 ❞

指定场景

该示例使用Scene3D渲染将使用自定义材质的场景。场景包含一个使用自定义材质的平面模型。

代码语言：javascript复制

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中指定材料。

首先，指定材质参数，这些参数被逐一映射到相应的着色器中，以便可以从qml进行更改。

代码语言：javascript复制

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渲染器提供了单独的着色器版本。

代码语言：javascript复制

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

在顶点着色器中，我们仅通过变换矩阵对位置进行变换。

代码语言：javascript复制

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

在片段着色器中，我们只需将片段颜色设置为材质中指定的主色即可。

代码语言：javascript复制

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

接下来，我们从着色器创建ShaderPrograms。

代码语言：javascript复制

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

最后，在与特定Api配置文件相对应的技术中使用了着色器程序。

代码语言：javascript复制

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

关于更多

在「QtCreator软件」可以找到：

代码语言：javascript复制

C:Qt{你的Qt版本}Examples{你的Qt版本}qt3dsimplecustommaterial

opengl qt api 渲染

0 人点赞