https://obrixlabs.com/wp-content/themes/aimo/elements/assets/js/effects.js?ver=1.0.1

1( function( $ ) {
2    // Background Mousemove Effect
3    function hoverFlowmapDeformation() {
4        let els = $('.ripple');
5        if (!els.length) return;
6    
7        const flowmapDeformation1 = (el) => {
8            const elWidth = $(el).outerWidth();
9            const elHeight = $(el).outerHeight();
10            const imgSize = [elWidth, elHeight];
11            const vertex = `
12                attribute vec2 uv;
13                attribute vec2 position;
14                varying vec2 vUv;
15                void main() {
16                    vUv = uv;
17                    gl_Position = vec4(position, 0, 1);
18                }
19            `;
20            const fragment = `
21                precision highp float;
22                precision highp int;
23                uniform sampler2D tWater;
24                uniform sampler2D tFlow;
25                uniform float uTime;
26                varying vec2 vUv;
27                uniform vec4 res;
28    
29                void main() {
30                    vec3 flow = texture2D(tFlow, vUv).rgb;
31                    vec2 uv = .5 * gl_FragCoord.xy / res.xy;
32                    vec2 myUV = (uv - vec2(0.5)) * res.zw + vec2(0.5);
33                    myUV -= flow.xy * (0.10 * 0.7);
34                    vec2 myUV2 = (uv - vec2(0.5)) * res.zw + vec2(0.5);
35                    myUV2 -= flow.xy * (0.075 * 0.7);
36                    vec2 myUV3 = (uv - vec2(0.5)) * res.zw + vec2(0.5);
37                    myUV3 -= flow.xy * (0.05 * 0.7);
38                    vec3 tex = texture2D(tWater, myUV).rgb;
39                    vec3 tex2 = texture2D(tWater, myUV2).rgb;
40                    vec3 tex3 = texture2D(tWater, myUV3).rgb;
41                    gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
42                }
43            `;
44    
45            const renderer = new ogl.Renderer({ dpr: 2 });
46            const gl = renderer.gl;
47    
48            $(el).append(gl.canvas);
49    
50            let bgImage = $(el).css('background-image');
51            bgImage = bgImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); // Loại bỏ 'url("")'
52    
53            const img = new Image();
54            const texture = new ogl.Texture(gl, {
55                minFilter: gl.LINEAR,
56                magFilter: gl.LINEAR
57            });
58    
59            img.onload = () => (texture.image = img);
60            img.crossOrigin = "Anonymous";
61            img.src = bgImage;
62    
63            let aspect = 1;
64            const mouse = new ogl.Vec2(-1);
65            const velocity = new ogl.Vec2();
66    
67            function resize() {
68                const elRect = $(el).get(0).getBoundingClientRect();
69                const elWidth = elRect.width;
70                const elHeight = elRect.height;
71    
72                let a1, a2;
73                const imageAspect = imgSize[1] / imgSize[0];
74                if (elHeight / elWidth < imageAspect) {
75                    a1 = 1;
76                    a2 = elHeight / elWidth / imageAspect;
77                } else {
78                    a1 = (elWidth / elHeight) * imageAspect;
79                    a2 = 1;
80                }
81    
82                mesh.program.uniforms.res.value = new ogl.Vec4(
83                    elWidth,
84                    elHeight,
85                    a1,
86                    a2
87                );
88                renderer.setSize(elWidth, elHeight);
89                aspect = elWidth / elHeight;
90            }
91    
92            const flowmap = new ogl.Flowmap(gl);
93            const geometry = new ogl.Geometry(gl, {
94                position: {
95                    size: 2,
96                    data: new Float32Array([-1, -1, 3, -1, -1, 3])
97                },
98                uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
99            });
100    
101            const program = new ogl.Program(gl, {
102                vertex,
103                fragment,
104                uniforms: {
105                    uTime: { value: 0 },
106                    tWater: { value: texture },
107                    res: { value: new ogl.Vec4(elWidth, elHeight, 1, 1) },

108                    tFlow: flowmap.uniform
109                }
110            });
111    
112            const mesh = new ogl.Mesh(gl, { geometry, program });
113    
114            window.addEventListener("resize", resize, false);
115            resize();
116    
117            const isTouchCapable = "ontouchstart" in window;
118            if (isTouchCapable) {
119                $(el).on("touchstart", updateMouse);
120                $(el).on("touchmove", updateMouse);
121            } else {
122                $(el).on("mousemove", updateMouse);
123            }
124    
125            let lastTime;
126            const lastMouse = new ogl.Vec2();
127    
128            function updateMouse(e) {
129                e.preventDefault();
130                let mouseX, mouseY;
131    
132                if (e.changedTouches && e.changedTouches.length) {
133                    e.x = e.changedTouches[0].pageX;
134                    e.y = e.changedTouches[0].pageY;
135                }
136    
137                if (e.x === undefined) {
138                    e.x = e.pageX;
139                    e.y = e.pageY;
140                }
141    
142                const rect = $(el).get(0).getBoundingClientRect();
143                mouseX = e.pageX - (rect.left + window.scrollX);
144                mouseY = e.pageY - (rect.top + window.scrollY);
145    
146                mouse.set(mouseX / rect.width, 1.0 - mouseY / rect.height);
147    
148                if (!lastTime) {
149                    lastTime = performance.now();
150                    lastMouse.set(e.x, e.y);
151                }
152    
153                const deltaX = e.x - lastMouse.x;
154                const deltaY = e.y - lastMouse.y;
155                lastMouse.set(e.x, e.y);
156                let time = performance.now();
157                let delta = Math.max(10.4, time - lastTime);
158                lastTime = time;
159    
160                velocity.x = deltaX / delta;
161                velocity.y = deltaY / delta;
162                velocity.needsUpdate = true;
163            }
164    
165            requestAnimationFrame(update);
166            function update(t) {
167                requestAnimationFrame(update);
168    
169                if (!velocity.needsUpdate) {
170                    mouse.set(-1);
171                    velocity.set(0);
172                }
173    
174                velocity.needsUpdate = false;
175                flowmap.aspect = aspect;
176                flowmap.mouse.copy(mouse);
177                flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
178                flowmap.update();
179                program.uniforms.uTime.value = t * 0.01;
180                renderer.render({ scene: mesh });
181            }
182        };
183    
184        els.each(function (i, el) {
185            flowmapDeformation1(el);
186        });
187    }
188    
189
190    $( window ).on( 'elementor/frontend/init', function() {
191        hoverFlowmapDeformation()
192        // elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_background.default`, function( $scope ) {
193        //     hoverFlowmapDeformation($scope);
194        // });
195    });
196} )( jQuery );
197