Help us understand the problem. What is going on with this article?

A-frameでWebVRポートフォリオを作ってみた。

はじめまして。N高等学校2年生の猫月遥歩(ねこづきあゆむ)です。

普段はバーチャルキャストを低スペPCでエンジョイしてました (11月末につよつよPCにしましたw)
アドカレなにやるって考えたときに手軽にVR空間を作りたいなって思って作ったので、それの話をします。

この記事は N高等学校 アドベントカレンダー 2019 9日目 の記事です。

はじめに

いろいろわけのわからない単語が出てくると思うので解説します。
調べつつ書いてるのでなにか間違いあったらすみません。

ちなみに、全部作り終わったあとに 教材の中にthree.jsあるの知りました:sweat:

この記事での A-frame バージョンは v0.9.0 です

WebVRってなに?

ウェブブラウザ上でVRデバイスの位置,向き,加速度などの情報を取得するために用いられるJavaScriptのAPIのこと(Wikipediaより)

基本的にHTML5canvas要素にWebGLでゴリゴリ描くとできます。
ただ、WebGLを短期間で完全に理解するのは難しいので、今回はA-frameというものを利用しました。
WebGLA-frameの関連性についてはいい画像があったので引用します。

image.png
そもそもWebVRとは? @ keijipoon 様

A-frameってなに?

A-frame

A-frameは、FireFox(火狐ブラウザ)を作ってるMozillaを主体に開発されているオープンソースのWebフレームワークです。上述したように、WebVRページを作ることができます。
JavaScriptでできていて、利用したい人はHTMLから外部スクリプトとして呼び出すか、NPMで利用できます。

絶賛定義真っ最中なので、バージョンによって仕様がかなり違ったりします。(現在は0.9.xが最新)

今回は、外部スクリプトとして v0.9.0 を呼び出して作成しました。

A-frameで何ができるの?

通常のWebページ(HTML)は2D、二次元、平面に画像や文字などを貼る事ができます。
簡単に言うと、PCの壁紙を自由にいじれる感じです。

WebVRでは、3D、リアルのような三次元空間に、画像や文字などを貼る事ができます。
A-frameでは、上記のものに加え、3Dオブジェクト(箱、球体、三角コーンなど)を置くことができます。
簡単に言うと、精神と時の部屋みたいななにもないところで、自分の部屋の模様替え仕放題みたいな感じです。

入門記事が多数あるので気になる方は御覧ください。
 WebVRがHTMLだけで簡単に作れるフレームワークを触ってみよう! @ H_Crane 様
 新しいWebVRフレームワークA-Frame入門 @ rootx 様

本題:WebVRポートフォリオを作った話。

本題に入ります。WebVRポートフォリオを作りました。
猫月あゆむ VR-Portfolio
image.png

確認済み動作環境はこちらから

A-frameでは、素の状態でWASD移動/マウス視点変更・各種VR対応されてます。

素のboxとかを組み合わせて制作しても良かったんですが、どれがどれかわかんなくなりそうだったので、今回は3Dオブジェクトを読み込む方法で制作しました。

制作してみて

ここから先は、制作した感想・課題・うまく行かなかったことを書いていきます。

TIPS1 ローカルで表示できない

 ローカルファイルの閲覧状態では、「クロスドメイン制約」というものが原因でA-frameを利用しても画像真っ暗・3Dモデルが表示されない状態になってしまいます。
(ブラウザ違いますが、背景"画像"が導入されているので全画面真っ暗です↓)
image.png

 対策:コチラの記事を参考に、cmdから起動するとローカルでも表示できます。
【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法
image.png

TIPS2 3Dモデルの読み込み

 自身で試したところ、現状(v0.9.0)で.glb以外の3Dモデル(.gltf/.obj)がうまく読み込めないっぽいです。

 対策:.glbをどうぞ。以下の方法で楽にGLB化できます。

  1. Unityにモデルをインポート
  2. UnityにUniVCIをインポート → UniVCI
  3. モデルのテクスチャshaderを全てUniGLTF内のshaderに変更
  4. モデルを選択した状態で上部タブUniVRM>UniGLTF>Exportで出力

余談ですが、VRMモデルも実質GLBなので、拡張子を.glbに変えるだけで読み込めます。
ポリゴン数とおま環次第で重いです。ちゃんと利用規約は守りましょう。
image.png

TIPS3 テキストの表示

A-frameには、日本語フォントが存在しません。そのため外部から導入する必要があるんですが...

基本的に外部フォントを利用するには以下の手順を踏みます。

  1. フォントデータ(.ttf)からフォントイメージ(.png)・.jsonファイルを作成
  2. A-frameでassetとして導入
  3. <a-text>でフォント指定して利用

v0.9.0ではなぜか読み込めませんでした。

 対策:もう、画像でよくね?
  →画像ファイルをそのまま貼り付ける

TIPS4 座標がおかしい(?)

 Unityでは xyz の順ですが、A-frameでは zyx の順になります
 そもそも、初期カメラ向きがおかしいのかもしれません。いろいろ試してみてください。

 ちなみに、公式ドキュメントでは、widthなどで記述しろみたいになってますが、普通にposition scale rotation で反映されます。

TIPS5 重い・表示がおかしい・向きが変わらない

もちろん3D空間なので環境次第では重かったり対応してなかったりします。

対応ブラウザで重い場合

  • v0.8.0適用時の場合、移動のたびに画面が揺れる
    • v0.9.0では治っているのでそっちを利用
  • 移動が重い
    • ブラウザ設定からハードウェアアクセラレーションをONにする

iOSでの動作について

 参考記事 iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか

参考記事通りにスクリプト導入してみたんですが、うまく動いてないっぽいです(JS苦手マン)
MozillaからリリースされているWebXR Viewerというアプリを利用すると設定無しで動作するのでそちら経由でサイトを見てもらえれば...
 WevXR Viewer - AppStore

v0.9.0での動作環境

色々確認してまとめたのでこちらから
 確認済み動作環境はこちらから

今後の課題

アニメーションを導入したい!

 今回は全く触ってませんが、アニメーション(位置移動・色を変えるなど)ができます。アリシアちゃんがぬるぬる動くようにしてみたいです(できるのかな?)

面白いコンテンツを作りたい!

 アニメーションの話とかぶりますが、今回の作品では、3Dモデル/画像の表示・移動・リンク・動画(流れるはずだった)しか基本的にしてません。あくまでもポートフォリオの1つでした。次回触るときには、他のギミック等も組み合わせて面白いコンテンツを作りたいです。

最後に

 なかなかにグダグダな記事ですみませんでした。

 N高等学校 アドベントカレンダー2019 明日以降もありますのでぜひ御覧ください。
  https://qiita.com/advent-calendar/2019/n-highschool

 他のアドカレにも参加しているので良かったらご覧ください。
  Vキャスアドカレ(ニコ生) 12/11 22:00~ :https://adventar.org/calendars/4432
  VCI アドカレ(Qiita) 本日公開 :https://qiita.com/advent-calendar/2019/vci

SpecialThanks

  • ニコ生リスナーの皆様
  • 以下参考文献製作者の皆様

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away