iOS Cloud Shader (Rim Alpha?)

Unity Engine
1

Hello, I’m trying to create a shader for the iOS to make meshes look like fluffy clouds. I’m pretty new to writing shaders for unity and have run into some trouble.

My original idea was to combine a fresnel like alpha (rim alpha) with a cloud texture alpha to have the model fade out towards it’s edges in fluffy lumps. I could not find a way to create a fresnel “rim light” effect however. At least not without getting into the more advanced surface shader stuff, which I’m under the impression won’t work on iOS.

Instead, to try and fake the rim alpha effect, I tried making a texture with a radial gradient and sphere mapping it to the model. This almost worked quite well, except it creates some ugly artifacts around the edges of the models:

I would really appreciate some help with either some way of cleaning up those rendering artifacts or achieving the rim alpha effect I wanted. Here’s the code for my current shader for the above picture:

Shader "Mobile/Custom/Cloud Shader" {
	Properties {
		_Color("Main Color", Color)= (1,1,1)
		_MainTex ("Diffuse Color", 2D) = "white" {}
		_AlphaTex ("Edge Alpha", 2D) = "white" {TexGen Spheremap}
		_AlphaBlend ("Alpha", 2D) = "white" {TexGen SphereMap}
	}
	SubShader {
		Blend SrcAlpha OneMinusSrcAlpha
		Lighting On
		Material {
			Diffuse [_Color]
			Ambient [_Color]
		}
		Tags {Queue = Transparent}
		//Cull Off
		Pass {
			SetTexture[_MainTex] {Combine primary * texture Quad}
			SetTexture[_AlphaTex] {Combine previous, texture alpha}
			SetTexture[_AlphaBlend] {Combine previous, previous alpha * texture alpha Double}
			SetTexture[_AlphaBlend] {Combine previous, previous alpha + texture alpha Double}
		}
	}
}
2

That impression is incorrect. Any iOS device that could handle your four texture stages can use GLSL. Work with the dot product of the view direction, and normal.

3

I haven’t tested the current shader on an actual iPhone yet, only in graphics emulation. I plan to reduce it down to two texture stages if I do end up using it.

Good to know that the surface shader stuff can work with iOS, now I just have to learn how to write it…

Also, thanks for those video tutorials you made. They’re how I learned how to write shaders to begin with.

4

Okay, wrote up a surface shader, mostly just copying from the Reference Manual.

Shader "Mobile/Custom/Cloud Shader CG" {
	Properties {
		_Color("Main Color", Color)= (1,1,1)
		_MainTex ("Diffuse Color", 2D) = "white" {}
		_RimTex ("Edge Alpha", 2D) = "white" {}
		_RimPower ("Alpha Amount", Range(0,10)) = 3.5
	}
	SubShader {
		Tags { "RenderType" = "Opaque" }
		CGPROGRAM
		#pragma surface surf Lambert alpha
		struct Input {
			float2 uv_MainTex;
			float2 uv_RimTex;
			float3 viewDir;
		};
		float4 _Color;
		sampler2D _MainTex;
		sampler2D _RimTex;
		float _RimPower;
		void surf (Input IN, inout SurfaceOutput o) {
			o.Albedo = tex2D (_MainTex, IN.uv_MainTex).rgb * _Color.rgb;
			half rim = saturate(dot (normalize(IN.viewDir), o.Normal));
			half rim2 = 1.0 - rim;
			o.Alpha = -tex2D (_RimTex, IN.uv_RimTex).rgb + (rim * _RimPower) - rim2;
		}
		ENDCG
	}
	Fallback "Diffuse"
}

It’s looking great but for one problem. It’s too transparent:

716×350 19.9 KB

I’m pretty sure that this is caused by my using alpha instead of alphatest, but I can’t seem to get alphatest to work. I’m not sure how to use it. An explanation of how to use alphatest in surface shaders would be nice, or any other ideas on how I can get the visible area properly opaque?

5

Okay, I’ve kind of figured out how to get alphatest to work. But it looks terrible with rough ugly pixelated edges, and the hard edges don’t have that fluffy cloud feel. is there really no middle ground method available?

