Problem getting the right result when combining two textures

Unity Engine
1

Below are some code that combines two textures into a single texture but its not giving me the result I want. I want the same result as in photoshop when you place a transparent image over another image. I also tried to illustrate the problem in a picture below :slight_smile:

var tex1 :Texture2D;
var tex2 :Texture2D;
function Update () {
	if(Input.GetMouseButtonDown(0))
	{
		tex1 = Instantiate(Resources.Load("combineTexture1")) as Texture2D;
		tex2 = Instantiate(Resources.Load("combineTexture2")) as Texture2D;
	
		var cols1 = tex1.GetPixels();
		var cols2 = tex2.GetPixels();
		
		for(var i = 0; i < cols1.Length; ++i)
			{
				cols1[i] += cols2[i];
			}
			
		tex1.SetPixels(cols1);
		tex1.Apply();
		guiTexture.texture = tex1;
	}
}

Thanks!

2

the result is correct for the formula you use as you are just summing it up.

what you want is what photoshops decal does if I recall right, basically stamping the second onto the first.

to achieve that, you use a clone of the “underlying” texture as new result texture and then you go through through the second texture and paint only the visible pixels (requires that the pixels have alpha. if you have no alpha you need to define a color that you ignore, normally referred to as mask)

3

The first image( the blue and red one) does have an alpha. The problem is that I have no idea how to do what you u just said in code. But thanks anyway! :slight_smile:

4

You probably want to look at the Color functions like Color.Lerp or Color Operator*

As a quick guess anyway.

What you did was add the color information to the other which just moved it all towards white more…

Q

5

thanks for the link! gonna take a look at it :slight_smile:

And yea, I kinda knew I wouldnt get the right result by just adding :stuck_out_tongue:

Is there any other solution to this?
I was thinkning that it might work to just put the textures as I wanted them and then render them with some camera, the somehow generate a new texture from that renderview. dunno if that would be a better solution or how easy it actualy would be thou

6

I would personally think that the proper shader would be able to just do it realtime but i really dont know…

Q

7

Use *= instead of +=.

–Eric

8

Use *= instead of +=.

–Eric

9

Thanks but it doesent seem to work. I posted the code and the result below:

10

I think you need to lerp it or something…

Q

11

Check if the pixel from the source image is white, if so use the second color, if not use the first color. You can probably use the grayscale property of the color as a key.

Maybe something like:

for(var i = 0; i < cols1.Length; ++i)
{
  //See if the color is white or very close to it.
  if(cols1[i].grayScale) > 0.9f)
  {
    cols1[i] = (cols2[i] * cols1[i].grayScale) + (cols1[i]* (1.0f - cols1[i].grayScale));
  }
}

Haven’t tested that code, so it might have an error in it, and you can tweak the .9 value depending on results. The only reason it’s there is to prevent a white halo around the lines.

12

I think i follow that script… I was thinking that you use 0.5 as a medium ground… (i do not know if the color info is from 0 to 1) If you use 0.5 and you look at your greyscale image… then subtract 0.5 from the values so that 0 (black) ends up being -0.5 and 1 (white) ends up being 0.5 Then if you added that to your color image it would darken the places where the black is and lighten where the white is…

Which looks like something like what this script is doing… i think…

Then you put in a scale factor to scale the effect as well.

Q