Shader编程初识,基础关键

Rectangle {
    id:root
    width: 1024
    height: 640
    color: "blue"
    Image	{
        id:	sourceImage
        width:	1024;	height:	640
        source:	"qrc:/3.jpg"
        visible: false
    }

    ShaderEffect {
                width: 1024; height: 640
                property variant source: sourceImage
                property real frequency: 8
                property real amplitude: 0.5  //振幅
                property real time: 0.0
                NumberAnimation on time {
                    from: 0; to: Math.PI*2; duration: 1000; loops: Animation.Infinite
                }

                fragmentShader: "
                    varying highp vec2 qt_TexCoord0;
                    uniform sampler2D source;
                    uniform lowp float qt_Opacity;
                    uniform highp float frequency;
                    uniform highp float amplitude;
                    uniform highp float time;
                    void main() {
                        highp vec2 pulse = sin(2.0*3.141592654* qt_TexCoord0);//纹理坐标0-1之间有很多像素,
                        highp vec2 coord = qt_TexCoord0 +  vec2(0, amplitude*pulse.x);//0-1之间有很多像素,
//                        highp vec2 coord = qt_TexCoord0 +  vec2(amplitude*pulse.y, 0);//0-1之间有很多像素,
                        gl_FragColor = texture2D(source, coord) * qt_Opacity;
                    }"
            }// amplitude * vec2(pulse.x, pulse.x)   highp vec2 pulse = sin(time - frequency * qt_TexCoord0); amplitude*pulse.x
//    highp vec2 pulse = sin(time- 2.0*3.141592654* qt_TexCoord0);
//    highp vec2 coord = qt_TexCoord0 +  vec2(0, amplitude*pulse.x);
}

highp vec2 coord = qt_TexCoord0 +  vec2(0, amplitude*pulse.x) 能显示波浪效果

因为x方向上的纹理坐标不变的,当在x方向的不同 坐标下,y的坐标有sin形状波浪效果.

如果改成

highp vec2 coord = qt_TexCoord0 +  vec2(0, amplitude*pulse.y) 没有波浪效果

因为纹理坐标y变化的时候,pulse.y也是变化的在sin()图像上会出现两段不在[0-1]范围内的,显示边界像素了,

这样在sin[0.2Pi]就出现了三段在[0,1]范围之内的,所以出现了三个同样的图像