Water In WebGL - One You Have To See
Written by David Conrad   
Sunday, 30 March 2014

Sometimes there are demo programs that you just have to see because they are beautiful. In this case it is a raytraced water simulation - but using WebGL to deliver it in your browser.

As long as you are running an up-to-date Firefox, Chrome or IE you can have fun watching the water ripples in this WebGL ray tracing simulation of water. Make sure you click or touch the surface of the water to make ripples and make sure you drag the sphere around to see how it disturbs the water and alters the lighting. 

 

ballwater

 

This would be impressive enough as a desktop app, but you almost have to pinch yourself to remember that it is all happening in the browser. 

The caustics, the lines of light on the surface, are computed using nothing but the GPU. The water surface is simulated using a height-field mesh - each vertex is moved toward the average height of its neighbors - and this simple action creates waves. The overall ray tracing is custom constructed for the specific scene. 

I would urge you to try the program out at http://madebyevan.com/webgl-water/, but if you can't then take a look at the video:

 

  

If you can't see it in action it is because you don't have the latest browser or you are running iOS. Safari is the last of the big browsers to avoid WebGL and this denies iOS users this sort of web experience.

Why doesn't Apple put WebGL into Safari? The given reason is security because code that uses the GPU cannot be sandboxed. Microsoft gave the same reason for keeping WebGL out of IE but now its in and there isn't a mention of any security difficulties. In both cases the real reasons  are most likley commercial - Microsoft protecting DirectX and Apple protecting its App Store revenue. 

Having said this, it is true that most GPU experts agree that WebGL and GPU use from the browser does pose a security problem that no-one has taken seriously so far. 

 

More Information

http://madebyevan.com/webgl-water/

Related Articles

Realtime Fluid Flow - Wow!

Interactive Fluid Simulation in WebGL

New face animation algorithm

The sands of time - simulated

OpenGL 3D fluid simulation (video)

OpenGL GPU Smoke simulation

SIGGRAPH University - Learn OpenGL

WebGL 3D Sculpture Demo       

Getting started with WebGL

Tearable Cloth In JavaScript

Getting Started with Box2D in JavaScript     

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.

 

blog comments powered by Disqus

 

Banner


Self Assessment For Programmers
21/07/2014

A useful proficiency matrix has been produced that could be used to track your own progress when learning to program or to advertise your skillset to prospective employers.



ConvNetJS - Deep Learning In The Browser
07/07/2014

ConvNetJS brings deep neural networks to your browser. It's easy to use and fast without using a GPU, which means it works almost anywhere. 


More News

Last Updated ( Monday, 31 March 2014 )
 
 

   
RSS feed of news items only
I Programmer News
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.