Soap bubble shader from http://otosatram.com/bubble.html (Bubbles on still soap (Blu blu))

soap-bubble-frag.glsl

precision highp float;
precision highp int;
#define SHADER_NAME ShaderMaterial
#define GAMMA_FACTOR 2
#define DOUBLE_SIDED
#define NUM_CLIPPING_PLANES 0
uniform mat4 viewMatrix;
uniform vec3 cameraPosition;
#define TONE_MAPPING
#define saturate(a) clamp( a, 0.0, 1.0 )
uniform float toneMappingExposure;
uniform float toneMappingWhitePoint;
vec3 LinearToneMapping( vec3 color ) {
    return toneMappingExposure * color;
}
vec3 ReinhardToneMapping( vec3 color ) {
    color *= toneMappingExposure;
    return saturate( color / ( vec3( 1.0 ) + color ) );
}
#define Uncharted2Helper( x ) max( ( ( x * ( 0.15 * x + 0.10 * 0.50 ) + 0.20 * 0.02 ) / ( x * ( 0.15 * x + 0.50 ) + 0.20 * 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) )
vec3 Uncharted2ToneMapping( vec3 color ) {
    color *= toneMappingExposure;
    return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
}
vec3 OptimizedCineonToneMapping( vec3 color ) {
    color *= toneMappingExposure;
    color = max( vec3( 0.0 ), color - 0.004 );
    return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );
}
vec3 toneMapping( vec3 color ) {
    return LinearToneMapping( color );
}
vec4 LinearToLinear( in vec4 value ) {
    return value;
}
vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
    return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );
}
vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
    return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );
}
vec4 sRGBToLinear( in vec4 value ) {
    return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.w );
}
vec4 LinearTosRGB( in vec4 value ) {
    return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.w );
}
vec4 RGBEToLinear( in vec4 value ) {
    return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
}
vec4 LinearToRGBE( in vec4 value ) {
    float maxComponent = max( max( value.r, value.g ), value.b );
    float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
    return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
}
vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
    return vec4( value.xyz * value.w * maxRange, 1.0 );
}
vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
    float maxRGB = max( value.x, max( value.g, value.b ) );
    float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
    M = ceil( M * 255.0 ) / 255.0;
    return vec4( value.rgb / ( M * maxRange ), M );
}
vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
    return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
}
vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
    float maxRGB = max( value.x, max( value.g, value.b ) );
    float D = max( maxRange / maxRGB, 1.0 );
    D = min( floor( D ) / 255.0, 1.0 );
    return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
}
const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
vec4 LinearToLogLuv( in vec4 value ) {
    vec3 Xp_Y_XYZp = value.rgb * cLogLuvM;
    Xp_Y_XYZp = max(Xp_Y_XYZp, vec3(1e-6, 1e-6, 1e-6));
    vec4 vResult;
    vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
    float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
    vResult.w = fract(Le);
    vResult.z = (Le - (floor(vResult.w*255.0))/255.0)/255.0;
    return vResult;
}
const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
vec4 LogLuvToLinear( in vec4 value ) {
    float Le = value.z * 255.0 + value.w;
    vec3 Xp_Y_XYZp;
    Xp_Y_XYZp.y = exp2((Le - 127.0) / 2.0);
    Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
    Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
    vec3 vRGB = Xp_Y_XYZp.rgb * cLogLuvInverseM;
    return vec4( max(vRGB, 0.0), 1.0 );
}
vec4 mapTexelToLinear( vec4 value ) {
    return LinearToLinear( value );
}
vec4 envMapTexelToLinear( vec4 value ) {
    return LinearToLinear( value );
}
vec4 emissiveMapTexelToLinear( vec4 value ) {
    return LinearToLinear( value );
}
vec4 linearToOutputTexel( vec4 value ) {
    return LinearToLinear( value );
}
precision highp float;
varying vec2 vUv;
uniform vec2 iResolution;
uniform float color;
uniform sampler2D picture;
uniform float smooth;
uniform float ballradius;
uniform float metaPow;
uniform float densityMin;
uniform float densityMax;
uniform float densityEvolution;
uniform float rotationSpeed;
uniform vec2 moveSpeed;
uniform float distortion;
uniform float nstrenght;
uniform float nsize;
uniform vec3 lightColor;
uniform float iGlobalTime;
uniform vec2 centerMove;
float saturate1(float x) {
    return clamp(x, 0.0, 1.0);
}
vec2 rotuv(vec2 uv, float angle, vec2 center) {
    return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * (uv - center) + center;
}
float hash(float n) {
    return fract(sin(dot(vec2(n, n), vec2(12.9898, 78.233))) * 43758.5453);
}
float metaBall(vec2 uv) {
    return length(fract(uv) - vec2(0.5));
}
float metaNoiseRaw(vec2 uv, float density) {
    float v = 0.99;
    float r0 = 0.3;
    float s0 = mod(iGlobalTime*(r0-0.5)*rotationSpeed, 600.);
    vec2 f0 = iGlobalTime*moveSpeed*r0;
    vec2 c0 = vec2(0.3, 0.6) + s0;
    vec2 uv0 = rotuv(uv*(1.0+r0*v), r0*360.0 + s0, centerMove) + f0;
    float metaball0 = saturate1(metaBall(uv0)*density);
    
    //nº iterations
    
    for(int i = 0; i < 5; i++) {
        float inc = float(i) + 1.0;
        float r1 = 0.3*inc;
        float s1 = mod(iGlobalTime*(r1-0.5)*rotationSpeed, 600.);
        vec2 f1 = iGlobalTime*r1*moveSpeed;
        vec2 c1 = vec2(hash(31.2*inc), hash(90.2*inc))*100.0 + s1;//vec2((0.3*inc), (0.94*inc))*100.+s1;
        
        vec2 uv1 = rotuv(uv*(1.0+r1*v), r1*360.0 + s1, centerMove) - metaball0*distortion + f1;
        float metaball1 = saturate1(metaBall(uv1)*density);
        metaball0 *= metaball1;
    }
    return pow(metaball0, metaPow);
}
float metaNoise(vec2 uv) {
    float density = mix(densityMin, densityMax, sin(iGlobalTime*densityEvolution)*0.5+0.5);
    return 1.0 - smoothstep(ballradius, ballradius+smooth, metaNoiseRaw(uv, density));
}
vec4 calculateNormals(vec2 uv, float s) {
    float offsetX = nsize*s/iResolution.x*10.;
    float offsetY = nsize*s/iResolution.y*10.;
    vec2 ovX = vec2(0.0, offsetX);
    vec2 ovY = vec2(0.0, offsetY);
    float X = (metaNoise(uv - ovX.yx) - metaNoise(uv + ovX.yx)) * nstrenght;
    float Y = (metaNoise(uv - ovY.xy) - metaNoise(uv + ovY.xy)) * nstrenght;
    float Z = (1.0 - saturate1(dot(vec2(X, Y), vec2(X, Y))));
    float c = abs(X+Y);
    return normalize(vec4(X, Y, Z, c));
}
////////I SEE YOU A LITTLE PALE

