Skip to content

Animated haze distortion effect for images and text, with WebGL.

Notifications You must be signed in to change notification settings

webyarns/HeatDistortionEffect

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Animated Heat Distortion Effects with WebGL

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.

Article on Codrops

Demo

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".

Read more here: License

Misc

Follow Lucas: Twitter, Dribbble, Flickr

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

© Codrops 2016

About

Animated haze distortion effect for images and text, with WebGL.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 67.7%
  • GLSL 32.3%