https://www.hotel-kawakyu.jp/wp-content/themes/lm-child/js/pages/kawakyu-top/journey/liquid.js

1// SHI139最新版の液体遷移を縦方向へ変更。歪みと色分離の強度は元の値を維持する。
2const vertex = `attribute vec2 position; varying vec2 uv; void main(){uv=position*.5+.5;gl_Position=vec4(position,0.,1.);}`;
3const fragment = `precision highp float;
4varying vec2 uv;
5uniform sampler2D imageA, imageB;
6uniform vec2 sizeA,sizeB,resolution;
7uniform float progress,strength,rgbShift,direction;
8float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
9float noise(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}
10vec2 cover(vec2 p,vec2 size){float a=resolution.x/resolution.y,b=size.x/size.y;return (p-.5)*vec2(min(a/b,1.),min(b/a,1.))+.5;}
11vec3 sampleRGB(sampler2D tex,vec2 p,vec2 size,float offset){vec2 centered=p-.5;
12 // 外周だけでなく映像の直線も穏やかに湾曲させ、平面の角丸表示を避ける。
13 vec2 warped=.5+centered*(1.+.22*dot(centered,centered))/1.11;
14 vec2 q=cover(warped,size);
15 // 映像の変位に引きずられず、表示枠の外周へブラーと色分離を集中させる。
16 vec2 border=min(uv,1.-uv)*resolution;
17 float edge=1.-smoothstep(0.,min(resolution.x,resolution.y)*.12,min(border.x,border.y));
18 vec2 radius=vec2(9.)/resolution*edge;
19 vec2 fringe=normalize(centered+vec2(.0001))*(.009*edge)+vec2(offset,0.);
20 vec3 color=vec3(texture2D(tex,q+fringe).r,texture2D(tex,q).g,texture2D(tex,q-fringe).b)*.4;
21 color+=vec3(texture2D(tex,q+radius+fringe).r,texture2D(tex,q+radius).g,texture2D(tex,q+radius-fringe).b)*.15;
22 color+=vec3(texture2D(tex,q-radius+fringe).r,texture2D(tex,q-radius).g,texture2D(tex,q-radius-fringe).b)*.15;
23 radius.x=-radius.x;
24 color+=vec3(texture2D(tex,q+radius+fringe).r,texture2D(tex,q+radius).g,texture2D(tex,q+radius-fringe).b)*.15;
25 color+=vec3(texture2D(tex,q-radius+fringe).r,texture2D(tex,q-radius).g,texture2D(tex,q-radius-fringe).b)*.15;
26 return color;}
27void main(){
28 float t=progress;float bell=sin(t*3.14159265);vec2 p=uv;
29 float n=noise(p*3.8+vec2(t*.6,-t*.35))*.65+noise(p*8.1-vec2(t*.4,t*.7))*.35;
30 vec2 flow=vec2(sin(p.y*7.5+n*5.+t*3.),cos(p.x*6.+n*4.-t*2.));
31 vec2 lens=(p-.5)*dot(p-.5,p-.5)*bell*strength*1.6;
32 vec2 displacement=flow*strength*bell*(.25+n*.75);
33 vec2 a=p+displacement*t*direction+lens;
34 vec2 b=p-displacement*(1.-t)*direction-lens*.6;
35 float edge=direction>0.?1.-p.y:p.y;
36 float boundary=edge+(n-.5)*.48*bell+sin(p.x*9.+t*5.)*.07*bell;
37 float blend=1.-smoothstep(t*1.4-.2-.12,t*1.4-.2+.12,boundary);
38 if(t<=0.)blend=0.;if(t>=1.)blend=1.;
39 vec3 first=sampleRGB(imageA,a,sizeA,rgbShift*bell);
40 vec3 second=sampleRGB(imageB,b,sizeB,-rgbShift*bell);
41 gl_FragColor=vec4(mix(first,second,blend),1.);
42}`;
43export function createLiquid(canvas, options) {
44  const gl = canvas.getContext('webgl', { alpha: false, antialias: false, powerPreference: 'low-power' });
45  if (!gl) return null;
46  function shader(type, source) {
47    const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader);
48    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
49    return shader;
50  }
51  const program = gl.createProgram();
52  gl.attachShader(program, shader(gl.VERTEX_SHADER, vertex)); gl.attachShader(program, shader(gl.FRAGMENT_SHADER, fragment)); gl.linkProgram(program);
53  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
54  gl.useProgram(program);
55  const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW);
56  const position = gl.getAttribLocation(program, 'position'); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
57  const uniforms = Object.fromEntries(['imageA','imageB','sizeA','sizeB','resolution','progress','strength','rgbShift','direction'].map(key => [key, gl.getUniformLocation(program, key)]));
58  const textures = [0,1].map(() => { const texture=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,texture); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);return texture; });
59  const sources = [null, null];
60  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
61  return {
62    draw(a,b,progress,direction) {
63      if(gl.isContextLost()) return;
64      const width = canvas.clientWidth, height = canvas.clientHeight, dpr = Math.min(devicePixelRatio, 1.5, 1920 / width);
65      if(canvas.width!==Math.round(width*dpr)||canvas.height!==Math.round(height*dpr)){canvas.width=Math.round(width*dpr);canvas.height=Math.round(height*dpr);gl.viewport(0,0,canvas.width,canvas.height);}
66      [a,b].forEach((media,i)=>{
67        gl.activeTexture(gl.TEXTURE0+i);gl.bindTexture(gl.TEXTURE_2D,textures[i]);
68        if(sources[i]!==media || (media instanceof HTMLVideoElement && media.readyState>=2)){gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,media);sources[i]=media;}
69        gl.uniform1i(uniforms[i?'imageB':'imageA'],i);gl.uniform2f(uniforms[i?'sizeB':'sizeA'],media.videoWidth||media.naturalWi

69dth,media.videoHeight||media.naturalHeight);
70      });
71      gl.uniform2f(uniforms.resolution,width,height);gl.uniform1f(uniforms.progress,progress);gl.uniform1f(uniforms.strength,options.distortion);gl.uniform1f(uniforms.rgbShift,options.rgbShift);gl.uniform1f(uniforms.direction,direction);gl.drawArrays(gl.TRIANGLES,0,6);
72    },
73  };
74}