シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
注目記事ピックアップ
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/11/29 20:10

英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!

gurivr-01
どうも、まさとらん(0310lan)です!

最近は「VR(バーチャルリアリティ)」を活かしたWebサービスが増えているのですが、まったく違う方向から攻めてきた斬新な「VR構築サービス」が海外で注目を集めているのでご紹介しようと思います。

【 GuriVR 】
gurivr-02
「GuriVR」は、Web上に「VR空間」を構築することで、PC・スマホのブラウザ上でVR体験ができるようになります。

面白いのはその構築方法で、何らかのプログラミング言語を駆使して作るのではなく、どんなVR体験がしたいかを英語の文章で書いていくだけで実現するというかなり異色の無料Webサービスとなっています。


基本的な使い方!

まずは「GuriVR」をどうやったら使えるのか、基本的な扱い方を実際に試しながらご紹介しようと思います。


サイトにアクセスして「ログイン」ボタンをクリックしましょう!
gurivr-03

自分のメールアドレスを入力します。
gurivr-04
すぐに「ログイン用のリンク」がメールで送られてくるので、そのリンクをクリックしましょう。


すると、自分専用の「ダッシュボード」が表示されるので、「+」アイコンをクリックして新規プロジェクトを作成します。
gurivr-05

開発用のエディタが表示されて、VRのサンプルが表示されているのが分かると思います。
gurivr-06
エディタは2つの画面構成になっており、英文を入力する「テキストエディタ」と、実際に生成されたVR空間を表示できる「プレビュー」があります。(プレビューは別タブで全画面にもできます)


まずは、「テキストエディタ」に書かれている「英文サンプル」をすべて削除して空っぽの状態にしておきましょう!
gurivr-07
この状態から「GuriVR」にどんな機能が搭載されているのかを、1つずつチェックしていきたいと思います!


「英文」から「VR空間」に変換しよう!

それでは、早速「VR空間」をWeb上に作って体験してみたいと思います。


まずは、こんな英文を「テキストエディタ」に入力してみましょう!
gurivr-08
「create VR scene in here」
(ここにVRシーンを作って)


と入力してみました…。


実は、もうこれでWeb上に「VR空間」が生成されています。ただし、何もない「無」の状態なので確認ができません。


そこで、空間の中に「空」を描画してみます。
gurivr-09
「create VR scene and sky in here」
(ここにVRシーンと空を作って)



すると、プレビュー上でVRの「空」が表示されるはず!
gurivr-10

PCブラウザだとマウスによる画面移動が可能で、スマホブラウザなら端末を傾けることで画面をスムーズに移動出来ます。(もちろんヘッドマウントディスプレイならリッチな疑似体験もできますよ)


今度は、「空」ではなく「360度パノラマ写真」を描画してみましょう。

「GuriVR」のユニークな特徴として、写真を持っていなくても特定のキーワードを入力するだけで、自動的にネット上から探して表示してくれる機能が搭載されています。


例えば、バスケットボールのパノラマ写真を表示したければ、こんな感じの英文を入力すればOK!
gurivr-11
「create VR scene with panorama of “basketball”」
(バスケットボールのパノラマでVRシーンを作って)



生成されると、こんな感じ!
gurivr-12


ぜひ、以下のリンクから「サンプル」をスマホブラウザなどでチェックしてみてください!

【VR バスケットボール】
https://s3.amazonaws.com/gurivr/s/583a85ca20fe477f05aad05f.html


ダブルクォーテーションで囲まれたキーワードを自動的に認識して写真を表示してくれるので、他にも”school”とか”island”みたいな感じで指定できます。(意図しない画像になる場合もありますが…)


また、当然ですが自分が用意した「パノラマ写真」も利用することが出来ます。

方法は簡単で、「テキストエディタ」へ直接ファイルをドラッグ&ドロップするだけでOKです!
gurivr-13

複数の「シーン」を活用してみよう!

これまでのサンプルでは、単発のシーンだけでVR空間を生成してきました。

「GuriVR」では、複数のシーンを生成することも可能で、任意のタイミングで切り替えながら複雑なVR空間を作ることも可能です。


方法としては、1つのシーンに「持続時間」を追加して、何秒くらい表示させてから次のシーンに遷移するかを記述します。
gurivr-14
「create VR scene and sky. It lasts 4 seconds.」
(VRシーンと空を作って。それを4秒間続けて。)



このように英文を入力すると4秒後に自動で終了するので、この後に続けて新しいシーンを作ってみましょう。
gurivr-15
「create VR scene and sky. It lasts 4 seconds.」
(VRシーンと空を作って。それを4秒間続けて。)

「And then, create new scene with panorama of “island”.」
(その後、島のパノラマで新しいシーンを作って。)


このような英文にすることで、4秒後に「島」のVR空間に画面遷移するようになるわけです。


これを応用すれば、さまざまなシーンを渡り歩くユニークな作品が作れるでしょう。
gurivr-16
「create VR scene and sky. It lasts 3 seconds.」
(VRシーンと空を作って。それを3秒間続けて)

「create new scene with panorama of “island” lasts 3 seconds.」
(3秒間続く島のパノラマで新しいシーンを作って)

「create new scene with text saying “The End”.」
(”The End”というテキストで新しいシーンを作って)



これをプレビューするとこんな感じになります!
gurivr-17

「GuriVR」は、他にも音声を再生したり動画ファイルを表示したりも自由にできるので、使い込めば本格的な映像作品をVRで表現することも出来るでしょう。


「VR体験」をシェアしよう!

作成したVRプロジェクトは、友人・知人へ簡単にシェアすることが出来ます。


エディタ下部には、「①保存」「②シェア」という2つの機能が搭載されているのが分かります。
gurivr-18
任意のファイル名を入力して「①保存」をクリックすれば、自分のダッシュボードにプロジェクトを保存することができます。

その後に「②シェア」ボタンをクリックすれば、別タブでプロジェクトが開くので、このURLをSNSやメールでシェアすれば他の人も同じようにVR体験が出来るわけです。

「GuriVR」の性質上、できれば「スマホ」か「ヘッドマウントディスプレイ」で体験してもらうのが望ましいでしょう。


まとめ

「GuriVR」を使えば、サクッと英文を書いていくだけで驚くほど簡単にVRプロジェクトを構築できるのが分かると思います。

ちなみに、英文を入力するのに使う「テキストエディタ」ですが、公式ドキュメントにあるように特定のキーワードを抽出してVRに変換する仕組みなので、あまり英語の文法にこだわる必要はありません。


また、書きだされたVRプロジェクトは人気のWebVRフレームワーク「A-Frame」が使われているので、後から自分好みにカスタマイズしても良いでしょう。

もし、VRにご興味が湧いてきたら、ぜひ気軽にトライしてみることをオススメ致します!


<参考>
「GuriVR」公式サイト

「GuriVR」公式ドキュメント


written by まさとらん(0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る