Psychic VRラボの殴り書き

UnityのC#でまとめてGameobjectのShader変更・コライダー追加

下位Gameobjectも含めてシェーダーを変更

下位Gameobjectも含めてMeshがあればMesh Collidarを追加

呼び出しサンプル

  1. プロジェクト内のobjファイルを読み込む
  2. シェーダーをUnlitに変更する
  3. メッシュコライダーを追加する(ConvexオプションON)
  4. Prefabに保存する

 

 

 

カテゴリー: Unity

ノンコーディングでVIVEコントローラーの利用(Playmaker)

Steam VR Playmaker - Toolkit

Playmakerはヴィジュアルスクルプティングを用いてコードを書かずにUnityで開発を行うことができる便利なアセットです。Playmakerに対応しているアセットも多く公開されていて、多種多様なことがノンコーディングで実現できるようになってきています。

今回は、HTC VIVE用のコントローラーをPlaymakerから利用できるアセットと、使い勝手を良くするための方法をメモしておきます。

下記3つのアセットをインポートします。

Playmaker (有料)
Editor Extensions/Visual Scripting

Playmaker Editor Extensions/Visual Scripting Hutong Games LLC

SteamVR Plugin (無料)
Scripting

SteamVR Plugin

Steam VR Playmaker – Toolkit (有料)
Editor Extensions/Game Toolkits

Steam VR Playmaker - Toolkit

これで、SteamVRの機能がPlaymakerから利用できるようになります。

公式ドキュメントはこちら

ドキュメントを読んで実装するとこんな感じになります。
vive4

待受するステートが必要になるため使い勝手が良くありません。待ち受けるイベントの種類事に全部記述する必要がある。

 

そこでPlaymakerのGlobal Transition機能を利用してどこからでもトリガーやボタンのイベントを拾えるようにします。(この投稿最後でダウンロード可能)

Global Eventの登録

vive6

各ボタンが押された時にGlobal Eventを発火するように設定

vive5

vive7

これで準備完了

では、イベントが起こった際の動作を記述してみましょう。
FSM上に新しいStateを作成し、Add Global Transitionから登録したVIVE用のグローバルイベントを選択します。

vive8

こんな形で、メインのStateの遷移とは別に、コントローラーのイベントを起点に処理を走らせることができるので、処理の流れも記述もわかりやすくなりました。

vive9

 

FSMダウンロード

グローバルイベントを登録したFSMはこちらからダウンロードしてください。
利用するには上記でかいた有料のものを含む3つのアセットを予めインポートしておく必要があります。

 

カテゴリー: HTC VIVE, Unity

伊勢丹彩り祭2016にてSTYLY VRショッピングを体験

14040012_10153678532902041_841660605054308222_n

未来解放区万博 〜デザインとテクノロジーは、私たちの未来を変える!?〜

8月24日[水]〜9月13日[火]
□新宿店本館2階=センターパーク/TOKYO解放区

HATRA、BALMUNG、chlomaの3ブランドの世界の中に入りこみ、実在する服をバーチャルの世界で楽しみながら買うことができる〈STYLY(スタイリー)〉のVRショッピング体験を実施。実際の洋服を高精細3Dスキャンしているので、生地の質感やディテイルなど細部まで確認でき、あたかも洋服が目の前にあるかのように感じることができます。あわせて、若手クリエーターが中心となって「デジタル」をモノとコトの両方から提案。デジタルコラージュが特徴の〈バルムング〉や、ロボティクスファッションクリエーター きゅんくんが制作したウェアラブルロボット〈メカフクリオネ〉は、その中でも特別な存在感を放ちます。

 

掲載記事

〈STYLY〉で近未来のバーチャルショッピングを体験!(ISETAN GUIDE)

ファッション×テクノロジーの新たなライフスタイルを提案!(ISETAN SHIN JUKUブログ)

三越伊勢丹、AI利き酒やVRなどテクノロジーを活用した販売サービスをさらに強化(IoT News)

「2016彩り祭」新宿伊勢丹AR・VR技術で接客拡大に挑戦(ARの件)

三越伊勢丹がテクノロジーでファッションを提案、最新デジタルアイテムやVRショッピングも(Fashion Snap)

 

カテゴリー: HTC VIVE, Unity

Gameobjectのテクスチャをアスペクト比正しく貼り付ける

