Loading...

トカチニッチ

北海道十勝の超ローカルウェブメディア「トカチニッチ」ニッチな情報毎日更新中!

Google翻訳

micro:bitでUARTのBLE通信!WebBluetoothAPIでThree.jsを操作する

荒草

荒草

10937 VIEW
投稿記事
注目タグ

タイトルのとおり。
micro:bitUARTBLE通信を使い、WebBluetoothAPIからThree.jsを操作する。

もう少し噛み砕いて書くと
加速度センサーを搭載したmicro:bitからUARTBLEで飛ばし、ブラウザのWebBluetoothAPIからThree.js3D geometryを操作するだけである。

日本語で書くと(?)
加速度センサーを搭載したマイクロビットからユーアートブルートゥースローエナジーで飛ばし、ブラウザのウェブブルートゥースエーピーアイからスリージェイエススリーディージオメトリーを操作するだけである。

私も何を言っているのかサッパリだが、このまま進める。

箱を買ってくる

トカチニッチなので十勝らしい箱が良いと考えた。

六花亭の店員さんに「このタイプの箱のフタは、どんな模様ですか?」と怪しい質問を投げる。

大きさもちょうど良い「マルセイバターサンド5個入り」を購入。自腹。

Three.jsで箱を作る

中身は必要ないので昼食にする。5個全部食べる、美味しい。

定規で箱のサイズを測り、近い尺で適当に箱っぽいgeometryを作成。
箱をスキャンして6面テクスチャを貼る。

準備完了。
とにかく頭空っぽにしてデモ動画↓を観たらいいょ。

今回作ったもの、デモ動画

動画内で起動しているソフトはインターネットブラウザChrome。
ブラウザで表示している3Dオブジェクトの傾きを実際に手に持った箱で操作している。

正直うまく解説できない、時系列で書く。
※長くなるので細かい解説は省くょ。

意地でもブラウザ(とjavascript)で、やる

VRのゲームを作ってみたい。
加速度センサー搭載のコントローラを使えたらいいね、という話になったのが今回の動機。

フロントエンドの代名詞ともいえるWEB屋の我々。

「ブラウザに根をおろし、Googleとともに生きよう。ブラウザから離れては生きられないのよ。」

WebBluetoothAPIを使えばブラウザとBLEデバイスを通信することができるとの情報をキャッチ。

アラフォーエンジニアにとって“できないこと”の方が多いというイメージのインターネットブラウザであるが、近年の著しい機能向上は目を見張るものがある。
「ChromeならBluetoothデバイスだって扱えるぞ」というGoogle先生の力を信じることにする。

Chromebookとmicro:bitを購入

試しにiPhoneに「LightBlue」というアプリをインストール、疑似BLEデバイスにすることが可能。

こちらのページ↓でスキャンを試しながら動きそうな環境を探す。

scanで Hello, BLE(クラゲのIoTテクノロジー)
  • スキャン失敗 ← Windows × Chrome
  • スキャン失敗 ← iOS(会社の古いヤツ)× Chrome
  • スキャン成功 ← Android(スマホ) × Chrome

やはりGoogle先生が手掛けたOSの方が安定して動作する様子。
開発の確認用マシンとして「Chromebook」を購入。昨年モデルの安いヤツで充分。

加速度センサーは、プログラミングも手軽にできる「micro:bit」が入門に良さそう。

micro:bitの色ガチャは“赤”。緑が欲しかった。

最近どなたかのご子息(小学生)が夏休みの宿題を「Chromebook × micro:bit」の組み合わせで開発してる、とか耳にしたような。
結果的に小学生の開発環境パクった感じになったが、大人の方が偉いので黙っておく。

Bluetooth UARTにする

加速度センサーのサービスをテストし、動作を確認。
ACCELEROMETER SERVICEの数値をBLE通信してブラウザで取得することに成功する。

お世話になったページ↓

micro:bitとWebBluetoothで通信してみました(Qiita@yokmama)

しかし…xyzの加速度がわかったところで動画デモに必要な傾き(pitch/roll/yaw)に変換する方法が理解できない。
傾きに変換する計算式を試したところでThree.jsでrotationするxyzとは違うような。

学生のとき習ったでしょと言われても、“記憶にございません”だ。

幸い簡単なプログラミングができるmicro:bit。
傾き(ピッチとロール)を取得できるようなのでそちらの数字をもらう。

UART SERVICEで文字列さえ通信できれば受け側のjavascriptで“何とでもなるだろう”というフロントエンドらしい(?)考え方。

Bluetooth UARTで文字列送信のテスト

micro:bitのボタンを押すとブラウザに文字列を送信してalertで表示される仕組み。
文字列の受信ができたので、あとはピッチとロール送ればよいはず。

ついでにBLEとの通信前にThree.jsでxyzへのrotationがどんな感じになるかのテストも作る。

Three.jsのrotation確認用

xyzの角度を変更するとオブジェクトが回転する。
micro:bitの数値をこの角度に変換することができればゴールである。

箱にmicro:bitを仕込む

空き箱の中心にプログラミングしたmicro:bitを仕込む。
黒いのはただの電池ケース。接着は両面テープ。

箱でThree.jsの箱オブジェクトを操作する

箱に仕込まれたmicro:bitからBluetoothでChromebookのブラウザに傾き(ピッチとロール)を送信。
ブラウザ側では受信したピッチとロールの文字列を数値に変換し、それぞれrotation.xとrotation.zに代入するだけ。

反省と課題

動画を見ればわかるが、yawの概念がないため方向が固定になる。動画で、天地そのまま裏返した際の方向が狂っているのがそう。(※デモ動画0:37あたり)
磁力計サービスを使えばyawも扱えるのだろうか。

90度(の倍数)あたりの挙動も怪しい、まだまだブラッシュアップが必要…なのだが、今回はここで力尽きる。

ただ“ゲームの入力デバイス”という点を考慮すれば、稼働範囲を制限したり、表裏対称にして誤魔化すことで解決する問題があるのも確か。

完全な動きを再現する必要はないのかもしれない。


以上、勉強時間は20時間ほど。

無事micro:bitからUARTBLEで飛ばし、ブラウザのWebBluetoothAPIからThree.js3D geometryを操作することに成功したのであった。

PRAmazonで「Three.js」を探す!


この記事が気に入ったら

※現在、こちらのコメント欄でのご質問・お問い合わせは受付けておりません。 恐れ入りますが、ご利用に関する不明点などは「お問い合わせフォーム」よりご連絡ください。

※投稿内容に関係のないコメントや、不適切な表現に該当すると判断したコメントは、投稿者に断りなく削除する場合があります。

ヨー、なんとかしたいっすね!

↓それやりたい。そして飛びたい。(大人です)

コレを応用して十勝の町を爆破するシューティングゲームを作ってほしい!

何度見てもスゴイ…

魔法や!色々出来そう!

ムスカ!!!

タイトルで意識を失いそうになったけど、動画みてよかったです!

なにこれ!!!なにこれ!!!なにこれ!!!!!!!!

  • コメント
  • ランキング
  • オススメ
コメント一覧
ランキング一覧
オススメ一覧