ベルギーのドキュメンタリー映画の歴史を振り返る！宇宙を連想させる壮大な WebGL デモ

doxas : 2017-07-17 13:41:25

青く美しい世界を描き出す

今回ご紹介するのは、ベルギー発のウェブサイトで映画に関連したコンテンツを提供しています。

まるで知見がなかったのですが、ベルギーは連邦国家で、ひとつの国のなかに政府が複数存在するんですね。今回のサイトはそんなベルギーを構成する共同体のうちのひとつ、フランス語共同体に関わるもののようです。

フランス語共同体というくらいなので、その地域に暮らしている人たちの共用語はフランス語です。サイトのほうも、フランス語ですね。

映画作品の歴史の一端を見ることができます。

今回のサイトは映画がテーマになっているのですが、40 年以上の壮大な歴史をまとめたような、そんな内容になっています。

掲載されている映画の本数がかなりあるので、たぶん本国の人たちのなかには、とても懐かしい思いでこのサイトを見た人もいたんじゃないかなと思います。

残念ながら日本では、これらの映画作品を詳しく知っているという人は少ないと思いますので、今回は主に映画の内容よりも WebGL の実装面に注目して見ていきたいと思います。

最初にサイトがロード完了したあと、スクロール操作を行うと、宇宙のような空間が突如として現れます。

キャプチャ画像では見えにくいと思いますが、背景にはまるで星がたくさん浮かんでいるかのように、パーティクルが無数に置かれています。

これらの 3D として描かれるもののほとんどが、マウスカーソルによる微妙なインタラクションを取るようになっていて、カーソルをぐりぐり動かしてやると立体感がより際立って感じられると思います。

こういうさりげない感じの 3D 表現は無駄に派手になりすぎないところがいいですよね。

このシーンは中央に西暦の年の数値が出てくるのですが、この影絵のような見た目もなかなか雰囲気があっていい感じです。さらに、映画のタイトル部分などにカーソルをホバーさせると、中央にはその映画を象徴する写真やイラストが表示されます。

これらの DOM の外観の変化もなんらかのアニメーションを伴うように作られており、雑なところがまったくありません。さらにクリックしてやれば、その映画の詳細情報なども見ることができ、コンテンツとしてのボリュームはかなり大きいです。

時間の経過と、3D の奥行き表現とをうまくリンクさせており、単に二次元で見せるのはまったく違う、奥行きスクロールとでも言うべき構造になっています。

こういうことができるのは、WebGL ならではといった感じ。

今回のサイトの 3D 実装は、複数の様々な演出パターンがあるというよりは、ひとつのシーンをうまく状況に応じて使い分けるような実装になっていると想像します。

WebGL の実装を自分で組んだことがあるとわかるかもしれないですが、複数のシーンを用意したり、複数のシェーダを制御したりしなければならないような実装は非常に手間が掛かります。その点、今回のサイトは非常にシンプルにまとまっているように感じました。

よーく観察してみると、実は結構ポストエフェクトが掛けられていたり、細かいところで品質を底上げするような工夫が多く見受けられます。