クワマイでもできる

クワマイでもわかる

VSCodeでURDFをプレビューしながら書く

f:id:kuwamai:20191006191217p:plain

以前記事を書いたURDFとxacro(XML macro)はロボットのシミュレーションに必要な形状とか物理特性、センサーやアクチュエータなどを記述できる形式。確認のためにいちいちrvizを起動してたけど、Visual Studio CodeのROS向けExtensionsにURDFをプレビューする機能があったのでメモ。

以前のxacro記事

kuwamai.hatenablog.com

使用環境

手順

VSCodeのInstallと起動

公式サイトの手順通りにやったらできた。

Installは下記コマンド。

$ sudo snap install --classic code

起動は下記コマンド。

$ code

VSCode extension for ROSのInstall

Window左端下部のアイコンをクリックしてExtensions marketplaceを開いて、ROSで検索すると出てくる。Installボタンを押せばInstall完了。

f:id:kuwamai:20191006192005p:plain

URDF previewを開く

Ctrl + Shift + pVSCodeのコマンドパレットを開いてrosって入力すると候補に出てくる。

f:id:kuwamai:20191006192945p:plain

開いてしばらく待つとこんな感じで出てくる。

f:id:kuwamai:20191006193007p:plain

間違えてるとちゃんと教えてくれる。優しい。

f:id:kuwamai:20191006193050p:plain

数値計算で逆運動学を解く

f:id:kuwamai:20191005173233p:plain Denavit-Hartenberg parametersでマニピュレータを記述し、数値計算で逆運動学を解いた。パラメータさえ書けば色々なマニピュレータに対応できるので便利そう。運動学はにわかなので違うところあったら教えてください。

Notebook

実装の例と式はJupyter Notebookに書いた。だからこのブログは参考にしたサイトの紹介だけ。

Denavit-Hartenberg parametersと同次変換行列

Denavit-Hartenberg parametersはマニピュレータの関節角やリンクの長さを表現する際によく用いられている記法。このパラメータから同次変換行列を求め、順運動学を解く。

こちらのサイトが図や式が豊富で大変わかりやすかったです。

今回はこんな感じの3DoFなマニピュレータを考える。

f:id:kuwamai:20191005182338j:plain

Denavit-Hartenberg parametersは多分こんな感じ。

^{i-1}T_i a_i \alpha_i d_i \theta_i
^{B}T_1 0 0 0 \theta_1
^{1}T_2 0 \pi/2 0 \theta_2
^{2}T_3 1 0 0 \theta_3
^{3}T_E 1 0 0 0

同次変換行列はこれに代入していく。この式をJupyter Notebookに書いてもGitHubで見るとレイアウトが崩れるから発狂しそうだった。ここに書いておく。SやCはそれぞれsin、cosの略。


\begin{align}
^{i-1}T_i&=
\begin{bmatrix} & a_{i-1} \\ I & 0 \\ & 0 \\ O^{T} & 1 \end{bmatrix}
\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & C_{\alpha_{i-1}} & -S_{\alpha_{i-1}} & 0 \\ 0 & S_{\alpha_{i-1}} & C_{\alpha_{i-1}} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}
\begin{bmatrix} & 0 \\ I & 0 \\ & d_i \\ O^{T} & 1 \end{bmatrix}
\begin{bmatrix} C_{\theta_i} & -S_{\theta_i} & 0 & 0 \\ S_{\theta_i} & C_{\theta_i} & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \\
&=\begin{bmatrix} C_{\theta_i} & -S_{\theta_i} & 0 & a_{i-1} \\ C_{\alpha_{i-1}}S_{\theta_i} & C_{\alpha_{i-1}}C_{\theta_i} & -S_{\alpha_{i-1}} & -S_{\alpha_{i-1}}d_i \\ S_{\alpha_{i-1}}S_{\theta_i} & S_{\alpha_{i-1}}C_{\theta_i} & C_{\alpha_{i-1}} & C_{\alpha_{i-1}}d_i \\ 0 & 0 & 0 & 1 \end{bmatrix}
\end{align}

同次変換行列を順にかけていくと、ベースから見たエンドエフェクタの位置姿勢がわかる。つまりこれで順運動学が解ける。

