メタボールっぽい演出

メタボールっぽい演出。

【サンプル】 こんな感じになります。

頂点シェーダ

varying vec3 vNormal;
varying vec2 vUv;

void main() {
  vUv = uv; 
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

フラグメントシェーダー

#ifdef GL_ES
precision mediump float;
#endif
 
uniform float time;
uniform vec2 resolution;
 
#define XAmplitude 0.40
#define YAmplitude 0.30
#define XSpeed 1.50
#define YSpeed 1.45
#define MinSize 1.7
#define MaxSize 1.75
#define speed 0.01
#define changeSpeed 0.70
#define Count 10.0
#define color1 vec3(10.0, 0.0, 0.0)
#define color2 vec3(0.0, 10.0, 0.0)
#define color3 vec3(0.0, 0.0, 10.0)

void main( void ) 
{
    //座標を正規化
    vec2 pos = ( gl_FragCoord.xy / resolution.xy ) * 2.0 - 1.0;
    //横長にならないように縦横比を調整
    pos.x *= (resolution.x / resolution.y);
    
    vec3 c = vec3( 0, 0, 0 );

    for( float i = 1.0; i < Count+1.0; ++i )
    {   
        //X軸の移動　XAmplitudeは振り幅の範囲(-XAmplitude ~ XAmplitudeの間になる)
        float px = cos( time * XSpeed * (i/Count) ) * sin(time * XAmplitude);
        //px = px * rand(vec2(px,0)) * 0.01;
        //Y軸の移動　YAmplitudeは振り幅の範囲(-YAmplitude ~ YAmplitudeの間になる)
        float py = sin( time * YSpeed   * (i/Count) ) * sin(time * YAmplitude);
        //py = py * rand(vec2(0,py)) * 0.01;
        //circleの座標
        vec2 circlePos = vec2( px , py );
        //sin(time * 0.30 * 1) * 0.5 +0.5
        //サイズ変更用の値　0.5 ~ 1.0の間の範囲をとる
        float t = sin( time * speed * i ) * 0.5 + 0.5;
        //MinSizeとMaxSizeをtの値で線形補間　なので比較的MaxSizeに近い値になる
        float circleSize = mix( MinSize, MaxSize, t );
        //clamp = min(max(x, a), b)  ・・・　引数として与えられた数値を一定の範囲に収めてくれる
        //0.0 ~ circleSizeの範囲になる
        float d = clamp( sin( length( pos - circlePos )  + circleSize ), 0.0, circleSize);
        //色を変更
        float s = sin( time * changeSpeed * i ) * 0.5 + 0.5;
        //色をミックス
        vec3 color = mix( color1, color2, s );

        c += color * pow( d, 70.0 );
    }
 
    gl_FragColor = vec4(vec3(c), 1.0 );
 
}

参考

こちらのソースをそのまま参考にさせてもらいました。