paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

コード不要・ブラウザ上で簡単にWebVRアプリを開発&公開できる「Patches」を使ってみた!

f:id:paiza:20180221155937j:plain
どうも、まさとらん(@0310lan)です!

今回は、PC・スマホのブラウザ上でVR体験ができるWebアプリを簡単に開発可能なWebサービスをご紹介します。

コード不要でブラウザ上から誰でも手軽に開発できるように設計されており、ブロック化されたさまざまな機能を「線」でつなげていくだけで開発できます。

VR開発にご興味のある方は、ぜひ参考にしてみてください!

Patches

f:id:paiza:20180221160053j:plain

■「Patches」とは?

「Patches」は、ビジュアルプログラミングをベースにしており、さまざまな機能を「パッチ」と呼ばれるブロック同士をつなげていくことでVR開発を実現しているのが特徴です。
f:id:paiza:20180221160113j:plain
このパッチには基本的なプログラミング構造であるループ処理や条件分岐・関数処理などが含まれているだけでなく、画像・動画・音楽などのマルチメディアや3Dモデルなど…VR開発に必要な機能がすべて含まれています。

また、WebVRの特徴としてPC・スマホに搭載されているブラウザだけでVRを楽しめるというのも大きな魅力の1つでしょう。

そのため、VR用のHMDバイスを持っていなくても疑似体験が可能で、URLをシェアするだけですぐに世界中の人が楽しめるので便利です。


「Patches」を利用すると、例えば以下のような360度写真にボタンを追加してポップアップを表示するのも簡単です!

【ポップアップ付き360度写真の例】

コチラのリンクから実際に体験できます)


もちろん、3Dモデルを読み込んで仮想空間に没入することもできます。

以下の例はポイントをタッチすることで、VR空間内をさまざまな視点で閲覧できるようにした例です。


【仮想空間内を移動する例】

コチラのリンクから実際に体験できます)


3Dモデルをアニメーションさせることも可能で、以下の例はロケットをタッチすると上空に飛んでいきます。そして「リセットボタン」をタッチすると元に戻るという例です。


【ロケット発射の例】

コチラのリンクから実際に体験できます)


他にも、音源を再生したりゲームのようなインタラクティブなアプリを開発したりなど、アイデア次第で可能性は無限大と言えるでしょう。

■「Patches」の使い方

それでは、実際に「Patches」を使いながらどのようなサービスなのかを見ていきましょう!

まず最初に、サイトのトップページから「Sign up」ボタンをクリックして無料のユーザー登録を済ませましょう。
f:id:paiza:20180221160302j:plain


「ユーザー名」「メールアドレス」「パスワード」を設定するだけで、すぐに登録が完了します。
f:id:paiza:20180221160312j:plain


すると、VR開発ができる「製作エディタ」が表示されます!
f:id:paiza:20180221160322j:plain
あとは、この画面上でインタラクティブなオブジェクトの設置や「パッチ」をつなげてロジックを組み立てていくだけで自由にVR開発ができます!

また、同時に自分専用のマイページも作成されており、作品をポートフォリオのように公開することも可能です。

インタラクティブな360度写真を作ってみよう!

ここからは、「Pathces」を使って実際に簡単な作品を作りながら基本的な使い方を見ていきましょう。

そこで、冒頭で紹介したような360度写真の中に「ポップアップ」を表示させるインタラクティブなVRアプリを作りたいと思います。


まず最初にエディタの使い方ですが、キーボードの「タブ」キーを押すたびに「Buildモード」と「Programモード」が切り替えられることを覚えておきましょう。
f:id:paiza:20180221160359j:plain
「Buildモード」は3Dモデルなどのオブジェクトを空間内に配置するモードで、「Programモード」がパッチをつなげて基本的なロジックを組み立てるモードになります。

また、画面左側にあるメニューはすべての「パッチ」が選択できるようにカテゴライズされており、ここから必要な機能を持ったパッチをドラッグして使うことになります。


画面下にある「VR視点モード」に切り替えると、ブラウザで表示された時にどのように見えるかを確認することができます。
f:id:paiza:20180221160416j:plain
「Buildモード」では、マウスをドラッグすると画面の視点を変更でき、右クリックで並行移動などができます。

基本的な操作としてはこのくらいなので、誰でもすぐに扱えるようになるはずです!


それでは「360度写真」を表示させてみましょう。

まず最初に、デフォルトで表示されている左側のパッチをすべて削除します。
f:id:paiza:20180221160430j:plain
画面が「真っ黒」になりますが問題ありません。


次に、画面左側の「パッチメニュー」にある検索窓から「360」と入力します。
f:id:paiza:20180221160459j:plain
すると、「360 photo」というパッチが見つかるのでクリック(ドラッグでも可)しましょう!


このパッチの端をマウスでドラッグしながら「Scene1」というパッチの「0番」と接続します。
f:id:paiza:20180221160614j:plain


たったこれだけで、360度写真が背景に合成されます。
f:id:paiza:20180221160628j:plain


「VR視点モード」に切り替えて、マウスでグリグリ動かしながらどのように動作するのかチェックしてみましょう。
f:id:paiza:20180221160641j:plain


当然ですが、自分で撮影した「360度写真」を利用することも可能です。

