クワマイでもできる

クワマイでもわかる

Reality Composerでお気軽AR作り

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でデバイスの傾きを取得する

JavaScript Web AR VR

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を再起動しても元に戻せるようにする。下記ページの通りの手順で設定できました。

クリップボードへコピー

デフォルトでtmux内でのコピペはできるけど、検索したいときとかtmux外にコピペしたいときもある。下記コマンドでxselをインストールしたあと、下記ページの手順で設定できました。

$ sudo apt-get install xsel

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 00とF7で挟む感じ。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]

VRChat Unity VR

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に詳しいことになる。ウケる。

ホームページを作る際に参考にした情報まとめ

HTML CSS

f:id:kuwamai:20190731011424p:plain HTMLとCSSを書いてgithub.ioでホームページを公開した。Webページの作成自体初めてで知らないことが多かったので、参考にした情報をまとめておく。コメント付きブックマーク的な感じ。

できたもの

とりあえずこんな感じになった。サムネイルも何も指定してない簡素な作り。

GitHubリポジトリはこちら。

制作過程

HTMLの基本

headとかtitleとかbodyとか、基本的なHTMLの構造を知った。これだけでとりあえず内容は書ける。これ以降はずっと見栄えの話。

ディレクトリ構造

自分が作った作品を説明するページ(HTMLファイル)はworksという名前のディレクトリに置いてみた。その方が作る本人も見に来る人も何と無く分かりやすい。

Favicon

ブックマークとかブラウザのタブとかに表示されるアイコンを設定する。

CSS

サイトの見栄えを良くするためにCSSを書く。記述方法は色々あるけどstyle.cssを作って読み込む方式にした。

中央寄せ

f:id:kuwamai:20190731025335p:plain

文章が画面の端から端まで続いてると読むのがしんどいし、改行して左寄せになっててもカッコ悪い。中央寄せにして、左右に余白を作ることにした。

画像のトリミング

f:id:kuwamai:20190731031150p:plain

今まで作った作品の画像を同じ大きさで並べたかった。それぞれ画像サイズや縦横比が異なるため、単純な拡大縮小では対応できない。object-fit: cover;によって指定したサイズに画像がトリミングされた。あと、参考サイトは猫の画像を例題に使っててすごく可愛いから見て。

画像を角丸にする

f:id:kuwamai:20190731030121p:plain

僕は保育園の頃から角が立ってるのが嫌いで、図工の授業でもずっとヤスリで削っていた。当然画像も角を丸くする。border-radius: 10px;みたいな感じで指定する。

レスポンシブデザイン

f:id:kuwamai:20190731030844j:plain:w200

スマホなどの小さい画面で見るとギュッッッッッってなるので、PCだと2列、スマホだと1列にブロックが並ぶような構成にした。

画像や文字を中央寄せした際に、左右の余白は上下で揃ってて欲しいので、max-widthを指定することで余白や画像の大きさを揃えた。max-width以下の画面幅の場合は画面幅に合わせて大きさが変化するので見切れるようなことはない。

ちゃんとレスポンシブデザインになってるか、Googleが確認してくれる。そんなにこだわるつもりはないけど、GoogleがOKと言ってくれたらなんか安心できる。

フォント

せっかくなら文字のフォントにもある程度こだわりたい。Google fontsが好きなフォントを探したり見比べたりできて便利だった。使うときも読み込むコードを数行書くだけなのでお手軽。ありがたい。

M PLUS Rounded 1cにした。角が丸いことと、文字の縦横比が正方形に近いものを探したらこれが一番マシだった。

github.ioで公開

書いたファイルたちをGitHubに置いとくだけでページを公開できる。username.github.ioという名前でリポジトリを作るだけでhttps://username.github.ioで見れるようになる。つまり僕の場合はkuwamai.github.ioというリポジトリ名。

おしまい

紆余曲折あったけど、だいたい紹介した記事の情報でホームページを作ることができた。もともと阿部寛のホームページに憧れて作り始めたんだけど、あの簡素さは阿部寛だから面白いんだと悟ってやめた。

Jupyter notebookのテーマを変える

ツール紹介

f:id:kuwamai:20190703022314p:plain

Pythonでコード書いて共有するのに便利なJupyter notebook。フォントとか背景の色とか細かくテーマが変えられるので、変え方と自分のカスタマイズをメモ。

使用した環境

  • Jupyter notebook
    • v4.4.0
  • jupyter-themes
    • v0.20.0

jupyter-themes

Jupyter notebookのテーマを変更するにはjupyter-themesを使う。

公式のREADMEが丁寧でわかりやすい。 使えるフォントやデフォルトのフォントサイズとか色々書いてある。

Install

以下のコマンドでインストールする。

$ pip install jupyterthemes

テーマを変更する

テーマ選びの際に参考になった記事を紹介。

こちらの記事が各テーマの見た目を画像付きで紹介されていて、大変参考になりました。

部分ごとにフォントサイズが変えられるのだけど、どれがどれなのかピンとこない。こちらの記事ではスクリーンショットを用いて、各部分の名称を解説されていて、とてもわかりやすかったです。

色々選んだ結果、こんな感じにしてみた。

$ jt -t chesterish -f firacode -fs 11 -ofs 11 -dfs 11 -nfs 12 -T -N

デフォルトの状態にリセットする際は下記コマンド。

$ jt -r