ミクにあいたい→そうだVRで召喚しよう! 一途な思いが実現した“ブラウザで動くVRアプリ”がすごい完成度

思いが……次元の壁を超えた……?

» 2016年03月11日 17時08分 公開
[コンタケねとらぼ]
Share'); html.push('XPostPost見る'); html.push('
LINE
LINE
'); html.push('
Hatena
Hatena
'); html.push('HomeHome'); box.className = 'my_social'; box.innerHTML = html.join(''); wrap.appendChild(box); window.addEventListener('load',function(){ var rel = '',rel_id = ['endlinkConnection','logly-lift-4272841']; for(var i = 0; i < rel_id.length; i++){ if(d.getElementById(rel_id[i])){ rel = '
関連記事
関連記事
'; } } box.innerHTML += rel; }); })(document,'my_social_top');

 ブラウザで動くVRアプリ、「MMD×Songle」の完成度が高いと話題です。名前の通りMMDのようなライブ鑑賞アプリで、PCとスマートフォンどちらでも利用できます。


トップ 「MMD×Songle」トップページ

 トップページで楽曲と設定を決め、「LIVE START」を押せば再生開始。音楽に合わせてミクが踊り、PC上でMMDを再生している時のように自由に視点を変更できます。


ダンス PCで再生してみたところ


視点 視点変更可


コメント ニコニコ動画のコメントを表示することもできる。コメント自体も3D表示

 スマホで再生する場合、設定の「加速度センサー」をONにしておくと、本体の向きに合わせてリアルに視点が変化。また、「2画面表示」にチェックを入れると、Google Cardboardなどを利用したVR視聴ができます。

 ブラウザで動くアプリにしては、かなりの完成度ですね。ニコニコ動画には、同アプリを作成するに至ったいきさつと、技術的な解説をまとめた動画が公開されています。18分と長めの動画ですが、その熱い思いがぎっしりと詰まっていました。



 動画によると、アプリを作成した動機は「うちにミクさんを召喚しよう!」という思いからとのこと。初音ミクのライブに感動したため、家で自由にライブを見たいと思ったのがきっかけだったそうです。金銭の絡まない純粋な思いが、次元を超えた……?


召喚 召喚しよう! から実現してしまうこの技術と行動力

 最初はUnityで開発し、Oculus(関連記事)やPS VR(関連記事)などのVRヘッドマウントディスプレイを使ってVRを実現しようとしていたそうです。が、値段と普及率などの点から断念。ブラウザで動かす方向にシフトしたとのこと。


VR 高いですよね……

 また、動画中盤には開発段階における技術的な解説がされるのですが……まあ、その、なんですね。その手の知識がある人は、ぜひどうぞ。私には何も分かりませんでした。


技術1 なるほど分からん


技術2 分からん……

 そんなこんながあって出来上がったのが、「MMD×Songle」となります。今後はライブ演出やカメラモーションの強化、他ユーザーとリアルタイムにライブを共有する機能などを作りたいとのこと。期待したいですね。また、動画の最後にはスマホで再生しているところを撮影した場面もありますので、参考にどうぞ。


スマホ 加速度センサーのすごさが分かると思います

Copyright © ITmedia, Inc. All Rights Reserved.

'; div_1.appendChild(div); addJS('//widgets.outbrain.com/outbrain.js'); }); })(document,'rm51882_1');
昨日の総合アクセスTOP10
  1. /nl/articles/2501/25/news083.jpg 岡田紗佳、生配信での発言を謝罪 「とても不快」「暴言だと思う」「残念すぎ」と物議
  2. /nl/articles/2501/25/news063.jpg 東京藝大卒業生が油性マジックでサンタを描いたら? 10分で完成したとんでもない力作に「脱帽です」「本当にすごい人」
  3. /nl/articles/2501/23/news050.jpg 風呂に入ろうとしたら…… 子どもから“超高難易度ミッション”が課されていた父に笑いと同情 「父さんはどのようにしてこのお風呂に入るのか」
  4. /nl/articles/2501/25/news011.jpg 【ハードオフ】5500円で売っていた“とんでもないPC” 搭載されていたのはなんと……「神引きやないですか」「うらやましすぎです」
  5. /nl/articles/2501/14/news118.jpg 水はけが悪いぐちょぐちょの庭に“あるもの”を敷いていくと…… 感動のビフォーアフターに「雑草対策にもなる」「我が家もやってみます!」
  6. /nl/articles/2501/23/news065.jpg DIYで室温が約10℃変わった「トイレの寒さ対策」が310万再生 コスパ最強のアイデアへ「天才!」「これすごくいい」
  7. /nl/articles/2501/25/news019.jpg 61歳のおじいちゃんが“9年かけて”大変身! まるで別人のような“現在”に「ただただすごい!」と2000万再生【海外】
  8. /nl/articles/2501/24/news054.jpg 子どもに“動画視聴をやめさせる方法”が目からウロコ 「あと8年早く知りたかった」「素晴らしいアイデア」と40万表示
  9. /nl/articles/2501/25/news056.jpg 彼氏の28歳誕生日、彼女がイメチェンをプレゼントしたら…… 驚がくの大変身に「えっ!?」「別人みたい」
  10. /nl/articles/2501/24/news188.jpg 登録者63万人のカップルYouTuber、“家族の死”を報告 早すぎる別れに「嘘でしょ??」「信じられない」の声続々
