[DRAFT] Playing with glass material

src/app/hero/liquid-frag.ts

@@ -14,38 +14,12 @@ uniform float u_edge;
 uniform float u_patternBlur;
 uniform float u_liquid;
 
+#define pow2(x) (x * x)
 
 #define TWO_PI 6.28318530718
 #define PI 3.14159265358979323846
 
 
-vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }
-vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }
-vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }
-float snoise(vec2 v) {
-    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
-    vec2 i = floor(v + dot(v, C.yy));
-    vec2 x0 = v - i + dot(i, C.xx);
-    vec2 i1;
-    i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);
-    vec4 x12 = x0.xyxy + C.xxzz;
-    x12.xy -= i1;
-    i = mod289(i);
-    vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));
-    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);
-    m = m*m;
-    m = m*m;
-    vec3 x = 2. * fract(p * C.www) - 1.;
-    vec3 h = abs(x) - 0.5;
-    vec3 ox = floor(x + 0.5);
-    vec3 a0 = x - ox;
-    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
-    vec3 g;
-    g.x = a0.x * x0.x + h.x * x0.y;
-    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-    return 130. * dot(m, g);
-}
-
 vec2 get_img_uv() {
     vec2 img_uv = vUv;
     img_uv -= .5;
@@ -65,139 +39,91 @@ vec2 get_img_uv() {
 vec2 rotate(vec2 uv, float th) {
     return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
 }
-float get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float b) {
-    float ch = c2;
-    float border = 0.;
-    float blur = u_patternBlur + extra_blur;
-
-    ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));
 
-    border = w[0];
-    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
 
-    b = smoothstep(.2, .8, b);
-    border = w[0] + .4 * (1. - b) * w[1];
-    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
+vec2 getPosition(int i, float t) {
+  float a = float(i) * .37;
+  float b = .6 + mod(float(i), 3.) * .3;
+  float c = .8 + mod(float(i + 1), 4.) * 0.25;
 
-    border = w[0] + .5 * (1. - b) * w[1];
-    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));
+  float x = sin(t * b + a);
+  float y = cos(t * c + a * 1.5);
 
-    border = w[0] + w[1];
-    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));
-
-    float gradient_t = (stripe_p - w[0] - w[1]) / w[2];
-    float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));
-    ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));
-
-    return ch;
+  return .5 + .5 * vec2(x, y);
 }
 
-float get_img_frame_alpha(vec2 uv, float img_frame_width) {
-    float img_frame_alpha = smoothstep(0., img_frame_width, uv.x) * smoothstep(1., 1. - img_frame_width, uv.x);
-    img_frame_alpha *= smoothstep(0., img_frame_width, uv.y) * smoothstep(1., 1. - img_frame_width, uv.y);
-    return img_frame_alpha;
-}
-
-void main() {
-    vec2 uv = vUv;
-    uv.y = 1. - uv.y;
-    uv.x *= u_ratio;
-
-    float diagonal = uv.x - uv.y;
-
-    float t = .001 * u_time;
-
-    vec2 img_uv = get_img_uv();
-    vec4 img = texture(u_image_texture, img_uv);
-
-    vec3 color = vec3(0.);
-    float opacity = 1.;
-
-    vec3 color1 = vec3(.98, 0.98, 1.);
-    vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, uv.x + uv.y));
-
-    float edge = img.r;
-
-
-    vec2 grad_uv = uv;
-    grad_uv -= .5;
-
-    float dist = length(grad_uv + vec2(0., .2 * diagonal));
-
-    grad_uv = rotate(grad_uv, (.25 - .2 * diagonal) * PI);
-
-    float bulge = pow(1.8 * dist, 1.2);
-    bulge = 1. - bulge;
-    bulge *= pow(uv.y, .3);
-
-
-    float cycle_width = u_patternScale;
-    float thin_strip_1_ratio = .12 / cycle_width * (1. - .4 * bulge);
-    float thin_strip_2_ratio = .07 / cycle_width * (1. + .4 * bulge);
-    float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);
-
-    float thin_strip_1_width = cycle_width * thin_strip_1_ratio;
-    float thin_strip_2_width = cycle_width * thin_strip_2_ratio;
 
