Today we want to show you how to create some realistic looking heat haze distortion effects using fragment shaders in WebGL. The idea is to add a subtle animated distortion to a static image and some text. Please note that the current ZIP file is the compiled build of this project; source files can be found in the GitHub repo. See the link below. Overview For this article, we’ll pick apart one of
![Animated Heat Distortion Effects with WebGL | Codrops](https://cdn-ak-scissors.b.st-hatena.com/image/square/691b4b5bab82c329f486be0f1ae4545f536699b0/height=288;version=1;width=512/https%3A%2F%2Fcodrops-1f606.kxcdn.com%2Fcodrops%2Fwp-content%2Fuploads%2F2016%2F05%2FDistortionEffect_800x600.jpg%3Fx11129)