とある同人レーベルのソロアルバム用告知ページに実装された Unity 製の WebGL デモ!

doxas : 2016-10-21 13:36:46

いかにも若い人の好きそうなカッコよさ

今回ご紹介するのは、とある日本の同人レーベルで新しく配信されることとなった、とあるミュージシャン(クリエイター)によるソロアルバムのウェブサイトです。

曲を提供している方は「月代 彩」というハンドルネームで活動されている中国の方のようですが、同人系の楽曲提供者としては結構有名な方みたいですね。

Diverse System というレーベルからの提供となる、氏のはじめてのソロアルバムのウェブサイトが今回のサイトなのですが、WebGL 実装が割りとガチな内容になっていて、曲も書けて WebGL も実装できるとかこの人マジかと思ったのですが……

たぶん、ソースコードを見る限り、これ Unity 製ですね。

スクロール連動型で見せる不思議な世界観

今回のサイトは、なんと言ったらいいか、けして侮辱するつもりはまったく無いのですが、いかにも厨二感漂うというか、とても若い人が好きそうな雰囲気満点になってますね。

どう表現するのが正しいのかわからないのですが、日本のオタク文化や漫画やゲームといったカルチャーの影響を強く受けている方なんだと思いますね。

WebGL 実装のほうはかなりしっかりと作られているので、これほんとにミュージシャンが作ったサイトなのかよと疑いたくなるほどです。いかに Unity を使っているからと言っても、ここまでしっかり作られていると、パッと見た感じだとわからないですね。※たしか Unity ってスプラッシュスクリーン消すのは Pro +オプション購入じゃないとできなかった気がするんですが、今回のやつはそのへん大丈夫なのかな?(そこまで調査してません) というかそれをウェブサイトから見分ける方法ってあるのかな?

上の画像でどの程度伝わるかわかりませんが、サイト全体に、クリックに反応して RGB ずらしのエフェクトが掛かるような仕掛けが実装されています。

マウスカーソルの位置に反応してシーン全体が動いたり、スクロールに連動してシーンが遷移していったりと、普段から 3D やってる人じゃないとなかなかこうはいかないよなと思わせるところがいくつもあります。

背景にぼんやりと投影されている女の子のイラストは、今回のサイトの作者さんとは別の方が手掛けたものみたいですが、すごく雰囲気が統一されていてカッコよく仕上がっていますね。

赤と、黒と、そして白。

全体的な配色はそれらに徹底されている感じです。また、3D シーンのなかにラベルを配置するような作りになっていて、背景などと同様に、文字の書かれたラベルもまた 3D 表現の一部としてぐりぐりと動きます。

ポストエフェクトなんかも掛かってるので当然ながらシェーダもガンガン使っていますし、本当にこれ、もしも自力でスクラッチで書くとなったらかなり気合いの入った WebGL 実装な内容です。

今回のサイトの場合は Unity の WebGL ビルドみたいですが、こんなふうにしっかりウェブサイトとして動かしてるのってあまり見かけないですよね。その点はすごいなあと素直に感心しました。

最初にこのページを開いたときは、Unity のスプラッシュスクリーンが表示されるわけでもなく、ローディングの演出が終わるとすぐに全画面で WebGL が動いていたので、普通に JavaScript を記述して実装している、いわゆる普通のウェブ実装のものかと思いました。

Unity から出力したのかなと感じたのは、ソースコードを見てからですね。

これは WebGL のある意味デメリットでもあるかと思いますが、ブラウザ上で実行される以上は、絶対にソースコードは完全な隠蔽はできません。どんなに Minify して JS のほうを難読化したところで、シェーダが読める人間から見ると、その正体はすぐにわかっちゃいますね。こればっかりは、仕方ない。

私自身、JS のソースコード見たときは、Minify されてるし、でもなんか書いてあることはすげえなあと思ったのですが、シェーダのソース見たら一発で Unity 製だとわかりました。

それが良いとか悪いとか、そういうことが言いたいのではなくて、これほどの WebGL の実装が本職がエンジニアでなくても頑張れば作れてしまうというのは、やっぱりすごいです。過程ももちろん大事ですが、成果物も当然大事です。

同時に、やはりウェブという世界においてはソースコードの隠蔽は難しいなあと、なんかちょっと微妙な感覚を覚えたりもしました。やはりこれから先、モノを言うのはソースコード見えたくらいで簡単には真似のできない、そんなスキルなのかもしれないなとも感じました。

と、いろいろなんだか個人的な感慨ばかり書いてしまいましたが、単純に、これが Unity 製であろうとなかろうと、これだけのものが WebGL の実装として動いているという事実は変わりません。

いろいろな考え方・捉え方があるとは思いますが、個人的には、今後どんどん Unity 製のウェブサイトが増えていくというのも、ウェブ全体の表現力向上という意味ではいい傾向だなと思っています。そういう観点からは様々な可能性を感じさせるサイトでもあるとも言えると思いますね。

演出や雰囲気作りは非常に丁寧で、かっこよく仕上がっています。気になる方は、チェックしてみてください。

リンク:

Everything: Tsukishiro Hikari 1st Solo Album

@tukishiro_hr

Diverse System

share

follow us in feedly

search

search

monthly

sponsor

social