^{B}T_E=^{B}T_1 ^{1}T_2 ^{2}T_3 ^{3}T_E

数値計算

まず関節角ベクトルq, 手先位置ベクトルrを下記のように定義する。


\begin{align*}
q&=\begin{bmatrix} \theta _{1} \\ \theta _{2} \\ \theta _{3} \end{bmatrix}\\
r&=\begin{bmatrix}
x \\
y \\
z
\end{bmatrix}
\end{align*}

するとヤコビ行列はこんな感じ。


J\left( q\right) =
\begin{bmatrix}
\dfrac {\partial x}{\partial \theta _{1}} & \dfrac {\partial x}{\partial \theta _{2}} & \dfrac {\partial x}{\partial \theta _{3}} \\
\dfrac {\partial y}{\partial \theta _{1}} & \dfrac {\partial y}{\partial \theta _{2}} & \dfrac {\partial y}{\partial \theta _{3}} \\
\dfrac {\partial z}{\partial \theta _{1}} & \dfrac {\partial z}{\partial \theta _{2}} & \dfrac {\partial z}{\partial \theta _{3}}
\end{bmatrix}

初期値q_0を適当に設定して、下記式を繰り返し計算すると解ける。ちなみに f(q_i)が順運動学。


\begin{align*}
r_i&=f(q_i)\\
q_{i+1}&=q_i-J(q_i)^{-1}(r_i-r_{ref})
\end{align*}

f:id:kuwamai:20191005192553p:plain

計算してみるとこんな感じ。水色の棒がマニピュレータで、赤い丸が目標手先位置。計算を繰り返すごとに手先位置と赤い丸の位置が近づいていくのがわかる。

参考

マニピュレータの描画方法を参考にさせていただきました。

Reality Composerでお気軽AR作り

f:id:kuwamai:20190926022957j:plain

iOS13からARKit3になり、Reality ComposerというAppが配信された。ARコンテンツがお気軽に作れてシェアできちゃうし、Xcodeに持って来ればさらに本格的に作り込めるらしい。今回はiPadでクワマイを弾き飛ばすものを作った。正直解説なんていらないほど使いやすいけど、思い出としてメモ。

できたもの

作成手順

プロジェクトの新規作成

f:id:kuwamai:20190926134900p:plain

[書類を作成]をタップすると新規プロジェクトが作成される。

アンカーを選択

f:id:kuwamai:20190926134906p:plain

プロジェクトを作成するとアンカーの選択画面が表示される。床とか壁とか顔とか、何を基準にARを表示するか選べる。他には画像とか立体物もアンカーにできて楽しそう。今回は水平方向(床)をアンカーにしてみた。ちなみにこれはあとで変更できるのでお気軽に選んで大丈夫。

オブジェクトの編集

f:id:kuwamai:20190926134926p:plain アンカーを選択すると立方体が置かれたシーンが表示される。オブジェクトをタップすると円と矢印が表示され、それぞれ回転とスケール、位置の変更ができる。右上の立方体マークのアイコンをタップすれば細かく数値を指定できるし、外観や物理特性を変更できる。今回は違うものを置きたいので削除。

オブジェクトの追加

f:id:kuwamai:20190926134936p:plain

右上一番左の+マークのアイコンをタップするとオブジェクトが追加できる。単純な図形とか家具や食べ物など、デフォルトでいろんなオブジェクトが選べる。今回はUSDZを読み込んでみたいので、[読み込み済み]の+アイコンをタップ。

f:id:kuwamai:20190926134943p:plain

フォルダに保存されてるUSDZを選択できる。USDZの作り方は下記サイトが大変参考になりました。

f:id:kuwamai:20190926134951p:plain

選択すると[読み込み済み]に表示されてシーンに追加できるようになる。

ビヘイビアの設定

f:id:kuwamai:20190926134959p:plain

タップしたら動くようにしてみる。デフォルトだと固定されてるため、まずは物理設定を変更する。オブジェクトをタップして選択、右上の立方体アイコンをタップし、物理の[含める]をONにすることで物理設定ができる。

f:id:kuwamai:20190926135008p:plain

モーションタイプをダイナミックに変更する。他には素材や衝突判定方法を選べる。素材を氷にすると滑っていくようになった。

f:id:kuwamai:20190926135016p:plain

