😊

ブラウザ上でリモートデスクトップを実現するサービスHyperbeamとPlayCanvasを組み合わせるデモがすごい！

2023/06/23に公開

WebGL

playcanvas

hyperbeam

tech

AppleのVision ProでWebXR対応などが盛り上がっているように感じます。その中で使える体験ではないかと考えられる、PlayCanvasとHyperBeamというサービスを組み合わせてリモートデスクトップを実現する面白いデモがありましたので紹介します。

デモ制作者(@yaustar)さんのツイート

作者のyaustarさんのツイートですが、HyperBeamと組み合わせたPlayCanvasで利用できるデモを公開しています。

更に、VR上で動くアーケードゲームも作成されています。

この記事について

上記のデモを元に、複数人でリモートデスクトップとしてアクセスできるウェブページを作成してみたのでその手順を紹介します。

実行URL: https://playcanv.as/e/p/B6B4j7kx/

URLにアクセスいただくとブラウザが開かれ、その中にリモートデスクトップが表示されます。
複数人で操作ができ、リアルタイムで同期されます。また、WebXRに対応しているため、VRヘッドセットを使って操作することもできます。

PlayCanvasについて

PlayCanvasは、ウェブ上で3Dコンテンツを作成・配信するためのプラットフォームです。これはWebGLエンジンをベースにJavaScriptで開発されており、最近、GitHubのスター数が8500超えました。PlayCanvasはSaaS（Software as a Service）型のエディターも備えており、エンジンそのものは、オープンソースソフトウェアとして公開され、Snapのメンバー中心に継続的に開発がめられています。エンジン自体を単体として使用する場合、Three.jsやBabylon.jsなどの他のWebGLライブラリと似た方法で使うことができます。PlayCanvasエディターを利用する場合は、コードエディターががあり、プロジェクトの作成から公開までをすべてクラウド上で行えるツールです。

Hyperbeamについて

HyperBeamはウェブサイト上にリモートデスクトップを埋め込むことができるサービスです。
今回の記事で利用するようにWebGLへの埋め込みに対応しています。

PlayCanvasのアカウント登録

PlayCanvasのアカウントをまだ登録されていない方は、こちらのウェブページからPlayCanvasのアカウントを作成します。

https://playcanvas.jp/

Hyperbeamのアカウント登録

まずはじめに、Hyperbeam (https://hyperbeam.com/) にアクセスしてアカウントを登録します。

API キーの発行

登録が完了したら、ダッシュボード上で「Reveal test key」からAPIキーを発行します。
この API キーは、次の手順で使用します。

Curl で PlayCanvas 埋め込み用コードを発行

次に、ターミナルやコマンドプロンプトを開き、以下のコマンドを実行します。<your-api-key> の部分は、手順 2 で発行した API キーに置き換えてください。

curl -X POST -H 'Authorization: Bearer <your-api-key>' https://engine.hyperbeam.com/v0/vm

実行すると、以下のようなレスポンスが得られます。

{
  "session_id": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxx",
  "embed_url": "https://xxxxxx.hyperbeam.com/xxxxxxxxxxxxx",
  "admin_token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

このレスポンス内にある embed_url は、次の手順で使用しますのでコピーをしておきます。

PlayCanvasプロジェクトの作成

PlayCanvasではフォークという形で公開プロジェクトの設定やアセットを引き継いで、新しいプロジェクトを作成することができます。次に、以下のリンク先の PlayCanvasプロジェクトをフォークします。
今回は、Hyperbeamのデモをフォークします。

フォーク元のURLにアクセス

フォークボタンをクリック

プロジェクト名を入力してフォーク

ダッシュボードからプロジェクトを起動

PlayCanvasプロジェクトの設定

プロジェクトを開き、シーンを選択すると、3Dのシーンが表示されています。このプロジェクト内で、「Root」 → 「Hyperbeam Browser」エンティティ（オブジェクト）の中にある、hyperbeamBrowserのスクリプト属性(embedUrlに、前の手順で取得した取得した embed_urlを貼り付けます。