码迷,mamicode.com
首页 > 其他好文 > 详细

Qt5官方demo解析集12——Qt Quick Particles Examples - CustomParticles

时间:2014-06-30 06:19:15      阅读:437      评论:0      收藏:0      [点我收藏+]

标签:qt5官方demo解析集   qml   qml粒子   qtquick   customparticle   

本系列所有文章可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873

接上文Qt5官方demo解析集11——Qt Quick Particles Examples - Affectors

使用Emitter和Affectors强大的功能,我们已经可以构造出丰富多彩的粒子特效,但当这些功能还不能满足我们的需要时,我们可以转而采用CustomParticle取代ImageParticle,在CustomParticle中我们可以使用基于GLSL的渲染技术来创建自定义的粒子。

这个demo依然由一些小例子组成,不过比前两个demo中的都要少,只有三个:

bubuko.com,布布扣


(1)Blur Particles

在这个例子中我们可以看到使用CustomParticle创建模糊化粒子的方法。运行效果如下:

bubuko.com,布布扣


个人感觉在这个演示中模糊效果并不是很清楚,于是换了一张图片,并类似地使用不带模糊化的ImageParticle来展示它们的不同:

bubuko.com,布布扣

可以看到,左边图为模糊化的CustomParticle,右边为没有模糊效果的ImageParticle,区别还是很明显的。

由于笔者对OpenGL并不是很熟悉,如果有错误的地方,还请各位指正。

需要指明的是,对于这种内嵌的GLSL代码,Qt为我们提供了一些提前定义好的变量。用uniform和attribute类型定义,作为vertexShader的输入。比如uniform mat4 qt_Matrix —— 提供了一个从根项目到ShaderEffect的变换矩阵;uniform float qt_Opacity —— 提供项目的透明度;attribute vec4 qt_Vertex ——提供顶点坐标,左上角为(0,0),后下角为(width,height);attribute vec2 qt_MultiTexCoord0 —— 纹理坐标,左上角是(0,0),右下角为(1,1)。


另外,QML中任何类型的属性都可以映射到GLSL的uniform类型中去。也就是说,当我们在QML中定义了一个4维RGBA的QColor color,然后再GLSL中声明一个uniform vec4 color,就可以直接使用它了。我们也可以将类型声明为var,Qt会自动帮我们完成转换。下面的例子中大量使用了这种方法。详细的类型映射可以参考Manual中的ShaderEffect

看源码时,我们先看一段额外的代码,我们将其命名为vertexShader_addin:

attribute highp vec2 qt_ParticlePos;   // 这些是预定义好的属性
attribute highp vec2 qt_ParticleTex;
attribute highp vec4 qt_ParticleData; //  x = time,  y = lifeSpan, z = size,  w = endSize
attribute highp vec4 qt_ParticleVec; // x,y = constant velocity,  z,w = acceleration
attribute highp float qt_ParticleR;
uniform highp mat4 qt_Matrix;
uniform highp float qt_Timestamp;
varying highp vec2 qt_TexCoord0;       // 默认的纹理坐标
void defaultMain() {
    qt_TexCoord0 = qt_ParticleTex;
    highp float size = qt_ParticleData.z;
    highp float endSize = qt_ParticleData.w;
    highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y;
    highp float currentSize = mix(size, endSize, t * t);
    if (t < 0. || t > 1.)
        currentSize = 0.;
    highp vec2 pos = qt_ParticlePos
                   - currentSize / 2. + currentSize * qt_ParticleTex   // adjust size
                   + qt_ParticleVec.xy * t * qt_ParticleData.y         // apply velocity vector..
                   + 0.5 * qt_ParticleVec.zw * pow(t * qt_ParticleData.y, 2.);
    gl_Position = qt_Matrix * vec4(pos.x, pos.y, 0, 1);
}
至于它是什么,我们后面再说。

