From 4f7f34f8c7b626bec628ac8a46fd1671b0c6c06c Mon Sep 17 00:00:00 2001 From: Marcin Jerzak Date: Sun, 3 Dec 2023 02:19:55 +0100 Subject: [PATCH 1/3] bugfix: wrong centerpoint for zoom when using triangle geometry --- packages/instanced-sprite-mesh/src/material.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/instanced-sprite-mesh/src/material.ts b/packages/instanced-sprite-mesh/src/material.ts index 34058e7..28f814d 100644 --- 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; From 0cb6e5c15e7946d1ab5eeab3a4cca9c710f2a3a2 Mon Sep 17 00:00:00 2001 From: Marcin Jerzak Date: Sun, 3 Dec 2023 02:20:38 +0100 Subject: [PATCH 2/3] cs --- .changeset/strong-toes-juggle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-toes-juggle.md diff --git a/.changeset/strong-toes-juggle.md b/.changeset/strong-toes-juggle.md new file mode 100644 index 0000000..13d1ac8 --- /dev/null +++ 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) From ef6db2d0d0048c31d7fe14e44699663e7ca3d15f Mon Sep 17 00:00:00 2001 From: Marcin Jerzak Date: Sun, 3 Dec 2023 02:22:00 +0100 Subject: [PATCH 3/3] remove console .logs --- packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts | 1 - packages/instanced-sprite-mesh/src/material.ts | 7 ------- packages/instanced-sprite-mesh/src/spriteBuilder.ts | 5 ----- 3 files changed, 13 deletions(-) diff --git a/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts b/packages/instanced-sprite-mesh/src/InstancedSpriteMesh.ts index 7112bfe..27dfb01 100644 --- 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 | 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 index 28f814d..0c41d0c 100644 --- a/packages/instanced-sprite-mesh/src/material.ts +++ b/packages/instanced-sprite-mesh/src/material.ts @@ -237,10 +237,6 @@ export const constructSpriteMaterial = ( ); fragmentShader = replaceUVs(fragmentShader, "spriteUv"); - - // console.log(fragmentShader) - // console.log(vertexShader) - return { vertexShader, fragmentShader }; }, }); @@ -327,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 index fb93f10..a7492e8 100644 --- 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 }; } }