Unity 5 Texture Alpha issues

Hi, I'm pretty new to Unity.
I'm importing a 3d model with some large textures with an alpha channel.
I turn on the Alpha is Transparency on the texture and my textures gets all messed up on the material. It looks good in the texture view. And if I use the texture without adding the alpha channel as transparent, the texture looks good on the material.

Any guidance would be appreciated.
Thanks,
JJ

 

Hard to tell without providing what your alpha channel looks like.
Which image you provided looks correct?

Does your alpha look something like this?

 

Thanks.
That's the texture without the "Alpha Is Transparent" checked.

Attached is the Texture with the "Alpha Is Transparent" turned on. But when attached to the Material, it looks like the first image attached called "With Alpha Turned on.png"

 

I will let another dev give you a proper answer.

Materials & Shaders are still a little foreign to me at this point.
I thought it might be an alpha error, but it seems it might be a Unity setting.
There does seem to be a lot of scattered pixel noise in that alpha.
Sorry JJ.

 

Thanks for trying! Hopefully someone else has some input.

 

That's actually not noise but white labels/other overlay labels which is what I need from the texture.

 

So I was doing some testing. I created a new image with an alpha channel. I imported the picture and I get the same result.
I must be missing something obvious. Sorry if this is something completely basic.
Pictures:
"Test_Trans Imported" Imported Test Texture.
"Test_Trans With Alpha" Imported Texture with "Alpha is Transparency" checked
"Test_Trans Material No Alpha" Material with texture applied no Alpha
"Test_Trans Material With Alpha" Material with texture applied with Alpha

Can anyone point out what I'm doing wrong?
I'm using Gimp to create the texture.

 

There is nothing wrong with the first image, that is expected output from png format. It looks weird due to the way photoshop/png ( have never quite worked out which) is filling the space that is transparent, I believe in a method to ensure you don't get weird fringe color data at the borders of opaque/transparent areas. The thing is PNG doesn't strictly have an alpha channel, (unlike say PICT or TGA), instead it uses transparency information, so areas that are fully transparent can end up looking weird when viewing it without taking transparency into account e.g. like the Unity Preview window.

This has been an issue with Photoshop/PNG for decades and i've used SuperPNG Photoshop plugin as an alternative to better deal with it. ( http://www.fnordware.com/superpng/ ). It offers full control over alpha channel, allowing you to import PNG's and create an alpha channel from its transparency data, or export a Photoshop image using an alpha channel as transparency. It also offers a feature to 'clean' the transparency area so you don't get that weird data.

Having said all that, this shouldn't be an issue in Unity anyway. If you are using a transparent shader then the weird data you see will not be displayed on your models anyway. So if you are seeing an issue with the rendering of your models, please post screenshots to explain the problem.

btw - in your last screenshots you show a material using the standard shader in Opaque mode, where as it should be either fade or transparent for images with alpha. So make sure you are using the correct material/settings.

However if you are using a transparent material on a model that is not purely convex then you'll likely be seeing rendering issues due to the complexities of rendering transparent objects in real-time graphics and lack of a good sorting methodology. The problem being that the zbuffer cannot be used to determine correct draw order with transparent polygons as they do not write into it. That only models are depth sorted by 3D engines, not the polygons and even if you did sort polygons there is always the painters algorithm problem that can come up.

The main way around this is to use a shader that renders a first pass of the model into the zbuffer but nothing to color buffer, then render the material itself in a second pass. Since now the zbuffer contains correct information the transparent rendering will look correct as long as you aren't expecting to see back faces. There are plenty of threads about this, so if sorting is an issue just do a search for them. For example - http://forum.unity3d.com/threads/transparent-depth-shader-good-for-ghosts.149511/

 

Thanks for the reply.
I think I get what you're saying, but to me is seems like a problem with the engine. I have this model working great in 3ds Max with no issues on transparency.

