静かな BGM を聞きながら過ごす聖なる夜…… Babylon.js でシーンを構築した Christmas Scene！
一日遅れになっちゃったけど……
今回ご紹介するのは、とあるクリスマスに関連した WebGL デモです。
見つけたのが日本では既にクリスマスが終わってしまったあとなのでちょっと残念な感じはありますが……デモとしては良くできており、また、Babylon.js を使った実装例としてはなかなか希少でもありますので、ご紹介しようと思います。
細かいところまで、意外にもしっかり作りこまれています。
煙や炎、明かりなどの質感を参考にしよう
今回のデモは、ものすごくハイエンドな技術を駆使しているという感じではなく、むしろ Babylon.js を使ったベーシックなシーンづくりがなされているという感じがします。
その中でも、ライティングや煙の表現など、他のコンテンツを制作する際にも参考にできそうな、いくつかの表現が盛り込まれています。
パッと見た印象はそれほど派手ではありませんね。
しかし、細部まで見ていくと、いろいろと細かな部分で注目すべき点が見つかります。
パーティクルをうまく利用した煙突から立ち昇る煙の表現、画面全体を覆い尽くすようなパーティクルによる雪の表現、プレゼントのリボンやツリーにつけられた飾りの鏡面反射のような質感など、実は結構もりだくさんな感じです。
奥に見える家の上には、なにやらアイコンが浮かんでいますね。このアイコンもビルボードになっていて、もしかすると Babylon.js にはこういったビルボードの実装も入っていたりするでしょうか。
これをクリックすることで、室内へと移動することができるようになっています。
室内のシーンでも、やはり細かなところにこだわりが感じられます。
地味にライティングや影の表現がうまく取り入れられており、ポリゴン数こそ多くはありませんが、シーンの質感向上に様々な要素が影響を与えているように感じます。
目立ちにくい部分ではあるのですが、個人的には窓の外の様子をうまく表現できているところがいいなあと思いましたね。
画像では見えにくいですが、窓の外でしんしんと降り続く雪の様子が、窓ガラス越しに見えているかのような演出がなされています。
三次元空間のなかで二次元ベースで処理した映像を投影するというテクニックは、なにかと応用範囲も広そうなので、こういう実装をライブラリのほうでサポートしてくれているとしたらありがたいですね。
そして、このシーンでもまた、中央に置かれたプレゼントの箱の上にアイコンが出ています。これをクリックすると、どんなことが起こるのでしょうか。
はい、上の画像を見るとわかるとおり、プレゼントの箱をクリックすると、こんなふうにパーティクルが弾けるような表現を見ることができます。
この弾ける演出自体は割と一瞬で終わってしまうのですが、ただシーンを眺めるだけのコンテンツではなく、こうしてユーザーのアクションに応じて変化するようなコンテンツとして作られているというのはいいですね。
日本では既にクリスマスは終わって、一気にお正月の雰囲気になっていくかと思いますが、Babylon.js のいろいろなテクニックを駆使して作られたクリスマスコンテンツも、よかったらチェックしてみてください。
