#Webgl water simulation android
#Webgl water simulation free

Believe it or not you will become happy playing it, squeezing every second from it, to experience love and connection to our big universe. When you first launch it you're gonna be frozen by a beauty, that magnificence, that you have never ever seen before. This beautiful creation can help you to chill, relieve this pesky stress from your mind and enjoy your moment of life, right now. Gorgeous visuals will take your breath away and help you to relieve stress. Play and experiment with these swirling substances. I don't think web apps will ever entirely replace traditional native apps, but I still think they have a bright future.Feel bored or anxious? This app can solve your problem! Play with fluids with a touch of your fingers. There are many other emerging HTML5 standards like WebWorkers and WebSockets which are really increasing the capability of web apps. I think technologies like WebGL are really exciting. Things like this have made me appreciate JavaScript as a language and are winning me over to dynamic languages in general. They are still an incompatible mess (and there are more browsers now), but with JQuery, you rarely have to use them directly. When I originally learned JavaScript (in 1998 or so), there were no frameworks, and the DOM APIs were an incompatible mess. This is the first time I've used JQuery, and it is really a wonderful framework. The interactive component of the demo is done with JQuery. After that, you just call mesh.prepare() to set up everything and mesh.draw() to draw the mesh. Basically, you create a new Mesh or IndexedMesh object by giving a WebGL primitive (e.g., TRIANGLES), a shader, and dictionaries of uniforms, attributes, and textures. I encourage you to hit 'View Source' in your browser and look at initTerrainMesh or initWaterMesh to see how these are used.

texture.js - loads textures from images.

buffer.js - manages vertex buffer objects.

shader.js - extracts and compiles GLSL vertex and fragment shaders.

camera.js - manages a camera which rotates around a sphere.

matrix.js - a basic 4x4 matrix library with some useful transformations.

#Webgl water simulation free

They are BSD licensed, so feel free to use them in your own projects. Here are some links to the JavaScript files.

I wanted to understand it better though, so I ended up writing my own framework. Most people use some kind of framework to interact with it. Unfortunately, WebGL is not a simple library to use directly. I also made the sand and grass textures in GIMP. The terrain mesh is just a grid of 2D points the Z coordinate is pulled out of the height map by the vertex shader. The terrain itself is drawn using a simple 256x256 height map I made in GIMP and a pre-generated normal map. You could probably simplify this by just using the water depth, but I think this looks better. The amount of fog is proportional to the underwater distance between the camera and the terrain. You can still see it if you turn off the water rendering. This is a fog effect computed when the terrain is drawn. You'll notice that as the water gets deeper, the terrain gets less visible.

I ended up settling on a quick approximation using the sine of the angle. Although it gave physically accurate results, they didn't really look the way I wanted. I originally implemented Fresnel equations for this. This is done per pixel, and it takes the waves into account. The reflectance of the water is determined by the steepness of the camera angle with respect to the surface of the water. You could also use a skybox for this, but this works well enough for me. The reflection vector is used to access a regular 2D tiled sky texture. The fragment shader uses all eight rows to compute the normal and the reflection vector based on the derivative of the waves and the camera position. The water mesh itself is a 256x256 grid, which is not high enough resolution for smaller waves. The vertex shader uses the first four rows (big waves) to compute the height (Z coordinate) of the water at each vertex. Every parameter of every wave can be adjusted using the form above. The water is a simple sum of eight 2D sine waves. No Flash involved, no browser plug-ins required. What you see above is done entirely in HTML and JavaScript. Rotate the camera by dragging the mouse.I did another water simulation a couple years ago, but this one is fancier and completely interactive!

#Webgl water simulation android

Since I'm doing a lot more JavaScript stuff these days at work (I optimize the V8 JavaScript engine used in the Android browser), I figured I'd throw together a more elaborate WebGL demo than last time. It's been a while since I played with anything graphics related.