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]范围之内的,所以出现了三个同样的图像
