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()).
**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
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?
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:
Thanks for the precision @Deltakosh.
Not what I was looking for unfortunately but I learned something new!
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.