Jump to content
  • Advertisement
Sign in to follow this  
freeworld

2D grid based water... what aresomesolutions

This topic is 2557 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm horrible when it comes to thinking about how to properly use shaders to obtain a certain effect. The information that I'm basing the water off is a2D grid were each grid has a waterLevel variable, and renders circles, darker or lighter based onthatvalue. But I'm wandering how I could go about making the final water look smooth.

Heres a quick pick of what I'm talking about... the upper left is what I'm rendering to another texture, the darker(more) the blue, the higher the water level is. The lower right is basically what I want it to look like afterwards?

water.png

Share this post


Link to post
Share on other sites
Advertisement
Hidden
Hi!
If you want a smooth water with some waves, use the sinus-function to acheive height and then set the colors depending on the height.
In short, pass an uniform value which is time to your vertex shader, and do something like this (I am not using any reference or testing when writing this so just think of it as pseudo code):

////////// vertex shader:
uniform float time;
attribute vec4 position;
const float heightAmplitude = 2.0;
varying vec4 vColor;

main(){
float extraHeight = sin(time+position.z)* sin(time*0.5+32.3+position.y);
gl_Position = vec4(position.x, position.y+heightAmplitude*extraHeight, position.z, position.w);
vColor = vec4(0.0, 0.0, 0.5+0.5*extraHeight, 0.5+0.5*extraHeight);
}

/////////// fragment shader:
varying vec4 vColor;
main(){
gl_FragColor = vColor;
}

//////////////////////////////////////////////////////////////////////////////////////////////////
This example pseudo code (will not compile) should create some sort of smooth noise for you. The color is set in the vertex shader to increase performance.

Share this post


Link to post
First thought: Blur.
Second thought: Is there a reason you need to render circles, and not, e.g., additively- (or otherwise-) blended sprites? That'd automatically give you smoothness.

Share this post


Link to post
Share on other sites
Change your "grid of circles" into a texture, one texel per circle.

Then in your shader to get the bands of color, sample the texture and use the round() shader intrinsic creatively. round() takes a number and rounds it to the nearest integer. Since the value of the texture sample will be between 0 and 1, that's not exactly useful. But if you multiply up the sample, say by 10, then the range is from 0 to 10. Then pass that through round(), and the result will be a whole integer between 0 and 10. Then divide that by 10 to get back down to 0 to 1, except the result will be quantized to 10 possible levels, so you will get that banding "artifact". This is the same technique that's used to do cel shading.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!