Is stylized water like this possible to do performantly?

[hecksa]

Godot Version

4.6

Question

I’m trying to create a water effect for bodies of water in my game that looks as close as possible to this:

It’s obviously a body of water with some waves. The style is intended to be low poly, with irregular polygon shapes. Then, as waves move around, the polygon shapes adjust to keep the edges of the polygons at the peaks/ridges/high points of the waves, as they are positioned in the image.

Basically, the goal is that at any second you could take a screenshot and get something that resembles this look, but while viewing in real time, the polygon shapes would morph over time, to best represent the wave heights/shapes at any given time. Generally, though, from a player’s vision point of view, each individual polygon morphs in shape and angle etc, but doesn’t move, whereas the “waves” appear to be the things moving. The polygons are the medium that conveys the movement.

I’ve been working at this for days now, and have achieved each of the following:

• Generate good polygon shapes using various cellular noise methods.
• Generate wave heights (with or without mapping them to those polygon shapes).
• Generate procedural waves (using various methods).

But I can’t make all those things happen at the same time, respecting each other. The “polygons” need to be positioned and shaped based on the wave peaks and troughs. They need to adjust frame-by-frame to match the changing positions.

If I make the procedural wave generation primary, and try to base the polygon generation off it, I can’t get a solid, low-poly looking effect that gradually morphs from frame to frame to best represent those waves.

If I make the low-poly shapes primary (using voroni noise, for example), I can’t strongly map the wave shapes to it in a way that generates an angular, low poly look.

I considered moving vertices on a mesh with the CPU per-frame, but…as much as I love this visual style, I don’t want to use my entire CPU budget pushing ocean vertices around.

I’m starting to think that this isn’t possible to do efficiently.

Is there a way?

[alvenster]

I might be talking nonsense cause I don’t think I understood everything, but from what I did, you’re trying to have waves, and from those waves you want a noticeable polygonal structure that adapts to those waves (primarly the waves’ edges) ? I’m going to assume that’s a yes in my response if that’s okay (feel free to correct me)

1. First of all, I don’t think the polygon edges actually faitfully follow the edges of the waves in your screenshot and it might just be a trick to make you think they are when they are not. What I’m trying to say is I feel that I can percieve the waves’ edges because of the foam and not necessarly the polygonal structure. You could play around that instead and I’m pretty sure the effect would be close to your screenshot still.
2. I’m guessing you can’t have your three achievements together cause basically you would need to calculate the waves, recalculate the mesh, send it to the GPU and displace it properly, every single frame which I think would be impossible to do efficiently ?
3. If that’s a yes, my solution would be this :
   1. You don’t need to have polygons, you could juste fake them by altering the normals using cellular noise, which would only exist in the shader and be very flexible.
   2. Following this principle, create a dense enough Gouraud shaded mesh that would carry your shader.
   3. In the vertex shader, displace the verticies using your UnbelievablyGorgeousWavesAlgorithm™
   4. Since Cellular noise is basically the value of the distance between randomly placed points, you could build a custom one that would place these points away for the edges of your waves ( which you could detect ungracefully using the vertex Y coordinate), so that cellular edges would organically follow your wave’s edges.
   5. Using your custom built cellular noise, alter the normals of your mesh in the fragment shader, giving the illusion of different polygons when really these are shader magic and not actual CPU computed polygons.

Don’t know if what I said made sense but I hope it did. Feel free to correct me if I misunderstood a few things

[dragonforge-dev]

Go to Godot Shaders and check out all the water shaders. Apply them to something in your game, decide which one you like the most and then edit it if needed.

[istubbdmytoe]

I was able to get the following result by displacing a plane mesh’s vertex by a noise however I’m very new to shaders so somebody more experienced could clean this up but this is what I got to work that looks roughly like that:

This is the following shader code:

Code

shader_type spatial;

uniform vec4 color : source_color;
uniform sampler2D noise_a;
uniform sampler2D noise_b;
varying float vertex_y;
void vertex() {
	// Called for every vertex the material is visible on.
	
	VERTEX.y += texture(noise_a, vec2(VERTEX.x + TIME/8.0, VERTEX.z)).r;
	VERTEX.y -= texture(noise_a, vec2(VERTEX.z + TIME/8.0, VERTEX.x)).r;
	vertex_y = VERTEX.y;
}

void fragment() {
	// Called for every pixel the material is visible on.
	ALBEDO.rgb = (vertex_y + 1.0) / 1.3 * color.rgb;
	if (vertex_y > 0.4){ALBEDO.rgb = vec3(1, 1, 1);}
	ALPHA = color.a;
}

You can configure it using the two textures for noise, the color for transparency and… well… color. If you want to adjust detail you can do that in the plane mesh’s subdivides property.