Strange behavior when mapping texture coordinates to Instanced Mesh

[Pxte]

Hi everyone,
I’m trying to map specific parts of an image onto separate instanced meshes. The implementation at first seamed to work fine however when diving deeper, for some reason, I’m getting inconsistent results.
The image I’m trying to map as an example has a 10x10 grid where all the squares look different so I can easily debug it.

I’m successfully mapping specific parts of the texture to the correct geometry, however, every other render, the image “jumps” an index. This makes no sense to me. I suspect this has to do with the shaders but it’s beyond my knowledge.

I’ve added a very basic use case on UV Matrix - JSFiddle - Code Playground. In this use case, I would expect that all the squares would have the exact same portion of the texture applied, as I’m explicitly asking it to.

Any help is amazingly appreciated!
Thanks in advance.

[prisoner849]

Hi!
I see this result:

But what the desired result?

[Pxte]

Hi @prisoner849,
thanks so much for the reply!

Since I am “hardcoding” here the coordinate for the texture through new THREE.Vector2(1,8), I would expect all of the squares to show the exact same cropped part of the image texture. My end goal is to be able to assign a “coordinate” of the texture to each square consistently and as is now there is some “random” effect that doesn’t quite work as I’d expect.

Probably it’s some flaw in my logic but I’ve been going back & forth and can’t seem to know where…

Thanks again!

[prisoner849]

Here is an example of how you can map UVs for instanced tiles: https://codepen.io/prisoner849/pen/bGLgBMx

[Pxte]

That worked, thanks!