I tried setting the Rendering Mode to Fade or Transparent, but while it shows me my labels for my buttons and seems to show fine in the Material Inspector, it also makes the material transparent in the scene, which is really not what I'm looking for. The Texture is supposed to be and overlay on the mesh to show the labels of the buttons in the mesh.

Thanks again for your help!

 

Well Max isn't a realtime 3D renderer, but whether or not it looks right between Max and Unity very much depends upon what you are trying to achieve.

Ok, so it sounds like you are looking for a decal material/shader, one that can show two textures. In which case switch back to opaque in the Standard Shader and apply you color image to albedo, then stick the 'button text image' into the secondary map albedo. Failing that you could try the legacy shaders 'Decal' where you can do the same thing.

Ultimately if you still have issues you need to re-describe the problem and exactly what you are trying to achieve, maybe include small screenshots from Max and Unity. It seems like really everything is working correctly its just a question of unfamiliarity with Unity and real-time engines that is tripping you up.

 

I hope...

Ok, let me try. Should be pretty straight forward.
I'm building a cockpit for a plane and for my buttons in the cockpit I need to put labels on each button.
I use a texture for the labels with alpha and apply it to the material in 3ds so the labels show up based on the material Id.

The labels will eventually also have to self illuminate of cause.

I want to do the same in Unity3D. See attached.

 

Ok, well things get a little tricky im afraid as there isn't real a default Unity shader that can do all of that for you. Unity shaders are much more specific than the Max Material editor, so they only cover some generalized cases. Although we can get close to what you want via either the 'Standard' shader or the 'Legacy Shader - Decal', neither are really right, so ultimately you'll need to find a shader that does what you want, or write your own.

So to switch shaders on your material, view the material in the inspector and at the top just beneath its name you'll see a dropdown titled 'shader' Click on this and you can switch to various shaders and legacy shaders. Legacy shaders are ones that were used pre-Unity 5.

For standard Shader, you can add your 'button text' image to the 'Detail Mask' and then add a white texture to the secondary maps 'Detail Albedo' slot. For Legacy Shaders - Decal, you'll need to add a neutral texture to the 'base' slot and then you're 'Button text' image o the 'Decal' slot. These will at least get the text showing up, but you can't control emission of the text.

That might be the best thing to do for now, until you know the specifics of what type of shader you might need (PBR, GI, normal mapping, occulision, are all labels emmisive, or only some at times etc) at which point you could either search for one, ask for help in the Shader subforum or maybe try making it yourself using ShaderForge (paid node based shader builder).

There are other options such as generating a new mesh for the label area only and make sure its offset from the base mesh, then apply a purely transparent shader to that model. However its not very optimal, and may be prone to graphical glitches.

 

Ok to get you started, here is a quick shader I knocked up. It doesn't support normal map, but does support Unity 5 GI/Lighting and PBR (Physically Based Rendering). Copy the code below, then in Unity create a new shader, paste the code into the new shader (replacing all existing code). You should then find the shader available under 'Custom/EmissiveOverlay'

Code (csharp):

1. Shader "Custom/EmissiveOverlay"
2. {
3.     Properties
4.     {
5.         _Color             ("Color", Color)                 = (1,1,1,1)
6.         _MainTex         ("Albedo (RGB)", 2D)             = "white" {}
7.         _Glossiness     ("Smoothness", Range(0,1))         = 0.5
8.         _Metallic         ("Metallic", Range(0,1))         = 0.0
9.         _OverlayTex     ("Overlay (RGBA)", 2D)            = "white" {}
10.         _EmissionLevel    ("Emission Level", Range(0,1))    = 1
11.     }
12.  
13.  
14.     SubShader
15.     {
16.         Tags { "RenderType"="Opaque" }
17.         LOD 200
18.      
19.         CGPROGRAM
20.         // Physically based Standard lighting model, and enable shadows on all light types
21.         #pragma surface surf Standard fullforwardshadows
22.  
23.         // Use shader model 3.0 target, to get nicer looking lighting
24.         #pragma target 3.0
25.  
26.         sampler2D     _MainTex;
27.         sampler2D    _OverlayTex;
28.  
29.         struct Input
30.         {
31.             float2 uv_MainTex;
32.         };
33.  
34.         half     _Glossiness;
35.         half     _Metallic;
36.         fixed4     _Color;
37.         half    _EmissionLevel;
38.      
39.         void surf (Input IN, inout SurfaceOutputStandard o)
40.         {
41.             // Albedo comes from a texture tinted by color
42.             fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
43.             fixed4 overlay = tex2D (_OverlayTex, IN.uv_MainTex);
44.          
45.          
46.             o.Albedo = c.rgb + overlay.rgb * overlay.a;
47.          
48.             // Metallic and smoothness come from slider variables
49.             o.Metallic         = _Metallic;
50.             o.Smoothness     = _Glossiness;
51.             o.Emission         = overlay.a * _EmissionLevel;
52.             o.Alpha = c.a;
53.         }
54.         ENDCG
55.     }
56.     FallBack "Diffuse"
57. }

 

This actually makes sense now.
Your doing a mix or blend or composite material in Max.
Unity doesn't read Max materials or any other software material/texture unless it is a dedicated shader creator like shader forge, or the substance package.

Looks like @Noisecrime has you on the right track. I'll just back away and continue taking notes.

 

Wow, thanks for the effort! I'll study the code and see if I can follow.

First test didn't look promising though, but maybe I can try and understand what is going on now that you got me understanding the issue.

 

Disregard...user error. I guess the shader didn't take the changes the first time. I had to redo it again.

Sorry.

 

Here is the new result. Looks like it's working. I need to try and see if I can sharpen up the text part. I have a feeling it's loosing some of the edge details from the transparency. Maybe related to the first part you wrote about the PNG issues.

Thanks again for helping out, it sure helps when there are people willing to go the extra mile to help us newbies.

 

So the smudge was from the texture size. I changed it to 4096 and now it looks sharper.

 

Noisecrime, I have to thank you again for getting me on the right track.
I've added an Emission color. Hopefully I did it right.

Result looks good.
EDIT: I guess I'm not quite there. Some colors doesn't work...so back to the drawing board.

Here is the code for anyone interested.

Code (CSharp):

1. Shader "Custom/EmissiveOverlay" {
2.     Properties {
3.         _Color             ("Color", Color)                 = (1,1,1,1)
4.         _MainTex         ("Albedo (RGB)", 2D)             = "white" {}
5.         _Glossiness     ("Smoothness", Range(0,1))         = 0.5
6.         _Metallic         ("Metallic", Range(0,1))         = 0.0
7.         _OverlayTex     ("Overlay (RGBA)", 2D)            = "white" {}
8.         _EmissionColor    ("Emission Color", Color)       = (1,1,1,1)
9.         _EmissionLevel    ("Emission Level", Range(0,1))    = 1
10.     }
11.     SubShader {
12.         Tags { "RenderType"="Opaque" }
13.         LOD 200
14.      
15.         CGPROGRAM
16.         // Physically based Standard lighting model, and enable shadows on all light types
17.         #pragma surface surf Standard fullforwardshadows
18.  
19.         // Use shader model 3.0 target, to get nicer looking lighting
20.         #pragma target 3.0
21.         sampler2D     _MainTex;
22.         sampler2D    _OverlayTex;
23.         struct Input
24.         {
25.             float2 uv_MainTex;
26.             float2 uv_BumpMap;
27.         };
28.         half     _Glossiness;
29.         half     _Metallic;
30.         fixed4     _Color;
31.         fixed4     _EmissionColor;
32.         half    _EmissionLevel;
33.  
34.         void surf (Input IN, inout SurfaceOutputStandard o)
35.         {
36.             // Albedo comes from a texture tinted by color
37.             fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
38.             fixed4 overlay = tex2D (_OverlayTex, IN.uv_MainTex);
39.          
40.             o.Albedo = c.rgb + overlay.rgb * overlay.a;
41.        
42.             // Metallic and smoothness come from slider variables
43.             o.Metallic         = _Metallic;
44.             o.Smoothness     = _Glossiness;
45.             o.Emission         = overlay.a * _EmissionColor.rgb * _EmissionLevel;
46.             o.Alpha = c.a;
47.         }
48.         ENDCG
49.     }
50.     FallBack "Diffuse"
51. }
52.  

 

