このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

GLSLでゆらゆらテクスチャ

2018/01/19

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

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

横にゆらゆら

#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座標をゆがめるだけで面白い表現ができました。 実際の動きはこちらを見てください。

カテゴリ

新規記事