[Elemental Shader Jam] Air

Gazza_N

I ripped Chippit's workshop code apart and slapped this spinning cloud-orb together.

Poorly gifjiffed version 1:



Poorly jiffgifed version 2:



Texture sourced under creative commons from:
http://www.sigmascape.com/2010/09/1024x1024-pixel-ipad-wallpaper-image_2822.html

Seamlessified version:
https://dl.dropboxusercontent.com/u/59235601/ipad-wallpaper-sigmascape-clouds-s1001 seamless.jpg

Code's a mess because I'm still learning and don't know what I'm doing. I'll post as soon as I clean it up.

Gazza_N

Code! I've added a layered effect by redrawing the same texture with differing offsets to give it a bit more volume and complexity, and tweaked the fresnel term to only affect alpha.

Simply grab the seamless texture from the link above, import it with greyscale = alpha and alpha = transparency settings, splack it into the shader, and let rip.

Shader "Custom/Windball" 
{
	Properties
	{
		_MainTex ("Main Texture", 2D) = "white" {}
		_Color ("Display Colour", Color) = (1, 1, 1, 0.3)
		_FresnelExponent ("Fresnel power", Range (1, 32)) = 3
		_FresnelAlpha ("Fresnel alpha", Float) = 0.3
		
		_ScrollSpeed ("Scrolling Speed", Vector) = (0.2, 0, 0, 0)
		_WaveStrength ("Wave Amount", Float) = 0.2
		_WaveSpeed ("Wave Speed", Float) = 0.2
	}
	
	CGINCLUDE
	#include "UnityCG.cginc"
	
	struct v2f
	{
		float4 	pos : POSITION;
		half2	uv : TEXCOORD0;
		float3	viewDir : TEXCOORD1;
		float3	normal : TEXCOORD2;
		half2 uv2: TEXCOORD3;
	};	
	
	fixed4 		_Color;
	sampler2D	_MainTex;
	float4		_MainTex_ST;
	float2		_ScrollSpeed;	
	float 		_WaveStrength;
	float 		_WaveSpeed;	
	float 		_FresnelExponent;	
	float		_FresnelAlpha;
	
	ENDCG
	
	
	SubShader 
	{	
		Blend SrcAlpha OneMinusSrcAlpha
		
		Tags { "Queue"="Transparent" }
		
		Pass
		{
			//Render the inside back of the sphere
			
			Cull Front
		
			CGPROGRAM
			#include "UnityCG.cginc"								
						
			v2f vert (appdata_base v)
			{
				v2f o;
				
				//Offset primary uv coords
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);				
				o.uv = v.texcoord + _ScrollSpeed.xy * _Time.y;				
				o.uv.y += sin((_Time.z + o.uv.y) * _WaveSpeed) * _WaveStrength;
				
				//Offset secondary uv coords, with wave motion inverted and texture running faster
				o.uv2 = v.texcoord + _ScrollSpeed.xy * _Time.z;
				o.uv2.y += cos((_Time.z + o.uv.y) * _WaveSpeed) * _WaveStrength;
				o.uv2.x+=0.5;			
				
				return o;
			}

			fixed4 frag (v2f i) : COLOR0
			{
				//Get primary texture				
				fixed4 col = tex2D(_MainTex, i.uv);
				
				//Add secondary texture
				col += tex2D(_MainTex, i.uv2);
				
				//Half total texture to compensate for addition		
				col*=0.5;		
				return col* _Color;
			}
	
			#pragma vertex vert
			#pragma fragment frag
			ENDCG
			
		}	
		
		Pass
		{
			//Render the front of the sphere, with fresnel opaqueness at edges
			//Procedure is otherwise identical to first pass
			
			CGPROGRAM
			#include "UnityCG.cginc"	
			
			
			v2f vert (appdata_base v)
			{
				v2f o;
				
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);				
				o.uv = v.texcoord + _ScrollSpeed.xy * _Time.y;
				o.uv.y += sin((_Time.z + o.uv.y) * _WaveSpeed) * _WaveStrength;
				
				o.uv2 = v.texcoord + _ScrollSpeed.xy * _Time.z;				
				o.uv2.y += cos((_Time.z + o.uv.y) * _WaveSpeed) * _WaveStrength;
				
				//Get fresnel stuffles		
				o.viewDir = ObjSpaceViewDir(v.vertex);
				o.normal = v.normal;
				
				return o;
			}

			fixed4 frag (v2f i) : COLOR0
			{				
				//Same as before
				fixed4 col = tex2D(_MainTex, i.uv);
				col += tex2D(_MainTex, i.uv2);
				col.a*=0.5f;
				col*=_Color;
								
				//calculate fresnel
				float fresnel = 1 - dot(normalize(i.viewDir), normalize(i.normal));
				fresnel = pow(fresnel, _FresnelExponent);
				
				//add fresnel to base sphere alpha				
				col.a+=0.5*(fixed4)fresnel*_FresnelAlpha;
				
				return col;
			}
	
			#pragma vertex vert
			#pragma fragment frag
			ENDCG
			
		}
		
	}
}

Denzil

How do you make the texture seamless? Do you you copy and mirror it into 4 quadrants?

Good job by the way

Gazza_N

You can do that, but ultimately it would be easier and smarter if I just, y'know, posted the one I seamlessified myself.

Which I should have done.

Like this.

http://dl.dropboxusercontent.com/u/59235601/ipad-wallpaper-sigmascape-clouds-s1001 seamless.jpg

Elyaradine

I really like the cool patterns and things that emerge. :D

I'm wondering why you chose to blend the front and the back using fresnel? Is it noticeable? Perhaps it'd look more like air if the whole thing was softer at the edges, rather than just the front piece?

Gazza_N

Yeah, the whole fractal thing that ended up happening was a nice side-effect! I wanted the fresnel effect to give the ball a more defined volume, to resemble, say, Aang's airball in The Last Airbender. It's a good suggestion, though - I'll try inverting that transparency calc and see whether it doesn't look more "airy". :)

Nitrogen

Denzil said:

How do you make the texture seamless? Do you you copy and mirror it into 4 quadrants?

Good job by the way

A neat trick in Photoshop is to go into Filters -> Other -> Offset and then offset the texture by 50% in X and Y.
That way, the seams will be in the middle of the image, not the sides so you can clonestamp / smudge them away much more easily!