ゆらゆらテクスチャをやってみたいと思います。

最終目標はこちらですが、まずは簡単なのからやっていきたいと思います。

横にゆらゆら

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;
uniform float time;
uniform sampler2D tDiffuse;

void main( void )
{
    //揺れの波の数
    const float shakeLength = 0.1;
    //揺れの幅
    const float shakeWidth = 0.01;
    //揺れのスピード
    const float speed = 1.0;

    float offsetX = sin(gl_FragCoord.x * shakeLength + time * speed) * shakeWidth;

    vec4 color = texture2D(tDiffuse, vec2(vUv.x+ offsetX , vUv.y));
    gl_FragColor = color;
}

縦、横にゆらゆら

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;
uniform float time;
uniform sampler2D tDiffuse;


void main( void )
{

    //揺れの波の数
    const float shakeLength = 0.1;
    //揺れの幅
    const float shakeWidth = 0.01;
    //揺れのスピード
    const float speed = 1.0;

    float offsetX = sin(gl_FragCoord.x * shakeLength + time * speed) * shakeWidth;
    float offsetY = cos(gl_FragCoord.y * shakeLength + time * speed) * shakeWidth;

    vec4 color = texture2D(tDiffuse, vec2(vUv.x + offsetX , vUv.y + offsetY));
    gl_FragColor = color;
}

まとめ

uv座標をゆがめるだけで面白い表現ができました。 実際の動きはこちらを見てください。