# Is it possible to bake / distort texture from uv to uv2?

**URL:** <https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952>\
**Category:** Questions\
**Created:** [July 9, 2024, 1:36pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952 "2024-07-09T13:36:01Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![babbleon](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@babbleon](https://forum.babylonjs.com/u/babbleon)\
**Post date:** [July 9, 2024, 1:36pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/1 "2024-07-09T13:36:01Z")

</div>

I have a mesh with two UV different maps. I load a texture to uv and would like to bake it to uv2 and to save the newly distorted texture to a file.

Are there any existing methods of doing this within the framework? Thank you

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 9, 2024, 2:03pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/2 "2024-07-09T14:03:55Z")

</div>

A more precise description should help.

> I load a texture to uv and would like to bake it to uv2 and to save the newly distorted texture to a file.

How can you load a texture to a uv? You mean use the mesh’s UV set 1? Than switch to UV set 2 and save (what?)

> [@babbleon](#):
>
> to a file.

what type?

---

<div class="post-metadata">

**Author:** ![babbleon](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@babbleon](https://forum.babylonjs.com/u/babbleon)\
**Post date:** [July 9, 2024, 6:16pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/3 "2024-07-09T18:16:00Z")

</div>

I have reworded my question, I hope it is clearer now.

I have a mesh with two different UV maps. The first UV map (UV1) is designed to take a seamless texture, meaning it maps the texture coordinates in a way that the texture can tile seamlessly across the surface of the mesh without visible seams. The second UV map (UV2) is created using a method similar to Blender 3D’s Smart UV Project. This technique automatically unwraps the mesh to generate a UV map that minimizes distortion and overlapping, but it doesn’t necessarily produce a seamless mapping.

My goal is to load a seamless texture into the first UV map (UV1), then bake this texture onto the second UV map (UV2). After baking, the texture will be distorted to fit UV2’s layout. Finally, I want to save this newly distorted texture to a bitmap.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 9, 2024, 6:30pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/4 "2024-07-09T18:30:14Z")

</div>

How could any algorithm know which particular part of the texture do you want to map to a given face?

That’s why Blender has the UV Editor. You can use Smart unwrap (there are better approaches) to unwrap the surface of the mesh. Add the texture to the UV Editor and edit the UV islands by transforming them onto the right place, size, rotation so they cover the correct part of the texture.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [July 9, 2024, 7:15pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/5 "2024-07-09T19:15:12Z")

</div>

This is technically possible, but requires a little knowledge of shaders and render targets.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [July 9, 2024, 7:24pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/6 "2024-07-09T19:24:36Z")

</div>

1. Use the render target and set the camera of the render target to be orthogonal, and set it to render only once.
2. Set the camera range to -1 to 1 (left, top, bottom, right).
3. Create a shader that uses uv1 as the coordinate of the map, uv2 as the coordinate of the vertices, and remap to -1~1.
4. Wait for the scene to be ready, then refresh the render count of the render target.
5. wait for the scene to be onAfterRender
6. Now the render target is what you need, you can download it or use it as a texture in the material.

Translated with [DeepL Translate: The world's most accurate translator](http://www.DeepL.com/Translator) (free version)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 9, 2024, 7:29pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/7 "2024-07-09T19:29:04Z")

</div>

I also know technically how to accomplish it. The question is how will this create a meaningful result.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [July 9, 2024, 7:35pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/8 "2024-07-09T19:35:04Z")

</div>

I’m not a native English speaker, so my explanation may be a bit unclear.  
Using uv2 as vertex coordinates actually flattens the model into a square face. Then the camera is used to “bake” the rendered result. This results in a meaningful image

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 9, 2024, 7:50pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/9 "2024-07-09T19:50:23Z")

</div>

Im this case uv1 must be properly mapped to the texture. If that’s the case why bother with creating the texture for uv2 in Babylonjs? That’s why I think uv1 is not mapped correctly.

@babbleon can you give us more abstract information what do you want to achieve? Thanks!

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [July 9, 2024, 8:03pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/10 "2024-07-09T20:03:35Z")

</div>

You’re right, there’s usually no need to bake a uv2 if uv1 is already working properly. I think he’s probably doing some kind of editor, like baking ao or lightmaps.

---

<div class="post-metadata">

**Author:** ![qq2315137135](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/qq2315137135/32/32219_2.png) [@qq2315137135](https://forum.babylonjs.com/u/qq2315137135)\
**Post date:** [July 9, 2024, 8:43pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/11 "2024-07-09T20:43:30Z")

</div>

A simple demo, showing the effect of this uv-expansion. The rest of the details are for you to explore.

> **[Babylon.js Playground](https://playground.babylonjs.com/#NMU4ZM%2398)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![QQ_1720557989578](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/a/0a58cf4747b28c9ba1551dbd37f9aaf0df443a4c.jpeg)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 10, 2024, 2:38pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/12 "2024-07-10T14:38:47Z")

</div>

Original texture:  
UV1:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/5/3519efc3ee841fe67755fe9ba8ef09da40685b4b.jpeg)

UV2:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/4/6431b40151d7042c38399064fd7202582f53855e.jpeg)

Baked texture from babylon.js:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/5/358327797a7aa34f94aeee137c11aec7a3f95b03.jpeg)

> **[Babylon.js Playground](https://playground.babylonjs.com/#EMMMVG)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Needs some tuning though 😉

---

<div class="post-metadata">

**Author:** ![babbleon](https://avatars.discourse-cdn.com/v4/letter/b/ecccb3/32.png) [@babbleon](https://forum.babylonjs.com/u/babbleon)\
**Post date:** [July 10, 2024, 3:04pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/13 "2024-07-10T15:04:09Z")

</div>

Yes! This is precisely what I was looking for. Thank you very much for you help!

---

<div class="post-metadata">

**Author:** ![echadwick-artist](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/echadwick-artist/32/41009_2.png) [@echadwick-artist](https://forum.babylonjs.com/u/echadwick-artist)\
**Post date:** [July 14, 2024, 6:50pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/14 "2024-07-14T18:50:09Z")

</div>

One reason to do this kind of remapping, is to remove a dependency on KHR\_texture\_transform extension (for repeating a texture across the model) by baking the repeat into a non-repeating “atlas” uv layout (all uv within the 0-1 space, with no overlaps).

I don’t know if this is why the OP is using this method, but I’ve done so (with other applications) for this specific reason.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 14, 2024, 7:50pm UTC](https://forum.babylonjs.com/t/is-it-possible-to-bake-distort-texture-from-uv-to-uv2/51952/15 "2024-07-14T19:50:40Z")

</div>

> [@echadwick-artist](#):
>
> is to remove a dependency on KHR\_texture\_transform extension (for repeating a texture across the model) by baking the repeat into a non-repeating “atlas” uv layout (all uv within the 0-1 space, with no overlaps).

This makes a lot of sense. Thanks for sharing!
