年明け早々に公開された日本人作者による WebGL 謹賀新年コンテンツ三連発!
新年早々景気が良いな!
今回ご紹介するのは、2017 年の新年を祝う WebGL コンテンツで、いずれも日本人の作者による3つの作品たちです。
日本の新年といえば干支が最も意識されるタイミングですよね。ご紹介するうちの二つの作品は、今年の干支である酉(とり)にちなんだものになっています。
残るひとつはなんと WebVR にも対応しているという太っ腹仕様です。
新年早々景気良く公開された国産 WebGL デモを楽しみましょう。
酉年がテーマの二作品
まず最初にご紹介したいのは、three.js を利用して様々な表現に挑戦されている @ykob0123 さんの作品。
こちらは three.js でインスタンシング描画を行なった作品で、ひとつのジオメトリデータから、大量のオブジェクトを効率よく描画するテクニックであるインスタンシングを用い、たくさんのにわとりさんを描画しています。
少なくとも公開直後の今現在の状態ではインタラクティブ性こそありませんが、いかにも新年らしい配色の、黄金のにわとりが乱舞する様子は、その物量感だけでも気持ちが良いですね。
私はスクラッチな実装でインスタンス描画を行なったことがありますが、three.js にもそれを実現できる方法が用意されているんですね。
こういうのは実際に動いているデモがあるだけでも、実際にできるのかできないのか、まずその指標としての価値もあるので貴重な実装例かなと思います。
ソースコードも公開されていますので、気になる方はそちらも見てみるといいかもしれません。
そして、酉年をテーマにした作品がもうひとつ。
こちらは国産コンテンツとしては珍しい Babylon.js 使った作品で @talaesun さんが年明け早々に公開されたものです。
大量のにわとりさんたちが大挙して押し寄せる不思議な世界が舞台です。
Babylon.js は Microsoft 謹製の WebGL ライブラリで、three.js などと同様にかなり多機能な WebGL のラッパーです。
今回の作品では、にわとりさんの頂点モデルをアニメーションさせることで、まるでにわとりが大行進してるかのような感じになっています。
WebGL でモデルをアニメーションさせるのは割と大変なので、Babylon.js を使った実装例のひとつとして、こちらも参考になるのではないでしょうか。
WebVR モードも備えた一作
さて三作目の最後は、WebVR API にも対応した驚きの一作。
こちらは @tkm0125 さんが実装された作品で、キューブや短冊状のポリゴンが滑らかに動き回る、華やかな印象の作品となっています。
もちろん、HMD を検出できれば VR モードでの起動が可能となっています。
Happy New Year 2017! by Takumi Hasegawa
眺める角度によって、キューブが文字の形になったりあるいは弾けてバラバラになったりと、かなりインタラクティブ性の高い作品になっています。
また、WebVR だけでなくモバイル端末のジャイロセンサーを利用したモバイル VR モードでも動くようになっているので、本格的な HMD を持っていなくても、スマートフォンからアクセスするだけで、全方位に広がる WebGL の世界を堪能することができます。
新年からいきなりこんなの突っ込んでくるとかすごいですね……
日本人の作者による、WebGL 新年コンテンツを3つご紹介してみましたがいかがでしたでしょうか。
残念ながら、私はなんも作れなかったのですが、こうして日本人になじみの深いテーマや世界観で WebGL コンテンツが同時に複数出てくるというのは、今年一年の国産 WebGL 事情を占う上でとても景気がいいなあと思いました。
年末や、あるいは年始のタイミングは、なにかと節目になるので一定のテーマに沿った作品が多く登場してきて面白いですね。
来年は私もがんばってなんか作ってみようかななんて、そんな気持ちにさせられる、三者三様の面白いコンテンツだと思います。
ぜひみなさんもチェックしてみてください。