Structure Sensor が届きました 、VR/ARもモバイルが本命という話

Structure sensor きた!全く新しいVR/ARのプロダクト作る! #vr #ar #structuresensor

正裕 黒川さん(@masahiro8.backham)が投稿した写真 –

Structure Senseor という iPhone / iPad を拡張する深度センサーをゲットしました。

とある相談を受けて深度センサーを使ったVR/ARのプロダクトを作る調査をしていました。KinectをはじめRealSenseなど深度を検出できるセンサーは結構色々と出ていて特にZEDはなかなかインパクトがあって良さげだったのですが、実はどれもモバイルでは使えなそうでした。相談は必ずしもモバイルである必要もなかったのですが、僕が考えるAR/VRはユーザーの行動に制限をさせないことが重要だと思ってます。

携帯電話とかスマホが普及したのも、デスクトップPCや固定電話を使わなくなったのも、ケーブルレスでパーソナルでユーザーの行動が自由になったからです。究極のユーザビリティというのはここなんだと思います。そしてユーザーの行動が自由になるほどよりパーソナルになっていく。スマホのVRは1人に1つはまぁ想像つかないことはないけど、RiftとかViveは基本的に1人で没入するものなのに家の中で絶対に1人1つは持たないでしょう。VRの主流は1人1台のモバイル端末に取って代わられてしまうと思います。固定電話と携帯電話、PCとスマホ、据え置きゲーム機と携帯ゲーム機みたいな感じで。

ですので僕はVR/ARももしスケールするとしたらモバイルである必要があると思ってます。現在の究極型はホロレンズですね。さすがに屋外でホロレンズは使う人を選ぶと思いますが、家の中とかオフィスの中でなら1人1台ホロレンズを使って生活する未来は想像がつかなくもないです。

そういうわけでバッカムではケーブルレスで自由なモバイルのVRが何か新しい体験を生み出せることを実証するためには現状でStructure Sensorが1番やりやすいと思ってゲットしました。

ffmpeg コマンド備忘録

連番から動画を作る

ffmpeg -r 24 -i pic0001%05d.png -vcodec libx264 -pix_fmt yuv420p -r 60 pic.mp4

画像1枚から動画を作る

ffmpeg -r 1 -i pic0001.png -vcodec libx264 -pix_fmt yuv420p -vf scale=300:-1 -r 30 pic.mp4

ffmpeg -r 1 -ipic0001.png -vcodec libx264 -pix_fmt yuv420p -vf scale=1280:-16 -r 30 pic.mp4

base.mp4とover.mp4を合成

ffmpeg -i base.mp4 -vf “movie=over.mp4[inner]; [in][inner] overlay=70:140 [out]” combined.mp4

Googleにページをすぐにインデックスさせる方法

ブログが全くインデックスされないので、Search ConsoleでURLを単位でリクエストを送ったらすぐにインデックスされました。

search console

 

Search Console > クロール > Fetch as Google

であとはページのURLを入れてくだけで、その場で処理されていきます。

送信したあとに「インデックス登録をリクエスト」ボタンが表示されますのでおすとダイアログが表示されます。

もろもろチェックしてから送信を押して終わりです。

簡単すぎてちゃんとインデックスされているのか疑いたくなります。

Zero Latency VR のVRの仕組みについて

念願のZero Latency VRを体験してきました。平日の朝から一緒にやってくれる友達もいないので1人で予約しました。

きっちり開始時間の20分前にはちゃんと受付済まして待機。が、他のプレイヤーは時間になっても現れず、あわや本当に1人で全ゾンビを相手にしないといけない状況に。。

しびれを切らしたお姉さんがゲームの説明を開始してしばらくすると、他のプレイヤー5人(中国人)が10分遅れでやってくる。どうしてもやりたいということで急遽15分遅れくらいで5人も参加するも日本語も通じずなかなかゲーム開始まで辿り着かない。。Baiduでデザイナーしてた頃の同僚中国人はみんな本当に礼儀正しかったし、真面目だったので、こういう一部のマナーの悪い中国人ばかり日本に旅行に来ているんだろうなと言い聞かせつつ、ただただ開始するのを待ってました。オペレーション大変だな、これはこれで珍しい経験できました。

