VR年賀状を公開しました。【A-Frameの備忘録など】


image

あけましておめでとうございます、デザイナーの井内です。
2019年の年賀状コンテンツを公開いたしました。今年はVR年賀状です!

全部で4匹の🐗がいるので、是非探してみてください。
ただし、スマートフォンでは回転のみで移動ができませんので、🐗を探したい方はPCからご覧くださいませ。

以下は、このVR年賀状を制作するにあたって使用した「A-Frame」というWebVRフレームワークについての備忘録になります。

A-Frameについて

「A-Frame」は、htmlの要領でタグを記述していくだけで簡単にVRコンテンツを制作できてしまう、なんだか凄いやつです。

例えば<a-cube></a-cube>と記述するだけで直方体を追加でき、属性値で色や大きさを変更できたりなどなど…。
htmlを少しでもかじったことのある人ならとっつきやすい仕様となっています。

気になる人は、まずは公式ドキュメントに書いてあるコードを、htmlファイルにコピペしてブラウザで表示してみて下さい。
あまりの手軽さにきっと驚くはずです。

image

日本語で書かれた解説の中では、以下のスライドが非常に分かりやすく参考になりました。

対応ブラウザについて

IE以外の最新版のブラウザであれば大体動くようです。
手を加えることでIEでも閲覧できるようになるという記事も見かけたのですが、上手く動かなかったので、IEは対象外として運用した方が良さそうです。

VRモードについて

PCのブラウザで、画面の右下にあるimageこのマークを押しても全画面になるだけで、VRモードにはなりません。
スマホでマークを押して(①)、画面を横向きにすれば(②)、2画面で表示(③)されます。

image

3Dモデルデータを読み込む際の注意点など

A-Frameは単純な形ならタグを記述するだけで簡単に追加できるのですが、複雑な形の場合は、別途3Dソフトでモデリングしたデータを読み込むことになります。

サポート形式について

glTF, OBJ, COLLADA形式をサポートしているようです。
公式ではglTF形式が推奨ということですが、今回は個人的になじみが深いobj形式を使用しました。

テクスチャファイルについて

あくまでブラウザ上で閲覧するものなので、テクスチャファイルはWeb上で表示できる形式(jpgやpngなど)でないといけません
また、あまり容量の大きな画像を使用すると通常のWebサイトと同じく、読み込みに時間が掛かってしまいます。

個人的に引っ掛かったのがテクスチャファイルを置く場所です。
どうも、モデルファイル(.obj)とマテリアルファイル(.mtl)がある階層でないとダメみたいなのですが、3Dソフト上では別階層のテクスチャファイルがちゃんと表示出来ていたので、気付くまでに時間が掛かりました…。

ライトの設定について

ライトの設定を特に記述していない場合、デフォルトで影が付きます。
今回の年賀状の様にあえて影をなくしてフラットな表現にしたり、もしくはテクスチャ自体に影を描き込んでいる場合は、以下のように記述すれば影が付かなくなります。

<a-light type="hemisphere"></a-light>

image

まとめ

WebVRと聞くとなんだか難しそうなイメージがあるかもしれませんが、A-Frameはとてもとっつきやすく、オススメです。
VRに興味がある方はぜひ一度試してみて下さい。それでは!