# Low-poly ocean/water

**URL:** <https://discourse.threejs.org/t/low-poly-ocean-water/33513>\
**Category:** Questions\
**Tags:** water, ocean\
**Created:** [January 11, 2022, 3:27pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513 "2022-01-11T15:27:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tzontonel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tzontonel/32/23406_2.png) [@Tzontonel](https://discourse.threejs.org/u/Tzontonel)\
**Post date:** [January 11, 2022, 3:27pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/1 "2022-01-11T15:27:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 11, 2022, 5:02pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/2 "2022-01-11T17:02:18Z")

</div>

You can take an example from shadertoy (e.g. [Shader - Shadertoy BETA](https://www.shadertoy.com/view/NdtXDN) ) and customize it.

You can see how this works in the [collection](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315).

Use [\* discourse.threejs.hofk.de](https://hofk.de/main/discourse.threejs/) go to [ShaderBeginner](https://hofk.de/main/ShaderBook/)

* * *

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.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 11, 2022, 6:00pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/3 "2022-01-11T18:00:39Z")

</div>

[https://threejs.org/examples/?q=water#webgl\_shaders\_ocean](https://threejs.org/examples/?q=water#webgl_shaders_ocean)  
[https://sbcode.net/threejs/gerstnerwater/](https://sbcode.net/threejs/gerstnerwater/)  
More waters here:  
[water.txt](https://discourse.threejs.org/uploads/short-url/sv4n5VptnaoTcC5P2yo76vibKLT.txt) (5.2 KB)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 11, 2022, 8:44pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/4 "2022-01-11T20:44:04Z")

</div>

> [@Tzontonel](#):
>
> similar to a low poly ocean (maybe a little animation for the waves)

The first thought caused by that description is about this one: [In the Orb (Shaders)](https://discourse.threejs.org/t/in-the-orb-shaders/3286)

---

<div class="post-metadata">

**Author:** ![Tzontonel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tzontonel/32/23406_2.png) [@Tzontonel](https://discourse.threejs.org/u/Tzontonel)\
**Post date:** [January 11, 2022, 9:34pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/5 "2022-01-11T21:34:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 11, 2022, 9:48pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/6 "2022-01-11T21:48:40Z")

</div>

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](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 11, 2022, 10:06pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/7 "2022-01-11T22:06:03Z")

</div>

Made a small example, using the lastest revision (thus it’s without `THREE.Geometry`): [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/79z8jyLk/)

---

<div class="post-metadata">

**Author:** ![Tzontonel](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tzontonel/32/23406_2.png) [@Tzontonel](https://discourse.threejs.org/u/Tzontonel)\
**Post date:** [January 11, 2022, 10:22pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/8 "2022-01-11T22:22:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 11, 2022, 10:25pm UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/9 "2022-01-11T22:25:54Z")

</div>

You’re welcome 🍻

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [May 29, 2022, 10:05am UTC](https://discourse.threejs.org/t/low-poly-ocean-water/33513/10 "2022-05-29T10:05:47Z")

</div>

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](http://philcrowther.com/WebGL/Flight/WaterTiles.html) which contains 4 separate planes.

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