Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jbouny/ocean

Realistic water shader for Three.js
https://github.com/jbouny/ocean

Last synced: 3 months ago
JSON representation

Realistic water shader for Three.js

Awesome Lists containing this project

README

        

ocean - Realistic water shader for Three.js
=====

This project propose an implementation of a three.js shader to provide a realistic plane water effect.
It can be used to render water in some situations like complete ocean or small surface of water in real time.

### Demos

* [Demo](https://jbouny.github.io/ocean/demo/)
* [Basic demo](https://jbouny.github.io/ocean/demo_basic/)
* [Mobile control demo](https://jbouny.github.io/ocean/demo_mobile/)
* [Fog and rotation demo](https://jbouny.github.io/ocean/demo_test/)

### Dependencies

- Three.js r71 to render the scene : https://github.com/mrdoob/three.js/
- JQuery 1.10.2 as a helper : https://github.com/jquery/jquery
- Terrain-generator for procedural terrain generation : https://github.com/jbouny/terrain-generator

### Sources

- Slayvin - http://slayvin.net
Use of the flat mirror implementation for three.js as a base : https://code.google.com/p/mirror-three-js/source/browse/FlatMirror.js

- Stemkoski - http://www.adelphi.edu/~stemkoski
Use of the adaptation of the flat mirror implementation to provide a water effect

- Jonas Wagner - http://29a.ch/
The real rendering come from here : http://29a.ch/slides/2012/webglwater, an explanation on how to render water. With some adaptation of its shader, results are here.

### Screenshot

![Alt text](/screenshots/ocean1.jpg "Example of a water rendering with an ocean")