その場合は「Texture」パッチのアイコンをクリックすることで、写真をアップロードすることができます。
f:id:paiza:20180221160657j:plain
ちなみに、360度を撮影できるカメラを持っていない方でも「Googleストリートビュー」のアプリを使うことで、スマホのカメラだけを使って360度写真を撮影できるのでオススメです!

iPhoneGogoleストリートビュー

AndroidGoogleストリートビュー

■「ポップアップ表示」を組み込んでみよう!

今度は、360度写真の中にポップアップを表示できる機能を組み込んでみましょう。

パッチメニューから、「HOTSPOTS」→「Hotspot」というパッチをクリックします。
f:id:paiza:20180221160756j:plain


先ほどと同じように「Hotspot」パッチを1番に接続します。
f:id:paiza:20180221160808j:plain


そして、パッチの「編集アイコン」をクリックしましょう。
f:id:paiza:20180221160819j:plain


すると、「Hotspot」パッチの中に別のロジックが組み立てられているのが分かります。
f:id:paiza:20180221160829j:plain
パッと見ると複雑そうな感じですが、変更するのは左側にある「Pop-up-card」と書かれたパッチだけです。

このパッチは、ポップアップ表示される画像を指定する機能になります。編集アイコンをクリックして自分の好きな画像を選んでみましょう。!


今回は、サンプルなので以下のような画像にしました。
f:id:paiza:20180221160842j:plain


画像の設定が終わったら、「Buildモード」に切り替えてオブジェクトの位置を中心に近づけておきましょう。
f:id:paiza:20180221160855j:plain
中心に近いほど、VR視点になった時に近くで見ることができます。

■作品を公開してみよう!

ある程度、作品ができたら「公開」をしてみましょう。

方法は簡単で、画面上にある「Publish(書き出し)」ボタンをクリックするだけです。
f:id:paiza:20180221160912j:plain

「作品名」を入力して「Public(公開)」か「Private(非公開)」を選択したら、「Publish」ボタンをクリックして完了です!
f:id:paiza:20180221160928j:plain


今回のサンプルは以下のような感じで動作します!
f:id:paiza:20180221160941g:plain
また、公開用のURLをシェアしたり「埋め込みコード」を利用してブログやサイトに貼り付けることも可能なのでぜひ試してみてください。

■3Dモデルをアニメーションさせる!

「Patches」には、数多くの3Dモデルがあらかじめ用意されているので、これを使ってアニメーションを作成してみましょう!

パッチメニューから「OBJECTS:ANIMALS」→「Eagle」を選択して鷹の3Dモデルを表示してみます。
f:id:paiza:20180221161015j:plain
(他にも、キャラクター・街並み・ビル・家具など多数の3Dモデルがあります…)


「Eagle」のパッチを4番に接続します。
f:id:paiza:20180221161031j:plain


そして「Buildモード」に切り替えると、見事に3Dモデルが表示されていますね!
f:id:paiza:20180221161047j:plain
このモデルはすでに羽を動かすアニメーションが搭載されているのですが、指でタッチすると大空に飛んでいくアニメーションを追加してみたいと思います。


そこで、「球体」をタッチするとアニメーションが実行されるようにしたいので、「Sphere」を追加しておきます。
f:id:paiza:20180221161100j:plain


あとは、これまで通りに「Eagle」パッチの編集アイコンをクリックして中身のロジックを組み立てていきます!
f:id:paiza:20180221161111j:plain


簡単な繰り返しアニメーションを作る方法として、「Toggle Sine Animation」というパッチが用意されているので検索して選択しましょう。
f:id:paiza:20180221161122j:plain


「X Y Z」方向の座標を出力する「XYZ to Vector」パッチも追加して、それぞれを接続していきます。
f:id:paiza:20180221161133j:plain
今回は「Y方向」「Z方向」だけを接続し、最後に「position」の箇所へ接続すればOKです!


オプションとして、「Min」「Max」パッチが用意されているので「Max」の値を変更して3Dモデルが飛び上がる高さを大きくしておきます。
f:id:paiza:20180221161145j:plain


最後に、球体をタッチしたらアニメーションが実行されるようにしたいので、「Sphere」モデルを指定しておきましょう!
f:id:paiza:20180221161158j:plain


あとは、「Publish」ボタンをクリックして公開すると以下のようになります!
f:id:paiza:20180221161210g:plain
「球体」をタッチすると大空へ飛び上がるアニメーションが実行されるのが分かりますね。


このように、簡単なアニメーションを作成できるパッチが数多く用意されているので、上手く組み合わせることで自由自在に3Dモデルを動かすことが可能です。

ちなみに、3Dモデルは別のソフトウェアで作成したものを読み込むことも出来るし、Googleが公開している「Poly」から好きなモデルを利用することも可能なので便利ですよ!

■「Ruby入門」が今だけ無料!動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、PythonJavaC言語C#PHPRubySQLJavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

ただいま、2/26(月)までの期間限定で「Ruby入門編」を全編無料公開しております。

また「Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、WebVRアプリを簡単に開発できる「Patches」について駆け足でご紹介しました!

VR空間に音源を追加したり、パーティクルエンジンを利用したエフェクトや移動モーションを追加するなど、まだまだ紹介できていない機能がたくさんありますが今回ご紹介した基本的な機能だけでも十分に楽しめると思います。

ぜひ、みなさんもオリジナルのVRアプリを開発して友人・知人とシェアして遊んでみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud