Low-poly ocean/water

Hi there,

There is any way to create a floor that is similar to a low poly ocean (maybe a little animation for the waves)? Can be achieved with #threejs ?
I searched a lot on the examples and I didn’t find a starting point.

Thanks in advance,

1 Like

You can take an example from shadertoy (e.g. Shader - Shadertoy BETA ) and customize it.

You can see how this works in the collection.

Use * discourse.threejs.hofk.de go to ShaderBeginner

At shadertoy there are predefined shader inputs which can be expanded above the code. The output fragColor is to be replaced for three.js shader by gl_FragColor. In the examples with code from shadertoy the necessary changes are marked by comments // added hofk or // changed hofk.

then shader1, examples at the bottom.

1 Like

More waters here:
water.txt (5.2 KB)


The first thought caused by that description is about this one: In the Orb (Shaders)

This example is great, but I get Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

I’m sure it’s because the demo was made with r97, and for the ocean waves was used PlaneGeometry of THREE.Geometry type, that was deprecated since r125: THREE.Geometry will be removed from core with r125

Made a small example, using the lastest revision (thus it’s without THREE.Geometry): Edit fiddle - JSFiddle - Code Playground


@prisoner849 Thank you so much for your time and help, it’s perfect and what I was looking for!

You’re welcome :beers:

prisoner849 - That is an excellent example.

After playing around with it a bit, I found that you can also create tiled waves, like this example which contains 4 separate planes.

If anyone is interested, I’d be glad to share the code I used to get this effect.

1 Like