STYLY 開発者ブログ -STYLY Developer's Blog-

Azure CDNのコンテンツをPHPからRest API経由でパージする

AzureをRest APIで操作してCDNにキャッシュされたコンテンツをPurgeする方法がうまくまとまったサイトがなかったので、関数を作ってみた。

まず、リソース作成者の取得方法(Rest API編)を参考に、各種キーを取得します。

一点上記のサイトと違うところは、今回はCDNを操作するため、IAMでアカウントのRoleにはCDN Profile Contributerを設定しておきましょう。

 

 

 

 

カテゴリー: その他

Project North Star キャリブレーション方法

はじめに

Leap Motionからオープンソースとして公開されたARヘッドセット「Project North Star」。

本記事ではexiii山浦氏が製作された簡易版Project North StarをUnityで動かす上で行った変更やキャリブレーションについて解説します。

公式のProject North Starとの違いは上記のブログをご参照ください。

Project North Starの構成

左右2枚のLCDに表示される映像を眼前のリフレクターで反射させ、現実と重ね合わせて表示させます。

キャリブレーションでは、表示された映像が現実空間上の正しい位置に表示されるように調節します。

引用元:http://blog.leapmotion.com/northstar/

PCとの接続

1.Leap Motion、HDMI2つを接続。

2.ディスプレイ設定

接続したLCDをディスプレイ2、3として設定します。

向きを縦(もう一方は縦[反対向き])、解像度はLCDに合わせて1080 x 1920とする。

Image [10]

 

 

Unity側準備

公式ドキュメント
https://github.com/leapmotion/ProjectNorthStar/blob/master/Software/README.md

・Unityバージョン:Unity 2018.1b13以上

・Project North StarのGitHubレポジトリから、LeapAR.unitypackageを入手してインポートする。
https://github.com/leapmotion/ProjectNorthStar/tree/master/Software

・LeapMotion/North Star/Scenes/NorthStar.unityシーンを開く

 

NorthStar.unityシーンについて

unity scene

シーン内の左右の目に当たるカメラで撮影した映像を歪めてプロジェクションし、

その映像を別のカメラで撮影してGame Viewに表示しています。

 

North StarにGame Viewを表示する

Game Viewを外部ディスプレイに移動、表示できるようにするため、ディスプレイ1の幅と外部ディスプレイの解像度を設定する必要があります。

AR Camera Rig設定

Window Offset Managerのxshiftにディスプレイ1の幅の値を設定する。
arcamerarig

ソースコード修正箇所

LCDの解像度が公式と異なるため、ソースコードを書き換える必要があります。

公式:(2880, 1600 )

簡易版:(1080*2, 1920)

 

変更箇所は以下の3か所。実際に使用するLCDの値に書き換えてください。
\Assets\LeapMotion\North Star\Scripts\CalibrationDeformer.cs 25行目
Vector2 screen = new Vector3(2880, 1600);

\Assets\LeapMotion\North Star\Scripts\WindowOffsetManager.cs 59行目
SetPosition(xShift, 0, 2880, 1600);

\Assets\LeapMotion\North Star\Editor\WindowOffsetManagerEditor.cs 43行目

var size = new Vector2(2880, 1600 + UNITY_MENU_HEIGHT);

 

上記設定後、AR Camera RigのWindow Offset Managerコンポーネントの

[Move Game View to Headset]ボタンを押すと、North StarにGame Viewが移動します。

movegameview

gameview

 

IMG_9079

Game Viewの表示が反転してNorth Starに表示される事を確認してください。

※Game Viewにフォーカスを当てないとキー操作出来ないので、移動後もう一つGame Viewを表示しておきましょう。

以上でUnityの映像がNorth Starで表示できるようになりました。

 

キャリブレーションファイルの設定

キャリブレーションの結果はUnityでの実中にSerialized Calibrationスクリプトでjsonファイルとして保存/読み込みできます。
Calibration Folder、Output/Input Calibration Fileを下記の通り設定してください。
保存はSキーを押すと実行されます。

Image [6]

保存される対象は、Left Eye/Right Eye/Left Screen/Right Screen/Leap Hand ControllerのTransformおよび、CalibrationDeformerコンポーネントの情報(Left Eye/Right Eyeのみ)。

