cheryglsljs 1.1.3 → 1.1.5

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,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})()));
+!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 o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},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:()=>o});function t(e=400,n=400){const t=new THREE.Scene,o=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.1,1e3),r=new THREE.WebGLRenderer({alpha:!1});return r.setSize(e,n),{Scene:t,camera:o,renderer:r}}const o={CherryWave:({container:e,image:n,speed:o=.05,strength:r=.02,hover:i=!1,light:a})=>{if(!n)return void console.log("No image provided");(new THREE.TextureLoader).load(n.src,(n=>{const u={uImage:{value:n},uTime:{value:0},uStrength:{value:i?0:r},uLight:{value:a}},s=t(e.clientWidth,e.clientHeight);let l;function v(){l&&(s.Scene.remove(l),l.geometry.dispose(),l.material.dispose()),l=function(){const n=e.clientWidth/e.clientHeight*2.3,t=new THREE.PlaneGeometry(n,2.3,100,100),o=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        \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;\n\nvarying vec2 vUv;\nuniform sampler2D uImage;\nuniform float uTime;\n\nuniform float uStrength;\nuniform bool uLight;\n\n\nvoid main() {\n    vec2 uv = vUv;\n    \n\n   \n  \n\n    // Apply wave distortion\n    float waveX = sin(10.0 * uv.y + uTime * 2.0);\n    float waveY = cos(10.0 * uv.x + uTime * 2.0);\n    uv.x += (uStrength * 0.05) * waveX;\n    uv.y += (uStrength * 0.05) * waveY;\n\n    \n\n    vec4 color = texture2D(uImage, uv);\n    if(!uLight){\n        color.x+=smoothstep(0.001,0.6,sin(2.0*uTime));\n        color.y+=smoothstep(0.2,0.6,sin(0.2*uTime));\n    }\n    \n   gl_FragColor = color;\n}\n",uniforms:u,transparent:!0});return new THREE.Mesh(t,o)}(),s.mesh=l,s.Scene.add(l)}function c(){const n=e.clientWidth,t=e.clientHeight;s.renderer.setSize(n,t),s.renderer.setPixelRatio(window.devicePixelRatio),s.camera.aspect=n/t,s.camera.updateProjectionMatrix(),v()}return s.camera.fov=2*Math.atan(e.clientHeight/2/600)*(180/Math.PI),s.camera.position.z=2.8,i&&(e.addEventListener("mouseenter",(()=>{gsap.to(u.uStrength,{value:r,duration:.5,ease:"power2.out"})})),e.addEventListener("mouseleave",(()=>{gsap.to(u.uStrength,{value:0,duration:.5,ease:"power2.out"})}))),e.innerHTML="",e.appendChild(s.renderer.domElement),window.addEventListener("resize",c),c(),function e(){u.uTime.value+=o,s.renderer.render(s.Scene,s.camera),requestAnimationFrame(e)}(),{mesh:s.mesh,geometry:s.geometry,renderer:s.renderer,Scene:s.Scene}}))}};return n})()));

package/package.json

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

package/src/effects/TransitionEffect/Effect.js

@@ -0,0 +1,161 @@
+
+import createWaveAssets from '../../utils/init.js';
+import fragmentShader from './FragementShader.glsl.js';
+import vertexShader from './Vertexshader.glsl.js';
+
+const CherryWave = ({ container, image, speed = 0.05, strength = 0.02, hover = false,light=false }) => {
+  if (!image) {
+    console.log("No image provided");
+    return;
+  }
+const uniforms={
+    uImage: { value: null },
+     uImage2: { value: null },
+      uTime: { value: 0.0 },
+      uStrength: { value: hover ? 0 : strength },
+      uLight:light,
+       uMouse: { value: new THREE.Vector2(-10, -10) },
+       uRadius:{value:-4.0}
+};
+  const textureLoader = new THREE.TextureLoader();
+  const images = ["i3.jpg","testimage.jpeg"];
+  let textures=[];
+  let index;
+  images.map((img,i)=>{
+ textureLoader.load(img, (texture) => {
+  index =0;
+   if(i==1) uniforms.uImage2.value=texture;
+    if(i==0) uniforms.uImage.value=texture;
+    textures.push(texture)
+      });
+  })
+    
+  const waveassets = createWaveAssets(container.clientWidth, container.clientHeight);
+
+    // Set camera to frame a 2x2 unit square
+    waveassets.camera.fov = 2 * Math.atan(container.clientHeight / 2 / 600) * (180 / Math.PI);
+    waveassets.camera.position.z = 2.8;
+
+    let mesh;
+
+    function createMesh() {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+
+     
+      const aspect = width / height;
+      const worldHeight = 2.3;
+      const worldWidth = worldHeight * aspect;
+
+      const geometry = new THREE.PlaneGeometry(worldWidth, worldHeight, 100, 100);
+      const material = new THREE.ShaderMaterial({
+        vertexShader,
+        fragmentShader,
+        uniforms,
+        transparent: true
+      });
+
+      return new THREE.Mesh(geometry, material);
+    }
+
+    function addMesh() {
+      if (mesh) {
+        waveassets.Scene.remove(mesh);
+        mesh.geometry.dispose();
+        mesh.material.dispose();
+      }
+
+      mesh = createMesh();
+      waveassets.mesh = mesh;
+      waveassets.Scene.add(mesh);
+    }
+
+    function onResize() {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+
+      waveassets.renderer.setSize(width, height);
+      waveassets.renderer.setPixelRatio(window.devicePixelRatio);
+
+      waveassets.camera.aspect = width / height;
+      waveassets.camera.updateProjectionMatrix();
+
+      addMesh();
+    }
+
+      function onMouseMove(event) {
+            const bounds = container.getBoundingClientRect();
+            const x = ((event.clientX - bounds.left) / bounds.width) - 0.5;
+            const y = -((event.clientY - bounds.top) / bounds.height) + 0.5;
+
+            gsap.to(uniforms.uMouse.value, {
+                x: x,
+                y: y,
+                duration: 0.2
+            });
+            // TransitionAssets.renderer.render(TransitionAssets.Scene, TransitionAssets.camera);
+        }
+
+        container.addEventListener('mousemove', onMouseMove);
+    if (hover) {
+
+      container.addEventListener('mouseenter', () => {
+        gsap.to(uniforms.uStrength, {
+          value: strength,
+          duration: 0.5,
+          ease: 'power2.out'
+        });
+         gsap.to(uniforms.uRadius, {
+                value:0.02,
+                duration: 0.2
+            });
+      });
+
+      container.addEventListener('mouseleave', () => {
+        gsap.to(uniforms.uStrength, {
+          value: 0,
+          duration: 0.5,
+          ease: 'power2.out'
+        });
+         gsap.to(uniforms.uRadius, {
+                value:-100,
+                duration: 0.6
+            });
+      });
+    }
+
+    container.innerHTML = '';
+    container.appendChild(waveassets.renderer.domElement);
+
+    window.addEventListener('resize', onResize);
+    onResize();
+
+    function animate() {
+      uniforms.uTime.value += speed;
+      waveassets.renderer.render(waveassets.Scene, waveassets.camera);
+      requestAnimationFrame(animate);
+    }
+   
+    animate();
+    container.addEventListener('click',()=>{
+      gsap.to(uniforms.uRadius,{
+        value:20,
+        duration:3,
+        onComplete:()=>{
+          uniforms.uRadius.value=0.01
+        uniforms.uImage.value=textures[(index+1)%textures.length]
+         uniforms.uImage2.value=textures[(index+2)%textures.length]  
+         index++;
+        }
+      })
+    })
+
+    return {
+      mesh: waveassets.mesh,
+      geometry: waveassets.geometry,
+      renderer: waveassets.renderer,
+      Scene: waveassets.Scene
+    };
+};
+
+export default CherryWave;

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

@@ -0,0 +1,62 @@
+export default /* glsl */`
+precision highp float;
+uniform vec2 uMouse;
+varying vec2 vUv;
+uniform sampler2D uImage;
+uniform float uTime;
+uniform float uRadius;
+uniform float uStrength;
+uniform bool uLight;
+uniform sampler2D uImage2;
+float rand(float n){return fract(sin(n) * 43758.5453123);}
+float rand(vec2 n){return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453123);}
+
+float noise(float p){
+    float fl = floor(p);
+    float fc = fract(p);
+    return mix(rand(fl), rand(fl + 1.0), fc);
+}
+    
+float noise(vec2 n) {
+    const vec2 d = vec2(0.0, 1.0);
+    vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+    return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+
+void main() {
+    vec2 uv = vUv;
+      vec2 guv = vUv;
+    guv.x -= 0.5;
+    guv.y -= 0.5;
+
+    // Calculate distance from mouse
+    float dist = length(guv - uMouse);
+
+   
+    float edgeNoise = noise(guv * 10.0 + uTime * 2.0 ) * 0.2;
+
+    // Create mask for area following mouse, with wobbly edge
+    float inside = step(dist, uRadius + edgeNoise);
+
+    // Apply noise only inside the circle
+    float n = noise(guv * 0.2);
+
+    vec3 circle = mix(vec3(1.0), vec3(n), inside);
+
+    // Apply wave distortion
+    float waveX = sin(10.0 * uv.y + uTime * 2.0);
+    float waveY = cos(10.0 * uv.x + uTime * 2.0);
+    uv.x += (uStrength * 0.05) * waveX;
+    uv.y += (uStrength * 0.05) * waveY;
+
+    
+
+    vec4 color = texture2D(uImage, uv);
+    if(uLight){
+        color.x-=smoothstep(0.001,0.6,sin(2.0*uTime));
+        color.y-=smoothstep(0.2,0.6,sin(0.2*uTime));
+    }
+    vec4 color2 = texture2D(uImage2,uv);
+   gl_FragColor = mix(color,(vec4(n)+color2),inside);
+}
+`;

package/src/effects/TransitionEffect/VertexShader.glsl.js

@@ -0,0 +1,11 @@
+export default /* glsl */`
+precision highp float;
+varying vec2 vUv; 
+
+    void main() {     
+        vUv = uv;   
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }`
+
+
+

package/src/effects/waveEffect/Effect.js

@@ -1,8 +1,9 @@
+
 import createWaveAssets from '../../utils/init.js';
-import fragmentShader from './FragementShader.glsl';
-import vertexShader from './Vertexshader.glsl';
+import fragmentShader from './FragementShader.glsl.js';
+import vertexShader from './Vertexshader.glsl.js';
 
- const CherryWave = ({ container, image, speed = 0.05, strength = 8, hover = false }) => {
+const CherryWave = ({ container, image, speed = 0.05, strength = 0.02, hover = false,light }) => {
   if (!image) {
     console.log("No image provided");
     return;
@@ -13,49 +14,48 @@ import vertexShader from './Vertexshader.glsl';
     const uniforms = {
       uImage: { value: texture },
       uTime: { value: 0.0 },
-      uStrength: { value: hover ? 0 : strength }
+      uStrength: { value: hover ? 0 : strength },
+      uLight:{value:light}
+       
     };
+    
 
     const waveassets = createWaveAssets(container.clientWidth, container.clientHeight);
-    waveassets.camera.position.z = 190;
+
+    // Set camera to frame a 2x2 unit square
+    waveassets.camera.fov = 2 * Math.atan(container.clientHeight / 2 / 600) * (180 / Math.PI);
+    waveassets.camera.position.z = 2.8;
 
     let mesh;
-    const raycaster = new THREE.Raycaster();
-    const mouse = new THREE.Vector2();
-    let isHovering = false;
 
-    function createMesh(width, height) {
-      const geometry = new THREE.PlaneGeometry(width, height, 100, 100);
+    function createMesh() {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+
+     
+      const aspect = width / height;
+      const worldHeight = 2.3;
+      const worldWidth = worldHeight * aspect;
+
+      const geometry = new THREE.PlaneGeometry(worldWidth, worldHeight, 100, 100);
       const material = new THREE.ShaderMaterial({
         vertexShader,
         fragmentShader,
-        uniforms
+        uniforms,
+        transparent: true
       });
+
       return new THREE.Mesh(geometry, material);
     }
 
     function addMesh() {
-      const containerWidth = container.clientWidth;
-      const containerHeight = container.clientHeight;
-      const containerAspect = containerWidth / containerHeight;
-      const imageAspect = image.naturalWidth / image.naturalHeight;
-
-      let scaleWidth, scaleHeight;
-      if (containerAspect < imageAspect) {
-        scaleWidth = containerWidth;
-        scaleHeight = containerWidth / imageAspect;
-      } else {
-        scaleHeight = containerHeight;
-        scaleWidth = containerHeight * imageAspect;
-      }
-
       if (mesh) {
         waveassets.Scene.remove(mesh);
         mesh.geometry.dispose();
         mesh.material.dispose();
       }
 
-      mesh = createMesh(scaleWidth, scaleHeight);
+      mesh = createMesh();
       waveassets.mesh = mesh;
       waveassets.Scene.add(mesh);
     }
@@ -73,14 +73,8 @@ import vertexShader from './Vertexshader.glsl';
       addMesh();
     }
 
-    function onMouseMove(event) {
-      const bounds = container.getBoundingClientRect();
-      mouse.x = ((event.clientX - bounds.left) / bounds.width) * 2 - 1;
-      mouse.y = -((event.clientY - bounds.top) / bounds.height) * 2 + 1;
-    }
-
+    
     if (hover) {
-      container.addEventListener('mousemove', onMouseMove);
 
       container.addEventListener('mouseenter', () => {
         gsap.to(uniforms.uStrength, {
@@ -88,6 +82,7 @@ import vertexShader from './Vertexshader.glsl';
           duration: 0.5,
           ease: 'power2.out'
         });
+      
       });
 
       container.addEventListener('mouseleave', () => {
@@ -96,20 +91,22 @@ import vertexShader from './Vertexshader.glsl';
           duration: 0.5,
           ease: 'power2.out'
         });
+         
       });
     }
 
     container.innerHTML = '';
     container.appendChild(waveassets.renderer.domElement);
+
     window.addEventListener('resize', onResize);
-    addMesh();
+    onResize();
 
     function animate() {
       uniforms.uTime.value += speed;
       waveassets.renderer.render(waveassets.Scene, waveassets.camera);
       requestAnimationFrame(animate);
     }
-
+   
     animate();
 
     return {
@@ -122,4 +119,3 @@ import vertexShader from './Vertexshader.glsl';
 };
 
 export default CherryWave;
-

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

@@ -1,18 +1,35 @@
 export default /* glsl */`
 precision highp float;
+
 varying vec2 vUv;
 uniform sampler2D uImage;
 uniform float uTime;
+
 uniform float uStrength;
+uniform bool uLight;
+
+
 void main() {
-    // Create a wave effect by modifying the y coordinate
     vec2 uv = vUv;
     
+
+   
   
-    uv.y += uStrength/400.0 * sin(10.0 * uv.x + uTime * 2.0);
-    uv.x += uStrength/400.0 * sin(10.0 * uv.y + uTime * 2.0);
+
+    // Apply wave distortion
+    float waveX = sin(10.0 * uv.y + uTime * 2.0);
+    float waveY = cos(10.0 * uv.x + uTime * 2.0);
+    uv.x += (uStrength * 0.05) * waveX;
+    uv.y += (uStrength * 0.05) * waveY;
+
     
-    vec4 color = texture2D(uImage, uv);
-    gl_FragColor = color;
-};`
 
+    vec4 color = texture2D(uImage, uv);
+    if(!uLight){
+        color.x+=smoothstep(0.001,0.6,sin(2.0*uTime));
+        color.y+=smoothstep(0.2,0.6,sin(0.2*uTime));
+    }
+    
+   gl_FragColor = color;
+}
+`;

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

@@ -11,7 +11,7 @@ precision highp float;
        
         vec3 newPosition = position;
 
-        // Enhanced wave effect: move vertices in all directions
+        
         float waveX = uStrength * sin(10.0 * uv.y + uTime * 2.0);
         float waveY = uStrength * cos(12.0 * uv.x + uTime * 1.5);
         
@@ -23,7 +23,7 @@ precision highp float;
 
         pos = (modelViewMatrix * vec4(newPosition, 1.0)).xyz;
         gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
-    };`
+    }`
 
 
 

package/src/utils/init.js

@@ -6,7 +6,8 @@ const camera = () => new THREE.PerspectiveCamera(
     0.1,
     1000
 );
-const renderer = () => new THREE.WebGLRenderer({alpha:true});
+
+const renderer = () => new THREE.WebGLRenderer({alpha:false});
 
 export default function createWaveAssets(width = 400, height = 400) {
     const SceneInstance = Scene();