6

I’ve got an idea. How about a toon outline that extrudes verts and fades the extrusion to zero alpha?

7

Why not use the albedo of the cloud as the primary alpha, and modulate it by the rim contribution, a little like this:

Shader "Mobile/Custom/CloudShader" {
	Properties {
		_Color("Main Color", Color)= (1,1,1)
		_MainTex ("Diffuse Color", 2D) = "white" {}
		_RimColor("Rim Colour", Color)= (0,0,1)
		_RimPower ("Alpha Amount", Range(0.5,8)) = 3.5
		_AlphaMultiplier( "Alpha Multiplier" , Range( 0,8 )) = 2.0
	}
	SubShader {
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
		CGPROGRAM
		#pragma surface surf Lambert alpha
		
		struct Input {
			float2 uv_MainTex;
			float3 viewDir;
		};
		
		float4 _Color;
		float4 _RimColour;
		sampler2D _MainTex;
		float _RimPower;
		float _AlphaMultiplier;
		
		void surf (Input IN, inout SurfaceOutput o) {
			o.Albedo = tex2D (_MainTex, IN.uv_MainTex).rgb * _Color.rgb;
			half VN = saturate(dot (normalize(IN.viewDir), o.Normal)); 
			half rim = pow (1.0f - VN, _RimPower);
			o.Alpha = o.Albedo.r - (rim * _AlphaMultiplier);
			o.Albedo += rim * _RimColour;
		}
		ENDCG
	}

	FallBack "Diffuse"
}

Note that I’ve also moved it into the “Transparent” queue, so it gets drawn after everything else. This is a quickly knocked together example:

Also, don’t use AlphaTest on iOS, it’s known to have a drastic effect on performance.

8

Ah ha! Transparent queue! Now I feel dumb for not realizing that…

Thank you very much, gaustwick, all my problems are solved.

9

I’m trying to achieve exactly the opposite for a simple ghost shader.

Right now, if I change the main color alpha, the rim also fades, I’d like it to be linked to the rim color alpha.

Here’s the code :

Shader "RimAlpha" {
	Properties {
		_Color ("Main Color", Color) = (1,1,1,1)
		_MainAlpha ("Main Alpha", Range(0.0,1.0)) = 1.0
		_RimColor ("Rim Color", Color) = (0.26,0.19,0.16,0.0)
		_RimPower ("Rim Power", Range(0.5,8.0)) = 3.0
	}
	
	SubShader {
		
			Tags { "Queue"="Transparent" "RenderType"="Transparent" }
			
			CGPROGRAM
			
			#pragma surface surf Lambert alpha
			
			struct Input {
				float3 _Color;
				float3 viewDir;
			};
			
			float4 _Color;
			float4 _RimColor;
			float _RimPower;
			float _MainAlpha;
			
			void surf (Input IN, inout SurfaceOutput o) {
				
				o.Albedo = _Color;
				
				half rim = 1.0 - saturate(dot (normalize(IN.viewDir), o.Normal));
				o.Emission = _RimColor.rgb * pow (rim, _RimPower);
				
				o.Alpha = _MainAlpha;
			}
			
			ENDCG
			
	}
	
	FallBack "Diffuse"
}

Can’t figure out how to add the Rim in a separate pass (new to shaders). Any explanation is welcome !

10

Hey all, I really love the look of this shader, but I need it to work from all angles. Is there a way to achieve this?

11

What doesn’t work from “all angles”?

12

Sorry I guess it’s not 100% clear what I’m getting at…

Angle 1:

878×744 88.9 KB

Angle 2:
Imgur

In other words, is there a solution which will always keep the edges faded, regardless of where the camera is? Because if I spin around this one, it develops a hard edge at any other angle than head on

13

Did you find a way?

1 Like
14

UPDATE: I actually did find something similar but had to remake it using Amplify shader and a node tree from this gentleman: https://twitter.com/th00mmas/status/971833864594382848

Node tree:

1 Like
15

Looks awesome!