MENU
Webサイト工事中です! 閲覧できますが不具合があるかもしれません
  1. ホーム
  2. TECHNOLOGY
  3. Programming
  4. JavaScript
  5. 家にいるので「スマホだけで疑似VR」した裏話

家にいるので「スマホだけで疑似VR」した裏話

TECHNOLOGY Programming VR Web系 JavaScript

どうも、暁の流星です。

先日、Qiitaにていつでもパンツを覗きたかった話で投稿したので、その裏話などをしていきたいと思います。

 

 

目次

はじめに

今回何を作ったかと言うと、スマホだけを用いて疑似的なVRをするものです。
それはなんだと言った話ですが、移動操作はスマホの画面で行い、カメラはスマホのジャイロ機能を用いたものです。
百聞は一見に如かずなので、触ってみてください→ThreeVrmVR
githubはこちらです→github

 

 

技術面の話

言語とスクリプト

今回何も迷わずThree.jsを使いましたが、VRMモデルを表示させる方法は少し悩みました。
web上でVRMモデルを表示させる方法は、今回使用した@pixiv/three-vrm以外にも色々あります。

また、世の中にはVRMモデルを読み込むスクリプトを作成している人もいます。(おー怖い)

その中でなぜ、@pixiv/three-vrmを選んだかという話です。
まずUnityですが、自身がJavaScirptぐらいしか触れないからダメです。C#ダメ
次にGLTFLoaderですが、こいつ単体ではVRMをどうこう出来ないです。これにはVRMLoaderを使います。
しかし公式のサンプルを見てみると…
ctrl+Uでソースコード見てください。48行目でモデルを読み込み、89行目でaddしています。
長いんですよ。映し出すのに。
なので没になりました。
そして選ばれた@pixiv/three-vrmですが、読み込むのも楽で記述も楽!完璧じゃないか!
というわけで選ばれました。記述が楽なのはいいですね。

 

スマホはVR機じゃない

一番苦労した原因が、スマホを使うことでした。
何を言ってるかわからないと思いますが、とにかくVR機として使うには面倒なんですよ。
まず肝心のジャイロ機能。ios12.2以上では確認を取らないと動かせませんでした。
またAndroidでは最初に向く方向が、望んだ前方向じゃないです。
今回操作は画面で直接行いましたが、初期案は移動加速度から動かす予定でした。
でも、あまりに高性能になりすぎて上手く取得できないんですよね。
あと計算が大変すぎました。力積の問題ですね。
これらを踏まえて思いました。スマホはVR機じゃない。
でもこれはwebの話であってアプリならどうなるかは知りません。
何か別の方法があるのでしょうか?

 

 

プラスでやりたかったこと

ダンス＆ポーズ

初期案ではダンスとかポーズをする予定でした。
MMDで使われてるvmdやvpdを読み込んでそのまま動かすつもりでしたが、IKボーンで断念。
そもそも、読み込んだ時のアバターのポーズはT字ですが、MMDでは違うので初期調整が必要でした。
これは今後触っていきたいです。

 

撮影機能

フレームとかをつけて撮影機能をつけたかったのですが、その前につまづきすぎて断念。
綺麗に撮影できたらよかったのにな～。

 

背景変更

今のままでは背景が真っ黒で素っ気ないので背景を変えるものを作ろうとしました。凝りすぎて断念。
写真張り付けたりでもよかったのですが全天球画像がないので諦めました。

 

 

開発の話

テストデバイスが欲しい

自分の開発環境はwindows10,Android9です。
なのでios端末でのバグは全くわからないんですよね…。
「ブラウザならChromeでiPhoneXとか選んでデバッグできるだろ」って人もいるかもしれません。
その通りです。何も間違っておりません。ブラウザでの仕様はそこで確認できます。
しかし今回のようにOSでの問題の場合どうでしょう。端末がないと何もわかりません。
自分は友達が少なからずいる(と思っている)ので、iPhoneを持ってる人に動作確認をしてもらいながら作ってました。
でも、ios端末ほしいですよね。Safariも未だに仕様がわかってないので。
最近ではjsやcssで色々な技術やテクニックがありますが、ブラウザによっては動いたり動かなかったりします。
当然のように出てくるIEさんもいますが、Safariでも思うように動かないものあったりします。
そういう時にすぐに確認できるデバイスが欲しいです。

 

モニターが足らない

開発をしてると色々表示したいのにモニターが足らないってことないですか?
特に色々調べたりしながらログを取ってたりするとモニターが足らないです。
まずプログラム書くところで1画面、ログ取得で半画面。
ログの得る数値多いと横に伸ばして多く見たいので1画面。
調べもののものを置くのに1画面。
メール等の連絡みるのに1画面。
全てやりくりすればいいじゃないかといわれるとその通りです。間違いありません。
でもあっちこっちに持っていくと、どこに持っていったかわからなくなりませんか?
自分は2画面でやりくりしてますが、どこにどの画面置いたかわからなくなりぐちゃぐちゃになります。
モニター多いとやりやすいのかなって思いました。

 

周辺機器が欲しい

PCはRAZER BLADE 15でマウスはM-XGL10UBRD、モニターはacerのKA240Hbmidxを使ってます。
「自宅なのにノートPCで開発!?」ってよく言われますが、大きいのを置く場所がないんですよ…。
それはさておき、ずっと座ってPCに向き合ってると、手が悲鳴をあげました。
椅子はIKEAの安いものなのですが、全然お尻は痛くありません。それより手が悲鳴をあげました。
原因の一つとして、マウスが小さいのです。
自分の手は普通より大きく、今持ってるマウスでもまだ小さいので手が地面に付きっぱなしなのです。
次にキーボードです。ノートPCのキーボードなので長時間触ってるとやはり指が痛いです。
でもキーボードもマウスも高いんですよね…。

 

 

少し使えるかなって思った話

wiiリモコン

みなさんwiiお持ちですか?生産終了しましたけど。(いつの話だ)
wiiリモコンはBluetoothで色々できることは有名ですが、これをセンサーにしてVRできるのではと思いました。
しかしwiiリモコンをPCで読み込むためのセンサーがないので断念。

 

bangle.js

bangle.jsは腕時計です。
なんでも中身を自分で書き換えることができ、JavaScript(Node.js)で動くとか。
これで位置とか取得出来たらいいなーと思いました。
まだ販売されてすぐで日本語での説明がないので、詳しく何ができるかはわかりませんでした。

 

まとめ

スマホで疑似VRしましたが、プログラムより周辺機器に悩まされたのが大きかったです。
家でずっと開発してるので、周辺機器も充実させた方が捗るのかなって思いました。
あとVR機器をもっていないので、本物のVRがどんな感じで操作するのかもよくわからないんですよね。
持ってたら違うアイデアが浮かんでたのでしょうか。
もしよければ開発費用をよろしくお願いします。
とりあえずiPhoneが欲しい…。
TECHNOLOGY Programming VR Web系 JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

akatsuki1910のアバター akatsuki1910

JavaScriptで色々する人

天才は5つの事を同時に考え、2つの事を同時に行う

関連記事

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

目次