# Faster way for merging textures
**URL:** https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475
**Category:** Questions
**Created:** [April 18, 2022, 5:56pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475 "2022-04-18T17:56:46Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)
#### Post date: [April 18, 2022, 5:56pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/1 "2022-04-18T17:56:46Z")
Hi,
I was wondering if there is a faster way to merge two or more textures? Please see the example:
> **[Babylon.js Playground](https://playground.babylonjs.com/#ICZEXW%23767)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
I do not really like that I have to basically convert the data twice (readPixels() + createImageBitmap()).
Best wishes
Joe
\*\*In case it is relevant. Use cases:
The use case, at least I hope so, would be performance. For instance, I have an atlas texture with HUD elements. Right now, for every element, I need 1 plane (uv mapping). In effect, my “over actor” health bar with an actual bar, a visibilty, hit chance and an armor indicator take 12 draw calls per actor. Rendering 4 actors and the fps go down to 50’ish.
Another use case would be if you have a character and want to have a texture for skin colour and a texture for clothing. E.g. a green alien with a red shirt or a pale humanoid with a blue sweater (same model). Assuming you do not want to generate all the permunations as a build step.
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 18, 2022, 5:59pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/2 "2022-04-18T17:59:12Z")
You can also simply load the texture as an IMG and draw the IMG on the canvas
---
### Author:  [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)
#### Post date: [April 18, 2022, 6:05pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/3 "2022-04-18T18:05:51Z")
Oh, that is acutally pretty sweat. Added benefit: from IMG to Texture is far less of a hassle due to BABYLON.Texture.CreateFromBase64String
Just curious. Is a Babylon Texture a WebGL thing and has nothing to do with HTML image stuff?
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [April 18, 2022, 7:55pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/4 "2022-04-18T19:55:44Z")
Correct 🙂
---
### Author:  [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [May 18, 2022, 9:59am UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/5 "2022-05-18T09:59:32Z")
Hi @Joe_Kerr and @Deltakosh
I haven’t understood what you mean by that in order to merge 2 textures?
> [@Deltakosh](#):
>
> You can also simply load the texture as an IMG and draw the IMG on the canvas
Could you elaborate or make a quick PG of the solution maybe?
Thanks!
---
### Author:  [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [May 18, 2022, 3:04pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/6 "2022-05-18T15:04:11Z")
You can use a dynamictexture and paint your 2 images on:
> **[Dynamic Textures | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/materials/using/dynamicTexture#images)**
>
> Learn all about dynamic textures in Babylon.js.
---
### Author:  [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [May 18, 2022, 3:54pm UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/7 "2022-05-18T15:54:22Z")
Thanks for the precision @Deltakosh.
Not what I was looking for unfortunately but I learned something new! 🤗
---
### Author:  [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)
#### Post date: [October 3, 2022, 9:04am UTC](https://forum.babylonjs.com/t/faster-way-for-merging-textures/29475/8 "2022-10-03T09:04:47Z")
Oh, oops. Just noticed that the discussion went on :o In case it is still relevant: a better term for “merge” might have been “overlay”.
E.g. render texture1 with 1024px² at 0,0; then render texture2 with 1024px² at 0,0 over texture1. Texture2 has some transparent pixels. etc.