cheryglsljs 1.1.1 → 1.1.3

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,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},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:()=>r});function t(e=400,n=400){const t=new THREE.Scene,r=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),o=new THREE.WebGLRenderer({alpha:!0});return o.setSize(e,n),{Scene:t,camera:r,renderer:o}}const r={CherryWave:({container:e,image:n,speed:r=.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}},c=t(e.clientWidth,e.clientHeight);let s;c.camera.position.z=190;new THREE.Raycaster;const d=new THREE.Vector2;function l(){const t=e.clientWidth,r=e.clientHeight,o=t/r,i=n.naturalWidth/n.naturalHeight;let a,d;o<i?(a=t,d=t/i):(d=r,a=r*i),s&&(c.Scene.remove(s),s.geometry.dispose(),s.material.dispose()),s=function(e,n){const t=new THREE.PlaneGeometry(e,n,100,100),r=new THREE.ShaderMaterial({vertexShader:"\nprecision highp float;\n    varying vec2 vUv;\n    varying vec3 pos;\n    uniform float uTime;\n    uniform float uStrength;\n\n    void main() {\n    \n        vUv = uv;\n       \n        vec3 newPosition = position;\n\n        // Enhanced wave effect: move vertices in all directions\n        float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);\n        float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);\n        \n        float waveZ = uStrength * sin(10.0 * uv.x + uTime * 2.5);\n\n        newPosition.x += waveX;\n        newPosition.y += waveY;\n        newPosition.z += waveZ;\n\n        pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);\n    };",fragmentShader:"\nprecision highp float;\nvarying vec2 vUv;\nuniform sampler2D uImage;\nuniform float uTime;\nuniform float uStrength;\nvoid main() {\n    // Create a wave effect by modifying the y coordinate\n    vec2 uv = vUv;\n    \n  \n    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);\n    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);\n    \n    vec4 color = texture2D(uImage, uv);\n    gl_FragColor = color;\n};",uniforms:u});return new THREE.Mesh(t,r)}(a,d),c.mesh=s,c.Scene.add(s)}return i&&(e.addEventListener("mousemove",(function(n){const t=e.getBoundingClientRect();d.x=(n.clientX-t.left)/t.width*2-1,d.y=-(n.clientY-t.top)/t.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(c.renderer.domElement),window.addEventListener("resize",(function(){const n=e.clientWidth,t=e.clientHeight;c.renderer.setSize(n,t),c.renderer.setPixelRatio(window.devicePixelRatio),c.camera.aspect=n/t,c.camera.updateProjectionMatrix(),l()})),l(),function e(){u.uTime.value+=r,c.renderer.render(c.Scene,c.camera),requestAnimationFrame(e)}(),{mesh:c.mesh,geometry:c.geometry,renderer:c.renderer,Scene:c.Scene}}))}};return n})()));

package/package.json

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

package/src/effects/waveEffect/Effect.js

@@ -1,6 +1,6 @@
 import createWaveAssets from '../../utils/init.js';
-import fragmentShader from './FragementShader.glsl.js';
-import vertexShader from './Vertexshader.glsl.js';
+import fragmentShader from './FragementShader.glsl';
+import vertexShader from './Vertexshader.glsl';
 
  const CherryWave = ({ container, image, speed = 0.05, strength = 8, hover = false }) => {
   if (!image) {

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

@@ -1,4 +1,5 @@
-const fragmentShader = `
+export default /* glsl */`
+precision highp float;
 varying vec2 vUv;
 uniform sampler2D uImage;
 uniform float uTime;
@@ -13,6 +14,5 @@ void main() {
     
     vec4 color = texture2D(uImage, uv);
     gl_FragColor = color;
-}
-`;
-export default fragmentShader;
+};`
+

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

@@ -1,4 +1,5 @@
-const vertexShader = `
+export default /* glsl */`
+precision highp float;
     varying vec2 vUv;
     varying vec3 pos;
     uniform float uTime;
@@ -22,8 +23,7 @@ const vertexShader = `
 
         pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;
         gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
-    }
-`;
+    };`
+
 
 
-export default vertexShader;