Sign in to follow this  

2D grid based water... what aresomesolutions

This topic is 2346 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?

[img]http://i4.photobucket.com/albums/y122/free90free/water.png[/img]

Share this post


Link to post
Share on other sites
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

This topic is 2346 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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this