2017-06-09

全天球動画にAmbisonics再生

vr ambisonics

360度動画のサラウンド再生について勉強する機会があったので、まとめておきます。

Ambisonics アンビソニック概要

マイク

4chのマイクを正四面体の配置に並べて、頭をぐるぐるまわしてパンニングが変わっても再生できるって技術です。

Ambisonicsの概要はこちらが非常にわかりやすいです。
- 徳井直生さん 360度動画のためのAmbisonicsマイクを開発中! 「百見は一聞に如かず」
- サラウンド寺子屋 AMBISONICの原理と制作の実際 1992年 Ambisonic 資料より

実はYoutubeでも、PC版Chrome, Android版で見るとこの方式のオーディオにも対応していました。
Spatial Audio対応の動画リスト。

Youtubeに対応動画をアップロードする方法はこちらにまとまってます。
またAdobe PremiereにVST プラグインを入れて動画と一緒に書き出すこともできるみたい。

ただ、ただ録音するだけではなく、あとから、効果音や、ピンマイクの音声をVR動画上に配置したいこともあるとおもいます。
そのようの編集には最近Facebookに買収されたこれが良さげ。太っ腹の無料公開。Facebook 360 Spatial Workstation
VST プラグインで音を配置できて、Ambisonicsの書き出しにも対応しているぽいです。

有料プラグインの中には動画の中に音を配置するかのように使えるProTools用の360panというプラグインもあった

Youtubeとかで対応しているA-Format、B-Formatって？

結構躓くところが、正四面体のマイクで録音した4chそのままは、A-Formatと言われて、そのままではYoutubeへアップロードできないです。
Youtubeへは、1次フォーマット a.k.a. B-Formatへ変換する必要があるらしい

B-Formatの内容

チャンネル	内容
W	位相差のないモノラル成分
X	Wに対する左右差成分
Y	前後差成分
Z	上下差成分

ポイントは、XYZは、差分成分のみということだなと。
こうすることで、4ch再生対応していない場合は、Wのみ再生すればよくなるみたい。
更にBGMを載せたいってときにWだけに乗せれば良くなったりするんでないでしょか？

4分割より細かい粒度で再現できる高次フォーマットもあり、Youtubeで対応しているのは図の2段目までということ。

Wikipediaより

動画

360度な映像をThetaなどで撮影してアップロード

YouTubeにメタデータを対応させるには360 Video Metadata ダウンロードってソフトでメタデータをいれてアップロードすると、15分くらいの変換時間のち、ぐるぐる回ったりカードボードで見れる映像になったりします。

メモ: Youtubeから4k動画のダウンロード

youtube-dl -k -f 'bestvideo+bestaudio/best' "url"

で、mkvコンテナに動画4k mp4, 音声 4ch webmで入る。

＊mkvフォーマットとは？ Matroska - Wikipedia

ffmpegで使いそうなコマンドメモ

結構めんどいのが、あまり4chオーディオはやらないだけあって、ffmpegを色々使うことに。ので使ったコマンドをメモ。

# 4chファイルを1chチャンネルごとに分割
ffmpeg -i sample.webm -map_channel 0.0.0 sample1.wav -map_channel 0.0.1 sample2.wav -map_channel 0.0.2 sample3.wav -map_channel 0.0.3 sample4.wav

# 4つのモノラルを、4chオーディオストリームへ合成
ffmpeg -i sample1.wav -i sample2.wav -i sample3.wav -i sample4.wav -filter_complex "[0:a][1:a][2:a][3:a]amerge=inputs=4[aout]" -map "[aout]" output.wav

# 動画と音をまとめる
ffmpeg -i sample.mp4 -i sample.wav -c:v copy -c:a aac -strict experimental output.mp4

Unityでの再生もやったのですが、長くなったのでひとまずここまでで。

2017-06-07

WIP ノリノリで加速度センサを振ったときのテンポをJSで推定する

加速度センサをリズムに合わせて振ったときにBPM解析できるかなーと試してみたログです。

いっつもBeatDetectionはライブラリの中をちゃんと読まずにつかっていたので、一度しらべてみました。

調べると、自己相関 Autocorrelationというものがあるらしく、実装もシンプルだったので、jsで作ってみました。(ほぼjsfiddle参考)

