[Elemental Shader Jam] Air

Comments

• Gazza_N

  11:56pm 11 Jul 2014 edited 10:09am 13 Jul 2014

  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

  12:28pm 12 Jul 2014

  How do you make the texture seamless? Do you you copy and mirror it into 4 quadrants?
  
  Good job by the way
• Gazza_N

  10:03am 13 Jul 2014 edited 10:07am 13 Jul 2014

  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

  6:41pm 13 Jul 2014

  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?

  Thanked by 1Gazza_N
• Gazza_N

  8:47pm 13 Jul 2014 edited 9:01pm 13 Jul 2014

  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

  9:34am 15 Jul 2014

  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!

  Thanked by 1Denzil