なんでも出せる夢の宝箱

開ける度に違うアイテムが飛び出す宝箱。
If you open the AR treasure chest, you get a different item every time.

動画

開発素材

ツール

Unity

Blender

MicroPython

C#

デバイス

M5StickC Plus

システム構成

Overview

• My Prototype of AR Treasure Chest with M5StickC Plus
• If you open the AR treasure chest, you get a different item every time.
• Additionally, the item appears three-dimensional. Plus it contains a little game.
• The YouTube video includes subtitles for English commentary.
• Synchronization of lights between real and virtual is explained in English below. This is the most particular point in this prototype.

はじめに

• 概要を把握するには、Youtubeの動画を見るのが理解が早いと思います
• 動画に盛り込めなかった解説は下記のストーリーに書きました
• 一連の流れを見ていただきたく（繋ぎ合わせの動画にしたくなかったため）長い動画になっています、飛ばしながら見ていただけたら幸いです
• YouTubeの字幕にも簡単な解説を書きました（デフォルトではOnにならないようです）

構成要素

• M5StickC Plus
• 雑貨店で入手した木製の宝箱
• 可変抵抗
• RGB LED
• Android（スマートフォン）
• 印刷したAR用のイメージ
• M5StickC Plusとギアを支える土台

作成方法

M5StickC Plus側

• 宝箱の開閉を判定するために宝箱の器側と蓋側に2つの歯車を設置する
• 器側の歯車に可変抵抗をつける
• 歯車が回転すると、抵抗値が変わるようにする
• M5StickC Plusのアナログ入力に可変抵抗を接続する
• M5StickC Plusのデジタル出力にRGB LEDを接続する
• 宝箱の中にM5StickC Plusと可変抵抗とRGB LEDを収める
• 可変抵抗とRGB LEDはユニバーサル基盤を用いて配線
• 印刷したAR用のイメージと宝箱の位置関係が固定されるように台に設置する
• プログラムはMicroPythonで行った
• 本プロトタイプでは、MicroPythonのinternal moduleのuwebsocketを利用している
  • （本来、webreplで利用するもので、ユーザーが使うものではない）

スマートフォンアプリ側

• Unity AR Foundationを利用してスマートフォンアプリを開発
• スマートフォンアプリで取得した可視光線のカメラの情報をもとに宝箱の位置をリアルタイムで判断
  • 「2」という形をしたAR用のイメージをもとに平面の位置と法線を判断して、そこから宝箱の位置を判断
  • AR FoundationのImage Tracking（ARCoreのAugmented Images APIs）を利用
• スマートフォンの液晶画面に「カメラで取得した映像」と「仮想のオブジェクト」を合成して表示
• WebSocket通信は、System.Net.WebSocketsを利用した

通信部分

• M5StickC PLUSとスマートフォンアプリとWi-Fiで通信する
  • ルーターがなくてもデモができるようにAccess Pointモードも用意
• WebSocketでデータを送受信を行う
• M5StickC Plusから、宝箱の開閉状態を送信する（可変抵抗器の値も送信している）
• M5StickC Plusから、RGB LEDの色情報を送信する
• スマートフォンアプリから、操作情報を送信する

3Dプリンターによる造形

• 3Dプリンターを用いて以下を作成
• 宝箱の開閉を判定するための2つの歯車
• M5StickC Plusとギアを支える土台
• 宝箱とAR用のイメージを固定する台

3Dモデリング

• Blenderを使い以下の3Dモデルを作成
• 薬草
  • 近所で撮影した木の葉をテクスチャとして利用
• 剣
• M5StickC Plus
• M5StickC Plus（暴走状態）
• 地面
• ふきだし

その他の制作物

• AR用のイメージ
  • 認識精度が高くなるように何度か作り直した
• 動画用の音楽

補足

• スマホで画面キャプチャしながらアプリを動作させているため、遅延が発生している
  • 不本意ながら、同期するために数フレームの調整を動画編集時に行っている
  • （タイムコードがなく、正解が不明になってしまったため、各動画のタイミングが正確ではない部分がある）
• 動画で「カット編集(つなぎ合わせ)」や「仮想オブジェクトの合成編集」や「光の演出処理」は行っていない
• 速度の変更（動画の右上に表記）、色の調整（カメラ毎に色が異なるため）は行った
• 音は後から追加した（撮影時のバージョンにおいては、実際には音はしない）

ストーリー

現実と仮想の光の同期についての考察

• 現実空間と仮想空間の親和性を高めるために、現実空間の光を仮想空間に反映するという試みた
• 現実空間のライトを推測する「The Lighting Estimation」というAR Foundationの機能は利用せず
• 現実空間のライトの位置を固定し、ライトの色をM5StickC Plusで制御して、スマートフォン上の仮想空間に反映することで、「仮想空間にある実在しないオブジェクト」が現実空間に溶け込んでみえるように工夫した

解説

• 上記の画像の解説
• 1：現実世界、現実世界の指に当たった光、現実世界でRGB LEDが光っている証拠
• 2：スマホの画面、「現実世界の指」に「現実世界の光」があたっている様子
• 3：スマホの画面、「仮想世界の剣」が「現実世界の光を反映した」「仮想世界の光」があたっている
• あたかも「現実世界の光」を「仮想世界の剣」が受けていると錯覚させるねらいがある

補足

• ARアプリでは、カメラの露出を制御できなく、光が強すぎて、2が白トビしている
• ARアプリに最適な光の量にする必要があるが、今回は別途、様子を別のカメラで撮影することもあり、強い光にしてわかりやすくした結果、ARアプリ側では白トビしている
• 色温度が撮影機材によって異なるため、と画面キャプチャの高負荷による遅延の影響のため、1と2の色が異なって見える

解説(別の例)

• 下記画像の解説
• 1：現実世界、緑がかったLEDの光
• 2：スマホの画面上、緑のLEDの光を受けて、白い歯車が緑がかっている
• 3：スマホの画面上、仮想世界の薬草が、仮想世界の光を受けて、緑がかっている
• あたかも、現実世界の緑のLEDの光を受けているように見せるねらいがある
• 撮影した映像からだと、露出や色温度などの都合もあり、なかなか伝わらないのが残念だが
• 光を同期したことで、現実と仮想の一体感が増したと個人的には感じている
• 何かの形で披露する場を作りたいが、不足している部分だらけなので精進する
• カメラで光を捉えると見た目が大きく変わるので、光学シースルー型のヘッドマウントディスプレイなどの方が向いているかもしれない

Sync lights between real and virtual

• If RGB LED light up in GREEN in real world, the gear in the container receive green light. (1 in above picture.)
• RGB LED looks like in GREEN in the smartphone screen too.(2 in above picture.)
• Herb that is a virtual object receive GREEN LIGHT that is virtual light. (3 in above picture.)
• People feel that Herb receive real LED light.
• Then, the virtual objects in the real world will blend in.

RGB LED

• SK6812MINIをユニバーサル基板に手はんだ付けしたものを使用

メンバー

• 

  えぬでんき @ndenki

関連イベント

• M5Stack Japan Creativity Contest 20232023-07-15 開催

同じニオイがする作品

• All IoT化システム
• メッシュバッグとシン三種の神器
• reTerminalとHDMI入力でゲーム配信！ - HDMI入力拡張モジュール -
• つくろがや3でゲットしたおみやげを全部使う！