vec3 getSoapCol(vec3 pos, vec3 c, vec3 norm, vec3 viewD) {
    vec3 reflected_ray = reflect(viewD, norm);
    vec3 refracted_ray = refract(viewD, -norm, 1.02);
    vec3 etaRatioRGB = vec3(1.03, 1.06, 1.09);
    etaRatioRGB *= 0.9;
    // rainbow !
    
    vec3 TRed = refract(viewD, -norm, etaRatioRGB.r);
    vec3 TGreen = refract(viewD, -norm, etaRatioRGB.g);
    vec3 TBlue = refract(viewD, -norm, etaRatioRGB.b);
    vec4 refracted_color;
    refracted_color.r = texture2D(picture, pos.xy+TRed.xy*0.09).r;
    refracted_color.g = texture2D(picture, pos.xy+TGreen.xy*0.09).g;
    refracted_color.b = texture2D(picture, pos.xy+TBlue.xy*0.09).b;
    float fresnelBias = 0.5;
    float fresnelScale = .95;
    float fresnelPower = 1.97;
    float mix_coef = fresnelBias+fresnelScale*pow(abs(1.0 + dot(viewD, norm)), fresnelPower);
    vec4 reflected_color = vec4(c, 1.);
    mix_coef = clamp(mix_coef, 0.0, 1.4);
    vec4 mixed = mix(reflected_color, refracted_color, mix_coef);
    mixed *= mixed;
    mixed.xyz = mix(c, mixed.xyz, 0.15);
    return mixed.xyz;
}
///////////////

