ShaderSlider.js

import * as THREE from 'three';

// ─── Vertex shader ────────────────────────────────────────────────────────────
const VERT = /* glsl */`
  varying vec2 vUv;
  void main() { vUv = uv; gl_Position = vec4(position, 1.0); }
`;

// ─── Fragment shader header ───────────────────────────────────────────────────
const HEAD = /* glsl */`
  precision highp float;
  varying vec2      vUv;
  uniform sampler2D tA, tB;
  uniform float     progress;
  uniform vec2      res;
`;

// ─── Встроенные эффекты ───────────────────────────────────────────────────────
export const EFFECTS = {

  fade: `
    void main() {
      gl_FragColor = mix(texture2D(tA,vUv), texture2D(tB,vUv), progress);
    }`,

  wind: `
    float rand(vec2 co){ return fract(sin(dot(co,vec2(12.9898,78.233)))*43758.5453); }
    void main() {
      float r = rand(vec2(0.,vUv.y));
      float m = smoothstep(0.,-.2, vUv.x*.8 + .2*r - progress*1.2);
      gl_FragColor = mix(texture2D(tA,vUv), texture2D(tB,vUv), m);
    }`,

  wave: `
    void main() {
      float prog = (1.-progress)*.8-.05;
      float t = sin(vUv.x*12.-progress*8.)*.03*(1.-progress);
      vec2 uv = vUv+vec2(0.,t);
      float i = pow(abs(smoothstep(0.,1.,prog*2.-uv.x+.5)),8.);
      gl_FragColor = mix(texture2D(tB,(uv-.5)*(1.-i)+.5), texture2D(tA,(uv-.5)*i+.5), i);
    }`,

  ripple: `
    void main() {
      float prog=progress*.66, w=.35, r=.9;
      float c=1.-smoothstep(-w,0., r*distance(vec2(.5),vUv)-prog*(1.+w));
      gl_FragColor=mix(texture2D(tA,(vUv-.5)*(1.-c)+.5), texture2D(tB,(vUv-.5)*c+.5), c);
    }`,

  pixelize: `
    void main() {
      float d=min(progress,1.-progress);
      vec2 sq=2.*ceil(d*20.)/20./vec2(60.);
      vec2 p=d>0.?(floor(vUv/sq)+.5)*sq:vUv;
      gl_FragColor=mix(texture2D(tA,p), texture2D(tB,p), progress);
    }`,

  dots: `
    void main() {
      bool n=distance(fract(vUv*20.),vec2(.5))<(progress/distance(vUv,vec2(.5)));
      gl_FragColor=n?texture2D(tB,vUv):texture2D(tA,vUv);
    }`,

  flyeye: `
    void main() {
      float inv=1.-progress;
      vec2 d=.04*vec2(cos(100.*vUv.x),sin(100.*vUv.y));
      vec4 f=vec4(texture2D(tA,vUv+progress*d*.7).r,
                  texture2D(tA,vUv+progress*d).g,
                  texture2D(tA,vUv+progress*d*1.3).b,1.);
      gl_FragColor=texture2D(tB,vUv+inv*d)*progress+f*inv;
    }`,

  slices: `
    void main() {
      float pr=smoothstep(-.5,0.,vUv.x-progress*1.5);
      gl_FragColor=mix(texture2D(tA,vUv),texture2D(tB,vUv),step(pr,fract(20.*vUv.x)));
    }`,

  squares: `
    void main() {
      vec2 v=vec2(1.,-.5); v/=abs(v.x)+abs(v.y);
      float pr=smoothstep(-1.6,0.,dot(v,vUv)-(dot(v,vec2(.5))-.5+progress*2.6));
      vec2 sp=fract(vUv*10.),mn=vec2(pr/2.),mx=vec2(1.-pr/2.);
      float a=(1.-step(progress,0.))*step(mn.x,sp.x)*step(mn.y,sp.y)*step(sp.x,mx.x)*step(sp.y,mx.y);
      gl_FragColor=mix(texture2D(tA,vUv),texture2D(tB,vUv),a);
    }`,

  shutters: `
    mat2 rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
    void main() {
      vec2 d=fract(vUv*vec2(50.,1.));
      gl_FragColor=mix(texture2D(tA,vUv+rot(.785)*d*progress*.1),
                       texture2D(tB,vUv+rot(.785)*d*(1.-progress)*.1),progress);
    }`,

  stretch: `
    float hash(vec2 p){return fract(1e4*sin(17.*p.x+p.y*.1)*(0.1+abs(sin(p.y*13.+p.x))));}
    float noise(vec2 x){vec2 i=floor(x),f=fract(x);
      float a=hash(i),b=hash(i+vec2(1,0)),c=hash(i+vec2(0,1)),d=hash(i+vec2(1,1));
      vec2 u=f*f*(3.-2.*f); return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y;}
    void main() {
      float n=noise(vUv*res/100.);
      vec2 dir=vec2(0.,normalize(vec2(.5)-vUv).y);
      gl_FragColor=mix(texture2D(tA,vUv+dir*progress/5.*(1.+n/2.)),
                       texture2D(tB,vUv-dir*(1.-progress)/5.*(1.+n/2.)),progress);
    }`,

  'morph-x': `
    mat2 rotM(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
    void main() {
      vec2 dv=texture2D(tA,vUv).rg;
      gl_FragColor=mix(texture2D(tA,vUv+rotM(.785)*dv*progress),
                       texture2D(tB,vUv+rotM(-2.356)*dv*(1.-progress)),progress);
    }`,

  'morph-y': `
    void main() {
      float dp1=(texture2D(tA,vUv).r+texture2D(tA,vUv).g+texture2D(tA,vUv).b)*.33;
      float dp2=(texture2D(tB,vUv).r+texture2D(tB,vUv).g+texture2D(tB,vUv).b)*.33;
      gl_FragColor=mix(texture2D(tA,vec2(vUv.x,vUv.y+progress*dp2*.3)),
                       texture2D(tB,vec2(vUv.x,vUv.y+(1.-progress)*dp1*.3)),progress);
    }`,

  'peel-x': `
    void main() {
      float x=smoothstep(0.,1.,progress*2.+vUv.x-1.);
      gl_FragColor=mix(texture2D(tA,(vUv-.5)*(1.-x)+.5),texture2D(tB,(vUv-.5)*x+.5),x);
    }`,

  'peel-y': `
    void main() {
      float x=smoothstep(0.,1.,progress*2.+vUv.y-1.);
      gl_FragColor=mix(texture2D(tA,(vUv-.5)*(1.-x)+.5),texture2D(tB,(vUv-.5)*x+.5),x);
    }`,

  'page-curl': `
    const float PI=3.14159,MIN=-0.16,MAX=1.5,CR=1./PI/2.;
    vec4 aa(vec4 c1,vec4 c2,float d){d*=512.;if(d<0.)return c2;if(d>2.)return c1;return mix(c1,c2,pow(1.-d/2.,3.));}
    float dte(vec3 p){float dx=p.x<0.?-p.x:p.x>1.?p.x-1.:abs(p.x>.5?1.-p.x:p.x);float dy=p.y<0.?-p.y:p.y>1.?p.y-1.:abs(p.y>.5?1.-p.y:p.y);if((p.x<0.||p.x>1.)&&(p.y<0.||p.y>1.))return sqrt(dx*dx+dy*dy);return min(dx,dy);}
    void main(){
      float amt=progress*(MAX-MIN)+MIN, cA=2.*PI*amt;
      const float ang=100.*PI/180.;
      mat3 M=mat3(cos(-ang),sin(-ang),0.,-sin(-ang),cos(-ang),0.,-0.801,0.89,1.);
      mat3 R=mat3(cos(ang),sin(ang),0.,-sin(ang),cos(ang),0.,0.985,0.985,1.);
      vec3 pt=M*vec3(vUv,1.); float yc=pt.y-amt;
      if(yc>CR){gl_FragColor=texture2D(tA,vUv);return;}
      if(yc<-CR){float sh=(1.-((-CR-yc)/amt*7.))/6.*(1.-abs(pt.x-.5));gl_FragColor=vec4(texture2D(tB,vUv).rgb-max(sh,0.),1.);return;}
      float hA=(acos(clamp(yc/CR,-1.,1.))+cA)-PI,hM=mod(hA,2.*PI);
      if((hM>PI&&amt<.5)||(hM>PI/2.&&amt<0.)){
        vec3 p2=R*vec3(pt.x,(PI-(acos(clamp(yc/CR,-1.,1.))-cA))/(2.*PI),1.);
        if(yc<=0.&&(p2.x<0.||p2.y<0.||p2.x>1.||p2.y>1.)){gl_FragColor=texture2D(tB,vUv);return;}
        if(yc>0.){gl_FragColor=texture2D(tA,vUv);return;}
        gl_FragColor=aa(texture2D(tA,p2.xy),vec4(0.),dte(p2));return;}
      vec3 p3=R*vec3(pt.x,hA/(2.*PI),1.);
      if(p3.x<0.||p3.y<0.||p3.x>1.||p3.y>1.){
        vec3 p2=R*vec3(pt.x,(PI-(acos(clamp(yc/CR,-1.,1.))-cA))/(2.*PI),1.);
        vec4 sc=texture2D(tB,vUv); if(yc<=0.)sc.rgb-=max((1.-dte(p2)*30.)/3.,0.)*amt;
        gl_FragColor=sc;return;}
      vec4 col=texture2D(tA,p3.xy);
      float g=(col.r+col.b+col.g)/15.+.8*(pow(1.-abs(yc/CR),.2)/2.+.5);
      col.rgb=vec3(g);
      gl_FragColor=aa(col,yc<0.?vec4(0.,0.,0.,pow(-yc/CR,3.)*.5):texture2D(tA,vUv),CR-abs(yc));
    }`,
};