※保存対象を追加することも可能。

公式のキャリブレーション手段で対応しきれない場合は、上記GameObjectのTransform/CalibrationDeformerの値を直接変更して対応しました。

Image [11]

 

キャリブレーションの実行

ここからは、Project North Starを被って映像を見ながら調整する作業になります。

以下の手順は、基本的に

UnityのPlayボタンで実行→見ながら調整→Sキーで保存

という流れになります。

 

キャリブレーションのポイント

・キャリブレーションバーを表示(Cキー押下)し、縦横のラインがまっすぐ表示される事。

・手を上下、水平、前後方向に動かし、Leap Motionの手も同様に移動していること。

・片目ずつ、実際の手とLeap Motionの手が合うように調整する。

 

前提条件.LCDのアスペクト比の違いを調整

公式とLCDのアスペクト比が異なるので、Left/RightScreenのScaleを変更する。

scale (1.1, 0.83333333, 1)
※xは解像度の比率では1440/1080 = 1.33333だが、LCDパネルのもともとの比率のためか、1.1くらいが丁度よかった。

Image [9]

ロゴなどを貼った立方体を置くと目視で合わせやすい。

 

手順1.IPD調整

目の位置、距離に関する設定。
基本的に現実の物理的な位置に合わせる。

→キー:IPDを広げる
←キー:IPDを狭める
↑キー:目の位置を上げる
↓キー:目の位置を下げる
[キー:リフレクターと目の距離を広げる
]キー:リフレクターと目の距離を縮める

ipd adjuster

手順2.Calibration Deformer調整

左右の映像のズレを個別に調整する。

映像が左右の目で上下左右にズレている場合にこの設定変更が有効です。

deformer2

公式の方法では、マウス左クリックでコントロールポイントを追加して、ドラッグで調整と書かれています。

  • Left Mouse on the Game View to Place and Drag Manual Calibration Distortion Pins
  • Right Mouse to Remove Manual Calibration Distortion Pins

ただ、この方法では細かい調整が難しかったのでLeftEye/RightEyeにあるCalibration Deformerコンポーネントの設定を直接変更して合わせました。

vetex Indices
size:1
Element 0:0(+1ごとに上下にずれ、+31ごとに左右に移動するようです)
Control Points
size:1
Element 0:

Xを変更すると上下移動
Yを変更すると左右移動
Zを変更すると奥行移動(基本0で良い)

deformer

 

手順3.手のトラッキング位置を調整

現実の手とLeap Motionの手が全体的に上下左右にズレている場合、Leap XR Providerの位置を調整して合わせます。

Image [4]

 

おわりに

Project North Starはオープンソースで自作する都合上、どうしても個体ごとに差異が出てしまいます。

その問題をキャリブレーション手段を提供することで対応するのは面白い試みと思いました。

他の方が作成されたNorth Star向けアプリケーションも、キャリブレーションファイルを置き換える事で自分のNorth Starで動作させる事が出来るのでアプリケーション配布の可能性も見えてきます(ソースコードを変更した箇所は難しいですが)。

とはいえ、正確なキャリブレーションは難しく、キャリブレーションされていなければ体験を損なうことになります。

Project North Starのキャリブレーションにあたり本記事が参考になれば幸いです。

公式のプロジェクトも今後さらにアップデートされていくと予想されますので、期待して待ちたいと思います。

カテゴリー: Leap motion, Project Noth Star, Unity

Cacheサーバーの設定を確認する

Unityエディタでキャッシュサーバーの設定がどうなっているかを確認するコードです。

エディタ拡張を作った際に、キャッシュサーバーがONになっていない場合にアラートを出したりする際に便利です。

 

メニューから実行してテストできます

cacheserver

カテゴリー: Unity

STYLY VTuber機能(afjk実験版)

こんにちは。@afjkです。

PANORAさん主催のVTuberハッカソンに向けて、STYLYに実験的にVTuber機能を実装してみました。

きっかけはこちらのツイート。

 

無いので作りました。

 

ちなみに、私と@from2001vrとでそれぞれVTuber機能を開発しています。

