Merge pull request #25 from jerzakm/tri-zoom-bugfix

Tri zoom bugfix
jerzakm · Dec 3, 2023 · dbb7d9f · dbb7d9f · vercel · Dec 3, 2023
2 parents 9a09ca3 + ef6db2d
commit dbb7d9f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/.changeset/strong-toes-juggle.md b/.changeset/strong-toes-juggle.md
@@ -0,0 +1,5 @@
+---
+"@threejs-kit/instanced-sprite-mesh": patch
+---
+
+bugfix: corrected center point of a zoom when using triangle geometry (glsl)
diff --git a/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts b/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts
@@ -36,7 +36,6 @@ export class InstancedSpriteMesh<
     let geometry: BufferGeometry<any> | PlaneGeometry;
 
     if (options?.triGeometry) {
-      console.log("tri geo");
       geometry = createSpriteTriangle();
     } else {
       geometry = new PlaneGeometry(1, 1) as any;

diff --git a/packages/instanced-sprite-mesh/src/material.ts b/packages/instanced-sprite-mesh/src/material.ts
@@ -141,6 +141,19 @@ export const constructSpriteMaterial = (
 				float hHalfStep = 1.f / dataSize.y * 0.5f;
 				return texture2D(spritesheetData, vec2(col * wStep + wHalfStep, row * hStep + hHalfStep));
 			}     
+
+      vec2 zoomUV(vec2 uv, vec2 zoomCenter, float zoomFactor) {
+        // Shift UVs so that the zoom center is the origin
+        vec2 shiftedUV = uv - zoomCenter;
+    
+        // Scale (zoom) the UV coordinates
+        shiftedUV *= zoomFactor;
+    
+        // Shift back
+        shiftedUV += zoomCenter;
+    
+        return shiftedUV;
+    }
 			`;
 
       // calculate sprite UV
@@ -185,7 +198,7 @@ export const constructSpriteMaterial = (
           discard;
         }  
 
-        vec2 zoomCenter = vec2(fSize.x * 0.5,0.);
+        vec2 zoomCenter = vec2(fSize.x * 0.5,0.) + fOffset;
         float zoomFactor = 2.;
         vec2 shiftedUV = spriteUv - zoomCenter; 
         shiftedUV *= zoomFactor;
@@ -224,10 +237,6 @@ export const constructSpriteMaterial = (
       );
 
       fragmentShader = replaceUVs(fragmentShader, "spriteUv");
-
-      // console.log(fragmentShader)
-      // console.log(vertexShader)
-
       return { vertexShader, fragmentShader };
     },
   });
@@ -314,12 +323,9 @@ export const makeDataTexture = (data: SpritesheetFormat) => {
       })
       .flat()
       .concat(new Array((dataWidth - animations[key].length) * 4).fill(0));
-    console.log({ aFrames });
     animationsRGBA.push(...aFrames);
   }
 
-  console.log(animMap);
-
   const combinedData = [
     ...framesRGBA,
     ...animationLengthsRGBA,

diff --git a/packages/instanced-sprite-mesh/src/spriteBuilder.ts b/packages/instanced-sprite-mesh/src/spriteBuilder.ts
@@ -62,8 +62,6 @@ class SpriteBuilder {
   async build() {
     const imgLoader = new ImageLoader();
 
-    console.log(this.animations);
-
     const spritesheet: SpritesheetFormat = {
       frames: [],
       animations: {},
@@ -171,9 +169,6 @@ class SpriteBuilder {
     texture.colorSpace = SRGBColorSpace;
 
     spritesheet.sheetSize = [generatedWidth, generatedHeight];
-
-    console.log({ generatedSpritesheet: spritesheet });
-
     return { spritesheet, texture };
   }
 }