Psychic VRラボの殴り書き

Unityでビデオストリーミングをテクスチャとして表示する(アセットなしでOK)

テクスチャ上でビデオを再生するにはAVProアセットEasy Movie Texture (Video Texture)などを使う方法がありますがUnityのMovieテクスチャを使えば追加アセット無しでも実現することが可能です。

ウェブサーバーからストリーミングされる動画をテクスチャに貼るにはどうしたらいいものかと調べていたらUnity標準のMovieテクスチャでも実現できることがわかった。ただし、動画ファイル形式はogg形式でないとダメなようだ。

ウェブサーバー上のoggビデオファイルをストリーミング再生する

下記コードをOggVideoStreamingTexture.csとして保存する。

任意のGameobjectに貼り付けます。

OggVideoURL:ストリーム再生するoggビデオのURL
サンプルで http://www.unity3d.com/webplayers/Movie/sample.ogg を利用して試そう

GameobjectForVideoTexture:ビデオを表示するオブジェクト。未指定の場合はスクリプトをアタッチしたオブジェクトに動画が表示されます。

ogg1

実行すると動画が表示されます。サーバーからダウンロード途中でも再生がスタートします。エラーが2つ出ますが無視してOKです。海外のフォーラムでも話題にでていましたがUnityのバグっぽい。

ogg2

 

ogg形式へビデオファイルのコンバート方法

上記スクリプトでの動画ストリーミング再生には、動画のファイル形式がogg形式である必要があります。各種ビデオファイルをogg形式へ変換するスクリプトを作成したので紹介しておく。スクリプトはVBScriptで記述したWidnows Scripting Hostです。(VBScriptを拡張子.vbsで保存すればそのままWindowsで実行できて便利)

  1. ffmpegのダウンロード
    ffmpeg公式サイトからWindows用バイナリをダウンロード
    zipファイルを解凍する
  2. 下記スクリプトをConvert_video_to_ogg.vbsとして保存。1で解凍したffmpegフォルダに設置する
  3. Convert_video_to_ogg.vbs をダブルクリックして実行

説明文書が表示されるのでOKを押す

ogg3

ビデオファイルを選択する

ogg4

後は、変換されるのを待つ。oggファイルは元ビデオと同じフォルダに生成されます。

ogg5

ffmpegとogg変換スクリプトのセットをこちらに置いておきます( GPL 3.0ライセンスによる再配布)

zipiconffmpeg-20160610-git-0a9e781-win32-static_with_ogg_video_convert_script.zip

 

 

カテゴリー: Unity

UnityでC#を用いてInstagram APIを利用するメモ

Instagram API利用時のメモです。
今回は、Instagramの任意のユーザーの新着を取得するのに必要な手順で、それ以外の利用方法は今回のメモの対象外です。

まず、事前知識として知っておくと理解が早い情報

  • 一般公開されている写真の情報を取得するだけでもAPIを用いる必要がある。
  • APIは審査基準が厳しい
  • 審査通るまではSANDBOXモードで動作し、10ユーザーの新着20件までの情報しか取得できない
  • SANDBOXモードで取得するユーザーは個別に許可をもらう必要がある
  • APIの利用はURL ENDPOINTにアクセスすることでJSON形式でデータを取得することができるREST APIなので実装は難しくない
  • usernameとuseridはことなり、APIで利用するのはuserid。(APIを用いてusernameからuseridを取得する必要あり。ここを理解していなくてハマった。)
  • APIの利用にはアクセストークンが必要。これは、管理画面で発行されるClient IDともClient Secretとも違い、Client IDを用いて別途取得する必要がある。(セッションごとに必要なものではなく、一度取得すればリセットしないかぎり使える)
  • 2015年10月17日からAPIの審査が必要になったらしい。なので、この日付より古いネットの情報は注意が必要

事前準備

  1. Developer登録
    https://www.instagram.com/developer/
    から開発者情報を入力
  2. Applicationの登録
    Detailsタブ
    Valid redirect URIs:
    アクセストークンを取得するのに利用。今回の用途では実在するURLであればひとまずなんでも良いSecurityタブ
    Disable implicit OAuth:チェックを外す
    Enforce signed requests:チェックを外す
  3. ApplicationごとのClient IDが発行されるのでメモします
  4. Sandboxユーザーの追加
    Manage Clients – EDIT – Sandbox
    で写真を取得したいユーザーを追加します。
    追加したユーザーには個別に承認を貰う必要があります。
  5. アクセストークンの取得
    APIを利用する際に必要なAccess Tokenを取得します。
    ・Application登録時に設定したRedirect URL
    ・取得したClient ID
    を下記URLに含めてブラウザからアクセスします。

    insta1
    認証を求められるのでAuthorizeをクリック
    ブラウザのページがリダイレクトで指定したサイトにジャンプします。
    insta2
    その際、ブラウザのアドレスバーのURLに表示されるaccess_token以降の文字列がアクセストークンになります。
  6. 情報を取得したいユーザーのuseridを取得
    繰り返しになりますが、SANDBOXモードでは写真や情報を取得するユーザーには個別に許可を貰う必要があります。またAPIではusernameではなくuseridを利用する必要があるため、対象ユーザーのuseridを取得します。
    usernameとはhttps://www.instagram.com/kyarykyary0129/ のkyarykyary0129の部分です。
    下記URLでUSERNAMEとACCESS_TOKENを指定してブラウザでアクセス

    ブラウザにUSERNAMEで指定したユーザーの情報が表示されます。(見やすく整形しています)

    上記の場合、useridは4159593になります。

 

写真投稿の取得

API ENDPOINTのドキュメントはこちら

ここまでの事前準備で取得した
・アクセストークン
・取得対象ユーザーのuserid
をAPIで利用して情報をとります

指定ユーザーの新着情報取得

 

Instagramの投稿写真を取得するためのコードを作成したので公開しておきます。写真一覧取るだけのシンプルなものです。今後これをベースに機能追加予定。

MiniJSON及びJsonNodeをダウンロードしておくこと。

 

 

カテゴリー: Unity

Unity・VR内でブラウザを利用するメモ

VR空間内でウェブブラウザを利用することのできるEMBEDDED BROWSERの利用メモです。
公式ドキュメントはこちらのReadmeZFBrowser Documentationを参照、

b1

EMBEDDED BROWSERアセットを利用することで、VR空間内で簡単にウェブサイトを利用することができます。後ろでChromiumブラウザが動作する仕組みで動作するため、WebGLコンテンツやYoutubeなどChromeで動作するウェブサイトであればそのままなんでも表示できます。

単なるウェブ表示用だけではなく、UI表示用パネルとしても利用価値大です。

また
・平面以外のオブジェクトに表示
・ウェブページ内のJavascriptからUnity上の関数を呼んだり
・Unity上の関数からウェブページ上の関数を呼んだり
できます。

利用方法は簡単で、ブラウザーPrefabをヒエラルキーに追加するだけです。URLを設定すれば実行時にウェブが表示されます

b2

実行時にはデバッグ用のボタンがInspectorに表示されるので便利です。

b3

ブラウザPrefabは下記の4つが用意されています。

BrowserGUI
3D空間ではなく、2DのUIとして画面上にウェブを表示したい場合に利用します。

BrowserQuad
3D空間でウェブを表示する場合は通常こちらを利用します。

BrowserQuad (FPS UI)
マウス操作の代わりに視点でポインタを移動するスクリプトが入っています。

BrowserSphere
任意の形状のオブジェクトにウェブを表示する球体でのデモPrefabです。

 

スクリプトからブラウザの制御

スクリプトからブラウザの制御方法です。

 

指定のURLのページを表示

指定の場所までページをスクロール

DOMへのアクセス(EvalJs経由で制御)

HTMLを直接読み込み

ちなみに、HTMLの背景はデフォルトでは透過状態になっています。透過pngをimgタグで表示した場合、下のように透けて表示されます。ウェブサーバー不要で、EMBEDDED BROWSERをHTMLを利用したUIキャンバスにできて便利。

b4

Javascriptの関数を呼ぶ

Javascriptで関数が呼ばれた際にUnity内の関数が実行されるように登録

Unityプロジェクト内のHTMLファイルへのアクセス

Assetsフォルダと同列に(下位フォルダではなく)、BrowserAssetsフォルダを作成

localGame://index.html

でBrowserAssets内のindex.htmlへアクセスできます。

ページ読み込み完了時に指定の関数を実行(Whenloadedはブラウザ内でユーザーがクリックした移動した遷移は取得不可)

ブラウザ内でユーザー遷移を補足して、RegisterFunctionを実行する方法

 

 

 

 

便利な追加コード

EMBEDDED BROWSERに標準で用意されていないが便利なコードを作成したので共有

ユーザーエージェントの変更

呼び出し方(どこかで1回呼べば以降変更されます)

CSSの動的変更

外部CSSの動的追加

Jacascriptの動的実行・関数追加

外部Javascriptの動的追加

 

カテゴリー: Unity

HTC VIVEで一人称視点First Person Controllerを使う

HTC VIVE、ルームスケールで移動できて楽しいです。

ただ、コントローラーを使って一人称視点でゲームを作ろうとすると工夫が必要です。ルームスケール+一人称視点でのキャラクター操作は酔いやすいので注意が必要です。またUnityのStandard AssetのFirst Person Controllerはそのままではうまく動きません。

今回はHTC VIVEを用いて

  • X-Boxコントローラーおよびキーボードでの操作に対応
    VIVEのHMDで向いている先を中心にコントロール
  • VIVEコントローラーではトリガーを引くと視線の先に移動する

を実装します。(もっと適切な仕様もあるかも)

20160423_165716

1、まずはSteamVR Pluginをインポートします。(Unity5.4からVirtualReality SupportだけでVIVEの利用が可能になりましたがコントローラーが使えません。)

fpc1

2,UnityのStandard AssetのCharactersをインポートします。First Person Controllerが利用可能になります。

fpc2

3,インポートしたスタンダードアセットからRigidBodyFPSControllerをシーンに追加します。

fpc3

4,先ほど追加したRigidBodyFPSControllerの子オブジェクトとしてSteamVRの[CameraRig]をシーンに追加します。

fpc4

5,不要なカメラを削除します。シーンに初めからあるMainCameraとRigidBodyFPSController内のMainCameraを削除

インスペクタービューでRigidBodyFPSControllerのRigidbodyFirstPersonControllerスクリプトのCamに[CameraRig]内のカメラCamera(eye)を設定します。

 

fpc5

6,Unityのゲームビューでマウスによる誤動作防止のため、InspectorでRigidbodyFirstPersonControllerのMouseLookのSensitivityを0に設定しておきます。

fpc6

これで、XBOXコントローラーおよびキーボードを用いたFirst Person ControllerがVIVEで利用可能になりました。

 

7,では次にVIVEのコントローラーでも移動できるようにしましょう。今回は、トリガーを引くことで前方に移動するという機能を実装します。

(トラックパッドでの移動など誰か実装したら教えてください)

上記コードをvive_firstpersoncontroller.csとして保存し、Controllerにアタッチします。

Inspectorビューで
・VIVE Camera HeadにCameraを
・FPS ControllerにRigidBodyFPSControllerを
を設定します。

ここで要注意なのが

Unity5.3系ではCamera(head)
Unity5.4系ではCamera(eye)
を設定してください。

(Unity5.4では実行時にCamera(head)が消えるという謎仕様)

fpc7

パッケージダウンロード

上記をまとめたパッケージを用意しました。SteamVRを手動でインポートした後にパッケージのインポートを行ってください。(Unityスタンダードアセットは再配布OKとのことで下記パッケージに含めています)

RigidBodyFPSController_VIVE_5.3.unitypackage

RigidBodyFPSController_VIVE_5.4.unitypackage

 

カテゴリー: HTC VIVE, Unity

OptimusノートPCの15インチAlienwareでOculus Runtime0.8動作方法

OptimusノートPCの15インチAlienware(GTX765M搭載)にてOculus Runtime0.8を起動することに成功したのでメモ。

今まで、開発には
デスクトップPCにて
・Oculus Runtime 0.8+Unity5.3
または
・Oculus Runtime0.6.0.1+Unity5.1.1p4
で行っていたのですが、Unity5.3系で作成したアプリのデモがノートPCでできないので最近はデスクトップを持ち運んでいた。

alienware

一部の一部のOptimusノートでOCulusRuntime0.7が動作したという下記のページ参考にさせていただいたが私のマシンではうまく行かなかった。
Devel/OculusRift/OptimusノートでのDirectモード – cubic9.com

ところがひょんなことから試した手法でうまく行ったのでメモ。

私の持っているAlienwareには外部ディスプレイ用にHDMIポートとMini Displayポートが2つ用意されています。AlienwareのMini Displayポートに変換アダプタ経由でOculusを接続するだけでOculus Runtime 0.8がDK2を認識しました。

私はこちらのアダプタ経由でうまくいきました。
moshi mo-hdmi4k [Mini DisplayPort to HDMI Adapter (4K)]
100000001002684631_10204
外部HDMIポートはIntel HD Graphicsに接続されるが、Mini DisplayポートはGPUに接続される仕様のようだ。たぶん。

動作確認済みの環境
・Alienware15インチGTX765M搭載
・Unity5.3.3p2 64bit Virtual Reality Supportオン
・Oculus Runtime0.8
・Windows 8.1 64bit
・GeForce Game Ready Driver Version 364.51

これで私のAlienwareももう少し現役で行けそう。

Alienware以外にもOptimusマシンでHDMIポートと別にミニディスプレイポートがあるノートPCでは試してみる価値が有るかもしれません。

カテゴリー: Oculus, Unity

Unity5.3+Leapmotion orion 4.0.1のメモ

Unity5.3.3にLeapmotion Orionの設定でハマったのでメモです。

なんでPrefab追加するだけで動くようにしてくれてないんだろう。。。

LeapMotion_CoreAsset_Orion_Beta_4.0.1.unitypackage
をプロジェクトにインポート後、LMHeadMountedRigプレハブをシーンに追加します。LMHeadMountedRigにはカメラが入っているので、シーン上に元々あったMainCameraを削除しておきます。

orion1

LeapHandControllerに下記の4つを子として追加

  • CapsuleHand_L
  • CapsuleHand_R
  • RigidRoundHand_L
  • RigidRoundHand_R

orion2

LeapHandControllerのHandPoolスクリプトのModelCollectionのsizeを4に変更して
下記のように設定します。

orion3

CenterEyeAnchorにアタッチされているcameraの設定を変えないとSkyboxが表示されません。

orion4

これでOK

orion5

 

カテゴリー: Leap motion, Unity

Unity5.3でVuforia環境の忘備録

VuforiaをUnity5.3系で利用する場合のメモ

  • エディター上でプレビューする場合32ビット版Unityを利用する必要がある。
  • Unity32ビット版にAndroidやiOSビルド用のコンポーネントをインストールするのにハマったのでメモ。
  1. 64ビット版Unityのインストール
    パッチリリースのページから最新パッチ版をダウンロードします。
    Unityインストーラーをダウンロード-ダウンロード(Win)からWindows版64bitUnityのインストーラーを使ってインストール
  2. 32ビット版Unityのインストール
    個別にインストール(Windows)-Unity エディター(32ビット)
    からインストール。このインストールではエディターしかインストールされず、AndroidやiOSでのビルドができません。
  3. ビルド用コンポーネントを64bit版フォルダから32ビット版フォルダにコピー
    C:\Program Files\Unity\Editor\Data\PlaybackEngines
    から
    C:\Program Files (x86)\Unity\Editor\Data\PlaybackEngines
    にコピー

Unity

 

 

 

カテゴリー: Unity

Unity画面にウェブカメラの画像を半透明で重ねて表示

Unityで制作したGame画面にウェブカメラで撮影している動画をリアルタイムに半透明表示する方法です。

uGUIを使って、画面に上にRawimageを用意し、そこにウェブカメラの画像を表示します。

UIからRawimageを追加して、WidthやHeightを適切に指定します。
上記スクリプトを貼り付けると

Overlay

こんな感じで半透明でオーバーレイされます。

Transparent

 

カテゴリー: Unity

UnityでRenderTextureをファイルに保存

忘備録

RenderTextureをpng形式で保存します。適当なからオブジェクトにスクリプトを貼り付け、保存したいRenderTextureを指定。1フレームごとに記録されます。

SaveRenderTextureToPng.cs

 

2017/11/12追記
RenderTextureをJpegに保存したいだけのときはこちらを利用

 

 

カテゴリー: Unity

AltspaceVR上にWavefront Objファイルの読み込み方法

Altspace社のエンジニアのSohailさんが来日しているとのことで歓迎会に参加してきました。AltspaceVRはVR空間内でアバター同士で会話できるプラットフォームで私もたまに遊んでいます。

AltspaceではSDKを公開していてThree.jsライブラリを使ってAltspace上のアプリケーションを開発することができるようになっている。Three.jsを用いて開発ができるということはThree.js用に用意されたたくさんのライブラリの利用やWeb用に開発した資産の再利用ができるのでうまいこと考えたものだと思う。

基本的な考え方は、Three.jsでRenderを指定する際に

通常は
var
renderer = new THREE.WebGLRenderer();
と記述するところを
var renderer = altspace.getThreeJSRenderer({version:0.2.0});
とすることで、レンダリング先をAltspace内に変更できる。

とすることで、Altspace、WebGL両対応のスクリプトを書くことも可能になる。

 

Altspace上にObjファイルを読み込んで表示する方法ですが、実はAltspaceデベロッパーサイト上にプロジェクトがあり、そこにコードが公開されています。

こちらのコードを改造して表示してみることにします。

github.com/falkrons/3dModelViewer

こちらには、Objファイルを読み込んだあとのちょっとした機能があるのですが、基本的なコード以外全部そぎ落としてみるとこんな感じになります。

ここで一つ注意ですが、Three.jsのObjローダーにはクロスサイトスクリプティングの制限があり、モデル設置サーバー及び表示スクリプト両方に細工をしないと別ドメインのObjファイルを読み込めない仕組みになっています。この対策は別記事で紹介します。

ですので

には同一サーバーにあるobjファイル及びmtlファイルを相対パスで記述してください。

Altspace上で実行するにはインターネット上のウェブサーバーにHTMLファイルをアップロードし外部から実行できるようにします。

http://test2.psychic-vr-lab.com/altspacevr/3dModelView_Blog.html
に上記コードをアップしました。(こちらはウェブブラウザ上でみても何も表示されません。)

AltspaceVRを起動して、△ボタンからメニューを表示し「WEB」をクリックし、URLをペーストします。画面上にObjがロードされ表示されます。

Altspace_obj_load

 

カテゴリー: 3D, Three.js