歪曲収差（ディストーション）を GLSL で表現！ レンズによる歪みを再現できる fisheye.js！
レンズの特性を知るのにも適したライブラリ
今回ご紹介するのは、歪曲したレンズなどに見られる像の歪みを再現することができる面白いライブラリ、fisheye.js です。
レンズの歪みは、写真が趣味だったり、あるいは画像処理の専門家だったりするといろんなところで付き合っているのだろうなとは思いますが、日常生活のなかではあまり意識しないことが多いですね。
しかし 3DCG の世界では、こういったレンズの補正などのテーマも比較的よく目にします。派手さはありませんが、参考にしてみるといいのではないかと思います。
レンズの歪みの特性を観察してみよう
近年では、VR デバイスの登場もあり、なにかと目にすることの多いレンズ補正の話題。
fisheye.js では、非常に簡単にレンズ補正の再現ができるようになっており、パッと見た感じではかなり使いやすいライブラリのように見えますね。
デモ用のレンダリング結果を見ると、デフォルトで歪曲が掛かった状態になっていますが、一切歪みのない状態にするとこんな感じになっています。
ステンドグラスのような背景が描画されているのがわかりますね。
これは想像ですが、歪みの様子をわかりやすく表現するために、このような直線的なフォルムの画像を用いているのだと思います。
画面の右側には、スライダーがいくつか置かれているのがわかると思います。このスライダーを操作することで、歪み具合が自由に調整できるようになっています。
歪みには、樽型歪（たるがたひずみ）と糸巻き型歪（いとまきがたひずみ）があります。
今回のデモでは、スライダーをどう操作したかによって、いずれの歪みの状態も再現できるようになっています。四隅がそれぞれ四方に伸びて広がっていくような歪み方が糸巻き型、その逆が樽型です。
また、今回のデモでは RGB を別々に歪ませることもできるようになっており、非常に不思議な映像を作り出すことも可能です。
Github のページには、利用方法についての解説も掲載されており、canvas を渡してインスタンスを生成するやり方で、非常に簡単に利用することができるようになっていることがわかります。
あまり汎用性の高いテーマではないかもしれませんが、いざというとき、参考にできる場面はあるのかなと思います。
気になる方はぜひチェックしてみてください。
