Animated Water Distortion Effects with WebGL

A tutorial on how to use fragment shaders in WebGL to create an animated water haze distortion effect on images.

Installing

First, you'll need node.js, which includes npm. Then, open the project folder on the terminal and run:

$ npm i

Building and running

Building

$ npm run build

Watching

$ npm run watch

Running

$ npm run start

Then open http://localhost:8080/demo.

Watching & Running

$ npm run start-dev

...and when you're done...

$ npm run stop-dev

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".