これが 2012 年の作品だと!? 思わず目を疑いたくなる最高に美しい WebGL デモ作品
最初から最後まで驚きの連続!
今回ご紹介するのは、WebGL のかなり初期の時代、と言って差し支えない 2012 年に公開された three.js 実装のデモです。その頃わたしなにやってたかなあ……
2015 年 5 月現在、three.js のバージョンは r71 にまで到達していますが、今回のデモに利用されている three.js は r50 です。時代を感じますね。
しかし、実際のデモの内容は現在でもなかなか目にすることは難しいレベルの、非常に高度なものになっています。
そのディティールの高さに思わずため息が出る
正直なところ、このデモについてはあまり語るべき言葉が見つかりません。
論より証拠、百聞は一見に如かず――
まずは、実際にこれをご覧になってみていただくことをお勧めします。
とは言え、一応流れを簡単に説明するとページを開いた直後は、解像度を指定するためのリストボックスが画面に控えめに置かれています。
ここから、希望の解像度を選択しましょう。
あえて書いておきますが、今回のデモは かなり重い です。そのあたりは覚悟したほうがいいと思います。
また、同時にロードにかかる時間も相当な時間があります。下手をすると 2 ~ 3 分程度待つこともあるかもしれません。しかしそれでも、見る価値があります。そのことだけは、間違いありません。
もしオンボード GPU のマシンで閲覧しているのなら、小さめの解像度を選択することをお勧めします。
多少パワーのあるグラフィックボードを積んでいるなら、最低 1280x720 くらいからが見応えもあっていいと思います。
美しいライティングと、被写界深度のエフェクトがとても素晴らしいですよね。
画面のふちが黒くなるような演出も、非常に味わい深くていい感じです。
ミクロな世界を覗き見ているような、素晴らしい感覚を体験できるはずです。
静止画で見ても十分に美しいこの映像が、目の前でヌルヌルと動くのはまさに驚愕の一言。
ソースコードを注意深く読み解いていけば、シェーダのソースコードも見つけることができます。まさにこれはお宝クラスの WebGL デモンストレーションと言っていいのではないでしょうか。
three.js のバージョンがかなり古いので、そのまま現在の three.js を使った実装に活かすことは難しいでしょう。しかし、実装における工夫や GLSL のソースなど、参考にできる点は非常に多いはずです。
単純に映像作品として見ても、とても素晴らしい出来栄えです。
ぜひ、チェックしてみてください。