Unityで貼り付ける元画像の縦横比と、貼り付け先の縦横比が違った場合、引き伸ばされて画像が表示されてしまいます。

下記のように、アスペクト比が異なる場合は、画像がいっぱいに表示されるように調整して貼り付けます。

NekoImage

 

 

 

カテゴリー: Unity

Unityからc#でAmazon Web ServiceのS3ストレージにアップロードするメモ

Unity5.3からAWSのS3ストレージへファイルをアップロードするメモです。

キーポイント

  • AWSが用意しているAWS Mobile SDK for Unityを利用する
  • S3への認証はCognito Identityを用いる

参考リンク

手順

S3バケットの作成

任意の名前でS3バケットを生成しておきます。Regionはどこでも構いません。今回はTokyoリージョンにtest-bucket-unityとバケット名で作成しました。

s3-1

以下のポリシーは、test-bucket-unity バケット内のすべてのファイルを表示できるアクセス許可をすべての閲覧者に付与します。このポリシーをコピーし、[Bucket Policy Editor] に貼り付けます。

 

Permissionの追加でAny Authenticated AWS UserにListとUpload/Delete権限を付与します。

aws

Identify Pool Idの取得

AWSログイン後、Amazon Cognito管理ページに移動します。 Cogniteは2016年6月現在US-EASTリージョンでしか提供されていません。

s3-2

Manage Federated Identitiesに進みます。

s3-3

Identify pool nameを名づけて、Enable access to unauthenticated identitiesをチェックしてCreate PoolをクリックしてIdentify Poolを作成します。

s3-4

アクセス権限設定のためのIAMロールを新規に作成します。特に規定の値から何も変更せずに「許可」をクリックします。

次に進むと、UnityからAWSへCognito Identify pool IDを用いたアクセスコードのサンプルが表示されます。

s3-5

IAMロール変更(S3アクセス権限付与)

次に作成したIdentify poolでS3へアクセスできるようにしておきましょう。IAMコンソールに移動して、ロールを見ると先ほど生成したIAMロール(今回の場合Cognito_test_pool_nameAuth_Role)がありますので設定を変更します。

s3-6

S3へのフルアクセスポリシーをアタッチします。

s3-7

これで、S3へのアクセス権限は完了。

Unity上でAWS利用

What is the AWS Mobile SDK for Unity? ページからAWS Mobile SDK for Unityをダウンロードします。

解凍したフォルダから下記2つのパッケージをインポートします。

  • AWSSDK.S3.3.1.7.2.unitypackage
  • AWSSDK.IdentityManagement.3.1.4.3.unitypackage

S3ExampleデモシーンでS3にアクセスできることを確認しましょう。

s3-8

S3にファイルをアップロードするクラスを作ったのでシェアしておきます。

利用するには下記のようにする

メモ

Exception: Main thread has not been set, is the AWSPrefab on the scene?エラーは
UnityInitializer.AttachToGameObject(this.gameObject);
で対処

Editorモードでは動かない?。。。。->動かないようです。。

 

追記(2016/09/04)

エディタモードでは上記方法でS3へのアップロードができないのでc#でコマンドライン上で動くコンソールアプリを開発しUnityから呼び出すことにした。コンソールアプリでは若干実装の方法が異なる
https://github.com/from2001/S3Uploader

1, Visual Studioでコンソールアプリケーションプロジェクトを作成

2,必要ライブラリをNugetでインストール

3,s3upload.cs(コンソールアプリ用)を作成

4,呼び出し方は同じ

S3アップロード用のコマンドラインツールはこちらにアップしました。
S3Uploader

 

カテゴリー: Unity

Asset Bundle利用メモ

Unityのアセットバンドルの利用方法をメモ

アセットストアよりAssetBundle Manager & Example Scenesをダウンロードしてインポート。

ab1

Asset Bundle Managerに関してはまず下記を読んでおく。

ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~

 

メモ

  • Local Asset Bundle Serverを実行時に
    Win32Exception: ApplicationName='”C:/Program Files/Unity5.3.5p2/Editor\Data\MonoBleedingEdge\bin\mono.exe”‘エラー
    が出る。=>一度Build AssetBundleを実行するとエラーが発生しなくなる
  • Local Asset Bundle Serverは内部でAssetBundleServer.exeが実行されPort7888のウェブサーバーとして機能する。プロジェクトフォルダ内の\AssetBundlesはhttp://localhost:7888/に対応。他のプロジェクトでビルドしたアセットをテストで利用したい場合はSimulationモードではなく、AssetBundleServerを利用すること。
  • Asset Bundle Managerは二重ロードや依存解決してくれるコードが含まれていて便利なラッパー。
  • アセットバンドルにはスクリプトを含めることができない

 

