Low-poly ocean/water

Questions
,
1

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,
Andrei

1 Like
2

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

below:
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
3

https://threejs.org/examples/?q=water#webgl_shaders_ocean
https://sbcode.net/threejs/gerstnerwater/
More waters here:
water.txt (5.2 KB)

2 Likes
4

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

5

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

6

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

7

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

2 Likes
8

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

9

You’re welcome :beers:

10

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