J0SUKE · J0SUKE · Aug 23, 2024 · Aug 23, 2024 · Aug 25, 2024
diff --git a/index.html b/index.html
@@ -9,11 +9,7 @@
   <body>
     <div id="app">
       <div class="container">
-        <div class="wrapper">
-          <div class="image-container">
-            <img src="./3.jpg" alt="" />
-          </div>
-        </div>
+        <img src="./3.jpg" alt="" />
       </div>
     </div>
     <canvas id="webgl"></canvas>

diff --git a/src/components/canvas.ts b/src/components/canvas.ts
@@ -30,7 +30,7 @@ export default class Canvas {
     this.createRayCaster()
     this.createOrbitControls()
     this.addEventListeners()
-    this.createDebug()
+    //this.createDebug()
     this.createMedias()
     this.render()
   }
@@ -92,10 +92,12 @@ export default class Canvas {
     this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
 
     this.raycaster.setFromCamera(this.mouse, this.camera)
+
     const intersects = this.raycaster.intersectObjects(this.scene.children)
     const target = intersects[0]
     if (target && 'material' in target.object) {
       const targetMesh = intersects[0].object as THREE.Mesh
+
       this.medias.forEach((media) => {
         if (media.mesh === targetMesh && target.uv) {
           media.onMouseMove(target.uv)
@@ -106,7 +108,6 @@ export default class Canvas {
 
   addEventListeners() {
     window.addEventListener('mousemove', this.onMouseMove.bind(this))
-    window.addEventListener('resize', this.onResize.bind(this))
   }
 
   onResize() {

diff --git a/src/components/media.ts b/src/components/media.ts
@@ -54,7 +54,7 @@ export default class Media {
 
     this.setTexture()
     this.createGPGPU()
-    this.setupDebug()
+    //this.setupDebug()
 
     this.scene.add(this.mesh)
   }
@@ -63,21 +63,33 @@ export default class Media {
     this.geometry = new THREE.PlaneGeometry(1, 1)
   }
 
+  //
   createMaterial() {
     this.material = new THREE.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         uTexture: new THREE.Uniform(new THREE.Vector4()),
+        uContainerResolution: new THREE.Uniform(new THREE.Vector2(window.innerWidth, window.innerHeight)),
+        uImageResolution: new THREE.Uniform(new THREE.Vector2()),
+
+        //add this new Uniform
         uGrid: new THREE.Uniform(new THREE.Vector4()),
-        uContainerResolution: new THREE.Uniform(new THREE.Vector2()),
-        uImageResolution: new THREE.Uniform(new THREE.Vector2(0, 0)),
-        uDisplacement: new THREE.Uniform(0),
-        uRGBshift: new THREE.Uniform(new THREE.Vector2(0.02, 0.0)),
       },
     })
   }
 
+  setTexture() {
+    this.material.uniforms.uTexture.value = new THREE.TextureLoader().load(this.element.src, ({ image }) => {
+      const { naturalWidth, naturalHeight } = image
+      this.material.uniforms.uImageResolution.value = new THREE.Vector2(naturalWidth, naturalHeight)
+    })
+  }
+
+  createMesh() {
+    this.mesh = new THREE.Mesh(this.geometry, this.material)
+  }
+
   setupDebug() {
     const opt = {
       dis: this.material.uniforms.uDisplacement.value > 0,
@@ -95,10 +107,6 @@ export default class Media {
     //this.debug.add(this.material.uniforms.uRGBshift.value, 'y').min(-0.1).max(0.1).step(0.001).name('rgb Y')
   }
 
-  createMesh() {
-    this.mesh = new THREE.Mesh(this.geometry, this.material)
-  }
-
   createGPGPU() {
     this.gpgpu = new GPGPU({
       renderer: this.renderer,
@@ -143,19 +151,6 @@ export default class Media {
     this.mesh.position.y = this.meshPostion.y
   }
 
-  setTexture() {
-    this.material.uniforms.uTexture.value = new THREE.TextureLoader().load(this.element.src, ({ image }) => {
-      const { naturalWidth, naturalHeight } = image
-      const container = document.querySelector('.image-container') as HTMLElement
-      const { width, height } = container.getBoundingClientRect()
-
-      console.log(naturalWidth, naturalHeight)
-
-      this.material.uniforms.uImageResolution.value = new THREE.Vector2(naturalWidth, naturalHeight)
-      this.material.uniforms.uContainerResolution.value = new THREE.Vector2(width, height)
-    })
-  }
-
   updateScroll(scrollY: number) {
     this.currentScroll = (-scrollY * this.sizes.height) / window.innerHeight
 
@@ -182,12 +177,8 @@ export default class Media {
     this.gpgpu.updateMouse(uv)
   }
 
-  render(time: number) {
-    const deltaTime = this.time - time
-    this.time = time
-
-    this.gpgpu.render(time, deltaTime)
-
+  render() {
+    this.gpgpu.render()
     this.material.uniforms.uGrid.value = this.gpgpu.getTexture()
   }
 }
diff --git a/src/shaders/fragment.glsl b/src/shaders/fragment.glsl
@@ -1,11 +1,9 @@
 uniform sampler2D uTexture;
 uniform sampler2D uGrid;
-varying vec2 vUv;
 
+varying vec2 vUv;
 uniform vec2 uContainerResolution;
-uniform float uDisplacement;
 uniform vec2 uImageResolution;
-uniform vec2 uRGBshift;
 
 
 vec2 coverUvs(vec2 imageRes,vec2 containerRes)
@@ -29,64 +27,58 @@ vec2 coverUvs(vec2 imageRes,vec2 containerRes)
     return newUvs;
 }
 
-
-float random (vec2 st) {
-    return fract(sin(dot(st.xy,
-                         vec2(12.9898,78.233)))*
-        43758.5453123);
-}
-
 void main()
 {
-    vec2 newUvs = coverUvs(uImageResolution,uContainerResolution);
-
-
-    vec2 squareUvs = coverUvs(vec2(1.),uContainerResolution);
-
-    vec4 image = texture2D(uTexture,newUvs);
+    vec2 newUvs = coverUvs(uImageResolution,uContainerResolution);     
+    vec2 squareUvs = coverUvs(vec2(1.),uContainerResolution);       
+
+    vec4 image = texture2D(uTexture,newUvs);    
     vec4 displacement = texture2D(uGrid,squareUvs);
 
     vec2 finalUvs = newUvs - displacement.rg*0.01;
 
     vec4 finalImage = texture2D(uTexture,finalUvs);
 
-    //rgb shift
+
+    /* 
+    * rgb shift 
+    */
+
+    //separate set of UVs for each color
     vec2 redUvs = finalUvs;
     vec2 blueUvs = finalUvs;
     vec2 greenUvs = finalUvs;    
 
-
+    //The shift will follow the displacement direction but with a reduced intensity, 
+    //we need the effect to be subtle
     vec2 shift = displacement.rg*0.001;
 
-    float displacementStrengh=length(displacement.rg);
-    displacementStrengh = clamp(displacementStrengh,0.,2.);
+    //The shift strength will depend on the speed of the mouse move, 
+    //since the intensity rely on deltaMouse we just have to use the length of the (red,green) vector    
+    float displacementStrength=length(displacement.rg);
+    displacementStrength = clamp(displacementStrength,0.,2.);
 
-    float redStrengh = 1.+displacementStrengh*0.25;
-    redUvs += shift*redStrengh;    
+    //We apply different strengths to each color
 
-    float blueStrengh = 1.+displacementStrengh*1.5;
-    blueUvs += shift*blueStrengh; 
+    float redStrength = 1.+displacementStrength*0.25;
+    redUvs += shift*redStrength;    
 
-    float greenStrengh = 1.+displacementStrengh*2.;
-    greenUvs += shift*greenStrengh;
+    float blueStrength = 1.+displacementStrength*1.5;
+    blueUvs += shift*blueStrength; 
 
+    float greenStrength = 1.+displacementStrength*2.;
+    greenUvs += shift*greenStrength;
+
+
     float red = texture2D(uTexture,redUvs).r;
     float blue = texture2D(uTexture,blueUvs).b;    
-    float green = texture2D(uTexture,greenUvs).g;        
-
+    float green = texture2D(uTexture,greenUvs).g; 
 
+    //we apply the shift effect to our image
     finalImage.r =red;
     finalImage.g =green;
     finalImage.b =blue;
 
-    vec4 visualDisplacement = displacement;
-    visualDisplacement*=0.5;
-    visualDisplacement+=0.5;    
-
-    vec4 final = step(0.5,uDisplacement)*visualDisplacement + (1.-step(0.5,uDisplacement))*finalImage;
-
-    gl_FragColor = final;
 
-    //#include <tonemapping_fragment>
-    //#include <colorspace_fragment>
+    gl_FragColor = finalImage;
 }
diff --git a/src/shaders/gpgpu/gpgpu.glsl b/src/shaders/gpgpu/gpgpu.glsl
@@ -1,9 +1,7 @@
 uniform vec2 uMouse;
 uniform vec2 uDeltaMouse;
+
 uniform float uMouseMove;
-uniform float uGridSize;
-uniform float uRelaxation;
-uniform float uDistance;
 
 
 void main()
@@ -13,14 +11,15 @@ void main()
     vec4 color = texture(uGrid,uv);
 
     float dist = distance(uv,uMouse);
-    dist = 1.-(smoothstep(0.,uDistance/uGridSize,dist));
+    dist = 1.-(smoothstep(0.,0.22,dist));
 
 
-    vec2 delta = uDeltaMouse;
+    color.rg+=uDeltaMouse*dist;
 
-    color.rg+=delta*dist;
-    color.rg*=min(uRelaxation,uMouseMove);
-
+    float uRelaxation =  0.965;
+     
+    color.rg*=min(uRelaxation,uMouseMove);    
 
+
     gl_FragColor = color;
 }
diff --git a/src/style.scss b/src/style.scss
@@ -141,32 +141,15 @@ table {
 
 .container {
   max-height: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-$wrapper-padding:0vmax;
-
-.wrapper {
-  height: 100%;
-  max-height: 100%;
-  padding: $wrapper-padding;
+  height: 100vw;
+  width: 100vw;
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center; 
-  overflow: hidden;
-}
-
-.image-container {
-  display: inline-block;
 }
 
 img {
   height: 100%;
-  //max-height: calc(100dvh - calc($wrapper-padding * 2));
   width: 100%;
   object-fit: cover;
   opacity: 0;
-  display: block;
+  display: block;  
 }