VRChat向け下半身トラッキングデバイスHaritoraを個人開発して販売を始めました

概要

VRChat含むアバターコミュニケーションするVR SNSは頭と手をトラッキング出来るVR-HMDの普及に伴い、ユーザが増えています。

その中でもVRChatユーザを対象にした「頭と手だけじゃなくて足も動かせるようになりたい」を安価に実現するために専用ハードウェア+関連ソフトウェアを半年ほど掛けて設計、実装して販売開始しました。

仕組みとしてはジャイロセンサを5個体（腰、太もも、スネ）に取り付けることで、足や腰の動きをトラッキングしています。

こちらからどなたでも購入可能で、予約後の生産（納期1ヶ月-2ヶ月）となります。 haritora.wixsite.com

テスターレビュー

www.youtube.com

www.moguravr.com

現在主流のHMDトラッキングの仕組み

頭や手の位置を取得するトラッキング方式は「アウトサイドイン（外部にカメラを置く）」と「インサイドアウト（HMD自体にカメラを内蔵してSLAMで解く）」の二種類があります。 f:id:izm_11:20201115131244p:plain

この右側、インサイドアウト方式の方が価格帯としては安いのですが、この方式で足をトラッキングする仕組みの決定打がないので、VRChatの人はアウトサイドイン方式のHMDに買い換える、というコストが発生していました（他にもいろいろ手はありますが、大ざっぱには買い換えが主流）

Haritoraが解決していること

  • アウトサイドインじゃない、インサイドアウト方式のHMDでも足が動く（つまり、OculusQuest2ユーザに優しい）

  • 変なソフトウェアをいろいろ入れなくても全部アプリで完結している。（ファームウェアの書き込みやSteamVR設定の変更などもアプリ内で完結します）

頭と手が動くユーザに対して、全身を動かすためのアップグレードの敷居をなるべく下げる、というのを重視しました。

f:id:izm_11:20201115133407p:plain f:id:izm_11:20201115132853p:plain

ソフトウェア実装の仕組み

  • M5StickCのファームウェアが、5個のジャイロセンサ(IMU)の値を読み込んで、BluetoothでPCに送る
  • PCのHaritoraConfiguratorが足を含む体全体の姿勢をHMD,手の位置とユーザの身長を元に計算する
  • 仮想的に推定したユーザの腰と足の位置を仮想ViveTrackerの位置と姿勢としてSteamVRに送り込む

ハードウェア実装の仕組み

  • メイン基板とサブ基板に分かれていて、M5StickCをメイン基板にマウント
  • サブ基板にはジャイロセンサだけが積んである
  • メイン基板⇔サブ基板のやり取りはI2Cを通して行う

この辺のハードウェアについては、ロボットエンジニアの友人である リュートさんにお願いしました。（プロトタイプまでは僕の趣味でも出来ますが、製品クオリティは出ないため）

ryutoai2xm.hatenablog.com

気の利いたポイント

  • ハードウェアのセンサー間を繋ぐケーブルはRJ45のLANケーブル（独自規格コネクタは大変、RJ45はすっぽ抜けしないツメがついてる）
  • ハードウェアのケースはFDMの3Dプリンタ製。金型を起こすのはコストが高いのと、既存ケースの加工は加工コストの方が高いため。
  • ドキュメントサイトはソシャゲクライアントエンジニア入門以前でも使ったDocusaurus製でデプロイ自動化済み
  • ソフトウェアのUIを割とマジメに作って、分かりにくさを減らした