// ─────────────────────────────────────────────────────────────────────────────
/**
 * ShaderSlider
 *
 * Использование:
 *
 *   import ShaderSlider, { EFFECTS } from './ShaderSlider.js'
 *
 *   const slider = new ShaderSlider({
 *     container : document.getElementById('my-slider'),
 *     images    : ['a.jpg', 'b.jpg', 'c.jpg'],
 *     effect    : 'wind',       // название эффекта или GLSL-строка
 *     duration  : 900,          // мс анимации перехода
 *     autoplay  : 4000,         // мс между слайдами, false = выкл
 *     loop      : true,
 *     onChange  : (index) => {},// коллбек после смены слайда
 *   })
 *
 *   // API:
 *   slider.goTo(2)
 *   slider.next()
 *   slider.prev()
 *   slider.setEffect('ripple')
 *   slider.setEffect(myCustomGLSL)  // своя GLSL строка
 *   slider.destroy()
 */
// ─────────────────────────────────────────────────────────────────────────────
export default class ShaderSlider {

  constructor(options = {}) {
    const {
      container,
      images    = [],
      effect    = 'wind',
      duration  = 900,
      autoplay  = false,
      loop      = true,
      onChange  = null,
    } = options;

    if (!container) throw new Error('ShaderSlider: container is required');
    if (!images.length) throw new Error('ShaderSlider: images array is empty');

    this._container = container;
    this._images    = images;
    this._duration  = duration;
    this._loop      = loop;
    this._onChange  = onChange;
    this._current   = 0;
    this._busy      = false;
    this._raf       = null;
    this._autoTimer = null;
    this._autoDelay = autoplay;
    this._textures  = [];
    this._matCache  = {};

    this._initThree();
    this._loadTextures().then(() => {
      this._uniforms.tA.value = this._textures[0];
      this._uniforms.tB.value = this._textures[1] ?? this._textures[0];
      this.setEffect(effect);
      if (autoplay) this._startAuto();
    });
  }

