<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script>
    var zoomDisplaceEffect = function (params) {
        var parent = params.parent || console.warn("no parent");
        var displacementImage = params.displacementImage || console.warn("displacement image missing");
        var image1 = params.image1 || console.warn("first image missing");
        var image2 = params.image2 || console.warn("second image missing");
        var intensity = params.intensity || 1;
        var speed = params.speed || 1.6;
        var easing = params.easing || Power2.easeInOut;

        var isMobile = function () {
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;
            return /android|bb\d+|meego|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(userAgent.substr(0, 4));
        };

        var scene = new THREE.Scene();
        var camera = new THREE.OrthographicCamera(
            parent.offsetWidth / -2, parent.offsetWidth / 2,
            parent.offsetHeight / 2, parent.offsetHeight / -2,
            1, 1000
        );
        camera.position.z = 1;

        var renderer = new THREE.WebGLRenderer({ antialias: false });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(0xffffff, 0);
        renderer.setSize(parent.offsetWidth, parent.offsetHeight);
        parent.appendChild(renderer.domElement);

        var loader = new THREE.TextureLoader();
        loader.crossOrigin = "";
        var texture1 = loader.load(image1);
        var texture2 = loader.load(image2);
        var displacement = loader.load(displacementImage);
        displacement.wrapS = displacement.wrapT = THREE.RepeatWrapping;

        texture1.magFilter = texture2.magFilter = THREE.LinearFilter;
        texture1.minFilter = texture2.minFilter = THREE.LinearFilter;
        texture1.anisotropy = renderer.getMaxAnisotropy();
        texture2.anisotropy = renderer.getMaxAnisotropy();

        var shaderMaterial = new THREE.ShaderMaterial({
            uniforms: {
                effectFactor: { type: "f", value: intensity },
                dispFactor: { type: "f", value: 0 },
                zoomFactor: { type: "f", value: 1.0 },
                texture: { type: "t", value: texture1 },
                texture2: { type: "t", value: texture2 },
                disp: { type: "t", value: displacement }
            },
            vertexShader: `
                varying vec2 vUv;
                uniform float zoomFactor;
                void main() {
                    vUv = (uv - 0.5) * zoomFactor + 0.5;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `,
            fragmentShader: `
                varying vec2 vUv;
                uniform sampler2D texture;
                uniform sampler2D texture2;
                uniform sampler2D disp;
                uniform float dispFactor;
                uniform float effectFactor;
                void main() {
                    vec2 uv = vUv;
                    vec4 disp = texture2D(disp, uv);
                    vec2 distortedPosition = uv + dispFactor * (disp.r * effectFactor) * (0.5 - uv);
                    vec2 distortedPosition2 = uv - (1.0 - dispFactor) * (disp.r * effectFactor) * (0.5 - uv);

                    vec4 _texture = texture2D(texture, distortedPosition);
                    vec4 _texture2 = texture2D(texture2, distortedPosition2);
                    vec4 finalTexture = mix(_texture, _texture2, dispFactor);

                    gl_FragColor = finalTexture;
                }
            `,
            transparent: true,
            opacity: 1
        });

        var geometry = new THREE.PlaneBufferGeometry(parent.offsetWidth, parent.offsetHeight, 1);
        var mesh = new THREE.Mesh(geometry, shaderMaterial);
        scene.add(mesh);

        var zoomDisplaceAnimation = function () {
            TweenMax.to(shaderMaterial.uniforms.zoomFactor, speed, {
                value: 1,
                ease: easing,
                repeat: -1,
                yoyo: false
            });
            TweenMax.to(shaderMaterial.uniforms.dispFactor, speed, {
                value: 1,
                ease: easing,
                repeat: -1,
                yoyo: false
            });
        };

        var animate = function () {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        };

        animate();
        zoomDisplaceAnimation();
    };

    var myZoomDisplaceEffect = new zoomDisplaceEffect({
        parent: document.querySelector('.displace-flash .tn-atom'),
        image1: 'https://static.tildacdn.com/tild6433-6365-4235-a234-366531393166/Galaxy.png',
        image2: 'https://static.tildacdn.com/tild6433-6365-4235-a234-366531393166/Galaxy.png',
        displacementImage: 'https://static.tildacdn.com/tild6433-6365-4235-a234-366531393166/Galaxy.png',
        speed: 3.0,
        easing: Linear.easeNone
    });
</script>