波浪效果（Wave Effect）

在这个更加复杂的例子中，我们使用片段着色器创建一个波浪效果。波浪的形成是基于sin曲线，并且它影响了使用的纹理坐标的颜色。

  1. import QtQuick 2.0
  3. Rectangle {
  4.     width: 480; height: 240
  5.     color: '#1e1e1e'
  7.     Row {
  8.         anchors.centerIn: parent
  9.         spacing: 20
  10.         Image {
  11.             id: sourceImage
  12.             width: 160; height: width
  13.             source: "assets/coastline.jpg"
  14.         }
  15.         ShaderEffect {
  16.             width: 160; height: width
  17.             property variant source: sourceImage
  18.             property real frequency: 8
  19.             property real amplitude: 0.1
  20.             property real time: 0.0
  21.             NumberAnimation on time {
  22.                 from: 0; to: Math.PI*2; duration: 1000; loops: Animation.Infinite
  23.             }
  25.             fragmentShader: "
  26.                 varying highp vec2 qt_TexCoord0;
  27.                 uniform sampler2D source;
  28.                 uniform lowp float qt_Opacity;
  29.                 uniform highp float frequency;
  30.                 uniform highp float amplitude;
  31.                 uniform highp float time;
  32.                 void main() {
  33.                     highp vec2 pulse = sin(time - frequency * qt_TexCoord0);
  34.                     highp vec2 coord = qt_TexCoord0 + amplitude * vec2(pulse.x, -pulse.x);
  35.                     gl_FragColor = texture2D(source, coord) * qt_Opacity;
  36.                 }"
  37.         }
  38.     }
  39. }

波浪的计算是基于一个脉冲与纹理坐标的操作。我们使用一个基于当前时间与使用的纹理坐标的sin波浪方程式来实现脉冲。

  1. highp vec2 pulse = sin(time - frequency * qt_TexCoord0);

离开了时间的因素，我们仅仅只有扭曲，而不是像波浪一样运动的扭曲。

我们使用不同的纹理坐标作为颜色。

  1. highp vec2 coord = qt_TexCoord0 + amplitude * vec2(pulse.x, -pulse.x);

纹理坐标受我们的x脉冲值影响，结果就像一个移动的波浪。

波浪效果（Wave Effect） - 图1

如果我们没有在片段着色器中使用像素的移动，这个效果可以首先考虑使用顶点着色器来完成。