で、Zero Latency VRの遊び方とかルールはネットに色々書かれてて、私も行く前に多少読んでいきました。そのあたりは割愛して、Zero Latency VRをVR開発者視点で書きます。というかやる前もやっている時もテンション上がってて全くそういう視点で見ていなかったので、思い出しながら書きます。

VRのデバイスと仕組み

まずVRのHMDはOSVR HDK2を使ってます。うちにもハッカソンでいただいたOSVRがありますが、ちゃんと動いたことがないので、OSVRがちゃんと動くということにまず驚きました。

osvr

HMDの上にPSMoveのコントローラみたいなLEDが2つついていて、これを検知してプレイヤーの見ている方向と位置を追従しています。最大6人で遊べるので、部屋の周りにこのLEDを検知するセンサーもしくはカメラが配置されているのだと思います。

銃にも2つのLEDがついていて、これがHMDと同様に銃の方向と位置を追従できるようになっています。

Zero Latency VR

でゲームをやってて気づいたのは、体と銃だけでVR内のプレイヤーの体全体をレンダリングしていて、自分から他のプレイヤーもちゃんと見える。ただあまりにゾンビの攻撃が激しく、ゆっくりそのあたりのモデルの繋がりかたとか握り方がどうなっているのかとかを見れなかったのが残念。次回はゲーム始まる前にもっとじっくり色々確認したいですね。

それとポイントは、部屋の床全面に描かれている白いグリッドです。このグリッドから床の面を検知して、ゲーム中のオブジェクトを配置したり、プレイヤーの視線の高さもこの平面を基準に追従していると思われます。それと奥行きの距離も計れるので、空間を把握するには一番やりやすい方法かもしれないです。MRに近い。

Zero Latency VR

LEDのマーカーによるプレイヤーの回転 + 位置情報と、グリッドによる床の平面情報を使ってVR空間を作ってます。

ステージのデザイン

Zero Latency VRは1階と2階をエレベーターで行き来できるステージのデザインになっています。VRなのでVR空間上は2階とはいえ実空間では1階と同じ平面上にあります。普通に考えたら1つの平面上に別のレイヤーで人が歩くと、絶対にぶつかってしまうはずなのですが、それをどうやって解決しているのかが実は一番知りたかったことでした。

やってみたらすぐに解決しました。実は1階部分と2階部分はゲーム内では同一の座標(この場合xとz座標)には存在しないようにデザインされていました。1階部分は現実空間の内側だけを使い、2階部分は現実空間の外側だけを使ってます。

space

これだと絶対にぶつかりません。単純なのですがステージのデザインでそこの問題を吸収していてよく考えられているなと思いました。逆にVR内でxとz座標が同じ複数の階を作るのは難しそうです。

OMCN Okinawa Motion Controll Networkのキックオフイベントに参加、LT登壇しました

11月13日にOMCN(Okinawa Motion Controll Network)というセンサーやデバイスを使って色々活動している人たちが沖縄にも拠点を作る ということでそのキックオフイベントに参加してきました。

イベント3日前に登壇のお誘いをいただいたので、急遽LTの準備をしたのですが、ちょうどアメリカ大統領選挙の後から激しい腹痛が始まって結局イベントの朝まで調子が悪く、最悪のコンディションの中会場の琉球大学へ向かいました。トランプのせいですね、きっと。

そんな状況だったのでLTの内容もうまくまとめられずスライドがかなりの枚数になってしまったのでそこはトークでうまくだらけないようにカバーすることにしました。

沖縄のイベントはだいたいゆるい感じで始まるのですが、本家のTMCNもゆるい感じらしくOMCNものんびりとした感じで始まりました。

PETSというプログラミングを学べるおもちゃが展示されてて、これなんかはうちの息子がプログラムを始めた時にやったようなことを、遊びながら手を動かしてできてとっかかりに良いと思いました。あとはホロレンズを体験できて、スマホでARするのとは格段に綺麗で安定していてすごかった、ただ視野角がちょっと小さくて窓を覗いているような感じでした。

 

