QtQuick3D-例子-shaders-爆炸效果

 

代码片段:

shaders.qml

mport QtQuick 1.0

Rectangle {
    property int current : 0 //当前tab页

    width: 640
    height: 480

    //主页面
    Rectangle {
        id: tabContentArea
        width: parent.width

        anchors.top: parent.top
        anchors.bottom: tabButtonArea.top
        Repeater {
            model: tabsModel
        }
    }

    //包含可视化的元素，不需要delegate
    VisualItemModel {
        id: tabsModel
        Collapsing { }
        Images { }
        Interpolate { }
        Bouncing { }
    }

    //tab区域
    Rectangle {
        id: tabButtonArea
        height: 64
        width: parent.width

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        //定义一个颜色渐变
        gradient: Gradient {
            GradientStop {position: 0.0; color: "#CCCCCC"}
            GradientStop {position: 1.0; color: "#000000"}
        }

        //定义一个tab组件
        Component {
            id: tabButton

            Rectangle {
                height: tabButtonArea.height
                width: tabs.width / tabsModel.count

                color: "transparent"

                Image {
                    source: tabsModel.children[index].icon
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top
                    anchors.topMargin: 4
                }

                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 4
                    color: "white"
                    text: tabsModel.children[index].name
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {  tabClicked(index);  }
                }
            }
        }

        Row {
            id: tabs
            anchors.fill: parent
            Repeater {
                model: tabsModel.count
                delegate: tabButton
            }
        }
    }

    //tab点击事件
    function tabClicked(index)
    {
        tabs.children[current].color = "transparent";
        tabsModel.children[current].visible = false;
        current = index;
        tabs.children[current].color = "#30ffffff";
        tabsModel.children[current].visible = true;
    }

    //当组件加载完成后调用
    //设置第一个为默认当前
    Component.onCompleted:
    {
        for(var i = 0; i < tabsModel.children.length; i++)
            tabsModel.children[i].visible = false;

        tabClicked(current);
    }
}

Collapsing.qml

import QtQuick 1.0
import Qt3D 1.0

Viewport {
    property string name: "Collapsing Shader"
    property string icon: "images/teapot-logo.png"

    width: 640; height: 480

    Item3D {
        mesh: Mesh { source: "meshes/teapot.bez" }
        effect: program

        //旋转
        transform: Rotation3D {
            angle:45
            NumberAnimation on angle{
                running: true
                loops: Animation.Infinite
                from: 0;   to: 360; duration: 8000
            }
            axis: Qt.vector3d(1, -0.3, 0)
        }

        //Qt3D中使用ShaderProgram元素来着色
        ShaderProgram {
            id: program
            property real collapseFactor : 0.0

            //纹理
             texture: "images/qtlogo.png"

            //爆炸效果
            SequentialAnimation on collapseFactor {
                running: true
                loops: Animation.Infinite
                PauseAnimation { duration: 700 }
                NumberAnimation { from: 0.0; to: 1.0; duration: 1500; easing.type:"OutBounce" }
                PauseAnimation { duration: 700 }
                NumberAnimation { from: 1.0; to: 0.0; duration: 1500; easing.type:"OutBounce" }
            }

            //颜色变化
            SequentialAnimation on color{
                running: true
                loops: Animation.Infinite
                ColorAnimation {  from: "red"; to: "green"; duration: 500  }
                ColorAnimation {  from: "green";  to: "red";  duration: 500 }
            }

	    //顶点着色器运行在在一个模型中的每个顶点（例如，一个立方体的8个角）来计算各点的最终位置

            vertexShader: "
                attribute highp vec4 qt_Vertex;
                attribute highp vec4 qt_MultiTexCoord0;
                uniform mediump mat4 qt_ModelViewProjectionMatrix;
                varying highp vec4 texCoord;
                uniform highp float collapseFactor;

                void main(void)
                {
                    // Interpolate between the actual position of the input vertex
                    // and treating the tex-coordinates as vertex positions to
                    // create a neat collapsing effect.
                    vec4 workingPosition = mix( qt_Vertex, vec4(-qt_MultiTexCoord0.xyz, 1.0) , collapseFactor);
                    gl_Position = qt_ModelViewProjectionMatrix * workingPosition;
                    texCoord =  -qt_MultiTexCoord0;
                }
                "

            //片段着色器运行在屏幕每个可见像素上，来计算它的颜色

            fragmentShader: "
                varying highp vec4 texCoord;
                uniform sampler2D qt_Texture0;
                uniform mediump vec4 qt_Color;

                void main(void)
                {
                    mediump vec4 col = texture2D(qt_Texture0, texCoord.st);
                    gl_FragColor = vec4(clamp(qt_Color.rgb * (1.0 - col.a) +
                    col.rgb, 0.0, 1.0), 1.0);
                }
                "
        }
    }
}

 

1. 动画效果

SequentialAnimationon collapseFactor ？？

问题：

1. vertexShader,fragmentShader  具体细节可以看OpenGL着色语言