整个例子的源码如下,blurparticle.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "white"
    width: 240
    height: 360
    ParticleSystem {
        id: sys
    }
    Emitter {                     // Emitter就不再多做介绍了,不熟悉的朋友可以查看前两篇博文
        system:sys
        height: parent.height
        emitRate: 1
        lifeSpan: 12000
        velocity: PointDirection {x:20;}
        size: 128
    }
    ShaderEffectSource {                     // 着色效果源,用来指明需要着色的对象
        id: theSource
        sourceItem: theItem                  // 指明源对象
        hideSource: true                     // 隐藏原图
    }
    Image {
        id: theItem
        source: "../../images/starfish_1.png"
    }

    CustomParticle {                        // CustomParticle内部仅有两个属性,分别是vertexShader和fragmentShader(顶点着色器与片元着色器),如果你熟悉OpenGL以及GLSL应该对这两个东西不陌生。这两个属性参数为"string",实际也就是GLSL的代码。我们可以使用这两个属性来将CustomParticle渲染成各种自定义的效果
        system: sys 
        //! [vertex]
        vertexShader:"                       // 这里是我们的第一个顶点着色器,当我们编写完vertexShader代码后,Qt会为我们将vertexShader_addin中的代码添加到这一行之后。这些代码定义了一些基本的变量,以及一个defaultMain()函数,vertexShader中最基本的gl_Position的输出也由该函数段完成,它为我们实现了基本的粒子功能。
            uniform lowp float qt_Opacity;   // 定义一个只读的低精度浮点型变量qt_Opacity
            varying lowp float fFade;        // 定义一个由vertex写入,fragment读出的低精度浮点型变量fFade
            varying lowp float fBlur;

            void main() {                   // GLSL中规定的程序入口                                         
                defaultMain();              // 该函数在vertexShader_addin中定义,我们需要先调用它
                highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y;  // 可以看到qt_XX也是在vertexShader_addin中定义的,这里计算了粒子存在时间占生命周期的比例
                highp float fadeIn = min(t * 10., 1.);                       // 比例t 从0变化到1时,fadeIn也从0变化到1
                highp float fadeOut = 1. - max(0., min((t - 0.75) * 4., 1.));  // t 从0.75变化到1时,fadOut从1变化到0

                fFade = fadeIn * fadeOut * qt_Opacity;           // 该值越小,图像透明度越高
                fBlur = max(0.2 * t, t * qt_ParticleR);          // 模糊系数
            }
        "
        //! [vertex]
        property variant source: theSource                       // 这里回到QML代码,定义了类型为variant的属性source以及blurred,为了下面的映射
        property variant blurred: ShaderEffectSource {           // 这里再次使用了ShaderEffectSource,并将返回值赋给我们的自定义属性blurred
        sourceItem: ShaderEffect {                               // sourceItem是其属性成员之一,参数类型为Item,而ShaderEffect继承于Item
            width: theItem.width                                 // 定义为图像的高宽
            height: theItem.height 
            property variant delta: Qt.size(0.0, 1.0 / height)   // 定义变量增量,与高度负相关
            property variant source: ShaderEffectSource {        // 定义属性source指向另一个ShaderEffectSource
                sourceItem: ShaderEffect {
                    width: theItem.width
                    height: theItem.height
                    property variant delta: Qt.size(1.0 / width, 0.0)  // 该增量与宽度相关
                    property variant source: theSource                 
                    fragmentShader: "                                  // 片元着色器
                        uniform sampler2D source;                      // 从图片源采集纹理数据,这里的source在QML代码中定义
                        uniform lowp float qt_Opacity;           // qt_Opacity由Qt预定义,从vertexShader传入
                        uniform highp vec2 delta;
                        varying highp vec2 qt_TexCoord0;
                        void main() {                     // 然后我们在main()函数中定义每个像素点的像素值,下面的算式将每个像素点周围的的值进行叠加来得到新的像素值,从而形成模糊的效果
                            gl_FragColor =(0.0538 * texture2D(source, qt_TexCoord0 - 3.182 * delta)  // 使用第二个参数中的左边对source中的纹理进行采样
                                         + 0.3229 * texture2D(source, qt_TexCoord0 - 1.364 * delta)
                                         + 0.2466 * texture2D(source, qt_TexCoord0)
                                         + 0.3229 * texture2D(source, qt_TexCoord0 + 1.364 * delta)
                                         + 0.0538 * texture2D(source, qt_TexCoord0 + 3.182 * delta)) * qt_Opacity;
                        }"
                }
            }
            fragmentShader: "
                uniform sampler2D source;
                uniform lowp float qt_Opacity;
                uniform highp vec2 delta;
                varying highp vec2 qt_TexCoord0;
                void main() {                   // 第一次混合以宽度作为增量,第二次以高度作为增量。这里的source是已经被处理过一次的纹理源
                    gl_FragColor =(0.0538 * texture2D(source, qt_TexCoord0 - 3.182 * delta)
                                 + 0.3229 * texture2D(source, qt_TexCoord0 - 1.364 * delta)
                                 + 0.2466 * texture2D(source, qt_TexCoord0)
                                 + 0.3229 * texture2D(source, qt_TexCoord0 + 1.364 * delta)
                                 + 0.0538 * texture2D(source, qt_TexCoord0 + 3.182 * delta)) * qt_Opacity;
                }"
            }
        }
        //! [fragment]
        fragmentShader: "                   // 最后将vertexShader中定义的数据送入fragmentShader中进行处理
            uniform sampler2D source;         
            uniform sampler2D blurred;          
            varying highp vec2 qt_TexCoord0;
            varying highp float fBlur;
            varying highp float fFade;
            void main() {
                gl_FragColor = mix(texture2D(source, qt_TexCoord0), texture2D(blurred, qt_TexCoord0), min(1.0,fBlur*3.0)) * fFade;  // 在每个像素点对源纹理纹理与模糊化纹理之间进行插值,并乘以透明度。
            }"
        //! [fragment]

    }
}


