Generate UV maps for a model

Hi, I need a way to generate UV maps for a model after adding textures to it. Is there a way to accomplish that using this game engine?
Thanks in advance!

@yaustar @PlaycanvasDeveloper @will @Leonidas

Hi @farzan,

Please don’t tag people like that, everyone sees the posts and answers on their time.

To generate UVs for a model you need to use the Mesh API, the required method can be found here:

Thank you @Leonidas!
Besides I did not receive any response for 10 days, only then I tagged you guys.

You have a point, I didn’t see the timespan between your posts, I apologize :innocent:

1 Like

@Leonidas I tried using this code to retrieve the UV data, but I only got partial results in the form of an array. If there is anything I should be doing differently, please let me know. In addition, even if I am successful in acquiring the UV data, how will I create an image (a UV map) from it?

I think you can use this Mesh API method to get the full UV array:

Just make sure to pass an array of the correct size, otherwise as noted on the docs only partial data is copied:

const uvs = []; // provide a dynamic array, if you provide a typed make sure to calculate the right size
const mesh = this.entity.render.meshInstances[0].mesh;
mesh.getUvs(0, uvs);

Now this will provide the raw values, to get a UV map you need to render them using a render target and the right shader. I don’t have an example for that.

Otherwise if it’s static geometry, you can also use Blender to render such a map.

@Leonidas, I am getting ‘1527628’ as an output. I don’t want to use any 3D modelling software to generate UV maps, instead I want to generate a downloadable UV map image in runtime. Is it possible?

Can you share more info on how you are testing this? If you do console.logs(uvs) it should be an array with a list of numbers (the uv values).

It’s possible as I said to render a UV map on runtime, but you need to code the shader and render target pass to handle the image generation. @mvaligursky which is a good example to get started with that?

1 Like

Yes, my bad, now I am getting the data in the desired way. @mvaligursky please let me know what is a good example to start with generating a UV map image using UV data. Thanks in advance!

1 Like

do you have an image of what you’re after?
Maybe when you get UVs you need to use lines to render connections between them?

@mvaligursky, As an illustration, the UV map image for a cup is shown above. However, when I apply a texture on the cup in PlayCanvas, I want the UV map image to also include the texture that was used on the cup.

In that can you need to render a texture as a rectangle somewhere on the screen - maybe by adding it to a material and then assigning that to a camera facing plane.

And then render lines using AppBase | PlayCanvas API Reference

for lines you’d need to get UV coodinates from the mesh, and most likely also indices to know how to connect them together. Uv coordinates are in 0…1 range, so you’d need to scale them to the size of the plane. Or just create a plane of size 1 and zoom on it with the camera.


@mvaligursky thanks for your assistance, I will look into it and let you know about the progress.