【訂正あり】Pixi.js を使って二次元のイラストを生き生きと動かすおもしろ実装 hololive ERROR のウェブサイト
さすがの仕上がりにびっくり
今回ご紹介するのは、近年めきめきと注目度を上げているホロライブの新しい取り組み ERROR のウェブサイトです。
こちらは学校を舞台としたホラーコンテンツになるんですかね？
今回のサイトはティザーサイトということであまり詳しい内容には触れられていませんが、この手のコンテンツが好きな人にはしっかり刺さりそうな、ビジュアルにこだわったウェブサイトとなっています。
記事の公開後に、当記事で背景を Pixi.js で処理していると記載してる部分について、実際は単に動画を再生しているだけではないか、というご指摘をいただきました。
よくよく詳しく調べてみると、たしかにカーテンなどが揺れ動く背景部分については動画を再生している形で、手前側のインターフェースに対してグリッチを行っている部分が WebGL で処理されている形のようです。
誤解を招くような解説・言及をしてしまいました……すいません！
記事の内容もある程度、誤解を生まないように修正しました。（2021.08.10 現在追記）
リンク：
いろいろなオブジェクトが動く様子を観察してみよう
今回のサイトでは Live2D を使ったコンテンツのように二次元のイラストがスルスルと動きます。
この記事を公開した当初は、このキャラクターの動いている様子そのものがすべて WebGL で実装されていると思っていたのですが……
お恥ずかしいことに記事の公開後に「これって単に背景は動画流してるだけではないでしょうか？」とご親切にも指摘をしてくださった方がいまして、よくよく調べてみるとたしかに背景とキャラクターについては普通に動画を埋め込んで動かしている形でした。
※指摘してくださった方、ありがとうございます！
カーテンや、あるいはキャラクターの髪の毛のようなわかりやすいものもあれば、人物がまばたきする様子など細かいところもしっかり作られています。
実装は Pixi.js っぽいので、たぶん手でモーションつけてるのだと思いますがなかなかきれいにまとまっていて、さすがの仕上がりという感じ。かなり力の入ったウェブサイトですね。
ウェブサイトが開いた直後は、YouTube の Embed が画面全体に広がった状態になっています。運営としてはティザー動画をしっかりユーザーに見せたいのだと思います。
画面内のクローズボタンをなどで YouTube の埋め込み動画を閉じると、本来のインターフェースが出てきます。
画面内のクローズボタンなどで動画を閉じると、背景に置かれた WebGL が前面に出てきます。WebGL 部分は先程も書いたとおり Pixi.js でスルスルアニメーションするので見た目的にもかなりおもしろく、ウェブサイトでこれをやっているケースはかなり珍しいと思います。
アニメーションは動画ファイルで、あらかじめプリレンダリングされたものでした。いや～ すっかり Pixi.js で手付けされた実装かとおもっちゃいました……
しばらく待っているとシーンが切り替わります。
WebGL で処理されているのは、各インターフェースのアイコンなどに対する「グリッチ処理」ですね。
時折ノイズが乗ったような感じで描画が崩れるようになっていると思うのですが、これらの処理は Pixi.js を使ってインタラクティブに行われています。
以下、めちゃくちゃ思い込みで書いてしまっていますが、戒めとして残しておきます……
今回のサイトで WebGL 的というかグラフィックスでの表現として個人的に注目したい点としては、アニメーションの解像度の違いがあると思います。
Pixi.js 使っているからこそのスルスルと流れるようなアニメーションと、シーン遷移のような大枠でのアニメーションについて、その更新頻度が意図的に使い分けられているんですよね。
ちょっと言葉で説明するのが難しいのですが、いわゆるテレビアニメなどのように FPS を下げてあるシーン切り替えアニメーションと、60FPS でヌルヌル動くモーション系のアニメーションと、両方を効果的に使い分けている、という感じですね。
このあたりはぼんやり見ていると気が付かないかもしれませんが、かなり絵作りという意味では重要なポイントかなと思います。
ホロライブといえば、すでに押しも押されもせぬ人気のプラットフォームだと思いますが、今回はホラー系という新しい切り口のコンテンツだけにプロモーションにもかなり力が入っているのが感じられます。
最近は特にモバイルゲームなどでは 2D の絵をぐりぐり動かすのをよく目にしますが、ウェブサイトでこういう切り口でコンテンツを作ってくるというのは今までにほとんどなく、かなりおもしろいと感じました。
ただ私はあまりエンタメ系に詳しくないので、実は知らないだけでいっぱいあるのかもしれないですけど……
ぜひチェックしてみてください。