先週の総合アクセスTOP10
  1. ドブで捕獲したザリガニを“清らかな天然水”で2週間育てたら…… 「こりゃすごい」興味深い結末が195万再生「初めて見た」
  2. 「配慮が足りない」 映画の入場特典で「おみくじ」配布→“大凶”も…… 指摘受け配給元謝罪「深くお詫び」
  3. 市役所で手続き中、急に笑い出した職員→何かと思って横を見たら…… 衝撃の光景が340万表示 飼い主にその後を聞いた
  4. 鮮魚店で売れ残っていたタコを連れ帰り、水槽に入れたら…… ヤバすぎる光景に「こんなに可愛いなんて!」「笑ってしまった」
  5. 母「昔は何十人もの男性の誘いを断った」→娘は疑っていたが…… 当時の“モテ必至の姿”が1170万再生「なんてこった!」【海外】
  6. 「まじで終わってる」 マクドナルド「エヴァ」コラボ品“高額転売”に嘆く声…… 「結局欲しい人が買えない」
  7. 母に「髪染めやピアスはダメ」と言われ続けた25歳東大女子、大変身を決意したら…… まさかの事態に「さすがにおもろい」「涙出てきた」
  8. 賞味期限「2年前」のゼリーを販売か…… 人気スーパーが謝罪「深くお詫び」 回収に協力呼びかけ
  9. 風呂上がりに偶然「牛乳を注ぐ女」になった人に反響 「ほぼそのままw」「盛大にふきだした」 投稿者に話を聞いた
  10. タンクトップ姿のパパ「昔はモテた」→娘は信じていなかったが…… かつての姿に衝撃走る「『トップガン』に出ていても納得」【海外】
先月の総合アクセスTOP10
  1. ザリガニが約3000匹いた池の水を、全部抜いてみたら…… 思わず腰が抜ける興味深い結果に「本当にすごい」「見ていて爽快」
  2. パパに抱っこされている娘→11年後…… 同じ場所&ポーズで撮影した“現在の姿”が「泣ける」「すてき」と反響
  3. 東京美容外科、“不適切投稿”した院長の「解任」を発表 「組織体制の強化に努めてまいる所存」
  4. ズカズカ家に入ってきたぼっちの子猫→妙になれなれしいので、風呂に入れてみると…… 思わず腰を抜かす事態に「たまらんw」「この子は賢い」
  5. 母親から届いた「もち」の仕送り方法が秀逸 まさかの梱包アイデアに「この発想は無かった」と称賛 投稿者にその後を聞いた
  6. イモトアヤコ、購入した“圧倒的人気車”が思わぬ勘違いを招く スーパーで「後ろから警備員さんが」
  7. 「何があった」 絵師が“大学4年間の成長過程”公開→たどり着いた“まさかの境地”に「ぶっ飛ばしてて草」
  8. フォークに“毛糸”を巻き付けていくと…… 冬にピッタリなアイテムが完成 「とってもかわいい!」と200万再生【海外】
  9. 「何言ったんだ」 大谷翔平が妻から受けた“まさかの仕打ち”に「世界中で真美子さんだけ」「可愛すぎて草」
  10. 鮮魚スーパーで特価品になっていたイセエビを連れ帰り、水槽に入れたら…… 想定外の結果と2日後の光景に「泣けます」「おもしろすぎ」
'; var div_outer = d.createElement('div'); div_outer.className = 'colBoxOuter'; div_outer.innerHTML = html; var target = (d.getElementById('colBoxCategoryList'))? d.getElementById('colBoxCategoryList') : d.getElementById('colBoxAsideCategoryList'); target.className = 'colBox colBoxCategories'; target.appendChild(div_outer); }; const dataLargeCategory = { "categories": [ { category:"ニュース", categoryid:"341", }, { category:"エンタメ", categoryid:"342", }, { category:"クイズ", categoryid:"343", }, { category:"ゲーム", categoryid:"344", }, { category:"グルメ", categoryid:"345", }, { category:"住まい", categoryid:"346", }, { category:"地域", categoryid:"347", }, { category:"おかね", categoryid:"348", }, { category:"乗り物", categoryid:"349", }, { category:"教育・子育て", categoryid:"350", }, { category:"家電・PC・カメラ", categoryid:"351", }, { category:"就職・転職", categoryid:"https://nlab.itmedia.co.jp/research/category/recruit/", }, { category:"ホビー", categoryid:"353", }, { category:"ファッション", categoryid:"354", }, { category:"動物", categoryid:"355", }, { category:"健康・筋トレ", categoryid:"356", }, { category:"ライフスタイル", categoryid:"357", }, { category:"美容", categoryid:"358", }, { category:"IT・科学", categoryid:"361", }, { category:"カルチャー・アート", categoryid:"381", }, ] }; const arrayNoSmallCategoryList = ["ニュース","クイズ","ゲーム","グルメ","住まい","おかね","家電・PC・カメラ","就職・転職","ホビー","健康・筋トレ","ライフスタイル","美容","dummy"]; var tempCategoryGroupId = document.head.querySelector('[name=categorygroupid]') var flgView = true; if(!!tempCategoryGroupId){ for(var i = 0; i < dataLargeCategory.categories.length; i++){ if(dataLargeCategory.categories[i].categoryid == tempCategoryGroupId.content && arrayNoSmallCategoryList.includes(dataLargeCategory.categories[i].category)){ flgView = false; break; } } } if (d.head.querySelector('[name=categoryid]') && flgView) { var categoryid = d.head.querySelector('[name=categoryid]').content; var json_url = '/include/category/' + categoryid + '/categories.json'; jsonRequest({url:json_url, charset:'Shift_JIS', callback:function(_data){outputCategoryList(_data.json,ini.heading)}}); } else { var data = dataLargeCategory; outputCategoryList(data,ini.l_heading); } })();