WebGL Water WebGL Water / tutorial / free

http://madebyevan.com/webgl-water

Quite possibly my most favorite WebGL demo of all time. It's not positioned as a tutorial but if you are smart enough at math to understand it, then browsing the source may be of use. Don't miss the directions on the right.
1 favorite
submitted almost 4 years ago, by pineapple
WebGL Water popular tutorial

7 Comments

metastew

Impressive! I'm surprised a good looking demo could run on my laptop at all! Albeit a bit sluggish at only 10fps. I would love to learn WebGL but my biggest struggle has to be with wrapping my head around shaders and how they work. One day though... I'll crack that nut.

metastew, almost 4 years ago

lush

Have you used any 3D graphics software before?

lush, almost 4 years ago

metastew

A long time ago, I played with Lightwave and Blender for a little bit.

metastew, almost 4 years ago

pineapple

I found a really cool "bug"/trick with this.... basically load it up and let the water simmer down for a few seconds, then hit SPACE to pause it.

Normally, when you drag your mouse across the surface with the button down, it will make ripples, but if its paused and you do the same action, it 'builds' the ripples on top of eachother. Without dissipating though (on pause), they just collect and add up.

In other words, after you pause it, drag the mouse back and forth in a very tiny path (about 2 cm back and forth on the screen). you will see the ripple 'build up' and go completely outside the browser window.

Do this for a good minute or so, then.... unpause. It makes a massive earth shattering ripple.

pineapple, almost 4 years ago

metastew

Here's another wicked WebGL Demo: http://idflood.github.com/ThreePlanet.js/

metastew, almost 4 years ago

pineapple

I'm a fan of Google's webgl population globe

pineapple, almost 4 years ago


Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.