You're welcome. I just realized in the time it would take to explain why you were facing problems in Unity I could just whip up a basic shader that would mostly work for your needs

Yeah that looks fine. Not sure why you have problems with colours but maybe due to the fact that you haven't colourised' the text in your bitmap (i.e. all your numbers in the screenshot are black). Couple of ideas.

1. Change your text overlay to display the numbers as white
2. Change Albedo line to just 'o.Albedo = c.rgb' and don't bother adding the overlay to it.

There may be a better way, but again depends on you intended usage of the shader. However you seem to have a decent grasp of the code so i'm pretty sure you could modify it yourself from here for small changes.


Edit:
Ok here is an idea, you can change the o.Albedo line to

Code (csharp):

1. o.Albedo = c.rgb + overlay.a * _EmissionColor;

This will make the text on the albedo display using the emissive colour, whilst increasing the EmssionLevel will make the text 'emit' the color more strongly, depending upon lighting. Having a single color for the text ( i.e. not using the rgb from the bitmap/texture) should avoid the color issue you mentioned.

This means whatever colour is in your text overlay bitmap is ignored and this is probably a good idea for several reasons. Firstly it means you don't have to live with whatever colour you set your text to when you made the texture. Secondly you could add another property to control the text colour in the shader ( e.g. _OverlayColor * overlay.a *) and finally it means you could use an uncompressed alpha format (alpha8 in Unity), which wont save memory, but will give higher quality.

To do this select your bitmap/texture' in Unity, in inspector switch 'Texture Type' to Advanced, at the bottom you can select format ( probably says default compressed or something). Choose Alpha8. This will convert the texture into a single channel 8 bit image (i.e greyscale or commonly known as luminance alpha). It uses same amount of memory as say DXT5 compression, but as its no longer compressed your alpha channel should have higher fidelity.

 

Don't use PNG for non-transparent objects. It is fine to use PNG with alpha channel for transparent objects such as sprites. In any case when you want an alpha channel texture on an opaque object you want to use another format such as TGA or TIFF.

 

There is no problem using PNG for non-transparent objects and its a far superior format in terms of compression compared to TGA and sometimes TIFF. Using SuperPng make it easy to use alpha channels with PNG.

 

Well but people continue to have issues with it. Thanks to mention the Plug-In but that doesn't solve the issue. You can't even edit the image if you don't have the Plug-In and I am not sure how GIMP does handle PNGs. It's great to save some megabytes and it can quickly add up, but that doesn't effect the final game anyway.

 

Well the plugin is only really for those used to an older alpha channel mode of working, its a convenience thing. Nowadays most Photoshop users will just use layers with transparency.

I don't get your comment 'people continue to have issues with it', what issues do you mean?

Sure it can be confusing for those who are unaware of what a png looks like without transparency being used, but then thats what you get when looking at something that is meant to have transparent areas without transparency being enabled. Its just as broken as it would be if you looked at a TGA file without the alpha channel enabled as you are seeing parts of the image that you shouldn't.

Fundamentally though it doesn't matter since it makes no sense to use an image that was created for use with transparency/alpha channel without the alpha channel. So there are ( to my knowledge) no actual technical issues, just a misunderstanding of what the preview might be showing in some cases?

I agree it doesn't affect the final game, but as you mention the savings for development can quickly add up, quite substantially too.

I guess I'm pro PNG becuase i've ran into so many problems with client delivered assets in other formats, especially TIFF. Getting what should have been a 4Mb file as a PNG as a 200Mb TIFF file because they enabled layer support and no compression is frustrating, more so when you have multiple files that had to be transferred online from the clients slow ass internet connection.