Onmouseover onmouseout изменение изображения Эффект жидкости

Question

Мне нужно реализовать изменение изображения с эффектом жидкости, как в здесь

У меня есть простой блок с изображением. Мне нужно изменить это изображение (на другое изображение) в onmouseover с этим эффектом и вернуться в исходное положение в onmouseout, также используя этот эффект

const avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
const avatar = document.querySelector(".avatar");

avatarQuantumBreak.style.opacity = "0";

let hover = () => avatarQuantumBreak.style.opacity = "1";
let normal = () => avatarQuantumBreak.style.opacity = "0";

avatar.onmouseover = () => hover();
avatar.onmouseout = () => normal();

html , body {
  height:100%;
}

.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
  width: 86%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>


<div class=avatar>
    <span class=avatar_simple>
        <img src="https://pixel.nymag.com/imgs/fashion/daily/2014/05/27/27-amber-heard.w330.h330.jpg">
    </span>
    <span class=avatar_quantum_break>
        <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/05/31/31-amber-heard.w330.h330.jpg">
    </span>
</div>

Изображение transition функция, которая запускает анимацию жидкости ниже

transitionNext() {
    TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
      value: 1,
      ease: Expo.easeInOut,
      onUpdate: this.render,
      onComplete: () => {
        this.mat.uniforms.dispPower.value = 0.0
        this.changeTexture()
        this.render.bind(this)
        this.state.animating = false
      }
    })

Я пытаюсь использовать эту функцию, но она мне не помогла.

Также я пытаюсь изменить изображения в этой Array строке 15 , но это также не помогло.

this.images = [ //1
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
    ]

Эта функция запускает анимацию

listeners() {
   window.addEventListener('wheel', this.nextSlide, { passive: true })
}

Следующий слайд функция

nextSlide() {
   if (this.state.animating) return

   this.state.animating = true

   this.transitionNext()

   this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1
this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1
}

Пожалуйста, помогите ..

Answer 1

Хороший - vfx в реальном времени встречается с веб-разработкой:)

Вся магия этого эффекта осуществляется с помощью шейдера GLSL (вы можете увидеть его в нижней части примера HTML) здесь я добавил некоторые комментарии к нему

  // next lines are input data that gpu gets form javascript
  varying vec2 vUv; // uv coordinate of current pixel
  uniform sampler2D texture1; // picture 1
  uniform sampler2D texture2; // picture 2
  uniform sampler2D disp; // noise texture
  uniform float dispPower; // effect progress
  uniform float intensity; // effect scale

  void main() {
    vec2 uv = vUv;

    vec4 disp = texture2D(disp, uv); // read noise texture
    vec2 dispVec = vec2(disp.x, disp.y); // get red and green values

    // calculate uv displacement
    vec2 distPos1 = uv + (dispVec * intensity * dispPower); 
    vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));

    // sample images with displaced uv
    vec4 _texture1 = texture2D(texture1, distPos1); 
    vec4 _texture2 = texture2D(texture2, distPos2);

    // mix both pictures using effect dispPower value and output pixel color
    gl_FragColor = mix(_texture1, _texture2, dispPower);
  }

требуется 3 текстуры в качестве входных данных: picture1 picture2 и текстура шума, используемая для искажения ультрафиолета и генерирует значение цвета для одного пикселя одного кадра эффекта перехода на лету на GPU этот шейдер применяется ко всем пикселям поверхности

техника, используемая здесь, называемая «искажение текстуры» или «смещение ультрафиолета» идея состоит в том, чтобы настроить координаты UV с данными, хранящимися в текстуре шума.

хорошее место для начала изучения GLSL - https://thebookofshaders.com/

GLSL ссылка http://www.shaderific.com/glsl/

также, я предлагаю посетить https://www.shadertoy.com/

И добро пожаловать в волшебный мир реального времени VFX