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. I have no control over how or on what surface the images are drawn, as that part is done by a third party web application. I just receive them as image files on a shared folder.

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!

Image: using blending on sprite shader

poorya79
  • 21
  • 1
  • 4
  • Don't save the pictures on a white background save it on an alpha transparent background instead. Alternatively you can process the image, and create a hex key representing the exact shade of white in which the image was saved and then replace that pixel with alpha transransparent channel, or you can just buy a 10 dollar chroma key asset tool – johnny 5 Feb 12 '17 at 20:41
  • Thanks for the reply, but I don't have any control over on what surface the images are drawn, as they come from a third party web application. I just receive them as image files on a shared folder ( I edited the post and included this explanation now) . Also just changing the color to a transparent won't work, cause there might be other parts of the fish that have the same colors. For example the fish might have white eyes and, which shouldn't be transparent. Just the background should be. – poorya79 Feb 12 '17 at 22:06
  • Well then your most likely SOL, I'm assuming the image your receiving has a single layer. There meaning the only way you could tell what is mean to be drawn is checking for fully encapsulated objects and then you could filter out the background but what if the drawing doesn't fully connect or the drawing overlaps a corner? So can probably use a combination of convex hull to guesstimate what should be encapsulated and then filter out the background that way – johnny 5 Feb 12 '17 at 22:13
  • Have a look at a similar question here: http://stackoverflow.com/q/9280902/3426025 – BeyelerStudios Feb 12 '17 at 22:17

2 Answers2

2

I can think of a few ways, though you won't ever get perfect results - this can be finicky even in image editing programs, since often there are more things than just the background which are white.

One option is to add this to the fragment or surface function:

clip(_Threshold - col.r*col.g*col.b)

This assumes that _Threshold is a property with a value close to 1 (the lower, the more gray colors will become transparent) and col is the albedo color.

You can also try to convert the "whiteness" into alpha by doing some math magic. Here is an example:

col.a = floor(saturate(col.r*col.b*col.g + (1-_Threshold)))

Or like this:

col.a = saturate(pow(col.r*col.b*col.g + (1 - _Threshold), 10))
Kalle Halvarsson
  • 1,240
  • 1
  • 7
  • 15
0

A workaround would be to have a white background but the texture you are changing is always transparent, so you are adding color to a transparent texture and have another object just plain background.

Isn't it?

Horothenic
  • 680
  • 6
  • 12