Asset Bundleを体験して理解するために、一連の流れを試してみる

ABProject1で作成したPrefabアセットを、ABProject2で読み込んでみる

ABProject1にて(アセットバンドル作成)

  1. Asset StoreからAssetBundle Manager & Example Scenesをインポート
    1. オブジェクトを作成(CylinderとCubeを組み合わせた)
    2. ProjectビューにドラッグしてPrefab化(Prefab名:asset_prefab1)
    3. ProjectビューのPrefabにInspectorビューでAssetBundle名をつける(AssetBundle名:ab1)ab2
  2. アセットをビルド(Assets – AssetBundles – BuildAssetbundles)ab3
  3. Windowsの場合は\ABProject1\AssetBundles\Windows以下にビルドされたアセットが作成される。

ABProject2にて(アセットバンドル読み込み)

  1. Asset StoreからAssetBundle Manager & Example Scenesをインポート
  2. アセットをビルド(Assets – AssetBundles – BuildAssetbundles)をダミー実行する。これを初回行わないとLocalAssetBundleServerがエラーを吐く
  3. ABProject1で作成したアセットファイルをABProject2フォルダにコピーする
    コピーファイル:ab1、ab1.manifest
    コピー元:\ABProject1\AssetBundles\Windows
    コピー先:\ABProject2\AssetBundles\Windows
  4. LocalAssetBundleServerを起動
    ab5
  5. アセットロード用のスクリプトを設定
    LoadAssetsスクリプトを任意のオブジェクト(今回はLoaderと名付けた空オブジェクト)に貼り付ける
    Asset Bundle Name:ビルドするときに名付けたアセット名
    Asset Name:復元するアセット化したPrefabの名前ab6
  6. 実行すると、アセットバンドル化したPrefabが読み込まれますab7

 

動作を含むオブジェクトをアセットバンドル化して配信したい

アセットバンドルには通常の方法ではスクリプトを含めることができません。アセットバンド化する際にはスクリプトの参照情報のみビルドされます。つまり、スクリプトファイルは、アセット読み込み側プロジェクトにも予め用意しておかなくてはいけません。

特殊な方法としてスクリプトをDLL化して配信するという方法がありますが今回は扱いません。下記のサイトに方法がありますので、参考に。
ゲームをビルドした後でもスクリプト(機能)を追加する(テラシュールブログ)
How to compile script to include it to AssetBundle?(Unity Forum)

動きを含むアセットを配信する一番簡単な方法はPlaymakerなどビジュアルスクリプティングソリューションを用いることのように思います。Playmakerで設定したオブジェクトの挙動はビルド時にアセットバンドル化されるため配信可能です。読み込み側プロジェクトにもPlaymakerをインストールしておけば、配信先でも動作します。ものすごく簡単で便利。

ab8

アセットバンドルのキャッシュに関して

AssetBundle Manager & Example ScenesのLoadAssets.csスクリプトは内部でLoadFromCacheOrDownload関数をもちいてアセットをダウンロードしています。既に読み込んだことのあるAssetbundle名のアセットは、LoadAssets.csスクリプトもLoadFromCacheOrDownload関数もキャッシュから読み込みます。つまり、普通にビルドするアセットバンドルを更新して配信するだけでは、そのアセットが新しいものなのかどうか判断してくれません。

キャッシュをクリアするには

  • LoadFromCacheOrDownloadの引数でバージョンを指定する。(キャッシュした時より大きい番号を指定すると再読込する)
  • Caching.CleanCache();関数でキャッシュをクリアする

アップロードされているmanifestファイル更新されている時だけアセット本体ダウンロードしなおしてくれればいいのに。。。自作するかな。

スクリプト経由でAssetBundleNameを付加する方法


 

 

とりあえず、ここまで。後々追記予定。

 

 

カテゴリー: Unity

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の利用メモです。
公式ドキュメントはこちらのReadmeを参照

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へアクセスできます。

ページ読み込み完了時に指定の関数を実行

便利な追加コード

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