  // ─── Three.js setup ────────────────────────────────────────────────────────

  _initThree() {
    const el = this._container;

    this._renderer = new THREE.WebGLRenderer({ antialias: false, alpha: false });
    this._renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
    this._renderer.setSize(el.clientWidth, el.clientHeight);
    // canvas позиционируем абсолютно внутри container
    Object.assign(this._renderer.domElement.style, {
      position: 'absolute', inset: '0',
      width: '100%', height: '100%', display: 'block',
    });
    el.appendChild(this._renderer.domElement);

    this._scene  = new THREE.Scene();
    this._camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

    this._uniforms = {
      tA:       { value: null },
      tB:       { value: null },
      progress: { value: 0 },
      res:      { value: new THREE.Vector2(el.clientWidth, el.clientHeight) },
    };

    this._mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), null);
    this._scene.add(this._mesh);

    this._renderer.setAnimationLoop(() =>
      this._renderer.render(this._scene, this._camera));

    this._onResize = () => {
      this._renderer.setSize(el.clientWidth, el.clientHeight);
      this._uniforms.res.value.set(el.clientWidth, el.clientHeight);
    };
    window.addEventListener('resize', this._onResize);
  }

  // ─── Загрузка текстур ──────────────────────────────────────────────────────

  _loadTextures() {
    const loader = new THREE.TextureLoader();
    return Promise.all(this._images.map(src =>
      new Promise(resolve => {
        loader.load(src, tex => {
          tex.colorSpace = THREE.SRGBColorSpace;
          this._textures.push(tex);
          resolve();
        });
      })
    ));
  }

  // ─── Компиляция / кеш материалов ──────────────────────────────────────────

  _getMaterial(effectKey) {
    if (!this._matCache[effectKey]) {
      // effect может быть именем из EFFECTS или произвольной GLSL строкой
      const frag = EFFECTS[effectKey] ?? effectKey;
      this._matCache[effectKey] = new THREE.ShaderMaterial({
        uniforms:       this._uniforms,
        vertexShader:   VERT,
        fragmentShader: HEAD + frag,
      });
    }
    return this._matCache[effectKey];
  }

  // ─── Публичное API ─────────────────────────────────────────────────────────

  /** Переключить эффект по имени или передать GLSL строку напрямую */
  setEffect(effect) {
    this._effect = effect;
    this._mesh.material = this._getMaterial(effect);
  }

  /** Перейти к слайду по индексу */
  goTo(index) {
    const n = this._textures.length;
    if (!n || this._busy) return;

    let next = index;
    if (this._loop) next = ((index % n) + n) % n;
    else next = Math.max(0, Math.min(n - 1, index));
    if (next === this._current) return;

    this._busy = true;
    const from = this._current;
    const to   = next;

    this._uniforms.tA.value = this._textures[from];
    this._uniforms.tB.value = this._textures[to];
    this._uniforms.progress.value = 0;

    const start = performance.now();
    const ease  = t => t < .5 ? 2*t*t : -1+(4-2*t)*t;

    const tick = () => {
      const raw = Math.min((performance.now() - start) / this._duration, 1);
      this._uniforms.progress.value = ease(raw);

      if (raw < 1) { this._raf = requestAnimationFrame(tick); return; }

      this._current = to;
      this._busy    = false;
      this._onChange?.(to);
    };

    this._raf = requestAnimationFrame(tick);
  }

  next() { this.goTo(this._current + 1) }
  prev() { this.goTo(this._current - 1) }

  get currentIndex() { return this._current }
  get total()        { return this._textures.length }

  // ─── Autoplay ──────────────────────────────────────────────────────────────

  _startAuto() {
    this._stopAuto();
    if (!this._autoDelay) return;
    this._autoTimer = setInterval(() => this.next(), this._autoDelay);
  }

  _stopAuto() { clearInterval(this._autoTimer) }

  pauseAutoplay()  { this._stopAuto() }
  resumeAutoplay() { this._startAuto() }

  // ─── Cleanup ───────────────────────────────────────────────────────────────

  destroy() {
    this._stopAuto();
    cancelAnimationFrame(this._raf);
    window.removeEventListener('resize', this._onResize);
    this._renderer.setAnimationLoop(null);
    this._textures.forEach(t => t.dispose());
    Object.values(this._matCache).forEach(m => m.dispose());
    this._renderer.dispose();
    this._container.removeChild(this._renderer.domElement);
  }
}