{"version":3,"file":"hover-effect.umd.js","sources":["../src/hover-effect.js"],"sourcesContent":["import * as THREE from 'three';\nimport TweenMax from 'gsap/TweenMax';\n\nexport default function (opts) {\n\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('%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ', '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.easeOut);\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 TweenMax.\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.src = image1;\n    video.load();\n\n    var video2 = document.createElement('video');\n    video2.autoplay = true;\n    video2.loop = 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('loadeddata', 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    video.addEventListener('loadeddata', 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    }, false);\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(parent.offsetWidth, parent.offsetHeight, a1, a2)\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.PlaneBufferGeometry(parent.offsetWidth, parent.offsetHeight, 1);\n  var object = new THREE.Mesh(geometry, mat);\n  scene.add(object);\n\n  function transitionIn() {\n    TweenMax.to(mat.uniforms.dispFactor, speedIn, {\n      value: 1,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render,\n    });\n  }\n\n  function transitionOut() {\n    TweenMax.to(mat.uniforms.dispFactor, 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(parent.offsetWidth, parent.offsetHeight, a1, a2);\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","commonAngle","angle","Math","PI","angle1","angle2","speedIn","speed","speedOut","userHover","hover","easing","Expo","easeOut","video","scene","THREE","camera","offsetWidth","offsetHeight","position","z","renderer","antialias","alpha","setPixelRatio","setClearColor","setSize","appendChild","domElement","render","loader","crossOrigin","a1","a2","disp","load","magFilter","minFilter","animate","requestAnimationFrame","document","createElement","autoplay","loop","src","video2","texture1","texture2","addEventListener","play","mat","uniforms","value","imageAspect","type","dispFactor","res","dpr","window","devicePixelRatio","vertexShader","fragmentShader","transparent","opacity","geometry","object","add","transitionIn","transitionOut","e","material","next","previous","warn","TweenMax","to","ease","onUpdate","onComplete"],"mappings":"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"}