WebXR＋IoTでメタバース的なものを創る(ガリバートンネル的な世界)
※ SkyWay-conf で ReactJS を使用します。
WebXR について
1日目の @ikkou さんの記事をご参照いただくと早いと思います（とても勉強になりました🙇♂️🙇♀️）。
メタバースって結局は何？
少し前の話になりますが、 Facebook が社名を Meta に変えましたね。
メタバースとは何でしょう？
（これは詳しい人に聞いていただいたほうが良いと思います）
自分は「SNSの延長にメタバースがある」と考えるほうが自然かな？と思っています。
（メタバースの本質は「人間そのもの」で、それを「メタデータで補完した世界」？）
- Meta : 本体とは別の、スムーズに本体を受け入れてもらうための情報（メタデータ）
- Universe: 宇宙のようなとても大きな空間
参考記事（テッククランチ）:
Oculus買収の動機を探る―Facebookが買ったのは来るべきバーチャル世界だ
※古い記事ですが、Facebookの方針はブレていないと感じます！
ところで、あなたはだれ？
VTeacher の m-suzuki です。
SUZUKI SOFTWARE LABO, LLC というスタートアップを創業し、主に VTeacher の開発・運営をしています。昔はCyberAgentやGREEにいました。その後に創業、フリーランスもやっています。
-
開発しているサービス（VTeacher）
iPhoneで簡単にオンライン授業ができるプラットフォームを開発しています。
- m-suzuki がやってきたこと
| 分野 | 内容 | 内容 |
|---|---|---|
| Front | Mobile | Objective-C, Swift, Java, Kotlin, Android NDK(C++), RxSwift, RxJava, VIPER |
| Web | HTML, CSS, JavaScript, Node.js, npm, yarn, JQuery, ReactJS | |
| VR/AR/MR | Unity(C#), C, C++, Java, Three.js, WebGL, Oculus(Rift/GearVR/Go/Quest) | |
| Back | PHP | PHP(Ethna/Codeigniter/Zend Framework), Linux, Apache, Nginx, MySQL, Postgresql, WordPress, WebAPI(REST), PHPUnit, Selenium, Codeception |
| JVM | Java(JSP/EJB/Struts/Velocity/Seasar2), Scala, JavaScript, Oracle, MySQL, Solaris, Linux(RedHat/CentOS), JRun, HitachiCosmiNexus, Web Logic, Tomcat, Play, Apache, Nginx, WebAPI(REST), JUnit, Jmeter | |
| Infrastructure | AWS(EC2, Lambda, Batch, ECR, ECS, EKS, S3, RDS, VPC, CloudFront, Route 53, API Gateway, Cloud9, MediaLive, MediaPackage, MediaStore, Elastic Transcoder, Simple Email Service) | |
| DevOps | Docker, Jenkins, CircleCI, GitHub Actions |
この記事のテーマ
本記事は 『WebXR』をテーマにしたアドベントカレンダー『WebXR ( WebVR/WebAR ) Advent Calendar 2021 7日目の記事です。
WebXRについて、みなさんすでに多くの知見を述べられているので、私は遠隔操作のラジコンにWebXRをちょこっと加えた、メタバースっぽいものについて書いていきます（あくまで「ぽい」もの）。
この記事でチャレンジすること
- JavaScriptで遠隔操作ができるラジコンを作ってみよう
- ZoomのようなWeb会議ツールを作ってみよう
- Webブラウザ上に3D空間を作ってみよう
最終的なゴール（完成目標）はこのようなイメージ。
ドラえもんの ガリバートンネル のような世界で遊んでみる。
1. JavaScriptで遠隔操作ができるラジコンを作る
JavaScript に対応している IoT 開発ボード。obniz（オブナイズ）を使ってみます。
Amazon で 1万2千円くらい です。
※ アソシエイトリンクです。非アソシエイトリンク はこちら
10分もあれば組み立てられると思います。
obniz は JavaScript で制御できますので、組み立てた後、
obniz のコンソールを開き、
「サンプルプログラムを開く」をクリックし、あなたが購入した obniz の「obniz ID」を入力すると、専用のエディターが開きます。
遠隔操作用ができるように obniz のプログラム（JavaScript）を変更してみましょう。
WebSocket が利用できますので、これを使って遠隔地からの操作を実現します。
（WebSocketサーバを用意しておいてください）
WebSocketの実装例:
const roomId = 'XXXXXXXXXX';
const webSocket = new WebSocket(`wss://あなたのWebSocketサーバ/${roomId}`);
webSocket.onopen = function (event) {
console.log('WebSocket is open now.');
};
let remote = '';
webSocket.onmessage = function (event) {
let data = JSON.parse(event.data);
remote = data.remote;
};
obniz の frameごとの処理は、とてもシンプルです。 while (true) { } が用意されているので、その中に記述します。例えば、別の端末（PCやスマホ）から上述の WebSocketサーバ に 文字列 f を送信した場合、前方に進むようにするなら、次のように記述すればOKです。
if (remote === 'f') {
airobotkit.move('forward');
await ObnizUI.Util.wait(500);
airobotkit.stop();
} else {
remote = '';
}
同様に b が送信されたら back の処理を記述します。
r を押したら「右に向く」、 l を押したら「左に向く」については、下記のように左右のモーターを利用して回転させます。
airobotkit.move(leftPower, rightPower)
遠隔操作可能なラジコンが完成しました。
2. ZoomのようなWeb会議ツールを作る
「常時接続型のコミュニケーション」ができる環境を用意してみましょう。例えば、Discord や Zoom のようなサービスをイメージしています。
手取り早くやってみるなら、SkyWay がおすすめです。SkyWay は NTTコミュニケーションズが提供しているサービスです。
※Community Edition（無料版）を利用してみましょう。
SkyWay は SkyWay-conf という SkyWay を使った Zoom のようなWeb会議ツールをオープンソースで公開しています。
SkyWay-conf は ReactJS で作られています。ソースコードを自由に変更できるので、SkyWay-conf をベースにして、メタバースっぽい実装をしてきましょう。
で、 SkyWay-conf をスマホで起動して、 1 で作ったラジコン（obniz）に載せたものがこれです。
※ 少し改造してカメラにVRMを使用しています。
遠隔操作で移動可能なWeb会議ツールが完成しました。
いよいよWebXRの世界。
3. Webブラウザ上に3D空間を作ってみる
SkyWay-conf はWeb会議ツールらしいUIですので、これをメタバースっぽく変えていきます。
こんなイメージ。
3D化するには、A-Frame を使います。
（他にも方法がありますが、A-Frame はとても簡単）
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
SkyWay で映像を表示している <video> タグの映像 を、A-Frame を使って3D空間に映し出します。
A-Frame の <a-scene> を作成し、 <a-assets> の中で SkyWay の <video> を配置します。<a-video> でサイズや位置を設定します（ src で指定している #video は、<video> の id になります）。
実装例:
<a-scene>
<a-assets>
<video id="video" autoplay loop="true"></video>
</a-assets>
<a-video src="#video" width="40" height="20" position="0 0 -20"></a-video>
</a-scene>
こうすることで、遠隔地の映像（ SkyWay で受信した映像）を3D空間で見ることができます。
（下の動画のように、マウスでグリグリと回すことができます）
VRMを読み込んで、アバターを3D空間に立たせる
お好きなVRMファイルを用意してください。
VRM は gltf フォーマットがベースなので、拡張子を .vrm から .glb に変えれば、A-Frame の <a-gltf-model> を使用して3D空間に配置することができます（ファイルによっては正常に動作しない場合があります）。
<a-asset-item id="model" src="XXXXX.glb"></a-asset-item>
<a-gltf-model src="#model" position="0 0 0"></a-gltf-model>
※ position や width/height 等は適宜修正
実装例:
<a-scene>
<a-assets>
<video id="video" autoplay loop="true"></video>
<a-asset-item id="model_gltf_01" src="vrm.glb"></a-asset-item>
<a-asset-item id="model_gltf_02" src="vrm.glb"></a-asset-item>
<a-asset-item id="model_gltf_03" src="vrm.glb"></a-asset-item>
</a-assets>
<a-video src="#video" width="40" height="20" position="0 0 -20"></a-video>
<a-gltf-model src="#model_gltf_01" position="-5 -10 -10" rotation="0 0 0" scale="5 5 5"></a-gltf-model>
<a-gltf-model src="#model_gltf_02" position="0 -10 -4" rotation="0 0 0" scale="5 5 5"></a-gltf-model>
<a-gltf-model src="#model_gltf_03" position="5 -10 -10" rotation="0 0 0" scale="5 5 5"></a-gltf-model>
</a-scene>
車を3D空間に配置する
車に乗っているようにしてみましょう。こちらのモデルを使います。
<a-asset-item id="model_gltf_car" src="ToyCar.glb"></a-asset-item>
<a-gltf-model src="#model_gltf_car" position="0 0 0"></a-gltf-model>
※ position や width/height 等は適宜修正
動作イメージ（他のモデルの方がわかりやすかったかも、反省）
操作について
PCのキーボードで f を押したら「進む」、 b を押したら「戻る」、 r を押したら「右に向く」、 l を押したら「左に向く」と操作できるようにします。
- 視聴者が押したキーボードの文字を WebSocketサーバに送信しましょう。
- obnize側でそれに応じた処理を実装しましょう。
- 参加者と会話をしてみましょう。
ドラえもんの ガリバートンネル のような世界が伝わったでしょうか？
最後に
見た目のクオリティは、下の動画（ Oculus Quest のビッグスクリーン）のレベルくらいに持っていけるとカッコイイですね。
社外の Advent Calendar に参加したのは初めてでしたが、とても良い経験になりました。
楽しかったです。また参加させてください！
Discussion