世界観が見るものを圧倒するハイエンドな WebGL 実装！ サウジアラビアの企業 MIDWAM のウェブサイト
映画のワンシーンのような壮大なスケール
今回ご紹介するのは、サウジアラビアにある企業 MIDWAM のウェブサイトです。
背景部分がフル WebGL によって描画されるタイプで、画作りが非常に凝った内容となっています。まるで映画か、あるいはゲームのワンシーンのような、壮大・荘厳な雰囲気が素晴らしい出来栄えです。
スクロールに連動して変化するシーン、さらにはマウスボタンの押下＋ホールドで発生するインタラクティブな効果など見どころ満載です。
リンク：
音とビジュアルの相互作用が素晴らしい
今回のサイトは、音声が再生されるようになっていて絶えず BGM が流れているのですが、この BGM が雰囲気をぐっと底上げしてくれています。サウンドの効果が非常に大きいので、ぜひ音声ありで閲覧してもらいたいサイトとなっています。
ビジュアルの印象としてはなんか未知の世界というか、あるいは大げさに言うといわゆる異世界や地球外生命体の世界みたいな…… 不思議な空間として描かれています。
そこに BGM が加わることでなんとも言えない深い味わいになっており、ビジュアルとサウンドとが混ざり合って見事な世界観を構築しています。
今回のサイトでは、顔のない人の姿をしたキャラクターが登場するのですが、この人物のキャラクターを中心にしたカメラワークでコンテンツが進行します。
スクロール操作を行うたびにカメラが動き、それに連動してコンテンツ（文章など）が切り替わります。
ビジュアルもそれらに連動して雰囲気が変化したり、エフェクトが変化したり、様々な場面を見せてくれます。
いずれのシーンも、ブラーやディストーションエフェクトなどを駆使して描かれるとても美しいグラフィックスとなっています。
また、これらのすべてのシーンには、マウスを使って干渉することができます。
マウスのボタンを押しっぱなしにしてホールドすることで、それぞれの場面ごとになにかしらの変化が起こります。
ここで注目すべきは「グラフィックスはもちろん、サウンドについても連動して変化する」という点だと思います。マウスのホールド操作を行っている間はグラフィックス上の変化が起こるだけでなく、再生される BGM の雰囲気も変わるんですよね。これがめちゃくちゃ迫力があります。
たとえば以下のシーンは、通常の状態のシーンとマウスボタンのホールド時の様子なのですが……
ホールド時は、コマのようなオブジェクトが光り輝くだけでなく音も重厚感のある BGM に変化します。
よく観察するモーションブラーのような効果も発生しており、本当にビジュアルとしての完成度がめちゃくちゃ高い！
ウェブサイトの背景に WebGL を配置して 3D シーンなどを描画するスタイルは、手前に表示される DOM のレイヤーと、背景に表示される WebGL のレイヤーとの親和性が重要になります。
今回のサイトの場合は、そこにさらに「サウンドとのシンクロ」が加わってくるので、難易度というか、技術的な挑戦度はかなり高いと言えると思います。
とにかく全体的にどの場面を切り取っても完成度が高く、3DCG として見ても、すごく品質の高い場面ばかりで構成されておりものすごく豪勢です……
とても完成度の高いサイトとなっています。
ぜひチェックしてみてください。