バッカムでバイトしてる琉大生のカズマも登壇、HTC Vive向けに作ったぼっちキャッチボールとかを紹介。

自分は、春に1ヶ月ほど毎朝VRをやった時のことを思い出しつつレポートしました。1ヶ月続けていく中で起こった身体的な疲労やマインドの変化をかいつまんでご紹介しました。

他にも東京から来たTMCNの方たちのお話も面白く、何より皆さん色々な事をされててとても刺激を受けました。

Google フォームで無料で簡単にお問い合わせフォームを作る

Googleフォームでお問い合わせフォームを作ろうと久しぶりに開いたら、若干UIも変わっていたり、相変わらず使い方が得る覚えで戸惑ったりしたので使い方のメモをざっくりと記載しておきます。

Googleフォームを開く

GoogleフォームはたぶんGoogleドライブとかGoogle ドキュメントの中の機能の一つです。ですので、ここではGoogleドライブを開いて新規を押します。

Googleフォーム

 

こんな感じ自分のアカウントだとその他の中に入ってました。開くと色は違うかもしれないですがこんな感じになってます。

Googleフォーム

タイトルにbackham contatと入れます。

Google フォーム

初めから空の質問項目が入っています。この項目をクリックして選択すると、「ラジオボタン」と表示されるので、そこをまたクリックするとこんな感じでドロップダウンメニューが表示されて、そこからフォーム項目を選択できます。

Googleフォーム

「段落」を選択します。これが長文を入力できるフォーム要素です。選択したら質問のタイトルを入力します。

Google フォーム

入力項目を追加するには右側のメニューの一番上にあるプラスボタンを押します。

Google フォーム

新しい項目が追加されるので同様に入力していきます。

Google フォーム

右下の必須をONにして必須項目にできます。削除するときはその隣のゴミ箱をクリックして削除します。

入力項目が全部設定できたら完成です。完成ボタンと公開するボタンとかなくいきなり完成です。このページのURLがお問い合わせフォームそのものになります。このあたりに戸惑ったのですが、どうもそうみたいで、あとはフォームの上にある、「回答」というところに、お問い合わせがたまっていきます。

Googleフォーム

画面上の目のアイコンがプレビューです。

Google フォーム

こんな感じで立派なお問い合わせフォームがすぐに完成します。

他にもラジオボタンで質問内容のカテゴリ選択を入れたりいろいろ追加できたり、

Unityでクラスをnewしてインスタンスを作る方法

UnityはたいていGameObjectにComponentを追加して実行するのですが、スクリプト内ででクラスをnewしてインスタンス作ることもできます。ただUnityの作法があって知らないとはまるのでメモっておきます。

 
インスタンス作る場合


ClassName object = gameObject.AddComponent<ClassName>();
object.method();

 
これでもOK


gameObject.AddComponent<ClassName>();
gameObject.GetComponent<ClassName>().method();

やってることは同じで、あらかじめGameObjectにComponentとしてクラスを登録してあげないといけない。登録したコンポーネントをGetComponentする感じですね。

VRのSDKを使わずにUnityでVRの作り方

カードボードなどのVRのSDKを入れなくてもUnityでVRを実装する方法を教えてもらったらめちゃくちゃ簡単でした。

2眼カメラを作る

まずは2眼のカメラの作り方から。仕組みは簡単で要は右目と左目のカメラを用意して表示範囲を左右半分づつにするだけです。

ヒエラルキーに両目のカメラを入れる空のGameObjectを0,0,0に置く。とりあえずVRHeadと名前をつけて、その中にカメラを2つ配置してEyeLeftとEyeRightと名前をつけます。これがそれぞれ右目と左目用のカメラになるわけですね。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-32-08

このままだとまだ画面は1つなので、

画面を2つに分割する

画面を2つに分割します。表示領域を左右に分割して表示すればよくて、まず左目用のEyeLeftを選択してインスペクターの中のCameraを開く。ここのViewport Rectの設定を変更すると表示領域が変わります。画面をRectとして、X,Yで表示開始座標、W,Hで幅と高さを設定してあげます。

左目はこんな感じ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-35-24

右目はこんな感じ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-37-32

これで画面が半分に分割されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-38-07

 

