cheryglsljs 1.1.1 → 1.1.2

package/dist/cherry.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("Cherryglsl",[],n):"object"==typeof exports?exports.Cherryglsl=n():e.Cherryglsl=n()}(this,(()=>(()=>{"use strict";var e={d:(n,r)=>{for(var t in r)e.o(r,t)&&!e.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:r[t]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>t});function r(e=400,n=400){const r=new THREE.Scene,t=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),o=new THREE.WebGLRenderer({alpha:!0});return o.setSize(e,n),{Scene:r,camera:t,renderer:o}}const t={CherryWave:({container:e,image:n,speed:t=.05,strength:o=8,hover:i=!1})=>{if(!n)return void console.log("No image provided");(new THREE.TextureLoader).load(n.src,(a=>{const u={uImage:{value:a},uTime:{value:0},uStrength:{value:i?0:o}},d=r(e.clientWidth,e.clientHeight);let c;d.camera.position.z=190;new THREE.Raycaster;const s=new THREE.Vector2;function l(){const r=e.clientWidth,t=e.clientHeight,o=r/t,i=n.naturalWidth/n.naturalHeight;let a,s;o<i?(a=r,s=r/i):(s=t,a=t*i),c&&(d.Scene.remove(c),c.geometry.dispose(),c.material.dispose()),c=function(e,n){const r=new THREE.PlaneGeometry(e,n,100,100),t=new THREE.ShaderMaterial({vertexShader:"const vertexShader = `\r\n    varying vec2 vUv;\r\n    varying vec3 pos;\r\n    uniform float uTime;\r\n    uniform float uStrength;\r\n\r\n    void main() {\r\n    \r\n        vUv = uv;\r\n       \r\n        vec3 newPosition = position;\r\n\r\n        // Enhanced wave effect: move vertices in all directions\r\n        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);\r\n        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);\r\n        \r\n        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);\r\n\r\n        newPosition.x += waveX;\r\n        newPosition.y += waveY;\r\n        newPosition.z += waveZ;\r\n\r\n        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;\r\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\r\n    }\r\n`;\r\n\r\n\r\nexport default vertexShader;",fragmentShader:"const fragmentShader = `\r\nvarying vec2 vUv;\r\nuniform sampler2D uImage;\r\nuniform float uTime;\r\nuniform float uStrength;\r\nvoid main() {\r\n    // Create a wave effect by modifying the y coordinate\r\n    vec2 uv = vUv;\r\n    \r\n  \r\n    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);\r\n    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);\r\n    \r\n    vec4 color = texture2D(uImage, uv);\r\n    gl_FragColor = color;\r\n}\r\n`;\r\nexport default fragmentShader;",uniforms:u});return new THREE.Mesh(r,t)}(a,s),d.mesh=c,d.Scene.add(c)}return i&&(e.addEventListener("mousemove",(function(n){const r=e.getBoundingClientRect();s.x=(n.clientX-r.left)/r.width*2-1,s.y=-(n.clientY-r.top)/r.height*2+1})),e.addEventListener("mouseenter",(()=>{gsap.to(u.uStrength,{value:o,duration:.5,ease:"power2.out"})})),e.addEventListener("mouseleave",(()=>{gsap.to(u.uStrength,{value:0,duration:.5,ease:"power2.out"})}))),e.innerHTML="",e.appendChild(d.renderer.domElement),window.addEventListener("resize",(function(){const n=e.clientWidth,r=e.clientHeight;d.renderer.setSize(n,r),d.renderer.setPixelRatio(window.devicePixelRatio),d.camera.aspect=n/r,d.camera.updateProjectionMatrix(),l()})),l(),function e(){u.uTime.value+=t,d.renderer.render(d.Scene,d.camera),requestAnimationFrame(e)}(),{mesh:d.mesh,geometry:d.geometry,renderer:d.renderer,Scene:d.Scene}}))}};return n})()));
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("Cherryglsl",[],n):"object"==typeof exports?exports.Cherryglsl=n():e.Cherryglsl=n()}(this,(()=>(()=>{"use strict";var e={d:(n,r)=>{for(var t in r)e.o(r,t)&&!e.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:r[t]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{default:()=>t});function r(e=400,n=400){const r=new THREE.Scene,t=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),o=new THREE.WebGLRenderer({alpha:!0});return o.setSize(e,n),{Scene:r,camera:t,renderer:o}}const t={CherryWave:({container:e,image:n,speed:t=.05,strength:o=8,hover:i=!1})=>{if(!n)return void console.log("No image provided");(new THREE.TextureLoader).load(n.src,(a=>{const u={uImage:{value:a},uTime:{value:0},uStrength:{value:i?0:o}},d=r(e.clientWidth,e.clientHeight);let c;d.camera.position.z=190;new THREE.Raycaster;const s=new THREE.Vector2;function l(){const r=e.clientWidth,t=e.clientHeight,o=r/t,i=n.naturalWidth/n.naturalHeight;let a,s;o<i?(a=r,s=r/i):(s=t,a=t*i),c&&(d.Scene.remove(c),c.geometry.dispose(),c.material.dispose()),c=function(e,n){const r=new THREE.PlaneGeometry(e,n,100,100),t=new THREE.ShaderMaterial({vertexShader:"const vertexShader = `\r\nprecision highp float;\r\n    varying vec2 vUv;\r\n    varying vec3 pos;\r\n    uniform float uTime;\r\n    uniform float uStrength;\r\n\r\n    void main() {\r\n    \r\n        vUv = uv;\r\n       \r\n        vec3 newPosition = position;\r\n\r\n        // Enhanced wave effect: move vertices in all directions\r\n        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);\r\n        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);\r\n        \r\n        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);\r\n\r\n        newPosition.x += waveX;\r\n        newPosition.y += waveY;\r\n        newPosition.z += waveZ;\r\n\r\n        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;\r\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\r\n    }\r\n`;\r\n\r\n\r\nexport default vertexShader;",fragmentShader:"const fragmentShader = `\r\nprecision highp float;\r\nvarying vec2 vUv;\r\nuniform sampler2D uImage;\r\nuniform float uTime;\r\nuniform float uStrength;\r\nvoid main() {\r\n    // Create a wave effect by modifying the y coordinate\r\n    vec2 uv = vUv;\r\n    \r\n  \r\n    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);\r\n    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);\r\n    \r\n    vec4 color = texture2D(uImage, uv);\r\n    gl_FragColor = color;\r\n}\r\n`;\r\nexport default fragmentShader;",uniforms:u});return new THREE.Mesh(r,t)}(a,s),d.mesh=c,d.Scene.add(c)}return i&&(e.addEventListener("mousemove",(function(n){const r=e.getBoundingClientRect();s.x=(n.clientX-r.left)/r.width*2-1,s.y=-(n.clientY-r.top)/r.height*2+1})),e.addEventListener("mouseenter",(()=>{gsap.to(u.uStrength,{value:o,duration:.5,ease:"power2.out"})})),e.addEventListener("mouseleave",(()=>{gsap.to(u.uStrength,{value:0,duration:.5,ease:"power2.out"})}))),e.innerHTML="",e.appendChild(d.renderer.domElement),window.addEventListener("resize",(function(){const n=e.clientWidth,r=e.clientHeight;d.renderer.setSize(n,r),d.renderer.setPixelRatio(window.devicePixelRatio),d.camera.aspect=n/r,d.camera.updateProjectionMatrix(),l()})),l(),function e(){u.uTime.value+=t,d.renderer.render(d.Scene,d.camera),requestAnimationFrame(e)}(),{mesh:d.mesh,geometry:d.geometry,renderer:d.renderer,Scene:d.Scene}}))}};return n})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheryglsljs",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A Three.js + GLSL-based wave effect library.",
   "main": "dist/cherry.js",
 "module": "dist/cherry.js",

package/src/effects/waveEffect/FragementShader.glsl.js

@@ -1,4 +1,5 @@
 const fragmentShader = `
+precision highp float;
 varying vec2 vUv;
 uniform sampler2D uImage;
 uniform float uTime;

package/src/effects/waveEffect/Vertexshader.glsl.js

@@ -1,4 +1,5 @@
 const vertexShader = `
+precision highp float;
     varying vec2 vUv;
     varying vec3 pos;
     uniform float uTime;