Is it possible to combine two png textures into one

Questions
, , , ,
1

image
image1074Ă—319 167 KB

Hi guys, is there an easy way to get material with superimposed png textures with transparency in mind?
Babylon.js Node Material Editor

2

Generally, I do this with PHP.
Here is an example of functions.
The base image path + name.png, then an image 1 to merge, an image 2 (optional) and then the path + nameOut.png to the output image.

function mergeTexture($ImageBase, $ImageToMerge1, $ImageToMerge2, $imageToEnd) {	   
	$base = imagecreatefrompng($ImageBase); 	    
	$image1 = imagecreatefrompng($ImageToMerge1); 
	$image2 = imagecreatefrompng($ImageToMerge2); 
	
    imagecopy($base, $image1, 0, 0, 0, 0, 512, 512);
    imagecopy($base, $image2, 0, 0, 0, 0, 512, 512);

    if (file_exists($imageToEnd)) {
        unlink($imageToEnd);
    }
	
	imagealphablending($base, false);
    imagesavealpha($base, true);
	
    imagepng($base, $imageToEnd, 0); //Out

    imagedestroy($base);
    imagedestroy($image1);
    imagedestroy($image2);
}

The 512 here are the dimensions of your textures that need to be identical

imagecopy($base, $image1, 0, 0, 0, 0, 512, 512);
imagecopy($base, $image2, 0, 0, 0, 0, 512, 512);

This does exactly what you want.

3 Likes
3

I would offload this, too, into a build step as @Dad72 suggests. But if you want to solve it on runtime: https://nme.babylonjs.com/#D4I592#18

My understanding is that the green one is the overlay. The more alpha a pixel of the green one has, the more it should contribute to the final outcome.

n.b. I wanted to try mix but couldnt find a node for it.

2 Likes
4

Almost what I need. But it gets a sense of monochromacy. If I have shadows, they get lost. On the other hand, you can customize any grout color. This has its advantage.
Babylon.js Node Material Editor

5

image
image1024Ă—768 60.6 KB

An example of an image. The shadows are always gray. Therefore, it would be possible to simply change the grout picture for all brick options.

6

I do not understand what you mean by getting “monochromacy”. Do you mean the colors lose saturation? … No wait:

Screenshot 2025-06-07 161608
Screenshot 2025-06-07 161608990Ă—468 82.3 KB

Screenshot 2025-06-07 161625
Screenshot 2025-06-07 1616251457Ă—511 124 KB

Do you mean that the details in the grout get lost? But this might be in the texture. If there is detail in texture.rgb but texture.a is all 0, then it will get dropped.

So like this then? https://nme.babylonjs.com/#D4I592#20

2 Likes
7

Yes, it looks like I was mistaken. I thought that the texture was some kind of average color. Thank you all for your help!
Babylon.js Node Material Editor

1 Like
8

You could use my tool Chwizzler to do that!

1 Like
9

Cool stuff, thanks for sharing!

10

Maybe it will be useful to someone, with a normal map
Babylon.js Node Material Editor

1 Like