GROUPでのインターンがもうすぐ終わることとなり、今までVR室でやってきたことをしみじみと思い出しているtakapikoXです。秋みたいな物悲しい気分です。今回は、IndexedDBを使って動画や3Dモデルのダウンロードを工夫できないか試してみたので、皆さんにお伝えしたいと思います。VRならではの課題として、「データのダウンロード時間」というのがあります。ネイティブアプリにおいてはアプリケーションをDLする際にデータも同時に含めることができるので、それが実行時に問題となることは多くありません。一般的なWebの仕組みを利用した場合、リソースは原則実行時に読み込まれることになります。ユーザーが特定のURLにアクセスした際に読み込みが開始されることになり、回線がよくないと体験を著しく損なってしまう可能性が高いです。今回はその対策として、IndexedDBを用いて非同期でデータを読み込んで利用する方法について調べてみました。この手法を使うことでローディング画面やチュートリアル中にデータを読み込んでおくことで、実行時にアプリケーションがブロックされる苦痛が軽減される2回目以降にアクセスした際に、DLなしにスムーズにコンテンツを楽しむことができるといったメリットがあるはずです!IndexedDBの特長とスペックブラウザ側でデータを保存する機能の一つで、文字通りデータベースのように使用できます。Storageに比べて、動画や3Dモデルのような大容量のデータを扱うのに適しています。詳細な使い方は以下の記事が詳しいです。保存できる容量が大きいこと様々なデータ形式で保存できること非同期で処理を行うことができることといった点で、大きいデータを扱う目的において他の方法よりも優れています。IndexedDBは、数値や文字データ以外にも、様々な形式のデータを保存することができます。blob形式にしてしまえば、ほとんどのデータ形式を保存することができます。非同期処理を行えるということは、ユーザーの操作や画面の動きをブロックすることなく大容量のデータを読み書きできることを意味します。対応ブラウザ対応ブラウザについて見ていきましょう。結論としては、最近の主要なブラウザほぼ全てで使えると言って良いのではないかと思います。(一部気を付けるべきブラウザがありますが...)iOSiOS8以降で利用できます。SafariはIndexedDBにデータをblob形式で保存することができません。blob形式のデータを扱うこと自体はできるので、Safari対応も考えると、arraybuffer形式でデータを保存して、使用時にblobに変換しなおすという実装にするのがよいでしょう。SafariはIndexedDB周りにバグが多いので、対応するのであればよく確認する必要がありそうです。Android最近のAndroidでデフォルトブラウザとなっているChromeでは問題なく利用できるようです。4.3以前のデバイスで標準となっているAndroidブラウザに関して、いくつかのデバイスで調査を行ったところ、以下のような結果になりました。〃というわけなので、Android標準ブラウザでは基本的にIndexedDBは動かないと考えてしまってよさそうです。デスクトップMDNのドキュメントによれば、デスクトップ環境ではIndexedDB、blobともに、ほぼ全てのブラウザの最新版でサポートされているようです。関しては、モバイル端末上でblobが動作することを確認しました。最後に、容量についてです。Abuserというツールを使用して、現在の主要ブラウザにおけるIndexedDBの容量を改めて調べてみました。quota」という概念で、ユーザーにパーミッションをとらない場合は、端末の空き容量の10%までがアプリケーションに割り当てられるようですが、端末の空き容量をいっぱいにするのが困難だったので、今回は十分に空きのある端末で試しています。実際に端末にデータを保存することで限界を見極めるツールなので、今回は時間の都合上1GBまでしか試行していません。500MB主要なブラウザは、十分に空きがある場合は基本的に1GB以上の容量があるようです。空き容量によるということは、「必ず利用できるわけではない」ということでもあるので、使えなかった場合を想定した実装が必要になりそうですね。実際に使ってみるここからは、実際にIndexedDBを利用する方法について説明していきます。動画をIndexedDBに保存してみるまず動画をIndexedDBに保存して再利用してみます。Safariにも対応できるように、以下のようにします。//過去にDBを作成したことがなければ新規にテーブルを作成。}}実際に作ってみたページがこちらになります。サンプルを開く「Play/Pause」ボタンを押すと動画のロードが始まり、ロードが終わり次第動画を再生するようになっていますが、1回目と比べて、リロードして2回目以降の動画のロード時間が早くなっているのがわかりやすいと思います。3DモデルもIndexedDBに保存してみる次は、3DモデルをIndexedDBに保存してみます。blobで扱うために、glTF形式で3Dモデルを保存しておくとよさそうです。「glTF」は3Dモデルのファイル形式の一つで、WebGLにおいては特定ライブラリに依存しない汎用フォーマットです。開発元のクロノス・グループによると、3Dモデルにおけるjpegのような広く浸透したフォーマットを目指しているとのこと。すごいですね!以下のサイトでより詳しく説明されていますので、興味ある方はぜひ。qiita.com一度3DモデルをglTF形式にしてしまえば、後は動画の場合と同じようにでIndexedDBに保存することができます。以下、3DモデルをIndexedDBに保存して再利用するサンプルです。サンプルを開くページのロードが始まり次第、3Dモデルを読み込んで表示します。はじめはドゥードゥーのモデルを使用していたのですが、データ量が小さいためか(4.39MB)、IndexedDBを使用することによる恩恵を感じにくかったので、使用するデータをより大容量のもの(18.0MB)に変更したところ、IndexedDBによる高速化が感じられるようになりました。2回目以降の動画(3Dモデル)の読み込みが速くなっているのが実感できると思います。まとめ今回実装したアプリケーションは、単純に一度ダウンロードしたデータを保存しておくというシンプルなものでしたが、実際に利用する際は、VRモードに入る前にローディング画面を入れたり、チュートリアル中にデータを読み込んでおくなどの工夫をすることで、より快適なユーザ体験を提供できるようになるでしょう。VRを実用化していくにあたって、ローディング時間というのは避けて通ることはできない課題だと思いますので、ぜひ今回ご紹介した方法が参考になれば!最後に、今回作成したソースコードはこちらのリポジトリにあります。WebGLとA-Frameのパフォーマンスを比較して...UnityとA-Frameで作ったWebGLによるブラウザ向け3Dコンテンツに...2017-01-30リアルタイム通信が出来るWebVRアプリにWebRTCを利用した音声通話機能を追加してみるあけましておめでとうございます。...2016-12-26A-FrameとSocket.IOを使ってリアルタイム通信ができるWebVRアプリを作ってみるこんばんは。Proを背負って腰が崩壊した@day...2016-11-02A-Frameで壁に沿って移動する視線カーソルを実装するこんにちは。買って2週間で壊れたBluetoothイヤホンがメーカー...お気軽にお問い合わせ下さい!VRコンテンツ開発を検討している紹介されている機材を使ってみたいその他、VRについての質問があるなど、VR開発や記事の内容についてのご相談は、まずは下記の連絡先までお気軽にお問い合わせください。3Dコンテンツ用のシェーダーを書く。techlogはてなブログをはじめよう!voyagegroup_techさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。