Low poly water shader

November 11, 2015 Ronnie 41 Comments

Edit: I’ve added a link to a downloadable version of the shader! Copying the code from this post does crazy stuff to the symbols..

The side tracking specialist strikes again.

I’ve been working on another project lately and ended up in need of low poly flat shaded animated water.

I tried editing the mesh at runtime by script. Using the method mentioned by joni.giuro here: http://forum.unity3d.com/threads/low-poly-water-help.276685/

But when using the standard plane with this script, basically 200 triangles and when you’ve separeted all vertices (600), FPS drops down from 1500 without script to 190 with script applied. If you add more planes or models with more triangles you quickly get to a point where you get 1 FPS. So I needed something else.

That’s when I figured I’d try my luck with shaders.

Tried googling for solutions, but nothing was to be found so I needed to build my own. With no experience in shader programming this proved to be harder than I expected. But fast forward through some horrible looking results to today. Now I’ve gotten to a point where I can take any plane (not having to worry about splitting verts) applying my shader and getting this:

Almost no hit on FPS with fully animated low poly flat shaded water with specular color. And with this solution:

I can add looots of planes with this shader with almost no hit on FPS. Here I’ve added got 30 standard Unity planes with 200 tris each, all animating off into the distance.

Here’s a video of it in motion:

So how is this done, you say?

Code below.

It’s not perfect but it works! F.ex. I’ve left the UV coords in there but don’t need them for this. And I’m not entirely happy with the waves just yet.. But here you go.

Link to downloadable version

