FX: Force Field Shader

Another forum post got me thinking about a force field shader, something I had been wanting to do, but never had the time. Well, today I carved out some time and put something together. I was trying to achieve something like Perlin noise, but efficient and without a reference texture. (I'm a sucker for pure functional stuff. :wink

Anyways, here is what I came up with. Play with the color, opacity/alpha, and rate to achieve different effects. Please let me know if you find any flaws, or have ideas about optimization. (The square of _Color.a is in there for better response to the opacity slider. I'd rather not have the extra multiply, but I thought the slider felt better with it in there.) If the shader passes muster here, I can post it up on the wiki.

Code (csharp):

1.  
2. //
3. // Shader: "FX/Force Field"
4. // Version: v1.0
5. // Written by: Thomas Phillips
6. //
7. // Anyone is free to use this shader for non-commercial or commercial projects.
8. //
9. // Description:
10. // Generic force field effect.
11. // Play with color, opacity, and rate for different effects.
12. //
13.  
14. Shader "FX/Force Field" {
15.    
16. Properties {
17.     _Color ("Color Tint", Color) = (1,1,1,1)
18.     _Rate ("Oscillation Rate", Range (1, 300)) = 300
19. }
20.  
21. SubShader {
22.    
23.     ZWrite Off
24.     Tags { "Queue" = "Transparent" }
25.     Blend One One
26.  
27.     Pass {
28.  
29. CGPROGRAM
30. #pragma vertex vert
31. #pragma fragment frag
32. #pragma fragmentoption ARB_fog_exp2
33. #include "UnityCG.cginc"
34.  
35. float4 _Color;
36. float _Rate;
37.  
38. struct v2f {
39.     V2F_POS_FOG;
40.     float4 texcoord : TEXCOORD0;
41. };
42.  
43. v2f vert (appdata_base v)
44. {
45.     v2f o;
46.     PositionFog( v.vertex, o.pos, o.fog );
47.     o.texcoord = v.texcoord;
48.     return o;
49. }
50.  
51. half4 frag (v2f i) : COLOR
52. {
53.     float3 color;
54.     float m;
55.     m = _Time[0]*_Rate + ((i.texcoord[0]+i.texcoord[1])*5000000*_Color.a*_Color.a);
56.     m = sin(m) * 0.5;
57.     color = float3(m*_Color.r, m*_Color.g, m*_Color.b);
58.     return half4( color, 1 );
59. }
60. ENDCG
61.  
62.     }
63. }
64. Fallback "Transparent/Diffuse"
65. }
66.  

 

Any screenshots?

 

Thats very very cool, I'd love to see Aras or Yoggy mess with it and see what they come up with, if you could somehow incorporate an 8bit alpha as a bump or similar it would be even better,

Well done, and Thanks!
AC

 

With yours I mostly got artifacts from the resolution being low compared to how small of shapes your algorithm was making (Weird parabolic shapes that flicker when the camera is moved). This looked fun, so I gave it a try too. Its kind of neat, the different effects you can come up with. Here is my shader:

Code (csharp):

1.  
2.  
3. Shader "FX/Forest Force Field" {
4.    
5. Properties {
6.    _Color ("Color1", Color) = (1,1,1,1)
7.    _Color2 ("Color2", Color) = (1,1,1,1)
8.    _Rate ("Oscillation Rate", Range (5, 200)) = 50
9.    _Scale ("Scale", Range (0.02, 0.5)) = 0.25
10.    _Distortion ("Distortion", Range (0.1, 20)) = 1
11. }
12.  
13. SubShader {
14.    
15.    ZWrite Off
16.    Tags { "Queue" = "Transparent" }
17.    Blend One One
18.    
19.  
20.    Pass {
21.  
22. CGPROGRAM
23. #pragma vertex vert
24. #pragma fragment frag
25. #pragma fragmentoption ARB_fog_exp2
26. #include "UnityCG.cginc"
27.  
28. float4 _Color;
29. float4 _Color2;
30. float _Rate;
31. float _Scale;
32. float _Distortion;
33.  
34. struct v2f {
35.    V2F_POS_FOG;
36.    float3 uv : TEXCOORD0;
37.    float3 vert : TEXCOORD1;
38. };
39.  
40. v2f vert (appdata_base v)
41. {
42.     v2f o;
43.     PositionFog( v.vertex, o.pos, o.fog );
44.    
45.     float s = 1 / _Scale;
46.     float t = _Time[0]*_Rate*_Scale;
47.     o.vert = sin((v.vertex.xyz + t) * s);  
48.     o.uv = sin((v.texcoord.xyz + t) * s) * _Distortion;
49.    
50.     return o;
51. }
52.  
53. half4 frag (v2f i) : COLOR
54. {
55.     float3 vert = i.vert;
56.     float3 uv = i.uv;
57.     float mix = 1 + sin((vert.x - uv.x) + (vert.y - uv.y) + (vert.z - uv.z));
58.     float mix2 = 1 + sin((vert.x + uv.x) - (vert.y + uv.y) - (vert.z + uv.z)) / _Distortion;
59.    
60.     return half4( (_Color * mix * 0.3) + (_Color2 * mix2 * 0.3));
61. }
62. ENDCG
63.  
64.     }
65. }
66. Fallback "Transparent/Diffuse"
67. }
68.  

There is a certain purity of just dragging a shader onto something and instantly seeing an interesting pattern.

 

Here's another...

Yoggy -- I liked how you distorted the uv in the vertex shader. This time I played around with computing some moving "targets" in the vertex shader. There are a few variations in this next shader, so I used defines rather than make 4 different shaders. (See USE_TAN and USE_LINES.)

Something that did frustrate me a bit with this shader was that tan() takes more instructions than a sin() or cos(). Ultimately, this is what drove me to having the two defines for the variants. (The USE_TAN version uses almost all available instructions.)

The default USE_TAN version of this shader exploits the fact that the colors can be over-driven. Not sure if this applies to all graphics cards, though. The USE_TAN version has a grid feel to it. The sin() version (don't define USE_TAN), has an amorphous fog feel to it.

Code (csharp):

1.  
2. //
3. // Shader: "FX/Force Field 2"
4. // Version: v1.0
5. // Written by: Thomas Phillips
6. //
7. // Anyone is free to use this shader for non-commercial or commercial projects.
8. //
9. // Description:
10. // Generic force field effect.
11. // Play with color, opacity, and rate for different effects.
12. //
13.  
14. Shader "FX/Force Field 2" {
15.  
16. Properties {
17.     _Color ("Color Tint", Color) = (0, 0, 0.5, 1.0)
18.     _Rate ("Oscillation Rate", Range (1, 10)) = 1.0
19.     _Scale ("Ripple Scale", Range (1, 30)) = 10.0
20. }
21.  
22. SubShader {
23.    
24.     ZWrite Off
25.     Tags { "Queue" = "Transparent" }
26.     Blend One One
27.  
28.     Pass {
29.  
30. CGPROGRAM
31.  
32. // Undefine either/both of these for a differnt variant.
33. #define USE_TAN
34. #define USE_LINES
35.  
36. #pragma vertex vert
37. #pragma fragment frag
38. #pragma fragmentoption ARB_fog_exp2
39. #include "UnityCG.cginc"
40.  
41. float4 _Color;
42. float _Rate;
43. float _Scale;
44.  
45. struct v2f {
46.     V2F_POS_FOG;
47.     float4 texcoord : TEXCOORD0;
48.     float4[4] target : TEXCOORD1;
49. };
50.  
51. v2f vert (appdata_base v)
52. {
53.     v2f o;
54.     PositionFog( v.vertex, o.pos, o.fog );
55.     o.texcoord = v.texcoord;
56.     int j;
57.     for ( j = 2; j < 5; j++) {
58.         float a, b;
59.         sincos(j*_Time[0], a, b);
60.         o.target[j-2] = float4(a, b, 0, 0);
61.     }
62.     return o;
63. }
64.  
65. half4 frag (v2f i) : COLOR
66. {
67.     float4 d;
68.     int j;
69.     float r = _Time[1] * _Rate;
70.     for ( j = 0; j < 3; j++) {
71. #ifdef USE_LINES
72. #ifdef USE_TAN
73.         d[j] = tan(_Scale * dot(i.texcoord, i.target[j]) - r);
74. #else
75.         d[j] = sin(_Scale * dot(i.texcoord, i.target[j]) - r) * 3;
76. #endif
77. #else
78. #ifdef USE_TAN
79.         d[j] = tan(_Scale * distance(i.texcoord, i.target[j]) - r);
80. #else
81.         d[j] = sin(_Scale * distance(i.texcoord, i.target[j]) - r) * 3;
82. #endif
83. #endif
84.     } // for
85.     return half4( (dot(d, d) * _Color).xyz, 1 );
86. }
87. ENDCG
88.  
89.     }
90. }
91. Fallback "Transparent/Diffuse"
92. }
93.  

 

And just one more...

I modified the first one so it would fall off around the edges. The result is something smoke-like that works well in particle systems.

Code (csharp):

1.  
2. //
3. // Shader: "FX/Force Field 3"
4. // Version: v1.0
5. // Written by: Thomas Phillips
6. //
7. // Anyone is free to use this shader for non-commercial or commercial projects.
8. //
9. // Description:
10. // Generic force field effect.
11. // Play with color, opacity, and rate for different effects.
12. // This shader has been adapted for use in particle systems.
13. //
14.  
15. Shader "FX/Force Field 3" {
16.    
17. Properties {
18.     _Color ("Color Tint", Color) = (1,1,1,1)
19.     _Rate ("Oscillation Rate", Range (1, 300)) = 300
20. }
21.  
22. SubShader {
23.    
24.     ZWrite Off
25.     Tags { "Queue" = "Transparent" }
26.     Blend One One
27.  
28.     Pass {
29.  
30. CGPROGRAM
31. #pragma vertex vert
32. #pragma fragment frag
33. #pragma fragmentoption ARB_fog_exp2
34. #include "UnityCG.cginc"
35.  
36. float4 _Color;
37. float _Rate;
38.  
39. struct v2f {
40.     V2F_POS_FOG;
41.     float4 texcoord : TEXCOORD0;
42. };
43.  
44. v2f vert (appdata_base v)
45. {
46.     v2f o;
47.     PositionFog( v.vertex, o.pos, o.fog );
48.     o.texcoord = v.texcoord;
49.     return o;
50. }
51.  
52. half4 frag (v2f i) : COLOR
53. {
54.     float3 color;
55.     float m;
56.     m = _Time[0]*_Rate + ((i.texcoord[0]+i.texcoord[1])*5000000*_Color.a*_Color.a);
57.     m = sin(m) * 0.5;
58.     color = float3(m*_Color.r, m*_Color.g, m*_Color.b);
59.     color *= 1 - clamp(2*distance(i.texcoord.xy, float2(0.5, 0.5)), 0, 1);
60.     return half4( color, 1 );
61. }
62. ENDCG
63.  
64.     }
65. }
66. Fallback "Transparent/Diffuse"
67. }
68.  

 

Wow, I really like the second one you made with the defines. Looks like something I would have liked to use in megapixel. This morning I modified mine a bit, and made it lookup into a texture rather than display two colors. Its pretty cool because it is independent of any UV map, never has a seam, and you can make all kinds of different looks with it by tweaking the parameters and texture.

Code (csharp):

1.  
2.  
3. Shader "FX/Forest Force Field" {
4.    
5. Properties {
6.    _Color ("Main Color", Color) = (1,1,1,0.5)
7.    _MainTex ("Texture", 2D) = "white" {}
8.    _UVScale ("UV Scale", Range (0.05, 4)) = 1
9.    _UVDistortion ("UV Distortion", Range (0.01, 1)) = 0.5
10.    _Rate ("Oscillation Rate", Range (5, 200)) = 10
11.    _Rate2 ("Oscillation Rate Difference", Range (1, 3)) = 1.43
12.    _ZPhase ("Z Phase", Range (0, 3)) = 0.5
13.    _Scale ("Scale", Range (0.02, 2)) = 0.5
14.    _Distortion ("Distortion", Range (0, 20)) = 0.4
15. }
16.  
17. SubShader {
18.    
19.    ZWrite Off
20.    Tags { "Queue" = "Transparent" }
21.    Blend One One
22.    
23.  
24.    Pass {
25.  
26. CGPROGRAM
27. #pragma vertex vert
28. #pragma fragment frag
29. #pragma fragmentoption ARB_fog_exp2
30. #include "UnityCG.cginc"
31.  
32. float4 _Color;
33. sampler2D _MainTex;
34. float _Rate;
35. float _Rate2;
36. float _Scale;
37. float _Distortion;
38. float _ZPhase;
39. float _UVScale;
40. float _UVDistortion;
41.  
42. struct v2f {
43.    V2F_POS_FOG;
44.    float3 uvsin : TEXCOORD0;
45.    float3 vertsin : TEXCOORD1;
46.    float2 uv : TEXCOORD2;
47. };
48.  
49. v2f vert (appdata_base v)
50. {
51.     v2f o;
52.     PositionFog( v.vertex, o.pos, o.fog );
53.    
54.     float s = 1 / _Scale;
55.     float t = (_Time[0]*_Rate*_Scale) / _Distortion;
56.     float2 uv = float2(v.vertex.y * 0.3 + (v.vertex.y - v.vertex.z * 0.0545), v.vertex.x + (v.vertex.z - v.vertex.x * 0.03165));
57.     o.vertsin = sin((v.vertex.xyz + t) * s);  
58.     o.uvsin = sin((float3(uv, t * _ZPhase) + (t* _Rate2)) * s) * _Distortion;
59.     o.uv = uv;
60.    
61.     return o;
62. }
63.  
64. half4 frag (v2f i) : COLOR
65. {
66.     float3 vert = i.vertsin;
67.     float3 uv = i.uvsin;
68.     float mix = 1 + sin((vert.x - uv.x) + (vert.y - uv.y) + (vert.z - uv.z));
69.     float mix2 = 1 + sin((vert.x + uv.x) - (vert.y + uv.y) - (vert.z + uv.z));
70.    
71.     return half4( tex2D( _MainTex, (i.uv + (float2(mix, mix2) * _UVDistortion)) * _UVScale ) * 1.5 * _Color);  
72. }
73. ENDCG
74.  
75.     }
76. }
77. Fallback "Transparent/Diffuse"
78. }
79.  

 

that's looking better and more usable Yoggy. All we need now is transparency (using the texture's alpha) and bump mapping. :wink:

Cheers.

 

You can easily make it transparent if you know the first thing about shaders, but I suppose I shouldn't leave that up to the user. I updated the shader to be transparent. Why would you want bumpmapping? What would it do?

 

I think a bumpmap would give the field definition, and texture.

Great thread guys, lovin it! I wish I had a few hours to fiddle.
AC

 

firstly thank you yoggy for putting in the transparency. a lot of people still approach shader programming in unity as a black art and if people like yourself choose to jump into a thread and re-write, improve on a shader then you will have to accept that people will ask for tweaks and features to turn a novelty shader into something that creatives can get excited about and use in a project. just adding the transparency has lifted that shader to new heights in my eyes. In time I would've worked it out myself but you were already putting in the effort and no doubt it is easier for you to do anyway.

now re. bump mapping. if bump mapping is an option or is a seperate shader then now you have two force field shaders that are very usable in projects. the bump mapping will give that added sense of volume to the effect, and will provide a nice solution as requested in original thread:

http://forum.unity3d.com/viewtopic.php?t=9458

Cheers.

 

This isn't about making that guy the shader he wants, its about shape synthesis using math (At least it is for me). I don't think this would even make that good looking of a forcefield anyway. And I'm pretty sure none of these shaders would really have any use for a bumpmap, they have no lighting or fresnel effect of any kind to modulate.

I created an object that has 3 rows of planes, each facing along an axis (volume shape) and applied my shader to it. Cool!

http://yogware.bluegillstudios.com/blogfiles/button.php?file=Sine&version=2.x


If I wanted to create the look of the shield on the droidika, I would just add a bumpmap to the xray shader like was mentioned before. I could generate a bumpmap for it by rendering a bunch of spheres overlapping eachother with a display normals shader. I could even make the bumpmap move and ripple by doing it real time with a render texture and moving the spheres around. I bet that would look a lot cooler.

 

fair enough.

 

Using pre-computed functions of arbitrary complexity: -5 points. :wink:

 

Ok, I'm a math junkie. I can't resist "Just One More Shader."

I was thinking about fractals, and wondered if there was anything interesting that could come of that. More generally, what might be achieved using iterative methods. I didn't come up with anything "wow," but hopefully this might inspire someone to come up with something interesting using iterative methods.

Code (csharp):

1. //
2. // Shader: "FX/FractalProto"
3. // Version: v1.0
4. // Written by: Thomas Phillips
5. //
6. // Anyone is free to use this shader for non-commercial or commercial projects.
7. //
8. // Description:
9. // Prototype fractal effect.
10. // I was playing with the Mandelbrot set, but wasn't that happy
11. // because it is essentially a static structure.
12. // This was an attempt to breathe a litte life into the set.
13. // I don't see an immediate application for this shader,
14. // but I hope it will inspire.
15. //
16.  
17. Shader "FX/FractalProto" {
18.    
19. Properties {
20.     _Color ("Color Tint", Color) = (1,1,1,1)
21. }
22.  
23. SubShader {
24.    
25.     ZWrite Off
26.     Tags { "Queue" = "Transparent" }
27.     Blend One One
28.  
29.     Pass {
30.  
31. CGPROGRAM
32. #pragma vertex vert
33. #pragma fragment frag
34. #pragma fragmentoption ARB_fog_exp2
35. #include "UnityCG.cginc"
36.  
37. float4 _Color;
38. float _Rate;
39.  
40. struct v2f {
41.     V2F_POS_FOG;
42.     float4 texcoord : TEXCOORD0;
43. };
44.  
45. v2f vert (appdata_base v)
46. {
47.     v2f o;
48.     PositionFog( v.vertex, o.pos, o.fog );
49.     o.texcoord = v.texcoord - 0.5;
50.     return o;
51. }
52.  
53. half4 frag (v2f i) : COLOR
54. {
55.     float3 color;
56.     float m;
57.     float2 c = i.texcoord.xy;
58.     float2 z = float2(_SinTime[1],_CosTime[1]);
59.     int j;
60.     for (j=0; j< 7; j++) {
61.         z = float2((z.x * z.x - z.y * z.y), (z.x * z.y + z.x * z.y)) + c;
62.     } // for j
63.     m = tan(pow(1/length(z)*.5, .8));
64.  
65.     color = float3(m*_Color.r, m*_Color.g, m*_Color.b);
66.     return half4( color, 1 );
67. }
68. ENDCG
69.  
70.     }
71. }
72. Fallback "Transparent/Diffuse"
73. }
74.  

 

is there any way you can make this shader two-sided? i wanted to use this shader for an entry point in a level, but i can only see it from the outside..

 

What sort of object do you want to apply it to? Often the best way to make a two-sided mesh is to double up the vertices in the 3D modelling app.

 

yes i had to do that for a tent at one time. Basically just using unity's sphere and scaling it. Without using an external app (although i do have 3Ds Max 9);

 

oh god... you know you do too much programming when you inadvertently put a semicolon at the end of sentences....

 

Hi there

I am trying to explore this shader in Unity 3 and I am getting the error:

Shader error in 'FX/Forest Force Field': D3D shader assembly failed with: (49): error X5469: Dest register type for SINCOS must be temp (r#).

Can anyone help me?

thanks

 

I have the same problem as reset... if anyone has a solution

 

Hi,

Since I'm on an older Mac, I have to use unity 2.6. The shader seems to always default to transparent/diffuse, so i'm not getting any nice patterns. (Using Yoggy's first one.)

Does anyone know whether the shader's compatible?

Thanks.

 

would like to see the forest force shield work

you can take Shield which gives similar results
http://www.unifycommunity.com/wiki/index.php?title=Shaders

 

After fidgeting around for an hour trying to fix that stupid compiler error (which is to 100% undocumented, according to Google) in the "Forest Force Shield" script, I found at least a workaround.

To get the Forest Force Shield shader working again, move the "sin" instructions from the vert() to the frag() section:
Replace these lines in vert():

Code (csharp):

1.  
2. o o.vertsin = sin((v.vertex.xyz + t) * s);  
3. o.uvsin = sin((float3(uv, t * _ZPhase) + (t* _Rate2)) * s) * _Distortion;
4.  

with:

Code (csharp):

1.  
2. o o.vertsin = (v.vertex.xyz + t) * s;  
3. o.uvsin = (float3(uv, t * _ZPhase) + (t* _Rate2)) * s;
4.  

And replace these lines in frag():

Code (csharp):

1.  
2.     float3 vert = i.vertsin;
3.     float3 uv = i.uvsin;
4.  

with:

Code (csharp):

1.  
2.     float3 vert = sin(i.vertsin);
3.     float3 uv = sin(i.uvsin)*_Distortion;
4.  

My guess is there is a problem in Unity's shader compiler, but I don't know enough about shaders to be certain of that.

EDIT: I think you also need to add this to the other #pragmas in the script:

Code (csharp):

1.  
2.     #pragma target 3.0
3.  

, due to an instruction limit.

 

I tried Wolfram's solution for the "Forest Force Shield"-script, but it isn't working in Unity (using v3.5.4.).

I really have no idea of shaders, but this is how I made it work:

Replace this:

Code (csharp):

1.  
2.  o.vert = sin((v.vertex.xyz + t) * s);  
3.  o.uv = sin((v.texcoord.xyz + t) * s) * _Distortion;

with that:

Code (csharp):

1.  o.vert.x = sin((v.vertex.xyz + t) * s);  
2.  o.uv.x = sin((v.texcoord.xyz + t) * s) * _Distortion;
3.  o.vert.y = sin((v.vertex.xyz + t) * s);  
4.  o.uv.y = sin((v.texcoord.xyz + t) * s) * _Distortion;
5.  o.vert.z = sin((v.vertex.xyz + t) * s);  
6.  o.uv.z = sin((v.texcoord.xyz + t) * s) * _Distortion;

I'm not sure if the z-part is really needed because it is working even without it.

 

Been looking for a nice force field shader, couldn't really find one (did not like the look of this one), decided to write my own, check it out: http://dl.dropbox.com/u/19877504/FpsHudDemo/WebPlayer/WebPlayer.html

 

I know this Thread is kinda old but i can't figure out a way to get this running with Unity 4.

I think the first forcefield shader from forestjohnson is still pretty neat but when i use the offered solutions here i get a working shader but it only shows some gradients and stripes also its only animating on one axis...

Does anybody know how to get this shader running in unity 4 that it still looks like it was initially made? (animating on all axis and a blob like pattern)

sry for bumping such an old thread...

 

is the demo scene included in the package?

 

Hey, it been long ago.
But I love you guys , thanks <3