from 自己相関 - Wikipedia

自己相関は、信号に含まれる繰り返しパターンを探すのに有用であり、例えば、ノイズに埋もれた周期的信号の存在を判定したり、信号中の失われた基本周波数を倍音周波数による示唆に基づき同定するために用いられる。

サンプルURL
※スマホからみてください

灰色が、生の加速度センサ
赤色が、ローパスフィルタを通した加速度センサ
緑色が、自己相関関数とおしたグラフ

緑色が左肩上がりになるほど、一定の周期で動いてる（相関がつおい）みたいです。

加速度センサなのか、なんとなく精度はいまいち
シンプルなes6 練習と、master/docsのgithub pages 公開の実験も兼ねて作ってみました。

ソースはこちら

参考

2017-06-05

アルプス電気ハプティック®の展示コンテンツ

works unity haptic works

去年の仕事ですがやってた仕事をブログにもちょっとずつまとめとこうと。

ALPSSHOW 2016, CEATEC JAPAN 2016で
アルプス電気様のハプティック®の展示をお手伝いしました。

CEATEC アルプス電気さんのブースで、展示中の触覚再現できる、パプティックデバイス達です。ぜひ体験してってくださいませー。 pic.twitter.com/rMVrng0L6a
— いぶくろ (@asus4) 2016年10月3日

今回、開発中のデバイスと連携するUnityアプリケーションを担当しました。

展示したものは3つ

ハプティック®トリガー：小さな丸い玉が、プチトマト、かぼす、グミ、心臓の４種類の触感に変わる
ハプティック®トリガープラス ：東京大学舘暲先生との温冷感共同研究。コップに冷たい水、熱いお茶を注ぐ。温度が変わる。コップを振ると水の入っている触感がする
ハプティック®パッド：トラックパッドが、タイル、ジーンズ、モルタルの触感にかわる

ほんとはも一個あったのですが、CEATECでは展示エリアの関係で3つ。
デザインはブルーパドル佐藤ねじさんにお願いしました。

開発中のデバイスについてはこんな技術です。 www.alps.com

ネット上の評判については概ね好評。リアルさはまだまだだけど、これからに期待といった感想も多かったです。テレビにも何社もとりあげられ、安倍首相も体験したそうです。 news.mynavi.jp www.seikatsukaden.com

Haptic-Design

制作しての気づいたこと。
余談ですが、ペルチェ素子で温度を変えたときに、実際は5℃程度の変化にもかかわらず、熱そうなお湯が注がれる映像と音を聞くと、コップを落としてしまうくらい熱いと人は騙されてしまっていました。

よく考えれば当たり前ですが、触覚も、視覚と聴覚にかなり影響されていると気づきました。正確に表現するよりも、VR空間内では触感を強調した嘘をつくほうが良さそう。

今回感じたのはこのような触感の試行錯誤は、サウンドエンジニアの仕事ととても似ているということ。実際にはありえないけど、ちょっと大げさに作る効果音。嘘なんだけど、ある方がリアリティを感じてしまう。
…なんだかそっくりな気がします。

もう研究分野では全盛だけど、コンテンツとして触感が流行ってきた時に、Haptic-Designなる分野が立ち上がってきたら面白いなあと。
そしてこれを教えるのは音響系の学科や、映画学科がこんな授業をやってたりするんじゃないかなーと想像してしまいました。

2017-06-03

Unity Editorでグラフを表示するAttribute

unity

UnityとセンサーをUARTでつなげる。センサーの値で動くコンテンツを作るような仕事が多く。時系列で変化する値を観測するときに、グラフで確認できると捗ります。

今までは別のデバッグ用シーンを作って確認したり、Debug.Logで頑張ったりしていたのですが、
シンプルにEditorのときだけ確認できると便利だなーと思ったので、Attributeでつくってみました。

使い方は超絶シンプルで、[Graph(frame_count)]っていうアトリビュートをつけるだけ。

 [Graph(100)]
public int fps;

[Graph(100)]
public float positionX;

[Graph(100)]
public Vector2 positionXY;

[Graph(50)]
public Vector3 position;

[Graph(50)]
public Quaternion rotation;

[Graph(20)]
public Color color;