Faster way for merging textures


I was wondering if there is a faster way to merge two or more textures? Please see the example:

I do not really like that I have to basically convert the data twice (readPixels() + createImageBitmap()).

Best wishes

**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.

You can also simply load the texture as an IMG and draw the IMG on the canvas

1 Like

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?

Correct :slight_smile:

Hi @Joe_Kerr and @Deltakosh

I haven’t understood what you mean by that in order to merge 2 textures?

Could you elaborate or make a quick PG of the solution maybe?

You can use a dynamictexture and paint your 2 images on:

1 Like

Thanks for the precision @Deltakosh.
Not what I was looking for unfortunately but I learned something new! :hugs:

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.