11. ShaderEffect的简单使用

1. 说明：

shadereffect控件的使用需要结合glsl语言，对于glsl语言不太了解的可以先看看这篇文章：GLSL基本语法。

2. 基本使用：

这个控件一般是用来对图像进行操作的，其中有两个经常用到的属性 fragmentShader 和 vertexShader，前者的输出量一般是 gl_FragColor，控制着源文件的颜色值，后者的输出量一般为 gl_Position，控制着源文件的位置坐标。可以在这个控件当中使用 property 自定义属性，并在shader语法中使用 uniform 关键字定义变量，这样自定义属性就会自动传输到shader语法中进行使用。

2.1 举例一：

为图像添加一层阴影遮罩，代码如下：

Image {
    id: imageSource
    width: 80
    height: width
    source: "qrc:/images/xiaotu.jfif"
}
ShaderEffect{
    id:effect
    width: imageSource.width
    height: imageSource.height
    property variant source:imageSource	//自定义属性绑定到图像源
    //设置片段着色器
    //sampler2D 指定要访问的纹理（图片数据源相当于是纹理数据）
    //texture2D（sampler2D sampler,vec2 coord）使用纹理坐标coord在当前绑定到采样器sampler的2D纹理中进行纹理查找
    fragmentShader: "
        varying highp vec2 qt_TexCoord0;
        uniform sampler2D source;	//使用uniform修饰后，source变量会自动接受上面自定义属性中的source
        void main(){
            gl_FragColor = texture2D(source , qt_TexCoord0)* vec4(0.5, 0.5, 0.5, 1.0);//通过vec4(0.5, 0.5, 0.5, 1.0)增加阴影效果
        }"
}

效果如下：

2.2 举例二：

利用传参形式更改阴影效果

ShaderEffect{
    id:effect3
    width: imageSource.width
    height: imageSource.height
    property variant source:imageSource
    //指定绿色通道的值
    property real greenChannel: 1.0 //自己定义的参数
    //设置片段着色器
    //sampler2D 指定要访问的纹理（图片数据源相当于是纹理数据）
    //texture2D（sampler2D sampler,vec2 coord）使用纹理坐标coord在当前绑定到采样器sampler的2D纹理中进行纹理查找
    fragmentShader: "
        varying highp vec2 qt_TexCoord0;
        uniform sampler2D source;
        uniform lowp float greenChannel;    //用uniform关键字修饰，接收外界同名变量传参
        void main(){
            gl_FragColor = texture2D(source , qt_TexCoord0)* vec4(0.5, greenChannel, 0.5, 1.0);
        }"
}

效果如下：

2.3 举例三：

利用QML中的动画特性实时更改参数值，实现渲染变换

ShaderEffect{
    id:effect
    width: imageSource.width
    height: imageSource.height
    property variant source:imageSource
    //指定红色通道的值为0.3
    property real blueChannel: 0.3
    NumberAnimation on blueChannel {
        from: 0.0; to: 1.0; loops: Animation.Infinite; duration: 4000
    }
    //设置片段着色器
    //sampler2D 指定要访问的纹理（图片数据源相当于是纹理数据）
    //texture2D（sampler2D sampler,vec2 coord）使用纹理坐标coord在当前绑定到采样器sampler的2D纹理中进行纹理查找
    fragmentShader: "
        varying highp vec2 qt_TexCoord0;
        uniform sampler2D source;
        uniform lowp float blueChannel;
        void main(){
            gl_FragColor = texture2D(source , qt_TexCoord0)* vec4(0.5, 0.5, blueChannel, 1.0);
        }"
}

效果如下：

动画更改参数实现渲染

2.4 举例四：

利用顶点着色器实现动画效果

ShaderEffect{
   id:effect6
   width: imageSource.width
   height: imageSource.height
   property variant source:imageSource
   property bool minimized:false
   property real minimize:0.0

   MouseArea{
       anchors.fill: parent
       onClicked: {
           effect6.minimized = !effect6.minimized
       }
   }
   SequentialAnimation on minimize {
       id:startAnim
       running: effect6.minimized
       PauseAnimation{ duration: 300 }
       NumberAnimation{ to:1;duration: 700;easing.type: Easing.InOutSine }
       PauseAnimation{ duration: 1000 }
   }
   SequentialAnimation on minimize {
       id:endAnim
       running: !effect6.minimized
       NumberAnimation{ to:0;duration: 700;easing.type: Easing.InOutSine }
       PauseAnimation{ duration: 1300 }
   }
   vertexShader: "
		uniform highp mat4 qt_Matrix;
		attribute highp vec4 qt_Vertex;
		attribute highp vec2 qt_MultiTexCoord0;
		varying highp vec2 qt_TexCoord0;
		uniform highp float minimize;
		uniform highp float width;
		uniform highp float height;
		void main(){
    		qt_TexCoord0 = qt_MultiTexCoord0;
    		highp vec4 pos = qt_Vertex;
    		pos.y = mix(qt_Vertex.y,height,minimize);
    		pos.x = mix(qt_Vertex.x,width,minimize);
    		gl_Position = qt_Matrix * pos;
		}"
}

效果如下：

顶点着色器的动画

持续更新中，请大家多多关注…