オブジェクトをタップしたり近づくなど、ユーザーの行動に合わせてオブジェクトがアクションを返すことをReality Composerではビヘイビア(振る舞い)というみたい。右上のビヘイビアアイコンをタップ。+ボタンをタップすることでビヘイビアを追加できる。

f:id:kuwamai:20190926135024p:plain

今回はタップすると力が加わるを追加。

f:id:kuwamai:20190926135038p:plain

影響を受けるオブジェクトに先ほど追加したオブジェクトを設定。今回はアクションとして力を加えるを選択したので、力を加える方向や速度を変更できる。デフォルトの18km/hだと相当吹っ飛ぶので5km/hに設定。

動作確認

f:id:kuwamai:20190926135050p:plain

右上の再生ボタンを押すと、ARを起動せずに動作確認ができる。今回はタップしてUSDZが飛んでいけばOK。ARアイコンをタップすれば実際にARを起動することができる。

f:id:kuwamai:20190926135114p:plain

右上の...アイコンをタップすると書き出したりできる。誰かとAirDropクラウドストレージ等を使って作成したプロジェクトが共有できる。

f:id:kuwamai:20190926135123p:plain デベロッパをタップするとARセッションの記録と再生ができる。デバイスやアンカーの動きを考慮したプロジェクトの場合は便利そう。

おしまい

もっと頑張って手の込んだもの作っても面白そうだし、サッとデコって映える映像を撮るのも楽しそう。とりあえずお手軽だよってことが伝われば何より。

iOS13のSafariでデバイスの傾きを取得する

f:id:kuwamai:20190925200836j:plain

Web XRとかブラウザゲームとか、デバイスの傾きに応じて動くWebアプリは楽しい。iOS13のSafariは、傾きを取得する際ユーザーの許可が必要になった。ちょっと書き足すだけでできたので、手順をメモ。

使用したデバイス

  • 10.5インチiPad Pro
    • iPadOS13.1

"動作と方向"へのアクセスを求める

下記サイトを参考にしました。DeviceMotionEvent.requestPermission()DeviceOrientationEvent.requestPermission()でアクセスを求めます。

下記関数を傾きを使った処理の前に入れてあげればいいっぽい。

function request_permission(){
     if (
         DeviceMotionEvent &&
         DeviceMotionEvent.requestPermission &&
         typeof DeviceMotionEvent.requestPermission === 'function'
     ) {
         DeviceMotionEvent.requestPermission();
     }
     if (
         DeviceOrientationEvent &&
         DeviceOrientationEvent.requestPermission &&
         typeof DeviceOrientationEvent.requestPermission === 'function'
     ) {
         DeviceOrientationEvent.requestPermission();
     }
}

あとは今まで通りです。僕は下記サイト等を参考にさせていただきました。

ローカル環境をHTTPS通信で動作確認

上記の手法はHTTPS通信でないと使えない。ローカルで動作確認する際面倒なので調べたところ、ngrokを使えば解決できるそうです。下記サイトを参考にしました。

www.ryotaku.com

ローカルで立てたサーバーにランダムなURLを割り振ってインターネットに公開してくれるらしい。公開しちゃうのが恥ずかしいけど、アカウント登録すればパスワードも設定できるとのこと。

ちなみにローカルのサーバーはhttp-serverを使った。

アクセスしてみる

下記サイトの「傾」というボタンを押すと"動作と方向"にアクセスしてよろしいかと聞かれるはず。

こんな感じ。

f:id:kuwamai:20190925200836j:plain

おしまい。

tmuxでターミナルを分割表示する

f:id:kuwamai:20190917102130p:plain あちこちのターミナルでエディタ開いたりなんか実行したりすると、どこで何やってるかわからなくなっちゃう。tmuxで一つのターミナルウィンドウを分割表示する手順と、便利そうな設定をメモ。

使用した環境

  • Ubuntu16.04
  • tmux 2.1

インストール

下記コマンドでインストールした。

$ sudo apt-get install tmux

起動

起動は下記コマンド。

$ tmux

設定

デフォルトの設定では少し使いづらく、.tmux.confを編集することでいろいろ便利にできる。編集する際は下記コマンドを実行。

$ vim ~/.tmux.conf

設定はこちらをそのまま使わせていただきました。とてもいい感じ。

