パーティクルやタイトルロゴの動きにも注目! 光と闇の演出が美しい STARFLYER のウェブサイト
壮大な宇宙を感じる世界を旅しよう
今回ご紹介するのは、日本の航空会社であるスターフライヤーのキャンペーン用特設サイトです。
こちらはキャンペーンに合わせて用意されたものだと思いますので、恐らく期間限定でしか見られないサイトになると思います。非常に美しい星々の輝きは、サイトが閉鎖される前にぜひ見ておきたい、とてもキレイな仕上がりです。
WebGL 部分を実装されたのは @ikeryou さん。
これまでにも、多数の WebGL を手がけてきた方ですが、今回もやはりその見事な技術とセンスを存分に感じられるサイトとなっています。
明滅する表現が美しさを際立たせる
今回のサイトは、サイト全体の構成としてはかなりシンプルな感じです。
スクロール操作だけで、ほぼ全てのコンテンツにアクセスすることができるようになっています。
まず最初に表示されるローディング画面がフェードアウトすると、画面は一瞬真っ黒というか真っ暗な感じになります。
そこからフッと浮かび上がるような感じでパーティクルを使って表現された星々がフェードインしてくるのですが、この最初のアニメーションからしてすごくインパクトがあります。
派手というのとは違うのですが、思わず目を奪われるような、そんな演出になっています。
キャプチャ画像だとどうしてもわかりにくいと思うのですが、パーティクルの大きさが一様ではないこと、また密集しているところとそうでないところのコントラストがあるため、パーティクルを中心にした表現ながらとても奥行きの感じられるビジュアルになっています。
パーティクルの登場のあとには、今回のプロジェクトのロゴが現れるようになっているのですが、このロゴ部分も WebGL で描かれているようですね。
それぞれのパーツが別々の軌道でアニメーションする様子は、コンテンツをスクロールしてやると、見ることができます。
今回のサイトはパーティクルを大量に描いているのですが、実は WebGL ではパーティクルを大量に出すことそのものは、実はそんなに難しくありません。
たくさんの頂点を定義して、とにかく物量を出すというのは WebGL の技術としてはむしろ、どちらかというと入門者でもトライできるようなテーマだと思います。
しかし、今回のサイトはただ単に点をたくさん描いているのとは明らかに違う「質感」みたいなものが感じられるのではないでしょうか。
これにはいくつか要因があるかと思いますが、わかりやすいところをあえてひとつ挙げるとすれば、それはパーティクルの明滅だと思います。ポストエフェクトでブルーム的な演出を加えていることと、それらの強さが時間の経過と共に変化すること、これらが質感向上につながっているのだと思います。
無論、明滅させるだけで突然美しい質感が実現できるわけではなく、そこにはパーティクルの動きや、密度の調整、さらにエフェクトの掛け方や色味の調整など、様々な要因が関係してきます。
今回のサイトは黒い背景の中に、派手すぎない形でパーティクルによる演出を取り入れていて、とてもシックな感じの印象に仕上がっており、このあたりの匙加減がさすがだなと思いました。
もし、WebGL でパーティクル表現を行ったことがある、あるいは行ってみたいと考えているのなら、どうして今回のサイトの銀河や星々の表現を「美しく感じるのか」を、じっくりと観察・考察してみるといいと思います。
ぜひチェックしてみてください。