from2001vrバージョンはこちら

私が作ったのは

・自撮りカメラ(複数配置出来て切り替え出来る)

・体にオブジェクトをくっつける機能

・Humanoidリグの人体モデルを”着る”機能

 

 

人体モデルのSTYLYへのアップロードと配置

UNITY PLUGIN FOR STYLY を使います。
こちらからダウンロードしてください。

Unityへインポートしたら、メニュー>STYLY>Asset Upload Settingより、Email/API Keyを設定します。

※API Keyはこちらから取得

plugin

3Dモデルをアップロードする。

アップロードするモデルのRigはhumanoidにします。

 

rig

プレファブを作成し、名称の先頭に「STYLYAvater」をつける。

プレファブ右クリック→STYLY→Upload prefab to STYLYを選択すると、ビルド&アップロードが実行されます。

 

upload

アップロードに成功すると、「Upload successful」とダイアログ表示される。

ブラウザのエディタでアセット選択>3D Model>MyModelsに追加されています。

mymodel

あとは空間に配置するだけ。

STYLY VTuberバージョンを使う

Steamのライブラリ>VRから「STYLY」を右クリック→プロパティ選択。

styly

ベータタブから「(experimental)styly-vr_vtuber-afjk」を選択すると、インストールされます。

beta

シーンパネルのエンピツマークをクリックしてシーンに遷移するとVTuberモードになります。

vtuberモード

通常のSTYLY VRに加え、以下の操作が可能です。

基本操作

物をつかむ:コントローラで物体に触れてトリガーを引く

物をコピーする:掴んだ状態でコントローラのパッドを押し込む(Riftの場合はレバー押し込み)

物を消す:コントローラで物体に触れてパッドを押し込む(Riftの場合はレバー押し込み)

物を拡大縮小する:掴んだ状態で、もう一方のコントローラのトリガーを引くと、コントローラ同士の距離に応じてサイズが変わります。

体に取り付ける

STYLY VRをVTuberモードで起動すると、頭と腕にオレンジの立方体が表示されます。

ここに、物体を掴んで取り付けることが出来ます。

attachpoint

人体モデルには、頭と腕に青い球体が表示されます。

この青い球体を掴んで体に取り付けることで、人体モデルが自分の動きに追従するようになります。

moteru

 

自撮りカメラを使う

VTuberモードでは、自撮りカメラが空間にあらかじめ表示されます。

camera

この自撮りカメラを掴んで好きなところに配置したり、コピー、削除ができます。

カメラの切り替えは、
・0~9番までは数字キーに割り当て
・矢印キー左右で切り替え
・掴んだカメラがアクティブになる

 

是非使ってみて、「もっとこんな機能が欲しい!」など、Twitterでつぶやいてください。

面白い機能はこれからも追加していきます。

 

追記:
複数キャラクターを配置してポーズをつけて遊ぶこともできます。

さらに追記:
ザバイオーネさんに、実際にVTuberハッカソンで使っていただきました。
ありがとうございます!!!!!めっちゃうれしいです。

カテゴリー: 3D, STYLY, Unity, VR

STYLYで3Dスキャンデータを使ったバーチャルユーチューバー配信(from2001vr実験版)

こんにちは、@from2001vrです。
ブラウザ上で、VR空間を制作し、マルチデバイスにクラウド経由で配信することが可能なクリエイティブプラットフォームSTYLYに、実験的な機能としてVTuber機能を実装しましたので、利用方法のチュートリアルを公開いたします。

なお、バーチャルユーチューバー機能に関しては、2018年2月24日現在、本ページで紹介する@from2001vr版と、@afjk版の二種類が存在し将来フィードバックをもとに一部の機能がリリース版に統合される予定です。

PANPRA VR主催の第一回VTuberハッカソン開催に際し、@z_zabaglioneさんの下記のつぶやきに対して、@from2001vrと@afjkがVR好きのいちエンジニアとして、仕事の合間をぬって開発したExperimentalバージョンです。私のバージョンとは別に@afjkバージョンが存在します。

 

3Dスキャンデータの用意

