ジョー・ヒタギの止リ木 | 「ものづくり」や「ものなおし」をするブログ

色々なものを作ったり直したりするブログです。主な話題は日用品・電子機器・エアガンなど。

ジョー・ヒタギ の 止リ木

MMD ☓ Songleの読み込みが終わらない・再生ボタンが表示されない・落ちるときの対処法

f:id:Jo-Bitaki:20191112161500p:plain:h350

MMD ☓ Songleとは、ブラウザで動くVRアプリです。
初音ミクさんのMMDライブをリアルタイムで描画し、360度動画のように視点を自由に変えて楽しめます。

加速度センサー付きのスマホとヘッドマウントディスプレイ(HMD)があれば、VR映像としても再生できるのです。

ちなみに、スマートフォン用のHMDとはこんなものです。

ただ、スマートフォンでの使用には少し癖があります。
そのため、この記事では使い方のコツをご紹介したいと思います。

おことわり

2019年11月12日現在、最新のiOSおよびiPadOSでは加速度センサーと2画面表示の機能が使えず、1画面表示であっても画面の半分の大きさでしか再生されません(下図)。画面の右半分は真っ白になっています。

f:id:Jo-Bitaki:20191112161445p:plain:h300


私の記憶では、iOS 11.2.6までは正常に動いていたと思います。

Androidデバイスでの動作は未検証です。

パソコン(Windows10、Firefox)で試したところ、コメント表示機能以外は正常に動きました。
下の画像はPCで2画面表示をしてみたものです。

f:id:Jo-Bitaki:20191112161452p:plain:h300


※2画面表示は本来は スマホ用HMD で使うための機能。

動作に関する情報をお持ちの方は、ぜひコメントなどでお知らせください。

公式サイト

公式サイトは▼こちら▼。
MMD ☓ Songle

製作者様の動画も貼っておきます。

www.nicovideo.jp
使い方のほか、制作に至った経緯や使用技術が紹介されていて見応え抜群です。

スマートフォンでの使い方

スマホでの使い方を、iPhoneを例に説明していきます。

1.事前準備

作者様も動画で述べておられますが、全画面表示にするためには事前にサイトをホーム画面に追加しておく必要があります。
手順は次の通り。

まずはSafariでMMD ☓ Songleを開き、共有メニューから「ホーム画面に追加」を選びます。

f:id:Jo-Bitaki:20191112161429j:plain:h450

ホーム画面に追加されたアイコンを起動すると、全画面表示にできます。

f:id:Jo-Bitaki:20191112161425j:plain:h200

2.ライブの再生

まずは起動して最初に表示される画面で、好きな楽曲と設定を選んでください。

f:id:Jo-Bitaki:20191024222028j:plain:h450


影表示をONにすると動作がかなり重くなるのでご注意。

物理演算はONがおすすめです。
OFFだと髪の毛の動きが板のようで違和感があるので。

現在のところ、iOS 11.2.6より新しいバージョンでは加速度センサーと2画面表示は機能しません。

設定が終わったら、「LIVE START」をタップしてください。
すると読み込みが始まります。

f:id:Jo-Bitaki:20191024221956j:plain:h450

「音楽地図ダウンロード中」の表示が出たら、すぐさま画面を横向きにしましょう
そうしないと、画面がフリーズするかアプリが落ちます。

f:id:Jo-Bitaki:20191024221959j:plain:h450

楽譜データのようなものが表示されたら、左上の再生ボタンをタップします。

f:id:Jo-Bitaki:20191024222005j:plain:h300

すると、音楽だけが再生されます。
そうしたら、白い帯のような部分をタップすると映像も映るようになります。

f:id:Jo-Bitaki:20191024222011j:plain:h300

もし映像が固まっているなら、映像が表示されている部分をタップすれば動き始めます。

f:id:Jo-Bitaki:20191024222014j:plain:h300

加速度センサーが使えなくても、以下のように手動で視点移動ができます。

  • 水平移動:3本指でスワイプ
  • 距離変更:2本指でピンチ
  • 視点の回転:1本指でスワイプ

自由な視点移動はただのVR動画では真似できない、リアルタイム描画ならではの機能ですよね。

なお、パソコンの場合の操作は次の通りです。

  • 水平移動:マウスの右ボタンでドラッグ
  • 距離変更:マウススクロール
  • 視点の回転:マウスの左ボタンでドラッグ

おわりに

何年か前にMMD ☓ Songleで初めてMMDのVR動画を見たとき、とても感動しました。
この記事をきっかけにMMD ☓ Songleを視聴していただき、1人でも多くの方がMMD×VRの世界に興味を持っていただけると嬉しいです。

現在、YouTubeにはMMDで作られたVR動画が数多く投稿されています。
YouTube公式アプリを使えばHMD用の映像も表示できるので、ぜひ1度 「MMD VR」 や 「MMD 360度」 で検索して見てください。

YouTube

YouTube

Google LLC無料posted withアプリーチ

おまけ1:スマホ用HMDの選び方

スマホ用ヘッドマウントディスプレイには、スマートフォンを固定する方式が2通りあります。

  • スマホを左右の側面から挟んで固定する方式
  • スマホを前後(画面と背面)から挟んで固定する方式

私は両方のタイプを使ったことがありますが、おすすめなのは「左右の側面から挟んで固定する方式」です。

「前後から挟んで固定する方式」はスマホを簡単に装着できるというメリットがありますが、

  • スマホが接眼レンズに対して水平になりにくい(特にスマホケースを使用している場合)
  • スマホの位置がずれやすい
  • 画面に負荷がかかる

といった無視できないデメリットがあるのでおすすめできません。

あと、中国製のわけの分からないメーカーのものは、どれほどAmazonレビューで評価が高くても手を出さないほうが無難です。
「ピントが合わない」、「画面が揺れて酔う」といった低品質ぶりにきっと後悔します。

以下のような、名のしれたメーカーの製品がおすすめです。

 

おまけ2:NTTドコモが超高視野角VRゴーグルを開発

2019年4月、NTTドコモがスマホ用の広視野角HMDを開発したと発表しました。

新開発のHMDでは、従来の接眼レンズの周囲に特殊な形状のレンズが追加されています。
特殊レンズが周辺視野にぼやけた映像を映すことで、視野が広がったように錯覚させるようです。単純なのに巧妙な原理ですね。

商品化が待ち遠しいです。エレコムあたりが採用してくれないでしょうか。

VR関連記事

【Unity】スマホだけで6DoFのVRを実現したサンプルプロジェクトの紹介

【Unity】オブジェクトの回転を別のオブジェクトと同期させるスクリプト【C#】