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

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

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

2 Likes

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

1 Like

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

You’re welcome :beers: