🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

Water water everywhere... and not a drop to drink!

posted in The Berg for project The Berg
Published September 15, 2018
Advertisement

Oh boy... my fave part... simulating water!  You'll see on my YouTube channel I'm not new to this...

 

But let's not get carried away... I don't need water looking anywhere near as realistic for 'The Berg'.  A simple sub-divided plane and another vertex displacement shader will do the trick...

The problem I have is that I get 'hung up' on water.  I can fiddle for hours tweaking this and that.  MUST NOT DO THAT THIS TIME!!

...

Several days later...


	float step = viewSize / subdivisions;
	vec2 pp = vec2(playerPos.x, -playerPos.z);
	vec2 adjPlayerPos = floor(pp / step) * step;
	vec2 remainderPP = pp - adjPlayerPos;

	float uvScale = viewSize / mapSize;
	vec2 uvOffset = vec2(adjPlayerPos + (mapSize / 2.) - (viewSize / 2.)) / mapSize;
	vec2 newUV = uvOffset + uv * uvScale;

	float dOffset = 0.001;
	vec2 depths = vec2(0);
	depths.x = clamp(nSeaLevel - texture2D(heightMap, newUV + vec2(-dOffset, -dOffset)).r, 0., nSeaLevel) / nSeaLevel;
	depths.y = clamp(nSeaLevel - texture2D(heightMap, newUV + vec2(dOffset, dOffset)).r, 0., nSeaLevel) / nSeaLevel;
	float avDepth = (depths.x + depths.y) / 2.;

	float displace = 0.;

	vec2 waveOrigin[3];
	waveOrigin[0] = vec2(0.5, 0.5);
	waveOrigin[1] = vec2(0.3, 0.25);
	waveOrigin[2] = vec2(0.9, 0.75);

	float waveOriginDist[3];
	waveOriginDist[0] = distance( waveOrigin[0], newUV );
	waveOriginDist[1] = distance( waveOrigin[1], newUV );
	waveOriginDist[2] = distance( waveOrigin[2], newUV );

	vec2 t;

	for (int i = 0; i < 3; i++) {
		displace += cos( waveFreq * ( 1. / float(i + 1) ) * waveOriginDist[i] + (time * 2.)) * avDepth;
		displace += cos( waveFreq * avDepth * 2.5 * waveOriginDist[i] - (time * 1.5) ) * 0.5;

		t += normalize(newUV - waveOrigin[i]) * cos(time * 0.1);
	}
	displace *= avDepth;
	t *= 10.;

	vec2 adjVertPos = vec2( position.x - remainderPP.x, position.y - remainderPP.y );
	vec3 newPos = vec3( adjVertPos.x + t.x, adjVertPos.y + t.y, displace * heightScale );
	vec3 transformed = newPos;

What... have... I... done...?

What kind of monster have I created?

...

image.png.b3c551dbeac888ec360fd6a5c30326e6.png

?

Just kidding....

 

2 likes 0 comments

Comments

Awoken

Your water looks really good.  Of course your first video looks very good, but I have a particular interest in what you've done with 'berg'.  I'm creating a project using node.js and three.js.  I noticed the excellent performance you're able to achieve relying on the shaders to do most of your rendering ( am I understanding your blog posts properly? ).

I'll post my questions regarding shaders in your other blog post.

September 19, 2018 09:52 PM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement
Advertisement