I’m working with huge PNG’s that are used as Sprites. Then I change the UV system to show the parts I need. The problem is that I get a huge impact in memory after adding multiple sprites of this kind. I don’t know how to reuse the same texture and change the UV of each sprite. Is there a technique…

How are you settling the UVs currently? On the Texture itself? Also how are you loading the Textures and associating them with Sprites? A few code samples may get you a more specific answer. In the meantime, one suggestion is if you happen to be using TextureLoader multiple times for the same image…

[image] Jim: but instead use Texture.clone which is a shallow copy sharing the image data (but with its oen separate UVs). Keep in mind that this will still trigger a texture GPU upload for each cloned instance. This is a known issue and discussed here: Text…

[image] Mugen87: modify the uv-coordinates By using Texture.transformUv or how? I don’t see any UV property at level of Sprite or SpriteMaterial.

Oh wow, I didn’t know that! Thanks for the tip, that’s a big deal! So I guess now the question is how to set the UVs of either Sprite or SpriteMaterial. I don’t see an obvious way in the docs, but if you look at the Sprite.js source it has a BufferGeometry on the inside so maybe you can change the …

[image] Enzo: By using Texture.transformUv or how? The idea is to edit BufferGeometry.attributes.uv. An instead of using THREE.Sprite, use a mesh with a plane geometry that always faces the camera. You can achieve this like so: mesh.quaternion.copy(camera.quaternion);

I see that THREE.Sprite also have sprite.geometry.attributes.uv why I need to use a Plane instead? And also, any docs where I can understand how to use the uv parameters?

[image] Enzo: I see that THREE.Sprite also have sprite.geometry.attributes.uv why I need to use a Plane instead? All sprites share the same geometry object which is located in the module scope of Sprite.js. The engine assumes that users do not touch this object. Hence, you will be on the safe…

Sorry that this long-standing issue is not fixed, yet. It’s actually a problem deep inside WebGLRenderer. There is already a PR but it’s unfortunately complex to review.

[image] Mugen87: You mean on geometry level? I’m not sure. Let say I have a big image with 8x8 tiles. How can I show the cell/frame I want of that image? Any example that you can refer to?

How to reuse the same Texture in different Sprites and change the UV individually

Questions

prisoner849 April 30, 2020, 1:07pm 9

Using of points is an option too: Split Image into Particle Tiles

Topic		Replies	Views
Solved: All sprites use single material offset Questions textures , materials , sprites	9	2263	May 4, 2022
Repeat texture on different meshes of different sizes Questions textures	7	1910	October 15, 2024
Use the same texture with different offsets on different materials Questions textures	11	4352	October 1, 2020
Assigning different image texture Questions texture-loader	6	344	January 12, 2024
How do I copy a Texture without reusing the Image part? Questions textures , texture-loader	1	2289	July 1, 2017

How to reuse the same Texture in different Sprites and change the UV individually

Related topics