{"version":3,"file":"hover-effect.modern.mjs","sources":["../src/hover-effect.js"],"sourcesContent":["import * as THREE from \"three\";\nimport gsap from \"gsap\";\n\nexport default function(opts) {\n  var vertex = `\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n`;\n\n  var fragment = `\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid main() {\n  vec4 disp = texture2D(disp, vUv);\n  vec2 dispVec = vec2(disp.r, disp.g);\n\n  vec2 uv = 0.5 * gl_FragCoord.xy / (res.xy) ;\n  vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);\n\n\n  vec2 distortedPosition1 = myUV + getRotM(angle1) * dispVec * intensity1 * dispFactor;\n  vec2 distortedPosition2 = myUV + getRotM(angle2) * dispVec * intensity2 * (1.0 - dispFactor);\n  vec4 _texture1 = texture2D(texture1, distortedPosition1);\n  vec4 _texture2 = texture2D(texture2, distortedPosition2);\n  gl_FragColor = mix(_texture1, _texture2, dispFactor);\n}\n`;\n\n  // please respect authorship and do not remove\n  console.log(\n    \"%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect \",\n    \"color: #bada55; font-size: 0.8rem\"\n  );\n\n  function firstDefined() {\n    for (var i = 0; i < arguments.length; i++) {\n      if (arguments[i] !== undefined) return arguments[i];\n    }\n  }\n\n  var parent = opts.parent;\n  var dispImage = opts.displacementImage;\n  var image1 = opts.image1;\n  var image2 = opts.image2;\n  var imagesRatio = firstDefined(opts.imagesRatio, 1.0);\n  var intensity1 = firstDefined(opts.intensity1, opts.intensity, 1);\n  var intensity2 = firstDefined(opts.intensity2, opts.intensity, 1);\n  var commonAngle = firstDefined(opts.angle, Math.PI / 4); // 45 degrees by default, so grayscale images work correctly\n  var angle1 = firstDefined(opts.angle1, commonAngle);\n  var angle2 = firstDefined(opts.angle2, -commonAngle * 3);\n  var speedIn = firstDefined(opts.speedIn, opts.speed, 1.6);\n  var speedOut = firstDefined(opts.speedOut, opts.speed, 1.2);\n  var userHover = firstDefined(opts.hover, true);\n  var easing = firstDefined(opts.easing, \"expo.out\");\n  var video = firstDefined(opts.video, false);\n\n  if (!parent) {\n    console.warn(\"Parent missing\");\n    return;\n  }\n\n  if (!(image1 && image2 && dispImage)) {\n    console.warn(\"One or more images are missing\");\n    return;\n  }\n\n  var scene = new THREE.Scene();\n  var camera = new THREE.OrthographicCamera(\n    parent.offsetWidth / -2,\n    parent.offsetWidth / 2,\n    parent.offsetHeight / 2,\n    parent.offsetHeight / -2,\n    1,\n    1000\n  );\n\n  camera.position.z = 1;\n\n  var renderer = new THREE.WebGLRenderer({\n    antialias: false,\n    alpha: true\n  });\n\n  renderer.setPixelRatio(2.0);\n  renderer.setClearColor(0xffffff, 0.0);\n  renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n  parent.appendChild(renderer.domElement);\n\n  var render = function() {\n    // This will be called by the TextureLoader as well as Gsap.\n    renderer.render(scene, camera);\n  };\n\n  var loader = new THREE.TextureLoader();\n  loader.crossOrigin = \"\";\n\n  var disp = loader.load(dispImage, render);\n  disp.magFilter = disp.minFilter = THREE.LinearFilter;\n\n  if (video) {\n    var animate = function() {\n      requestAnimationFrame(animate);\n\n      renderer.render(scene, camera);\n    };\n    animate();\n\n    var video = document.createElement(\"video\");\n    video.autoplay = true;\n    video.loop = true;\n    video.muted = true;\n    video.src = image1;\n    video.load();\n\n    var video2 = document.createElement(\"video\");\n    video2.autoplay = true;\n    video2.loop = true;\n    video2.muted = true;\n    video2.src = image2;\n    video2.load();\n\n    var texture1 = new THREE.VideoTexture(video);\n    var texture2 = new THREE.VideoTexture(video2);\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n\n    video2.addEventListener(\n      \"loadeddata\",\n      function() {\n        video2.play();\n\n        texture2 = new THREE.VideoTexture(video2);\n        texture2.magFilter = THREE.LinearFilter;\n        texture2.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture2.value = texture2;\n      },\n      false\n    );\n\n    video.addEventListener(\n      \"loadeddata\",\n      function() {\n        video.play();\n\n        texture1 = new THREE.VideoTexture(video);\n\n        texture1.magFilter = THREE.LinearFilter;\n        texture1.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture1.value = texture1;\n      },\n      false\n    );\n  } else {\n    var texture1 = loader.load(image1, render);\n    var texture2 = loader.load(image2, render);\n\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n  }\n\n  let a1, a2;\n  var imageAspect = imagesRatio;\n  if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n    a1 = 1;\n    a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n  } else {\n    a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n    a2 = 1;\n  }\n\n  var mat = new THREE.ShaderMaterial({\n    uniforms: {\n      intensity1: {\n        type: \"f\",\n        value: intensity1\n      },\n      intensity2: {\n        type: \"f\",\n        value: intensity2\n      },\n      dispFactor: {\n        type: \"f\",\n        value: 0.0\n      },\n      angle1: {\n        type: \"f\",\n        value: angle1\n      },\n      angle2: {\n        type: \"f\",\n        value: angle2\n      },\n      texture1: {\n        type: \"t\",\n        value: texture1\n      },\n      texture2: {\n        type: \"t\",\n        value: texture2\n      },\n      disp: {\n        type: \"t\",\n        value: disp\n      },\n      res: {\n        type: \"vec4\",\n        value: new THREE.Vector4(\n          parent.offsetWidth,\n          parent.offsetHeight,\n          a1,\n          a2\n        )\n      },\n      dpr: {\n        type: \"f\",\n        value: window.devicePixelRatio\n      }\n    },\n\n    vertexShader: vertex,\n    fragmentShader: fragment,\n    transparent: true,\n    opacity: 1.0\n  });\n\n  var geometry = new THREE.PlaneGeometry(\n    parent.offsetWidth,\n    parent.offsetHeight,\n    1\n  );\n  var object = new THREE.Mesh(geometry, mat);\n  scene.add(object);\n\n  function transitionIn() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedIn,\n      value: 1,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  function transitionOut() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedOut,\n      value: 0,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  if (userHover) {\n    parent.addEventListener(\"mouseenter\", transitionIn);\n    parent.addEventListener(\"touchstart\", transitionIn);\n    parent.addEventListener(\"mouseleave\", transitionOut);\n    parent.addEventListener(\"touchend\", transitionOut);\n  }\n\n  window.addEventListener(\"resize\", function(e) {\n    if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n      a1 = 1;\n      a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n    } else {\n      a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n      a2 = 1;\n    }\n    object.material.uniforms.res.value = new THREE.Vector4(\n      parent.offsetWidth,\n      parent.offsetHeight,\n      a1,\n      a2\n    );\n    renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n\n    render();\n  });\n\n  this.next = transitionIn;\n  this.previous = transitionOut;\n}\n"],"names":["opts","firstDefined","i","arguments","length","undefined","console","log","parent","dispImage","displacementImage","image1","image2","imagesRatio","intensity1","intensity","intensity2","angle","Math","PI","angle1","commonAngle","angle2","speedIn","speed","speedOut","userHover","hover","easing","video","warn","scene","THREE","Scene","camera","OrthographicCamera","offsetWidth","offsetHeight","position","z","renderer","WebGLRenderer","antialias","alpha","setPixelRatio","setClearColor","setSize","appendChild","domElement","render","loader","TextureLoader","crossOrigin","disp","load","magFilter","minFilter","LinearFilter","requestAnimationFrame","animate","document","createElement","autoplay","loop","muted","src","video2","texture1","VideoTexture","texture2","addEventListener","play","mat","uniforms","value","a1","a2","imageAspect","ShaderMaterial","type","dispFactor","res","Vector4","dpr","window","devicePixelRatio","vertexShader","fragmentShader","transparent","opacity","geometry","PlaneGeometry","object","Mesh","transitionIn","gsap","to","duration","ease","onUpdate","onComplete","transitionOut","add","e","material","this","next","previous"],"mappings":"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"}