(using shader blending to) remove white background from an image at runtime

Questions & Answers
1

I am working on a unity application for children.

The idea is that the kids draw an image (like a fish) on a white surface, which is then stored as an image file on a folder. The application has to import these at runtime and then move them around in a 2d space.

The problem is the white background. How can I dynamically change the white part to transparent?
I was playing with the current shaders in Unity and noticed that if I import an image with a white background manually and assign a shader of type “Particles/multiply”, the white part is removed, but the image also looks way darker than it should, like the colors are not exactly right. How can I do this with code at runtime? and also is this the only way? because I don’t want the image to loose color.

So in short, how do I remove the white background dynamically? Also, worth mentioning is that only the outer background should be removed, so if the fish has for example white eyes, that should not turn into transparent. so detecting the outer part is also part of the issue for me.
Thanks in advance

Edit : I started playin with different shaders and shader code, and progressed a little. So I imported an sprite, added some default sprite shader on it, and in the shader code, added this line : Blend Zero SrcColor.
As is visible in the attached image, it produces the needed effect of removing the white background. Only problem is , now the fish is also transparent a little. All I want to do is to keep the fish normal as the left image, but remove the background , like the right one!

87946-fsh.jpg
87946-fsh.jpg2424×1104 164 KB

2

Have them draw it on a transparent surface, and put a white surface behind it. Then it will look the same while drawing, but you’ll get a transparent image by default.

3

Hi

Thanks for the feedbacks. I solved it using the floodfill algorithm If anyone is interested :

FloodFill - Wikipedia

I used the recursive 4 direction method. I think it’s also much more efficient that using a shader (if there was any way to do that) because unlike shaders, this method can be used only once in the beginning after loading the texture.

Edit : here’s the code :

//--------------------------------------------------------
	void removeTextureBackground()
	{
		if (_textureHolder != null)
		{
            _colorHolder = _textureHolder.GetPixel (0, 0);
			floodFill (0, 0);
			floodFill (0, _textureHolder.height - 1);
			floodFill (_textureHolder.width - 1, 0);
			floodFill (_textureHolder.width - 1, _textureHolder.height - 1);
			_textureHolder.Apply ();
		}
	}
	//--------------------------------------------------------------------
	void floodFill(int x, int y)
	{
		if (x < 0 || y < 0 || x > _textureHolder.width || y > _textureHolder.height)
			return;
		Color color = _textureHolder.GetPixel (x, y);
		if (isWhite (color) && color.a>0)
		{
			color.a = 0;
			_textureHolder.SetPixel (x, y, color);
			floodFill (x - 1, y);
			floodFill (x + 1, y);
			floodFill (x, y - 1);
			floodFill (x, y + 1);
		}
		else
			return;
	}
	//--------------------------------------------------------------
	bool isWhite(Color color)
	{
		float threshold = 1f;
		bool r = Mathf.Abs (color.r - _colorHolder.r) < threshold;
		bool g = Mathf.Abs (color.g - _colorHolder.g) < threshold;
		bool b = Mathf.Abs (color.b - _colorHolder.b) < threshold;
		if (r && g && b)
			return true;
		else
			return false;
	}
4

hello hellhammer
please,can you share your code?
nitesh@prismetric.com
i am facing same problem

thank you…