Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/jbouny/ocean
- Owner: jbouny
- License: mit
- Created: 2013-12-02T22:16:35.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-10-18T20:25:15.000Z (about 7 years ago)
- Last Synced: 2024-04-17T05:42:07.346Z (7 months ago)
- Language: JavaScript
- Homepage: http://jeremybouny.fr/ocean/demo/
- Size: 4.93 MB
- Stars: 659
- Watchers: 46
- Forks: 90
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-threejs - Realistic water shader
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")