サウスウエスト航空の乗客たちの 175 にも及ぶフライトに関するストーリーを見ることができる 175 Stories
乗客たちに思いを馳せる
今回ご紹介するのは、サウスウエスト航空の特設サイトです。
WebGL を利用して機内の様子を 3D 表現したページがあり、各シートには恐らく実際にその席の番号で搭乗したことのある、利用者が割当てられています。
彼らのひとりひとりが、なにかしらのストーリーを持っており、サイト上でそれらを見ることができる仕組みですね。
なかなかおもしろいプロモーションだと思いますので、ご紹介します。
WebGL の実装としてはシンプルだが……
今回のサイトは、WebGL のレンダリング結果を見ても特に変わったところは見当たらないというか……比較的スタンダードな実装という感じです。
マウスカーソルの動きに合わせて自動的に視点が左右に動きますが、ドラッグ操作で自由に 360 度を見渡せるわけではなく、一定範囲のなかを左右の水平方向にだけ視点を振れる感じの実装です。
ホイール操作で前後に移動することができますが、これもよくある形ですよね。
あえてインタラクションは意図的にシンプルに作ってあるのだろうなと思います。
機内の様子が映し出されているシーンでは、カーソルを座席番号に合わせてやると、その座席に割り当てされている利用者のアイコン状の写真が表示されます。
この座席番号の部分は DOM ではなく、WebGL でレンダリングされているオブジェクトですね。
カーソル位置との衝突判定を行ったり、前後の距離感に応じて大きさを変えたりする処理を、ブラウザの DOM 制御でなく自前でやる必要があるので、3D に詳しくないとこういうのは地味にちょっと難しかったりもしますね。
動きは非常に自然で、まるで DOM にカーソルを乗せたときのようにスムーズに動作しています。
それぞれの乗客ごとのストーリーを個別に詳しく見ることができたり、シートの一覧表示が用意されていたりと、なかなか手が込んだインターフェースが用意されています。
こういうサイトの構成は、実はかなり理にかなっていると思います。
要するに背景というかバックグラウンドで WebGL が動いているのですが、その手前に表示されるインターフェースは従来のウェブの技術を用いた、いわゆる普通のフロントエンドです。
背景と、手前に表示されるコンテンツとが、それぞれ切り離された状態で管理されているので、3D がわかる WebGL 側の実装を作る人と、フロントエンドの通常の実装を行う人とが分業して作業を行いやすい構成だと思います。
今回のサイトを見ていて思ったのですが、今後はこういった「3D 実装部分とフロントエンドの実装部分の分業化」みたいなことがより進んでいくのかもしれません。
国内でも WebGL の事例が増えてきていますが、現状ではまだまだ「スキルの高いひとが全体に関わって」サイトを作っているというところが強い気がします。
3D に強いスキルを持つひとが、その専門性をしっかり発揮できるような、そういう分業化がうまく体系化されるといいのでしょうが、フロントエンドは瞬間瞬間でケースバイケースというか、いろいろなパターンが無数に存在するのでなかなか難しそうではあります。
3D は全体的に学習コストが異常に高い傾向があるので、なんとかうまくそういった専門性に特化したかたちでうまく業界全体が回っていってくれたらいいなと、そんなことを今回のサイトを見ながら考えさせられました。
とても丁寧に作られているサイトで、フロントエンドの事例としても、見習うべきところがたくさんあると思います。
気になる方はぜひチェックしてみてください。