本页内容

Qt Quick 3D - 自定义着色器示例

演示了自定义顶点着色器和片段着色器的用法。

本示例演示了如何使用完全由自定义顶点着色器和片段着色器代码构成的材质。

带有波浪变形和着色器设置的彩虹色球体

本示例与“custommaterials”示例相对应,后者演示了另一类自定义材质:shaded 材质,其中着色器代码片段是对PrincipledMaterial 的补充,而非对其进行替换。

实现自定义材质

在此示例中,顶点着色器根据正弦函数对网格进行变形。最终效果由两个滑块控制,它们分别对应正弦函数的时间和振幅值。

片段着色器用于根据顶点的位置值为网格着色。本示例包含两个片段着色器:一个带纹理,一个不带纹理。带纹理的版本会采样纹理,该纹理源自图像文件或Qt Quick 的实时图层。

该材质不参与默认的照明或阴影系统,因此其shadingMode 属性被设置为CustomMaterial.Unshaded 。

有关自定义材质功能的详细说明,请参阅CustomMaterial 。

CustomMaterial {
    id: root
    property real time: 0.0
    property real amplitude: 5.0
    property real alpha: 1.0

    property bool texturing: false
    property bool textureFromItem: false
    property Item texSrc
    Texture {
        id: texFromFile
        source: "qt_logo.png"
    }
    Texture {
        id: texFromItem
        sourceItem: root.texSrc
    }
    property TextureInput tex: TextureInput {
        enabled: root.texturing
        texture: root.textureFromItem ? texFromItem : texFromFile
    }

    shadingMode: CustomMaterial.Unshaded
    sourceBlend: root.alpha < 1.0 ? CustomMaterial.SrcAlpha : CustomMaterial.NoBlend
    destinationBlend: root.alpha < 1.0 ? CustomMaterial.OneMinusSrcAlpha : CustomMaterial.NoBlend
    cullMode: CustomMaterial.BackFaceCulling

    vertexShader: "example.vert"
    fragmentShader: root.texturing ? "example_tex.frag" : "example.frag"
}

使用自定义材质

使用自定义着色器的自定义材质,其使用方式与其他材质完全相同。可以通过 QML 属性绑定轻松更新着色器中的统一变量。

Model {
    position: Qt.vector3d(0, 0, 0)
    NumberAnimation on eulerRotation.y {
        from: 0
        to: 360
        duration: 3000
        loops: -1
        running: control.animateRotation
    }
    scale: Qt.vector3d(2, 2, 2)
    source: "#Sphere"
    materials: [
        ExampleMaterial {
            id: exampleMaterial
            time: control.time
            amplitude: control.amplitude
            alpha: control.alpha
            texturing: control.texturing
            textureFromItem: control.textureFromItem
            texSrc: Rectangle {
                layer.enabled: true
                layer.textureMirroring: ShaderEffectSource.NoMirroring
                visible: false
                SequentialAnimation on color {
                    ColorAnimation { from: "black"; to: "yellow"; duration: 2000 }
                    ColorAnimation { from: "yellow"; to: "cyan"; duration: 1000 }
                    ColorAnimation { from: "cyan"; to: "black"; duration: 500 }
                    loops: -1
                }
                width: 512
                height: 512
                Image {
                    source: "qt_logo.png"
                    anchors.centerIn: parent
                }
            }
        }
    ]
}

示例项目 @ 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.