BLOCKVROCK を使ってノーコードでメタバースを作ってみよう｜WebXR を使ってメタバースを構築してみよう ～後編
今回は WebXR をはじめ VR / AR を使った、子ども向けプログラミング教育で先行する株式会社レベルエンター様に、メタバースで注目の WebXR について寄稿いただきました。
前編 / 中編 / 後編と分かれ、技術解説だけでなく、実行環境なしに簡単に試せるサンプルプログラムで実際にメタバースも構築できます！
この後編では中の仕組みに WebXR が使われている BLOCKVROCK を使ってノーコードでメタバースを構築します！
もくじ
WebXR とは
WebXR は VR 、 AR といった技術の総称である XR を Web 上で実現するための技術であり、 HTML 、 CSS 、 JavaScript といった一般的な Web 技術で構成されます。
前編、中編記事では WebXR の概要の解説と、代表的な開発フレームワーク、ライブラリである、 A-Frame 、 AR.js を使って WebVR 、 WebAR の簡単なサンプルを作成しました。
WebXR とは ｜WebXR を使ってメタバースを構築してみよう ～前編
WebXR を使って 15 行のコードで VR / AR を作ってみよう｜WebXR を使ってメタバースを構築してみよう ～中編
メタバースとは
最近になってコンピューター上の仮想空間や、その仮想空間を利用したサービス等を指すメタバースという言葉が注目され、バズワードとなっています。
メタバースは、様々なユーザーがアクセスできる VR 空間上での現実と相違ない体験を指す単語として扱われることが多いのですが、実は明確な定義はありません。
BLOCKVROCKでメタバース体験
BLOCKVROCK とはビジュアルプログラミングのコードから A-Frame のコードを生成して小学生やプログラミング未経験者でも VR 、 AR を構築できる、教育向け無料のコーディングサービスです。
今回はこの BLOCKVROCK の空間共有機能を使って簡易的なメタバースを構築してみましょう。
BLOCKVROCK でのコーディング
BLOCKVROCK は Google が提供する、ブロックでビジュアルコーディングができるライブラリ Blockly を採用しており、コードブロックを組み合わせて VR 、 AR プログラムを簡単に構築できます。
こちらがコーディングを行うエディター画面です。
左側のブロックが配置されているサイドバーをツールボックス、画面中央の斑点模様が描画されている広い空間をワークスペースと言います。
Blockly ベースのビジュアルコーディングでは、ツールボックスからブロックをドラックアンドドロップでワークスペースに配置し、ブロック同士をくっつけることでコーディングを行います。
参考に中編記事で紹介した VR サンプルと同じコードを BLOCKVROCK で作成します。
今回のサンプルのような簡単なコードであれば、上記のように 4 つのブロックをドラッグアンドドロップで組み合わせるだけで構築できます。
以下が実行結果です。
BLOCKVROCK でメタバースを構築してみる
では、実際に BLOCKVROCK を使ってメタバースを構築します。
BLOCKVROCKの準備をする
- BLOCKVROCK のホームページにアクセスしましょう。
- アカウントを作成してサインインします。
- サインインすると、上記のようなプロジェクト一覧のページに遷移します。
BLOCKVROCK では作成したプログラムをプロジェクトとして管理します。
左上の「あたらしくつくる」をクリックしプロジェクトを作成します。
- 名前のないプロジェクトが作成されました。
プロジェクトをクリックし、コーディング画面に遷移します。 - 下記の画面が表示され、ツールボックスからドラッグアンドドロップでブロックをワークスペースに配置していきます。
これで準備は完了です。
続いて、ビジュアルプログラミングで VR 空間を構築しましょう！
ビジュアルプログラミングで VR 空間を構築
まずは VR 空間を作りましょう。
- ツールボックスの「シーン」にあるシーンスタートブロックをワークスペースに配置します
- 配置したシーンスタートブロックの中に「環境」にある背景ブロックと、「物体」にあるカメラブロックの中にドラッグアンドドロップで配置します
- シーンスタートブロックの 空間共有 ▼ のタブを操作し、「 ON（通話あり）」に設定します
なお、シーンスタートブロックは中編記事で紹介した <a-scene> の役割を持ったブロックで、シーンスタートブロックの中にエンティティの役割を持つブロックを配置します。 <a-scene> 内の各ブロックは <a-box> と同じエンティティの役割をもち、プロパティや属性の値を変更する項目があります。
これでコーディングは完了です。
左上の ▶ アイコンの実行ボタンをクリックし、コードを実行しましょう。
VR 空間でユーザーを表示
VR 空間ができたので、実際にユーザーを登場させてメタバース内で会話してみましょう。
- 実行ボタンをクリック後、アバター選択画面が表示されます。 アバターをクリックしてユーザ名を入力し、スタートボタンを押します
- 森の空間が表示されますが、誰も表示されません。これはユーザーが 1 人しかいないためなので（画面は自分の視界だとお考えください）、他のユーザーを招待しましょう。
- 右上の「ファイル」を開くと、「 QR コード」と「別タブで開く」というメニューが表示されるので、「 QR コード」を選択します
- 「 QR コード」が表示されるので、招待したいユーザーにスマートフォンなどで読み込んでもらいます
- 招待されたユーザーのブラウザに 1. と同じアバター選択画面が表示されるので、同様にアバターとユーザ名を入力、スタートボタンを押します
- ご自身の画面に戻ると招待したユーザーが表示されています
こちらがスマートフォン側から見た風景です。
これでブラウザ同士で通話ができるようになりました！ 一緒にメタバースを体験してみてください。
なお、上記手順の 3. の「別タブで開く」を選択すると、同じブラウザの別タブに VR 空間が読み込まれます。この場合でも別クライアントからのアクセス扱いになるので、空間共有は可能ですが、ハウリングします。 ご注意ください。
また、「別タブで開く」で開いたタブの URL を共有すると、別のユーザーもアクセスできるようになります。
WebXR の技術的課題
A-Frame 、 Three.js によって技術的な参入障壁が低くなっている WebXR ですが、その課題となっているのがデバイススペックとデバイスの多様化です。
3D 空間を構築する VR や 3D モデルを表示する AR は WebGL 等を利用してリアルタイムにレンダリングする性質上、 3D モデルのレンダリングに対応できる高性能なスペックのデバイスが必要です。
クライアントとなるスマートフォンのスペックは年々向上しており、それに伴って 3D モデルのレンダリングに対応できない機種は少なくなっています。しかし、同時に多様な機種がリリースされたことで、デバック時にデバイスごとの違いを網羅することが難しくなり、フレームワークが機種に対応していないこともあります。
メタバースなどの大規模な VR 空間や大がかりな AR を実装するには、多くのユーザーに対応できる開発を意識する必要があります。そのため WebXR 開発では、サービス提供の前提となるハードウェア、 OS 、通信回線などできるだけ多くのケースを想定することが重要です。
まとめ
WebXR は HTML 、 CSS 、 JavaScript といった Web 開発の知識や経験を応用して開発できます。専門的な技術の導入をサポートするライブラリも整っているため、多方面の技術と組み合わせた、拡張性の高い開発が可能です。
この記事を機会に WebXR に取り組む Web 開発者が増えることを願っています！
株式会社 レベルエンター
レベルエンターのプログラマー/プログラミング教育講師。
大学時代は AI 、 IoT を研究しながら、 4 年間レベルエンターで子供向けのプログラミング教育や高校向けの WebXR 授業の講師として活動。
また、 2021 年からはフルタイムで Web アプリケーションや WebXR アプリケーションの開発に従事。
BLOCKVROCK は一般公開初日のイベントで司会進行として登壇するなど関わりが深い。