A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text. By Lucas Bebber.
First, you'll need node.js, which includes npm
. Then, open the project folder on the terminal and run:
$ npm i
$ npm run build
$ npm run watch
$ npm run start
Then open http://localhost:8080/demo
.
$ npm run start-dev
...and when you're done...
$ npm run stop-dev
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
Read more here: License
Follow Lucas: Twitter, Dribbble, Flickr
Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest