GLSLでゆらゆらテクスチャ
ゆらゆらテクスチャをやってみたいと思います。
最終目標はこちらですが、まずは簡単なのからやっていきたいと思います。
横にゆらゆら
#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座標をゆがめるだけで面白い表現ができました。 実際の動きはこちらを見てください。