夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することができるチュートリアル「Animated Heat Distortion Effects with WebGL」をご紹介します。WebGLを使っているのが特徴です。「熱による揺れ」は意外といろんなシーンに応用できるかと思います。
Animated Heat Distortion Effects with WebGL
実際のデモが用意されているので、気になる方はぜひチェックしてみてください。
Desert、Jet Heat、Wok Heat、Waterの4種類のデモを見ることができます。
アフリカの灼熱の地、飛行機のジェットエンジン、料理の加熱、水面の揺れなどさまざまな場面で活用できますね。
とてもリアルで、おもわず「これ動画?」と思ってしまう方も多いのではないでしょうか? 画面いっぱいに表示させた写真と組み合わせることで、インパクトもだいぶ強まりますね。ゆらゆら揺れ動くこのエフェクトを使うことで、その場の雰囲気がよりいっそう伝わってきます。
というわけで、webページに陽炎のような揺れを取り入れたいという方は要チェックです。
Animated Heat Distortion Effects with WebGLの詳しい実装方法やダウンロードは以下からどうぞ。