デバイスの回転を実装

カメラはできたので、今度はデバイスの回転を拾って画面に回転を反映させる方法。やることは3つです。

1.デバイスのジャイロを使えるようにする

2.ジャイロの回転を拾う

3.VRHeadに回転を反映させる

これだけです。では先ほどのVRHeadに新しくスクリプトRvVRCameraを作ります。

using UnityEngine;
using System.Collections;

public class RvVRRotation : MonoBehaviour {

	public GameObject Head;

	// Use this for initialization
	void Start () {
		Input.gyro.enabled = true;
	}
	
	// Update is called once per frame
	void Update () {
		
		if (Input.gyro.enabled)
		{
			Quaternion direction = Input.gyro.attitude;
			Head.transform.localRotation = Quaternion.Euler(90, 0, 0) * (new Quaternion(-direction.x,-direction.y, direction.z, direction.w));
		}
	}
}

まず、

void Start () {
	Input.gyro.enabled = true;
}

ここでデバイスのジャイロを有効に

Quaternion direction = Input.gyro.attitude;

ここでジャイロの回転を取ってきます

Head.transform.localRotation = Quaternion.Euler(90, 0, 0) * (new Quaternion(-direction.x,-direction.y, direction.z, direction.w));

VRHeadにジャイロの回転を渡して画面に反映させる

あとはインスペクタのRvVRRotationのHeadにVRHeadを入れてあげればOK

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-21-55-50

これだけでスマホでVRができてしまいます!素晴らしく簡単な方法を教えてもらいました。

ただ他のVR用のSDKを入れると解決するのかはわからないのですが、Galaxy S6のジャイロがどうもノイズが多くて酔います。。iPhoneやNexus5ではそうでもないので、端末の問題だと思うんですけど、ローパスフィルタは必須ですね。

Unityで連番レンダリングできる「Renderator Pro」の使い方

Unityでレンダリングできる有料アセット「Renderator Pro」の使い方

Renderator Pro

簡単にUnityでレンダリングができるようになります。作ったゲームのシーンとかプロモの動画とかもこれを使えば簡単にできるのではないかと思います。

使い方

インポートしたRenderator Proをカメラにアタッチするだけで、あとはインスペクタから各種設定をしてPlayボタンを押すだけでどんどんレンダリングをはじめます。

メインカメラにRenderator_PRO_EN.csをアタッチします

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-4

はじめに設定アイコンからChoose save folderを選んでレンダリングした連番ファイルの保存フォルダを選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-6

するとインスペクタのPathにフォルダが表示されるので、他の設定をします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-7

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-9

width:画像の幅

height:画像の高さ

Length:時間をMinutes,Secondsで設定

Framerate:秒あたりのフレーム数

上記のキャプチャは、幅800ピクセル、高さ600ピクセルの解像度で秒間30フレームで5秒間のレンダリング設定、あとはQuit Play Modeにチェックを入れるとレンダリング後に動画で再生してくれます。

最後にPlayボタンを押してレンダリング開始。簡単でしかもGPUレンダリングなので早くて素晴らしいです。

ffmpegでpng連番をmp4にする

 

ffmpeg -r 24 -i Render%05d.png -vframes 479 -codec libx264 -pix_fmt yuv420p -r 24 out.mp4

開発中のゲーム「RingNinja」アプリアイコン

「RingNinja」はローポリの3Dグラフィックのアクションパズルゲームです。ゲームのキャラクタは2頭身のちょっとコミカルな感じで、背景やマップなどもすべて3Dローポリで作られた美麗なゲームに仕上がってます。そのゲームのアプリアイコンをデザインしました。イメージは以前から頭の中にあったので何パターンか作ってみましたが、どうも思っていたのと雰囲気が違い少々苦労しました。最終的になかなかオシャレでカッコいいアイコンに仕上がったんではないかと思います。

ちなみに鹿の頭で、ゲームのステージの背景で登場します。他にも狼、イノシシ、カラスなどが登場するので、アプリをバージョンアップしたら他の動物のものに変えようと思ってます。

上がアプリのアイコン、下がゲーム内で使っている画像です。

ringninja

ringninja