AポーズまたはTポーズの3Dスキャンデータを用意します。弊社でも不定期に3Dスキャン撮影会を開催しています。今回は、フリー素材として公開されているせきぐちあいみさんの3Dモデルデータを元に説明を行います。2月22日に行われたVTuberハッカソン参加者向け3Dスキャン撮影会のデータはこちらのObjファイルと同じ形式のものになります。(下記はSketchfab上でのプレビュー)

MIXAMOで骨を入れてアバターを作る

Adobe社が現在無料で提供するMixamoサービスを利用し、3Dスキャンデータにリグを入れます。Mixamoでのリギングに関しては、こちらの手順書などを参考にして行ってください。

STYLYでVR空間を作る

STYLYは無料でVR空間を構築できるクラウドサービスです。chromeブラウザ上でVR空間を作って、HTC VIVEやOculus riftなどでその空間を利用することができます。アバターになってユーチューブ配信を行うための空間を作成します。

STYLYでのVR空間構築は、マウス操作だけで行うことができます。また、GoogleのPolyから提供される数千種類の3Dモデルを、STYLYから直接呼び出し利用することが可能です。

独自の楽しい空間を作りましょう

STYLYにアバターをアップロードする

STYLYウェブエディターのメニューからAssets – 3D Model – Uploadを選択します

1

2

4

先程作成したFBXファイルをアップロードします。

その際、Titleを”VTuber_名前_3dscan”形式で指定することで、アップロードした3Dデータが、バーチャルユーチューバーとして機能するようになります。(先頭に”VTuber_”をつけることでVTuberアバターになり、最後に”3dscan”をつけることでスキャンデータに適したシェーダーが適用されます。スキャンデータ以外のRig入り3Dモデルを利用する場合は”3dscan”の文字列は不要でStandard Shaderが適用されます)

アップロード後、5分ほどでSTYLY上で利用可能になります。

5

My Modelsタブからアップロードしたデータを選択し空間上に設置します。サムネイルが表示されていないかもしれませんが気にせず選択します。

6

空間上に追加したアバターは表示が汚く見えるかもしれません。ウェブエディター上ではStandardシェーダーで表示されますが、VRで見た場合にはUnlitシェーダーで表示されますので気にしないでください。

データは自動でセーブされます。

STYLY ExperimentalバージョンをSteamからダウンロードします

まずは、SteamからSTYLYを通常インストールします。その後、BEATSタブから(experimental)styly-vr_vtuber-from2001vr版をインストールします。

8

VRデバイスを繋いでSTYLYで作った空間を開きます

STYLYはSteam経由でHTC VIVE, Oculus rift, WIndows Mixed Realityの各デバイスで動作します。今回のバーチャルユーチューバー実験版はHTC VIVEで動作検証を行っています。HTC VIVEをPCに接続してSTYLYアプリをSteamから起動します。

9

右上のSign inからログインして、My Sceneからウェブエディターで作成したVR空間を選択して開きます。

空間上にVTuberからはじまる名称のオブジェクトが有った場合、自動的にバーチャルユーチューバーモードでSTYLY空間が開きます

11

VRヘッドセットの中からの映像は上記のようになります。ハンディビデオカメラがあり、その上のモニタで撮影画面をプレビューすることができます。ビデオカメラ及びプレビューモニタは、VIVEコントローラーの人差し指トリガーで掴むことができます。

12

ちなみにカメラはひっくり返すと、オートフォーカス式のカメラとして前方を撮影することも可能です。

左コントローラーでテレポート可能ですが、カメラをもったままテレポートすることも可能です。また、カメラだけでなく、画面上のほとんどのオブジェクトは手でつかむことが可能です。

録画する

STYLYアプリを起動中に Windowsキー+Gキーを押すことでWindowsの機能を用いてウィンドウ画面の録画をすることができます。画面上に下記のようなボタン群が現れたら、赤いログがボタンを押して録画しましょう。”Record mic”をチェックすることでVIVE内臓のマイクの音声も録音することができます。録画されたデータはmp4形式で\Videos\Capturesに保存されます。

13

 

 

せきぐちあいみさん3Dモデル

 

カテゴリー: STYLY, VR

HOME / Coporate Site/ Careers

© Copyright 2018 STYLY..