void main(void) {
    vec2 uv = vUv;
    vec2 uv2 = uv;
    uv2.x *= iResolution.x/iResolution.y;
    uv2 *= vec2(1.0, 0.75);
    uv2 += iGlobalTime*moveSpeed;
    float noise = metaNoise(uv2);
    vec4 n = calculateNormals(uv2, smoothstep(0.0, 0.5, 1.0 ));
    vec4 tex = texture2D(picture, uv+ n.xy *-.4);
    vec3 col = tex.xyz;
    vec4 colo = vec4(n.w*col + col, 1.0);
    gl_FragColor = vec4(colo);
}

soap-bubble-vert.glsl

precision highp float;
precision highp int;
#define SHADER_NAME ShaderMaterial
#define VERTEX_TEXTURES
#define GAMMA_FACTOR 2
#define MAX_BONES 251
#define DOUBLE_SIDED
#define NUM_CLIPPING_PLANES 0
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;
uniform vec3 cameraPosition;
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
#ifdef USE_COLOR
    attribute vec3 color;
#endif
#ifdef USE_MORPHTARGETS
    attribute vec3 morphTarget0;
    attribute vec3 morphTarget1;
    attribute vec3 morphTarget2;
    attribute vec3 morphTarget3;
    #ifdef USE_MORPHNORMALS
        attribute vec3 morphNormal0;
        attribute vec3 morphNormal1;
        attribute vec3 morphNormal2;
        attribute vec3 morphNormal3;
    #else
        attribute vec3 morphTarget4;
        attribute vec3 morphTarget5;
        attribute vec3 morphTarget6;
        attribute vec3 morphTarget7;
    #endif
#endif
#ifdef USE_SKINNING
    attribute vec4 skinIndex;
    attribute vec4 skinWeight;
#endif



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

uniforms.txt

Uniforms(0)
name: modelViewMatrix
size: 1
type: FLOAT_MAT4
location: WebGLUniformLocation - ID: 16
value: 1.5831, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1'

Uniforms(1)
name: iResolution
size: 1
type: FLOAT_VEC2
location: WebGLUniformLocation - ID: 17
value: 758, 600

Uniforms(2)
name: smooth
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 18
value: 0.3000

Uniforms(3)
name: ballradius
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 19
value: 0

Uniforms(4)
name: metaPow
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 20
value: 3

Uniforms(5)
name: densityMin
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 21
value: 2.4000

Uniforms(6)
name: densityMax
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 22
value: 2.9000

Uniforms(7)
name: densityEvolution
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 23
value: 0.4000

Uniforms(8)
name: rotationSpeed
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 24
value: 0

Uniforms(9)
name: moveSpeed
size: 1
type: FLOAT_VEC2
location: WebGLUniformLocation - ID: 25
value: 0, -0.0100

Uniforms(10)
name: distortion
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 26
value: 0.0500

Uniforms(11)
name: nstrenght
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 27
value: 1

Uniforms(12)
name: nsize
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 28
value: 1

Uniforms(13)
name: iGlobalTime
size: 1
type: FLOAT
location: WebGLUniformLocation - ID: 29
value: 5004.2964

Uniforms(14)
name: centerMove
size: 1
type: FLOAT_VEC2
location: WebGLUniformLocation - ID: 30
value: 0, 0.0008

Uniforms(15)
name: picture
size: 1
type: SAMPLER_2D
location: WebGLUniformLocation - ID: 31
value: 0
Texture
magFilter: LINEAR
minFilter: LINEAR_MIPMAP_LINEAR
wrapS: CLAMP_TO_EDGE
wrapT: CLAMP_TO_EDGE
anisotropy: 1
textureType: UNSIGNED_BYTE
format: RGBA
internalFormat: RGBA
width: 1024
height: 512