Shader "Trolltunga/LowPolyWaves 2.0"
{
Properties
{
_Color("Color", Color) = (1,0,0,1)
_SpecColor("Specular Material Color", Color) = (1,1,1,1)
_Shininess("Shininess", Float) = 1.0
_WaveLength("Wave length", Float) = 0.5
_WaveHeight("Wave height", Float) = 0.5
_WaveSpeed("Wave speed", Float) = 1.0
_RandomHeight("Random height", Float) = 0.5
_RandomSpeed("Random Speed", Float) = 0.5
}
SubShader
{

Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
Blend SrcAlpha OneMinusSrcAlpha

Pass
{

CGPROGRAM
#include "UnityCG.cginc"
#pragma vertex vert
#pragma geometry geom
#pragma fragment frag

float rand(float3 co)
{
return frac(sin(dot(co.xyz ,float3(12.9898,78.233,45.5432))) * 43758.5453);
}

float rand2(float3 co)
{
return frac(sin(dot(co.xyz ,float3(19.9128,75.2,34.5122))) * 12765.5213);
}

float _WaveLength;
float _WaveHeight;
float _WaveSpeed;
float _RandomHeight;
float _RandomSpeed;

uniform float4 _LightColor0;

uniform float4 _Color;
uniform float4 _SpecColor;
uniform float _Shininess;

struct v2g
{
float4 pos : SV_POSITION;
float3 norm : NORMAL;
float2 uv : TEXCOORD0;
};

struct g2f
{
float4 pos : SV_POSITION;
float3 norm : NORMAL;
float2 uv : TEXCOORD0;
float3 diffuseColor : TEXCOORD1;
float3 specularColor : TEXCOORD2;
};

v2g vert(appdata_full v)
{
float3 v0 = mul(_Object2World, v.vertex).xyz;

float phase0 = (_WaveHeight)* sin((_Time[1] * _WaveSpeed) + (v0.x * _WaveLength) + (v0.z * _WaveLength) + rand2(v0.xzz));
float phase0_1 = (_RandomHeight)*sin(cos(rand(v0.xzz) * _RandomHeight * cos(_Time[1] * _RandomSpeed * sin(rand(v0.xxz)))));

v0.y += phase0 + phase0_1;

v.vertex.xyz = mul((float3x3)_World2Object, v0);

v2g OUT;
OUT.pos = v.vertex;
OUT.norm = v.normal;
OUT.uv = v.texcoord;
return OUT;
}

[maxvertexcount(3)]
void geom(triangle v2g IN[3], inout TriangleStream triStream)
{
float3 v0 = IN[0].pos.xyz;
float3 v1 = IN[1].pos.xyz;
float3 v2 = IN[2].pos.xyz;

float3 centerPos = (v0 + v1 + v2) / 3.0;

float3 vn = normalize(cross(v1 - v0, v2 - v0));

float4x4 modelMatrix = _Object2World;
float4x4 modelMatrixInverse = _World2Object;

float3 normalDirection = normalize(
mul(float4(vn, 0.0), modelMatrixInverse).xyz);
float3 viewDirection = normalize(_WorldSpaceCameraPos
- mul(modelMatrix, float4(centerPos, 0.0)).xyz);
float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);
float attenuation = 1.0;

float3 ambientLighting =
UNITY_LIGHTMODEL_AMBIENT.rgb * _Color.rgb;

float3 diffuseReflection =
attenuation * _LightColor0.rgb * _Color.rgb
* max(0.0, dot(normalDirection, lightDirection));

float3 specularReflection;
if (dot(normalDirection, lightDirection) &lt; 0.0)
// light source on the wrong side?
{
specularReflection = float3(0.0, 0.0, 0.0);
// no specular reflection
}
else // light source on the right side
{
specularReflection = attenuation * _LightColor0.rgb
* _SpecColor.rgb * pow(max(0.0, dot(
reflect(-lightDirection, normalDirection),
viewDirection)), _Shininess);
}

g2f OUT;
OUT.pos = mul(UNITY_MATRIX_MVP, IN[0].pos);
OUT.norm = vn;
OUT.uv = IN[0].uv;
OUT.diffuseColor = ambientLighting + diffuseReflection;
OUT.specularColor = specularReflection;
triStream.Append(OUT);

OUT.pos = mul(UNITY_MATRIX_MVP, IN[1].pos);
OUT.norm = vn;
OUT.uv = IN[1].uv;
OUT.diffuseColor = ambientLighting + diffuseReflection;
OUT.specularColor = specularReflection;
triStream.Append(OUT);

OUT.pos = mul(UNITY_MATRIX_MVP, IN[2].pos);
OUT.norm = vn;
OUT.uv = IN[2].uv;
OUT.diffuseColor = ambientLighting + diffuseReflection;
OUT.specularColor = specularReflection;
triStream.Append(OUT);

}

half4 frag(g2f IN) : COLOR
{
return float4(IN.specularColor +
IN.diffuseColor, 1.0);
}

ENDCG

}
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

Shader "Trolltunga/LowPolyWaves 2.0"

{

Properties

{

_Color("Color", Color) = (1,0,0,1)

_SpecColor("Specular Material Color", Color) = (1,1,1,1)

_Shininess("Shininess", Float) = 1.0

_WaveLength("Wave length", Float) = 0.5

_WaveHeight("Wave height", Float) = 0.5

_WaveSpeed("Wave speed", Float) = 1.0

_RandomHeight("Random height", Float) = 0.5

_RandomSpeed("Random Speed", Float) = 0.5

}

SubShader

{

Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }

Blend SrcAlpha OneMinusSrcAlpha

Pass

{

CGPROGRAM

#include "UnityCG.cginc"

#pragma vertex vert

#pragma geometry geom

#pragma fragment frag

float rand(float3 co)

{

return frac(sin(dot(co.xyz ,float3(12.9898,78.233,45.5432))) * 43758.5453);

}

float rand2(float3 co)

{

return frac(sin(dot(co.xyz ,float3(19.9128,75.2,34.5122))) * 12765.5213);

}

float _WaveLength;

float _WaveHeight;

float _WaveSpeed;

float _RandomHeight;

float _RandomSpeed;

uniform float4 _LightColor0;

uniform float4 _Color;

uniform float4 _SpecColor;

uniform float _Shininess;

struct v2g

{

float4 pos : SV_POSITION;

float3 norm : NORMAL;

float2 uv : TEXCOORD0;

};

struct g2f

{

float4 pos : SV_POSITION;

float3 norm : NORMAL;

float2 uv : TEXCOORD0;

float3 diffuseColor : TEXCOORD1;

float3 specularColor : TEXCOORD2;

};

v2g vert(appdata_full v)

{

float3 v0 = mul(_Object2World, v.vertex).xyz;

float phase0 = (_WaveHeight)* sin((_Time[1] * _WaveSpeed) + (v0.x * _WaveLength) + (v0.z * _WaveLength) + rand2(v0.xzz));

float phase0_1 = (_RandomHeight)*sin(cos(rand(v0.xzz) * _RandomHeight * cos(_Time[1] * _RandomSpeed * sin(rand(v0.xxz)))));

v0.y += phase0 + phase0_1;

v.vertex.xyz = mul((float3x3)_World2Object, v0);

v2g OUT;

OUT.pos = v.vertex;

OUT.norm = v.normal;

OUT.uv = v.texcoord;

return OUT;

}

[maxvertexcount(3)]

void geom(triangle v2g IN[3], inout TriangleStream triStream)

{

float3 v0 = IN[0].pos.xyz;

float3 v1 = IN[1].pos.xyz;

float3 v2 = IN[2].pos.xyz;

float3 centerPos = (v0 + v1 + v2) / 3.0;

float3 vn = normalize(cross(v1 - v0, v2 - v0));

float4x4 modelMatrix = _Object2World;

float4x4 modelMatrixInverse = _World2Object;

float3 normalDirection = normalize(

mul(float4(vn, 0.0), modelMatrixInverse).xyz);

float3 viewDirection = normalize(_WorldSpaceCameraPos

- mul(modelMatrix, float4(centerPos, 0.0)).xyz);

float3 lightDirection = normalize(_WorldSpaceLightPos0.xyz);

float attenuation = 1.0;

float3 ambientLighting =

UNITY_LIGHTMODEL_AMBIENT.rgb * _Color.rgb;

float3 diffuseReflection =

attenuation * _LightColor0.rgb * _Color.rgb

* max(0.0, dot(normalDirection, lightDirection));

float3 specularReflection;

if (dot(normalDirection, lightDirection) < 0.0)

// light source on the wrong side?

{

specularReflection = float3(0.0, 0.0, 0.0);

// no specular reflection

}

else // light source on the right side

{

specularReflection = attenuation * _LightColor0.rgb

* _SpecColor.rgb * pow(max(0.0, dot(

reflect(-lightDirection, normalDirection),

viewDirection)), _Shininess);

}

g2f OUT;

OUT.pos = mul(UNITY_MATRIX_MVP, IN[0].pos);

OUT.norm = vn;

OUT.uv = IN[0].uv;

OUT.diffuseColor = ambientLighting + diffuseReflection;

OUT.specularColor = specularReflection;

triStream.Append(OUT);

OUT.pos = mul(UNITY_MATRIX_MVP, IN[1].pos);

OUT.norm = vn;

OUT.uv = IN[1].uv;

OUT.diffuseColor = ambientLighting + diffuseReflection;

OUT.specularColor = specularReflection;

triStream.Append(OUT);

OUT.pos = mul(UNITY_MATRIX_MVP, IN[2].pos);

OUT.norm = vn;

OUT.uv = IN[2].uv;

OUT.diffuseColor = ambientLighting + diffuseReflection;

OUT.specularColor = specularReflection;

triStream.Append(OUT);

}

half4 frag(g2f IN) : COLOR

{

return float4(IN.specularColor +

IN.diffuseColor, 1.0);

}

ENDCG

}

41 thoughts on “Low poly water shader”

Nick says:

November 13, 2015 at 12:29 pm

Awesome work, i’ve tried myself to get my hands on shader, but it relatively dark when you don’t know about it in the first place.

Really impressed, keep up the good work.

Any chance that you do a kind of tutorial or a step by step guide on how to program such a shader ? (for newbs like me :D)

Cheers

Reply
1. Ronnie says:
  
  November 13, 2015 at 1:44 pm
  
  This is my first shader, so I am relatively new to this stuff myself! I do agree that shader-information on the web is a dark place. Really hard to find good tutorials or clear answers to anything. But I finally managed to make this. But it’s a bit early for me to make a tutorial, and I don’t really have the time either.. Already found errors and weird behavior on this shader, but will continue working on it and might come back with more!
  
  Reply
  1. Nick says:
    
    November 15, 2015 at 4:54 pm
    
    I can totally understand that it’s very time consuming to do such a thing as a tutorial. Thank you for the reply though. 🙂
    
    By the way, i tried to download this shader to play a bit with it on Unity, and it won’t compile because of this error:
    
    “shader is not supported on this gpu (none of subshaders/fallbacks are suitable)”
    
    Ever came across this error ? I’m still searching for an answer on the web, and i can’t quite understand the problem there.
    
    If i manage to fix it, i’ll share it here 🙂
    
    Reply
    1. Ronnie says:
      
      November 15, 2015 at 5:01 pm
      
      If you are on Mac or some other platform than Windows without DX11 capabilities it probably won’t work.. It’s quite limited as is.. Unity will support geometry shaders on other platforms down the road I believe!
      
      Reply
DragonByte says:

December 17, 2015 at 12:18 pm

Nice work! I tried a lot of times now to develope a low poly water shader by my own but I always give it up with the normal calculation. Can’t get it to work.

Your shader is working but I get an offset from the pivotpoint of the object. It doesn’t render at the place I put my object.

Reply
DragonByte says:

December 17, 2015 at 12:21 pm

Nice work! I tried a lot of times now to develope a low poly water shader by my own but I always give it up with the normal calculation. Can’t get it to work.

Your shader is working but I get an offset from the pivotpoint of the object.

Reply
1. Ronnie says:
  
  December 17, 2015 at 10:37 pm
  
  I believe the offset is due to scaling, not sure. Haven’t had time to look more into this shader. It could be improved in many ways!
  
  Reply
s0w says:

April 2, 2016 at 12:10 pm

This is great!
That low poly water look is exactly what i would like to have in my current project.
I tried to use your example but i soon realized it isn’t affected by fog.

I found this answer regarding fog in vertex shaders:
http://answers.unity3d.com/questions/1068035/fog-not-working-in-my-own-vertext-shader.html

However, with my limited knowledge about shaders i can’t figure out how to pass the fog data through the geometry function in your shader, so i can use it in the fragment function like in the example.

Is there an easy way to achieve this?

Reply
1. Ronnie says:
  
  April 2, 2016 at 1:54 pm
  
  Nothing is easy in shaders if you ask me! In my new version it’s handled, but that is a very different approach.. You could try doing something like the approach on this site: http://forum.unity3d.com/threads/solved-accessing-fog-parameters-in-cg-shader.249886/
  Rember to add the fogDepth to both v2g and g2f structs and set OUT.fogDepth = IN.fogDepth in the geometry function..
  
  Reply
  1. s0w says:
    
    April 2, 2016 at 2:15 pm
    
    Thanks for the quick reply!
    I’ll look into that.
    
    Reply
Brian Ruff says:

April 16, 2016 at 3:50 am

I love your shader and am using it to make my first Unity game. I’m turning it 90degrees and making it a surfable wave:
https://www.instagram.com/p/BBVoPEkskXN/?taken-by=bri_ruff

I can’t figure out how to make it long though. If I duplicate planes the effect breaks… Any tips on how I can increase the surface area?

Reply
1. Ronnie says:
  
  April 18, 2016 at 8:54 pm
  
  Hi, Brian! I really like your idea! And I hope you’ll get it working! The reason for what you are experiencing is a bug in the vertex function of the old shader. I’ve fixed it in my current shader, but not in the one I’ve shared.. I would have to spend some time on it to fix it, and I haven’t had free time to look at it. It’s a rather simple fix. Just have to change the way I added the offset of the vertexes. I believe I set v.vertex = mul((float3x3)_World2Object, v0) or something like that in the shader you have, but what you want is v.vertex.y += mul((float3x3)_World2Object, v0).y .. kind of.. But if you don’t know your way around shaders you could simply make a bigger plane in Blender and use that to get a bigger wave.
  
  Reply
Razvan says:

May 16, 2016 at 7:54 pm

This is a really cool shader. Can I use it for a commercial product? (working on a game that may or may not be published at some point). And another thing – by any chance did you think of adding reflection and transparency to it?

Reply
1. Ronnie says:
  
  May 16, 2016 at 8:06 pm
  
  Thank you! Yes! You can use what I’ve shared any way you want! I’m okay with that! I’ve already made a new shader with reflection and transparency, but I’m not sharing at the moment!
  
  Reply
  1. Razvan says:
    
    May 16, 2016 at 8:14 pm
    
    Thanks for the fast reply and for letting me use it! If I ever finish it I’ll let you know!
    
    Reply
    1. Ronnie says:
      
      May 16, 2016 at 9:02 pm
      
      No problem! Hope you can make it work for your need! Please let me know, yes!
      
      Reply
      1. Andrew says:
        
        May 31, 2016 at 5:46 pm
        
        Ronnie, I break my head, but: how make a float for the boat on this shader?
      2. Ronnie says:
        
        May 31, 2016 at 6:13 pm
        
        I’m not sure I know what you mean, but if you are trying to get an object to “follow” the motion of the waves, you would either need to make another shader that displace the boat with the same wave code, or duplicate the wave code in script..
Andrew says:

June 1, 2016 at 5:26 am

Look: https://drive.google.com/folderview?id=0B-urtPTK6-sgNkFHakczWjRxYm8&usp=sharing

Shader & Screenshot. Box stay in “Plane”. I need swim like boat on waves

Reply
1. Ronnie says:
  
  June 1, 2016 at 7:41 am
  
  Yes.. This is because the collider does not change! You need to duplicate the wave formula in code to make the boat follow.
  
  Reply
FunkyChicken says:

July 20, 2016 at 12:29 am

Hello Ronnie, this shader is awesome and just what I need!
Though I would like to make the water semi transparrent, anyway to add alpha to this?

Reply
1. Ronnie says:
  
  July 20, 2016 at 5:52 am
  
  Did you check out this version? http://www.battlemaze.com/?p=234
  
  Reply
  1. FunkyChicken says:
    
    July 20, 2016 at 9:15 pm
    
    Hmmm, it looks pretty nice and supports alpha, but it says it only works on DirectX 11 capable hardware, I’m planning on exporting to WebGL, so I don’t know if everyone would be able to play it, and after a little messing with the low poly water scene that comes with the package, I got a display driver stopped responding error and unity crashed 🙁
    
    Reply
    1. Ronnie says:
      
      July 20, 2016 at 9:22 pm
      
      Yes, my old shader is quite limited.. I’m not sharing my newest version yet, and don’t have time to support the old one.. I’m sorry..
      
      Reply
      1. FunkyChicken says:
        
        July 20, 2016 at 9:31 pm
        
        It’s ok 🙂 I can live with the non transparent one, thanks for making this free 😀
      2. Ronnie says:
        
        July 20, 2016 at 9:49 pm
        
        No problem! Hope it works out fine! But fyi the non transparent one is also DX11 only i think!
Dave says:

October 23, 2016 at 10:00 pm

Doesn’t compile for me. I get an error saying it doesn’t know what triStream is.

Reply
1. Ronnie says:
  
  October 23, 2016 at 10:36 pm
  
  Did you download the completed shader in the top of the post?
  
  Reply
Yvain says:

July 17, 2017 at 1:42 pm

for people using more recent version of Unity :
you must replace
void geom(triangle v2g IN[3], inout TriangleStream triStream)
by
void geom(triangle v2g IN[3], inout TriangleStream triStream)

Reply
1. Ronnie says:
  
  July 17, 2017 at 1:48 pm
  
  Thanks for helping lost souls out.. but I think those are identical? 🙂
  
  Reply
  1. Yvain says:
    
    February 27, 2018 at 10:50 pm
    
    oh shame, that is a nice copy paste fail
    i meant :
    void geom(triangle v2g IN[3], inout TriangleStream triStream)
    instead of :
    void geom(triangle v2g IN[3], inout TriangleStream triStream)
    6 months too late …
    oddly, i have only been notified by your answer today.
    
    Reply
    1. Ronnie says:
      
      February 27, 2018 at 10:53 pm
      
      The reason your copy paste fails is due to the fact that this thing doesn’t except the chars you are pasting.. no worrys.. I think it is sorted if you use the link to the completed file.. it should be correct there.. 🙂
      
      Reply
      1. Yvain says:
        
        February 27, 2018 at 11:17 pm
        
        ah yes, you’re right those little arrows still refuse to show up, and this time i’m sure i have not screwed up .
        I ve also seen that you added the missing output struct on the geometry shader on your new file indeed.
        I din’t realize that you were so active on answering questions on your blog, my attempt on helping out wasn’t even necessary !
        Nice work on all that by the way !
      2. Ronnie says:
        
        February 27, 2018 at 11:20 pm
        
        Yeah.. It’s the same reason I had troubles with the code I shared on here the first time around! I’m not very good at posting on here, but I follow up on any questions that pops up! 😉 Thank you for the kind words!
figafro says:

December 17, 2017 at 7:23 pm

this shader looks like it would be perfect for a game i’m working on but it doesn’t work with the current version of unity 🙁

Reply
1. Ronnie says:
  
  December 17, 2017 at 9:22 pm
  
  Yeah.. I’ve abondoned this version of the shader.. I’ve redone the entire shader and have it working on newer versions og Unity, but it’s not public.. I’m sorry..
  
  Reply
pikszel says:

February 26, 2018 at 3:40 pm

Hi Ronnie!

Thank you for sharing this shader. I want to use in my art project but i need an opaque version and i don’t find this parameter in the code. The alpha value is 1 but have some transparency. Can you help me, how can I modify the shader?

Thanks in advance and sorry for bad English.

Reply
1. Ronnie says:
  
  February 26, 2018 at 4:10 pm
  
  Just change tags to «Queue»=«Geometry» and «RenderType»=«Opaque» . You can also remove the Blend line and the alpha parts.
  
  Reply
  1. pikszel says:
    
    February 27, 2018 at 9:52 am
    
    Hi,
    thanks for the fast answer. In the shader parameters the Render Queue already set to Geometrey, but I don’t find the Render Type parameter (Unity 2017.3.0f3). Btw removing the blend line in the code solved the problem.
    
    Thank you again and keep up the good work!
    
    Reply
    1. Ronnie says:
      
      February 27, 2018 at 10:34 am
      
      Okey! Maybe it’s not in the shader you’ve used. Or maybe it was removed during convertion to newer Unity.. But if it works..
      
      Reply
      1. pikszel says:
        
        March 1, 2018 at 10:11 am
        
        I was maked a new shader and pasted your code. Thats all, but yeah, it is works. You will be credited 🙂