レンズが光を反射する様子をリアルにシミュレート！ シンプルながらも興味深い光の挙動を観察してみよう
doxas : 2014-11-03 11:24:25
見た目は簡素だけど完成度は高い
WebGL のコンテンツというと、どうしても見た目に派手さを持つものばかりが注目されがちです。
でも GLSL による高速な処理の利点を生かせば、必ずしも見た目が派手ではなくとも面白いものが作れます。
今回紹介するデモは、派手さはありませんが非常に面白いレンズシミュレーターです。
カーソルで光源を動かしてみよう
真っ黒な画面の中央におもむろに置かれた CANVAS。
そこにはなにやら幾何学模様の枠線と、放射状に延びる光を模した線が描かれています。
このデモは、一般にスネルの法則と呼ばれている反射や入射に関する法則を用いて、レンズの挙動を再現しています。
単純な矩形や円だけでなく、様々なレンズのプリセットが用意されていて、それぞれにどのような反射が起こるのかを視覚的に確かめることができます。
先ほどの四角形の場合だと、光が反射する様子がよくわかりますよね。
よく見てみると、光が反射して矩形の外側に出ていく時にも、屈折が起こっているのがわかると思います。非常にリアリティがありますね。
プリセットの中には、凹型と凸型のレンズを並べたようなものもあります。
光源から出た光線が、レンズの効果によって集光、更には別のレンズに当たって屈折するなど、見ていても非常におもしろいです。
カーソルに連動して光源の位置を変えることができますので、いろいろな場所に光源を移動させてみましょう。光線の色は加算合成されているので非常に美しいですね。
思わぬ方向に曲がっていく光線もあったりして、若干地味ですが結構楽しめるのではないでしょうか。数学や物理に詳しくなくても、こういうものを見ているとなんとなく物理的なことを考えてしまいますね。