-    opacity = 1. - smoothstep(.9 - .5 * u_edge, 1. - .5 * u_edge, edge);
-    opacity *= get_img_frame_alpha(img_uv, 0.01);
-
-
-    float noise = snoise(uv - t);
-
-    edge += (1. - edge) * u_liquid * noise;
-
-    float refr = 0.;
-    refr += (1. - bulge);
-    refr = clamp(refr, 0., 1.);
-
-    float dir = grad_uv.x;
-
-
-    dir += diagonal;
-
-    dir -= 2. * noise * diagonal * (smoothstep(0., 1., edge) * smoothstep(1., 0., edge));
-
-    bulge *= clamp(pow(uv.y, .1), .3, 1.);
-    dir *= (.1 + (1.1 - edge) * bulge);
-
-    dir *= smoothstep(1., .7, edge);
-
-    dir += .18 * (smoothstep(.1, .2, uv.y) * smoothstep(.4, .2, uv.y));
-    dir += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));
-
-    dir *= (.5 + .5 * pow(uv.y, 2.));
-
-    dir *= cycle_width;
-
-    dir -= t;
-
-    float refr_r = refr;
-    refr_r += .03 * bulge * noise;
-    float refr_b = 1.3 * refr;
-
-    refr_r += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(1., .4, bulge));
-    refr_r -= diagonal;
-
-    refr_b += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(.8, .4, bulge));
-    refr_b -= .2 * edge;
-
-    refr_r *= u_refraction;
-    refr_b *= u_refraction;
+vec3 background(vec2 uv, float t) {
+  vec4 u_colors[4] = vec4[4](
+    vec4(.5, 0.8, 1., 1.0),
+    vec4(0., 0.6, .5, 1.0),
+    vec4(1., 1., 0.5, 1.0),
+    vec4(1., 0., 0.6, 1.0)
+  );
+
+  float u_distortion = .8;
+  float u_swirl = .8;
+
+  float radius = smoothstep(0., 1., length(uv - .5));
+  float center = 1. - radius;
+  for (float i = 1.; i <= 2.; i++) {
+    uv.x += u_distortion * center / i * sin(t + i * .4 * smoothstep(.0, 1., uv.y)) * cos(.2 * t + i * 2.4 * smoothstep(.0, 1., uv.y));
+    uv.y += u_distortion * center / i * cos(t + i * 2. * smoothstep(.0, 1., uv.x));
+  }
+
+  vec2 uvRotated = uv;
+//  uvRotated -= vec2(.5);
+//  float angle = 3. * u_swirl * radius;
+//  uvRotated = rotate(uvRotated, -angle);
+//  uvRotated += vec2(.5);
+
+  vec3 color = vec3(0.);
+  float totalWeight = 0.;
+
+  for (int i = 0; i < 4; i++) {
+    vec2 pos = getPosition(i, t);
+    vec3 colorFraction = u_colors[i].rgb;
+
+    float dist = 0.;
+    if (mod(float(i), 2.) > 1.) {
+      dist = length(uv - pos);
+    } else {
+      dist = length(uvRotated - pos);
+    }
 
-    vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);
-    w[1] -= .02 * smoothstep(.0, 1., edge + bulge);
-    float stripe_r = mod(dir + refr_r, 1.);
-    float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_refraction * bulge, bulge);
-    float stripe_g = mod(dir, 1.);
-    float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - diagonal), bulge);
-    float stripe_b = mod(dir - refr_b, 1.);
-    float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, bulge);
+    dist = pow(dist, 3.5);
+    float weight = 1. / (dist + 1e-3);
+    color += colorFraction * weight;
+    totalWeight += weight;
+  }
 
-    color = vec3(r, g, b);
+  return color /= totalWeight;
+}
 
-    color *= opacity;
 
-    fragColor = vec4(color, opacity);
+void main() {
+  vec2 uv = vUv;
+
+  float t = .003 * u_time;
+
+  vec2 img_uv = get_img_uv();
+  vec4 img = texture(u_image_texture, img_uv);
+
+  float edge = img.r;
+  float imageShape = 1. - smoothstep(.4, .7, edge);
+
+  uv += .8 * imageShape * pow(img.r, 3.);
+  uv += .4 * imageShape * pow(img.r, 1.);
+  uv *= (1. + .1 * length(uv) * imageShape);
+
+  vec3 color = background(uv, t);
+  color.r = background(uv + .1 * edge * imageShape, t).r;
+
+    color += .4 * edge * imageShape;
+    color += .3 * edge * imageShape * max(0., length(color.rb) - 1.);
+//    color -= .7 * edge * imageShape * max(0., length(color) - 1.);
+    color += .07 * imageShape;
+
+  fragColor = vec4(color, 1.);
 }
 `;

src/hero/hero.tsx

@@ -201,7 +201,7 @@ export function Hero({ imageId }: HeroProps) {
           })(),
         }}
       >
-        <div className="aspect-square w-400">
+        <div className="aspect-square h-full">
           {imageData && <Canvas imageData={imageData} params={state} processing={processing} />}
         </div>
       </div>