(2)Fragment Shader

在上个例子我们对使用CustomParticle渲染一个外部png图像有了一个大致印象,在这个例子中,Qt 向我们介绍了如何直接使用片元着色器来绘制粒子。

bubuko.com,布布扣

屏幕下方的话也揭示了这个例子的主题。


这个例子的层次的结构没有上一个例子那么复杂,来看看吧,fragmentshader.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

ParticleSystem {                             // ParticleSystem作为根目录
    id: root
    width: 320
    height: 480
    Rectangle {                                   // 矩形背景
        z: -1
        anchors.fill: parent
        color: "black"
        Text {                                      // 文字
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 14
            color: "white"
            text: "It's all in the fragment shader."
        }
    }

    Emitter {
        emitRate: 400
        lifeSpan: 8000
        size: 24
        sizeVariation: 16
        velocity: PointDirection {x: root.width/10; y: root.height/10;}
        acceleration: PointDirection {x: -root.width/40; y: -root.height/40; xVariation: -root.width/20; yVariation: -root.width/20}
    }

    CustomParticle {                        
        vertexShader:"                              // 顶点着色器
            uniform lowp float qt_Opacity;          // 变量定义
            varying lowp float fFade;
            varying highp vec2 fPos;

            void main() {                        // 还记得上面的vertexShader_addin吗,下面的只是将defaltMain()中的代码提出来了
                qt_TexCoord0 = qt_ParticleTex;
                highp float size = qt_ParticleData.z;
                highp float endSize = qt_ParticleData.w;

                highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y;

                highp float currentSize = mix(size, endSize, t * t);

                if (t < 0. || t > 1.)
                currentSize = 0.;

                highp vec2 pos = qt_ParticlePos
                - currentSize / 2. + currentSize * qt_ParticleTex          // adjust size
                + qt_ParticleVec.xy * t * qt_ParticleData.y         // apply velocity vector..
                + 0.5 * qt_ParticleVec.zw * pow(t * qt_ParticleData.y, 2.);

                gl_Position = qt_Matrix * vec4(pos.x, pos.y, 0, 1);     // 以上都是defaultMain()的代码,之所以不用defaultMain(),是因为该函数中定义的一些变量在下面还要被继续使用

                highp float fadeIn = min(t * 20., 1.);                  // 与上一个例子类似的定义了与t相关的fadeIn与fadeOut
                highp float fadeOut = 1. - max(0., min((t - 0.75) * 4., 1.));

                fFade = fadeIn * fadeOut * qt_Opacity;               // 得到粒子透明度的动态变化数值
                fPos = vec2(pos.x/320., pos.y/480.);                 // 这里得到位置的二维矢量
            }
        "
        //! [0]
        fragmentShader: "                                     // 片元着色器
            varying highp vec2 fPos;                          // 传参
            varying lowp float fFade;
            varying highp vec2 qt_TexCoord0;
            void main() {//*2 because this generates dark colors mostly  // 官方注释
                highp vec2 circlePos = qt_TexCoord0*2.0 - vec2(1.0,1.0);  // qt_TexCoord0是一个内置的渲染坐标,这个算式将坐标原点转移到了矩形中心,并放大了一倍
                highp float dist = length(circlePos);                    // GLSL内置函数,用来求矢量长度
                highp float circleFactor = max(min(1.0 - dist, 1.0), 0.0); // 在一个长度为2矩形框内,以长度为1在中心划一个区域,那就是一个内切圈
                gl_FragColor = vec4(fPos.x*2.0 - fPos.y, fPos.y*2.0 - fPos.x, fPos.x*fPos.y*2.0, 0.0) * circleFactor * fFade; // 最后将每个像素点的像素值乘上这个圆因子,使绘制出来的圆形越靠近中心RGB值越大,远端小的RGB值被绘制为黑色,从而得到了颜色越来越淡的"圆形粒子"。由四维矢量vec4()的4个参数可以知道,x值越大R值越大,y值越大G值越大,x,y同时影响B的值。那么上方的粒子应该偏红色,下方的粒子偏绿色,右下角的粒子为RGB值都大的紫色,湛蓝色,深灰色等。运行的实际效果也如我们猜想的一样。
            }"
        //! [0]

    }
}