ペインの保存と復元

作成したペイン(分割したウィンドウ)は、tmuxを終了すると保存されない。tmux-resurrectというプラグインで保存し、PCを再起動しても元に戻せるようにする。下記ページの通りの手順で設定できました。

Sonic Piでポケット・ミクを演奏する

f:id:kuwamai:20190901141544j:plain Sonic PiというRubyで音楽が書けるツールを使い、ポケット・ミク(NSX-39)を演奏した。Sonic Piでランダムな歌詞と音程を生成し、MIDI出力をする。

できたもの

制作の記録

Sonic Piとは

↑開発者のSam Aaronさんの動画。音楽をRubyで書くツール。

公式サイト

インストール等は公式サイトを見ればわかると思う。チュートリアルが充実しているので使い方もすぐわかる。

MIDI

今回書いたコードはこんな感じ。

loop do
  __midi_send_timed("/*/raw", 0xf0, 0x43, 0x79, 0x09, 0x11, 0x0a, 0x00, rrand_i(0, 127), 0xf7)
  midi_note_on rrand(60, 70), channel: 1
  sleep 0.3
end

歌詞を設定する

MIDI規格にSysEx(システムエクスクルーシブメッセージ)というものがあり、これに従って使って歌詞を設定する。

現在(2019/09/01)Sonic Piはv3.1であり、SysExに正式には対応していない。下記スレッドによるとv3.2以降対応する予定とのこと。

同スレッドに__midi_send_timedを用いればv3.1でもできるとのことだったのでこれを使用する。あとはポケット・ミクの仕様に合わせてデータを作成する。

ポケット・ミクカスタマイズガイドに歌詞の設定方法について記述されている。

7ページに歌詞の設定方法、10ページにからまでのMIDIデータ一覧が載っている。下記に簡単に書く。ちなみに数値は16進数。

F0 43 79 09 11 0A 00 + 歌詞データ + F7

歌詞データをF0 43 79 09 11 0A 00F7で挟む感じ。F0 43 79 09 11 0A 00の最後のデータ、00は歌詞スロットを指定する部分で、00にすることでRAMに直接書き込み、リアルタイムな歌詞設定ができる。

歌詞データは00~7F、つまり10進数だと0~127になるため、からをランダムに抽出し、歌詞として設定する処理は下記コードになる。

__midi_send_timed("/*/raw", 0xf0, 0x43, 0x79, 0x09, 0x11, 0x0a, 0x00, rrand_i(0, 127), 0xf7)

設定した歌詞を歌わせる

midi_note_onで歌う。音程は60~70の範囲でランダムに歌うことにした。するとこんな感じになる。

midi_note_on rrand(60, 70), channel: 1

プログラムをStopしても最後の歌詞を歌い続けるので、その際は下記のコードで止める。

midi_all_notes_off

感想

Sonic Piは音楽をコードで表現できるので、比較的簡単にルールに基づいた音楽が生成できた。なので音楽素人の僕でもそれっぽい音楽が作れる。個人的には公式チュートリアルのサンプルを実行した時点で結構好みの曲だったので、また遊んでみたい。

また、RaspberryPiでも使うことができるらしいので、センサとポケット・ミクを組み合わせれば簡単に歌うオリジナル楽器が作れそう。夢が広がる。

VRChatに銀河を作る[2]

f:id:kuwamai:20190821041131p:plain

前回星の位置情報に基づいてパーティクルを出すVRChatワールドを作った。その後様々協力していただけて星の明るさや色、星座線などを反映できるようになったのでメモ。

ちなみに前回はこんな感じだった。

できたもの

こんな感じになった。

星を描画するシェーダとテクスチャはGitHubで配布してる。

VRChatでPublicワールドになったのでみんなも遊びに来てね。
HIPPARCOS SALONで検索。

天文について教えてもらう

前作のブログを書いたのち、天文に関する知識不足で完全に放置してた。するとブログやTweetを見てくださった星好きなVRChatユーザーが声をかけてくれました。

天野ステラさん

アルベールさん

自分の作品に反応していただけるなんて滅多にないので嬉しい。お二人とも天文に詳しい方なので、星の視等級と描画サイズの関係や、色の算出方法などを教えていただきました。そしてモチベーションも向上した。

今回の追加要素

前回書いた記事から増えた要素を説明。基本的には人様の色々を活用させていただいたので、自分がやったことと経緯だけ日記っぽく書いておく。

GPUパーティクル

前回はメッシュパーティクルエミッターを使って星を表示しており、個々の星を区別できなかった。GPUパーティクルなら色も大きさも個別に指定できて良さそうだったけど、シェーダは書いたことなかったので困ってた。

phi16さんからシェーダをもらうまでの話

遡ることこちらのTweet

街の3Dモデルといえば3dcelで公開されている渋谷のデータしか知らなかったので遊んでみた。今思うとこれがなかったら点群ビジュアライゼーションの話題になってなかったかも。不思議。

その後番匠さんは渋谷駅の点群データに興味を持ち、呼びかけ、みんなでウンウン言ってるとこにphi16さんが答えをダイレクトに持ってきた。

この時番匠さんに声をかけていただいて、xRArchiというコミュニティに参加しました。その名の通り建築とXR。僕は建築全然わからないけど、お友達がたくさんできた。嬉しい。

そして点群つながりで龍さんがデジタル芸大プロジェクトとして点描芸大を作成します。けれどもこれは別の物語、いつかまた、別の時に話すことにしよう。

いや、話すつもりないからこれを見て。

ということがあってめでたく星の描画にぴったりなシェーダをいただくことができました。つまりHIPPARCOS SALONと点描芸大は同じシェーダ。芸大も宇宙も兄弟みたいなもの。

星のデータをテクスチャに埋め込む

phi16さんの書いたシェーダは、位置と色をテクスチャに埋め込んでいる。それ以前にシェーダがわかんないからvertとかfragって何って感じだったけど、落ち着いて読んだらテクスチャの作り方がわかったので書いた。詳しくはJupyter notebookに書いた。

ちなみにphi16さんはptsをテクスチャに埋め込んでくれるコードを書いてるけど、僕はHaskellがわかんないので見なかったことにした。すごくシンプルですごい。

星の見た目をいい感じにする

f:id:kuwamai:20190824030428p:plain

めでたく星が表示できたけど、ただの円盤で味気ない。なんかこう、ふわ〜っとして欲しかった。調べたところシェイピング関数と呼ばれるものがあるらしい。グラフを眺めてそれっぽい関数を書いた。

マシになった。

f:id:kuwamai:20190824030442p:plain

星座線

Cylinderを配置して星座線を描くことにした。星座線の端位置を計算しCSVで出力するコードを書いた。

Cylinderの配置は三田村綯夜さんにUnityのエディタ拡張ツールを作成していただきました。位置データに基づきスケールと回転をしてくれるもの。

最終的にこんな感じになった。

地球からの距離表示パネル

オノッチさんのPosition Shaderを使用させていただきました。テクスチャを書いて見た目をちょっと変えて、1m = 3.26光年に変換しただけ。

こんな感じで地球から何光年離れているかわかるようになった。

恒星名表示パネル

天野ステラさんに恒星名を表示するパネルを作成していただけました。ビルボードっぽく見せたかったので、下記のシェーダを参考にさせていただきました。

ビルボードかつ、カメラ - オブジェクト間の距離に比例してスケールすることで、見かけのフォントサイズを一定に保つ。

これもさっきと同じ動画だけど、こんな感じで表示されるようになった。

おしまい

これで前回改善したいと思っていた部分はほぼ実現できた。気が向いたら追加してみたい機能としては

  • 空飛ぶ乗り物
  • 星座のクリエイトモード

空飛ぶ乗り物はすでに作成されている方がいらっしゃるのでできそう。星座はどうやって作れるかな。

このワールドはVRAAというアワードに提出したり、天文教育研究会のセッションにて紹介されたりと、マニアックながら評価していただけているみたい。また何か新しいことがあったみたいで、現在進行形でなんだか凄いことになっちゃったぞ状態。その辺も思い出として書けたらいいな。

来てくださった方のTweet

全部は載せられないけど、いくつか。VRChatではこうしてワールドを紹介してくださる方が多く、感想をいただけるのはとても嬉しいです。天文知識があれば僕よりHIPPARCOS SALONに詳しいことになる。ウケる。