Haritoraの戦略

  • ハードウェアは既製品を組み合わせることで研究開発コストを削減
  • 市場は大きくないが、需要は確実にある
  • 対象市場が大きくないので企業参入されにくい
  • 個人の趣味開発範囲で作るので自分のエンジニア工数が無料（お手伝いしてくれた各位には改めてお礼します）
  • ケースを個人用3Dプリンタで3Dプリント、PCBは中国発注(Fusion PCB https://www.fusionpcb.jp/ )、センサー類も中国発注(Alibaba, Aliexpress)で少数生産でも原価を抑えられる

みたいな戦略を大ざっぱに立てて作りました。

いただいた反響

Twitterアカウントを分けて運用したところ、2000フォロワーを越えました。（VRChatのJPのDAUは数千人、と聞くのでかなり対象層にはリーチ出来ている予感）

pixiv fanboxで制作過程を公開しつつ、fanbox会員限定の先行オーダーを10/26に開始したところ、プレオーダー時点で ありがたいことに100人以上のオーダー を頂きました。現在死にそうになりながら毎日仕事の後にはんだ付けをしています…

得られた知見

  • ハードウェアスタートアップごっこが出来て楽しかった
  • 電気回路、電子回路、ケース設計、ケース製造、ユーザ認証、ハードウェアのC++ファームウェア、Unityクライアントアプリ、OpenVR互換ドライバ（C++）を一通り触ることが出来て面白かった
  • バックオーダーを受けてから製造するときに、手元にお金がないと資金ショートする、という事を学べた（金策楽しかったです）

その他関連

自室の様子（メチャクチャうるさいので部屋で寝にくい…）

手作業のはんだ付け（まちがい）

運転資金を確保しないと製造時にお金が吹っ飛んでいきます。ドキドキします。

ソーシャルゲームのクライアントエンジニア入門以前 というサイトを作って公開しました。

ここで公開してます。

neon-izm.github.io

経緯

ソーシャルゲームクライアントは、Unity自体の知識に加えて、ソーシャルゲーム特有の慣習や挙動に合わせた知識が必要になります。

それらの個別実装についての記事は十分にありますし、サーバサイドも含めてソーシャルゲームを全部一人で作ってみる本もあります。

スタートアップ・個人で作れる スマホ向けUnity ソーシャルゲーム開発ガイド

スタートアップ・個人で作れる スマホ向けUnity ソーシャルゲーム開発ガイド

スタートアップ・個人で作れる スマホ向けUnity ソーシャルゲーム開発ガイド

しかし、例えば独学でUnityだけを学んだ人や、スタンドアロンのゲーム畑からやってきた人がキャッチアップするための索引的な文書が見当たりませんでした。
（↑の本はある程度のサーバサイドとクライアントの事を理解している人が全体像を確認するための本で、サーバサイドが分からない人が読むにはハードルがあります）

あるいはソーシャルゲーム業界のクライアントエンジニアとして内定をもらった人が、予習として読んでおける読み物があると良いなあと思って書きました。

↓僕の気持ちです

現在のステータス

  • 目次と各項目の概要はいったん埋めました。

  • みなさんの提案、プルリク、issueお待ちしてます。参考文献にurlの提案、も大歓迎です！

  • Githubリポジトリにstarやブックマークを付けてもらえると、更新の励みになります！

他人のリポジトリへのプルリクの仕方、よく分からない！！(僕もそうでした)という場合も、ここからEditしてもらうと勝手にGithubのプルリクになります。便利…！
f:id:izm_11:20200704175802p:plain

github.com

作って良かったこと

Docusaurus 便利

  • Docusaurus v2
  • Github Pages
  • Github Actions(CI/CD、これはプルリクをもらいました)　

で技術サポートサイトっぽいものが爆速で作れることが分かりました。たのしい！ Docusaurus · Easy to Maintain Open Source Documentation Websites

自分の知識の点検が出来た

割と抜けてそうな場所に気付くことが出来てよかったです

SHOWROOM株式会社の映像配信遅延が業界最速レベルに縮まったので嬉しいという話

概要

現在僕はSHOWROOM株式会社というところでxRのクライアントエンジニアをしています。 が、SHOWROOM株式会社はライブ配信サービスを行っています。

今回の記事は、このライブ配信サービスの方でかなり面白い取り組みが行われて、世に出たので面白さをみんなに布教したいと思って書きます。

prtimes.jp

ライブ配信サービスの話

SHOWROOMは国内ライブ映像の配信サービスとしては古株で、確か6年くらいの歴史があります。

その後pixivさん(pixiv Sketch)やCyberZさん(OPENREC.tv )や、LINEさん(LINE LIVE)など、色々な会社さんがライブ配信サービスを生み出して、国内の市場は活気づいています。

配信者と視聴者間でコメントやギフティングでリアルタイムコミュニケーションを取る感じの仕組みです。

SHOWROOMの技術的負債

先ほど説明した通りに、結構古いサービスなんです。なのでまあアプリのUIを見ると歴史的な感じがあったりします。みんなが大好きな技術的負債です。

歴史があるので、エンジニアとして配信サービスのSHOWROOM見ると「なんか運用フェーズ入っているしアプリの見た目もイマドキじゃないしなあ…」みたいな点はあります。それはそう…

SHOWROOM 最近の取り組み

そんなわけで、最近は技術的負債をなんとかしつつ、新しいことにチャレンジしていきたいようね、という話がありました。xR部門がモリモリ人を集めてオモシロプロジェクトが複数走ったりしているのも、そういう経緯です。

新しい事にチャレンジという一環で、SHOWROOMの超低遅延配信化が行われました。

先に結果を書くと、配信者の映像が視聴者の端末に表示されるまでに掛かる時間が、 10秒くらいから最小0.5秒未満 になりました。

低遅延だと何が嬉しいか

僕はVTuberおたくなのでYouTube Liveをよく見ますが、配信者に人気の配信だとコメントが届くまでに10秒以上時間がかかってます。そうすると配信者が10秒前に話していた内容にコメントすることになります。タイミングが微妙です…会話がかみ合わない感があります。

この遅延は安定して多数の視聴者が映像を見るには必要悪で、現在の 普通の技術スタックでライブ配信サービスを作ると、大体遅延が10秒くらい になります。

なんで映像を届けるのに10秒も掛かるの？

映像配信を皆様のお手元に届けるまでには

配信者のカメラ映像→H264エンコード→RTMPストリーム→映像配信サーバがRTMPストリームを受取る→映像配信サーバがコマ切れのHLS形式ファイルにトランスコード→CDNにHLSファイルを配置→視聴者がCDN経由でHLSファイルを取得→映像バッファとしてビデオプレーヤーに取り込む→視聴者の端末で絵が見える！！！

という流れがあります。めっちゃ大変…

特に視聴者の手元で映像がプツプツするとまずいのでHLSファイルの取得は余裕をもって何秒か先まで取ってくる必要があったりします。

例えば1:1で接続、とか少人数相手だと上に書いたような大掛かりな仕組みが不要になって、2秒以内に映像を届けることもできます。DiscordさんとかSkypeさんとかですね！

今回の超低遅延配信実装のやべえところ

  • ↑に書いためちゃくちゃ面倒くさい流れのサーバ側をゴリゴリ自前で根性実装した結果、最小0.5秒以内で映像が届きます。
  • この遅延の少なさは、国内最速レベルです。(OPENREC.tvの超低遅延配信も同じくらいだったはず)

技術的にどうやってるの？という事が気になった方はこちらのスライド参照ください。

www.slideshare.net

超低遅延配信が実現すると何が起きるか

映像の遅延が少ないとコミュニケーションが早くなります。打てば響くようになります。

VTuberのおたく的に言うと、コメントして読んでもらえるまでが2秒以内になったりします。身近に感じますね。

//ZIZAIさんのIRIAMはもっと過激で、映像を送らずにモーションライブ方式、独自プロトコルを利用することで遅延が0.1秒以内です。音速より速いかも。やべえ…

note.com

余談

SHOWROOM株式会社は、技術的におもしろおかしい事を奨励する風土があります。

xR含め、エンジニア陣も頑張ってます。興味がある方、一度遊びに来てくれませんか～！！！

趣味の電子工作をする前に知っておきたかったこと

概要

数年前の自分（高校卒業程度の物理は履修しているが、趣味で電子工作をしたことがない）が読んだときに学習をショートカットするための知識をまとめておこうと思ったので書きます。

同じように電子工作を始めようとして、躊躇している人が居たら、参考になるかもしれません。 ちょうど家にいる時間が増えているこのタイミングで、技術の幅を広げるのも楽しいと思います！

  • この文章は趣味レベルの電子工作で遊んでる僕が独断で書いたものです
  • 高周波回路や、高電圧を扱うような工作ではなく、ホビー用途を対象としています
  • 技術的な誤りがあったらごめんなさい…

このエントリに書いてある程度の理解力でも、こんな感じの事は出来るようになりました。

よくある質問と答え

電子工作ははんだ付け難しくない？

半分正解で半分間違い。

  1. 白光のはんだごてを使うと、技術の時間で苦労したのが冗談みたいに半田付けが楽になります。

    白光 ダイヤル式温度制御はんだこて FX600

    白光 ダイヤル式温度制御はんだこて FX600

    • 発売日: 2012/01/18
    • メディア: Tools & Hardware

  2. はんだ吸い取り線は不便なのではんだシュッ太郎を使うと、割と失敗したときのリカバリが出来ます。

    サンハヤト はんだシュッ太郎NEO 45Wタイプ HSK-300

    サンハヤト はんだシュッ太郎NEO 45Wタイプ HSK-300

    • メディア: Tools & Hardware

  3. 2.54mm幅のピン程度なら、はんだごてのこて先を太いものにすると、より簡単にハンダ付けできます。

  4. こて台は金色のこれがおすすめ。だけど安い他のでも大丈夫です。

    白光(HAKKO) こて台 633-01

    白光(HAKKO) こて台 633-01

    • メディア: Tools & Hardware

ユニバーサル基板にちゃんと実装するの大変では？

ユニバーサル基板っていうのはこういうやつです。 f:id:izm_11:20200505193014p:plain

実はこの数年、ユニバーサル基板は使ったこと無いです。

深圳のPCBサービス(PCBwayやPCBGOGO)と後述のKiCADがあれば、毎回基板を起こして発注してしまえます。到着時間も数千円で1週間程度なので、週末工作も可能です。

また、試作時点ではブレッドボードで大丈夫です。 ブレッドボードはこういうやつです。

f:id:izm_11:20200505193114p:plain

回路図に何が書いてあるかわからない

とりあえず、どこにコンデンサを入れると良い、とか抵抗の値は…みたいなのが読めなくても、結線するだけでなんとなく使えるブレイクアウトボード（breakout board）という形で各種センサーは入手できることが多いです。

ブレイクアウトボードの場合は配線も2.54mm幅になっていることが多いので、ハンダ付けもしやすく、多くの場合は繋げば動くので大丈夫です。

基板を起こすっていうとコンデンサとかも全部配置しないといけないの？

これが僕がハマっていた罠でした。 世の中には既に良い感じに配線済みのブレイクアウトボードがあるので、ブレイクアウトボードを幾つかそのまま乗せて、マイコンを乗せるための穴だけ開いて配線だけをPCB基板に作る。という作り方をしても（多少不格好でサイズが大きくなりますが）動きます。

十分コレでも楽しめるので、ブレイクアウトボードを何個か乗せるだけの基板を作ることに躊躇しないようにしましょう。そうすると出来ることが大幅に増えます。

電子工作はお金がメチャクチャ掛かりそう

それはそう…とは言え

  • Arduinoなどのマイコンは互換品がAmazonとかで買える(数百円から千円程度)
  • センサーの中華製ブレイクアウトボードもAmazonで買える(数百円)
  • ピンヘッダやジャンパワイヤ、ブレッドボードもAmazonで買える(数百円)
  • どうしても無さそうならAliexpress経由で買うことで安く買える（納期は長い）

なので、はんだごてとシュッ太郎など工具だけ揃えたら、開発環境は無料でもそろっていて、個別部品も中華クローンなどがあるので安価に作ることが出来ます。

出来上がった基板を収めるケースが高い…

実はこれも罠で、タカチ製のちゃんとしたケースとかを使うより、3万円程度の3Dプリンターを買って、Fusion360でケースを設計してプリントした方がピッタリサイズになるし、ランニングコストがそれほど掛からないので便利です。

電子回路をケースに入れずに裸で運用していると、うっかり金属に触れてショートして壊してしまう可能性も減るので、ケースを作れる環境は用意しておくと安心です。

ソフトウェアを書くのが凄く面倒くさそう…

Arduinoの標準IDEはお世辞にも高機能とは言いづらいですが、VisualStudio CommunityとVisualMicroの組み合わせや、あるいはVSCodeとArduinoプラグインなどの開発環境であればコード補完も効くので効率的に開発できると思います。

どんな学習ルートで進めば良いの？

最初にArduinoの全部入りセンサーキットとか工具を買う

Amazonで数千円です。工具は上に書いたものを揃えておけば、大丈夫じゃないかなと思います。
ミニマルに始めるならはんだごてだけでも大丈夫です！
また、ソフトウェア畑の人であれば、初めてのマイコンにM5StackやM5StickCなども良いかもしれません。

ブレッドボードで実験して動いたら、動いた回路の組み合わせをKiCADで再現する

基板を作るためのCADであるKiCADを覚えましょう。fritzingとかEagleとかより情報量が段違いなので。 以下のリンクを読んで、KiCad 5.0 / 5.1 入門実習テキスト『KiCad Basics for 5.x』を読めば大体それっぽくなります。

qiita.com

booth.pm

KiCAD上で完全に回路を再現するためのカスタムIC部品の製作、とかも手を出すとステキですが、似たサイズのピンヘッダやピンソケットを代わりに置いてしまえば大丈夫です。

また、配線を手でやらなくても配線自動生成（AutoRouting）を使うことで凄く簡単にそれっぽい基板になります。KiCADの回路図エディタを怖がらずに数時間使ってみると、 配線自動生成のお手軽さの恩恵を受けられて、すぐに投資した時間を回収できます。

ケースを作るために3D CADを覚える

非商用であればFusion360が無償です。情報がとても多いのとYouTubeの解説講座も充実しているので、おすすめです。

また、3Dプリンタは3万円程度の物でも（ケース程度であれば）十分に使えます。

ThingsverseにあるケースのstlファイルをFusion360に読み込んで、無理やり改変して取っ手を付けたりサイズを調整する、というところまで出来るようになると、一気に世界が広くなった気持ちになります。

好きなものを作る

Enjoy!

電動昇降デスクとオーダー天板で夢の作業環境を自室に構築した話

概要

自室の模様替えをする機会があり、今まで使っていた机を処分して新規に用立てたらメチャクチャ快適になったので書きます。

f:id:izm_11:20200203222505j:plain f:id:izm_11:20200203222432j:plain

f:id:izm_11:20200203222642j:plain

セットアップとしては

  • 椅子（ハーマンミラーのエンボディチェア）
  • 電動昇降デスクの脚（FlexiSpotのE3B）
  • オーダー天板（パイン集成材）

という組み合わせになります。その他ケーブル周りの色々小道具を買いました。

掛かった費用としては、机周りで合計7万円弱くらいです。

今回の大事な点、電動昇降デスクとオーダー天板

電動昇降デスク

電動昇降デスクは、スタンディングと椅子を自由に切り替えられます。
健康志向というか、集中力を維持し続ける為に腰痛対策としてスタンディング机との切り替えが必要になりました。

手動昇降デスクでハンドルを回して高さを調整したりするのは、怠惰な僕には無理なので

  • 電動昇降機能
  • ワンボタンで指定した高さに切り替えられるプリセット付き
  • 最低時の天板の高さを65cm以下に出来る

という3点を重視して FlexiSpotのE3B を選びました。

FlexiSpot 電動式スタンディングデスク 高さ調節スタンドアップワークテーブル学習机勉強机 ブラックE3B（天板別売り）

FlexiSpot 電動式スタンディングデスク 高さ調節スタンドアップワークテーブル学習机勉強机 ブラックE3B（天板別売り）

  • メディア: エレクトロニクス

電動昇降デスクは選択肢が幾つかありますが、最低時の机の高さが70cmを超えていると、結局肩が凝ったり、フットレストを用意する事になります。

一般的なオフィス用机の高さは72cmですが、これは身長175cm以上の人にフィットします。僕はそこまで背が高くない…

参考

www.bauhutte.jp

今回購入した FlexiSpotのE3Bは最低時に60cm（これに天板厚が3cmだと、計63cm）なので、多くの人にフィットすると思います。

天板

今回は幅1800mm以上、奥行き700mmの天板を想定していました。このサイズの天板がある電動昇降デスクは、市販だと結構高いのでDIYする価値があります。 （参考：オカムラ swiftで15万円程度）

横幅1820mm ：電子工作や複数PCの同時立ち上げ検証をする機会があるため、出来るだけ幅を確保したいと考えて1820mmです（今回買ったFlexispotの電動昇降デスク脚のサポートする最大幅が1800mmです）

奥行き700mm ：今まで奥行き600mmの机を自室で使っていて、不満があった部分なので10cm足しました。（職場の机の奥行きと合わせました）

多くの先人 たちが、マルトクショップで天板をオーダーしていたので、それに倣って注文しかけたのですが
【DIY】木材の天板で仕事用デスクを自作してみた｜コウノ アスヤ｜note

マルトクショップの見積もりを見たら結構高かったので、お手軽価格の物を探しました。

天板に使う木としてはスーパービバホーム豊洲でパイン集成材が1820mm x 910mm x 24mm で5980円です。いわゆるサブロク板です （この記事にあるようなスギ集成材も同じようなサイズと価格で良さそうです）

99diy.tokyo

天板自体は6000円ですが送料と加工費で約7000円くらい（本体より高い！！！）です。プラス思考に考えると、加工費入れてもIKEAの送料より安いとも言えます。スーパービバホーム豊洲は神。

出来上がった後の写真

天板を一番下げた時の様子

f:id:izm_11:20200203222755j:plain

  • 天板が地上高63cmの場所にあります　（これは身長161cm の人の最適らしいです）

  • エンボディチェアは肘掛けの可動範囲が広いので、天板が低いデスクでも肘掛け衝突を避けられて良いです

普段のスタンディング時の様子（椅子とのスペースに注目）

f:id:izm_11:20200203222735j:plain

  • 85cmくらいの高さにしています
  • 椅子は撮影時の比較用に置いてあります。普段はスタンディングで使っている時、椅子は後ろに逃がしています。

    背面の取り回し

    f:id:izm_11:20200203222831j:plain

  • エルゴトロンのLXマウントアームとか、モニタ裏にPSVRコントロールボックスを貼り付けるとか、色々やってます
  • 43インチモニタを作業用に使う場合は、脚を取り払って机天板にモニタ下部をベタ付けする為に、モニタアームを使うのがオススメです。モニタの上の方を見るときに、首が疲れなくなります

天板裏のケーブル周り処理

f:id:izm_11:20200203222550j:plain

天板の塗装

f:id:izm_11:20200203233419j:plain 東急ハンズ渋谷店でワトコオイルのダークウォルナットと布の端切れ、ビニール手袋などを買って端切れをそのまま手袋越しに掴んで室内で2度塗り。 天板の梱包に使われてたプチプチが養生になるので、うっかり捨てなくて良かった…

天板の加工依頼

f:id:izm_11:20200204001838p:plain

こんな感じのポンチ絵を用意して天板を買ったホームセンターで加工の人にお願いしました（照

まとめ

  • 7万円くらいと、ちょっとの覚悟があれば、市販で買うと結構高いサイズの電動昇降デスクが手に入ります。
  • オシャレなMacベースと無線で構築したケーブル少ない仕様、とかは仕事内容的に難しい人も、試す価値があります。VR関係の開発はケーブル地獄になりがち…
  • 電動昇降デスクって床にPCあるとケーブルの伸び縮みやばいんじゃないかと思うかもしれないけど、天板の上下幅は40cmそこらなので、ケーブルをピンと張らずに遊びを持たせておけばなんとかなります。
  • 机の横に棚が無いと、天板の上が物置になるので、まずは机の横に棚を買おう！おっきくて背が高いやつ！

以下余談

ツイッターの様子

組み立てに電動ドライバーが必要になる

こういう安いやつで良いのであると便利です。手で回すと死んでしまう…
アイリスオーヤマさんの電動ドライバーは、USB充電出来てバッテリーで使えて便利！

アイリスオーヤマ 電動ドライバー 充電式 RD110-W ホワイト

アイリスオーヤマ 電動ドライバー 充電式 RD110-W ホワイト

  • メディア: Tools & Hardware

その他機材