(3)Image Color

在这个例子中,Qt向我们展示了一副图像被“粒子化”的过程,与我们之前用shape覆盖图像不同,这里的粒子颜色会随着图片中当前像素的变化而变化。

bubuko.com,布布扣


在屏幕上点击过后,图像会以粒子的形态展现出来,然后向四周发散。imagecolor.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {                                          // 一个矩形用来作为窗口边界
    width: 400
    height: 400
    Rectangle {                                        // 一个矩形又来限制图像尺寸
        id: root
        color: "white"
        width: 310
        height: 300
        anchors.centerIn: parent
        ParticleSystem { id: sys }
        CustomParticle {
            system: sys
            property real maxWidth: root.width              // 定义了最大宽高
            property real maxHeight: root.height
            ShaderEffectSource {                          // 使用这个类型提供图像的纹理数据
                id: pictureSource
                sourceItem: picture
                hideSource: true
            }
            Image {                                        // 海星星,我们也可以换成其他的图片
                id: picture
                source: "qrc:/images/starfish_3.png"
            }
            ShaderEffectSource {                           // 第二个ShaderEffectSource用来支持粒子
                id: particleSource
                sourceItem: particle
                hideSource: true
            }
            Image {                                        // ImageParticle中常用的fuzzydot,光点
                id: particle
                source: "qrc:///particleresources/fuzzydot.png"
            }
            //! [vertex]
            vertexShader:"
                uniform highp float maxWidth;              // 向GLSL传参
                uniform highp float maxHeight;
                varying highp vec2 fTex2;                  // 该参数用来计算点在当前图像上的位置
                varying lowp float fFade;                  // 这个参数应该不陌生了,提供渐隐效果
                uniform lowp float qt_Opacity;             

                void main() {

                    fTex2 = vec2(qt_ParticlePos.x, qt_ParticlePos.y);
                    //Uncomment this next line for each particle to use full texture, instead of the solid color at the center of the particle.
                    //fTex2 = fTex2 + ((- qt_ParticleData.z / 2. + qt_ParticleData.z) * qt_ParticleTex); //Adjusts size so it's like a chunk of image.
                    fTex2 = fTex2 / vec2(maxWidth, maxHeight);
                    highp float t = (qt_Timestamp - qt_ParticleData.x) / qt_ParticleData.y;
                    fFade = min(t*4., (1.-t*t)*.75) * qt_Opacity;
                    defaultMain();
                }
            "
            //! [vertex]
            property variant particleTexture: particleSource
            property variant pictureTexture: pictureSource
            //! [fragment]
            fragmentShader: "
                uniform sampler2D particleTexture;             // 然后对粒子纹理采样
                uniform sampler2D pictureTexture;              // 对图像纹理采样
                varying highp vec2 qt_TexCoord0;  // 该矢量相当于包含了(0,0)到(1,1)的所有像素点,如果基于它采样,每个粒子都被渲染成这个图像的样子
                varying highp vec2 fTex2;        // 因此引入这个比例矢量,用来仅仅提供一个像素点的坐标
                varying lowp float fFade;
                void main() {
                    gl_FragColor = texture2D(pictureTexture, fTex2) * texture2D(particleTexture, qt_TexCoord0).w * fFade; // 因此第一个因子用来提供颜色,第二个因子用来提供形状,最后一个因子提供渐隐的效果
            }"
            //! [fragment]
        }

        Emitter {
            id: emitter
            system: sys
            enabled: false              // 先关闭
            lifeSpan: 8000
            maximumEmitted: 4000
            anchors.fill: parent
            size: 16
            acceleration: PointDirection { xVariation: 12; yVariation: 12 }  // 向四周发散
        }
        MouseArea {
            anchors.fill: parent           // 点击使能
            onClicked: emitter.burst(4000);
        }
    }
}


Qt5官方demo解析集12——Qt Quick Particles Examples - CustomParticles,布布扣,bubuko.com

Qt5官方demo解析集12——Qt Quick Particles Examples - CustomParticles

标签:qt5官方demo解析集   qml   qml粒子   qtquick   customparticle   

原文地址:http://blog.csdn.net/cloud_castle/article/details/34950673

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!