🌊

【PlayCanvas】WebXRを使ったハンドトラッキングの新しいチュートリアルプロジェクトが公開されました！

2023/07/24に公開

WebGL

WebXR

playcanvas

tech

PlayCanvasの開発者Will Eastcottさんのツイートで新しいWebXRハンドトラッキングのデモプロジェクトが公開されました。PlayCanvasエディターで利用可能で、手の3Dモデルを使ったデモです。今回の公開されたデモは、PlayCanvasエディターで利用可能な手の形状の3Dモデルを使用したハンドトラッキングのWebXRプロジェクトです。他のデモもExamplesにあります。

公開されたデモがこちらです。

2023年7月24日に、PlayCanvasの公開プロジェクトへのリンクとともに、WebXR（VR）を利用したハンドトラッキングのデモが公開されました。このプロジェクトは現在、Quest 2やQuest Proなどのデバイスで利用可能であり、将来的にはAppleのVision Proなどでも利用できる可能性があると考えられます。

PlayCanvasについて

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

プロジェクトをフォークして中身を見てみる

早速デモを試してみます。今回は、PlayCanvasのフォーク機能を利用して、元のプロジェクトからカスタマイズをしてハンドトラッキングのデモを作ってみます。PlayCanvasエディターのプロジェクトのフォーク機能は、既存のプロジェクトをコピーして新しいプロジェクトを作成する便利な機能です。プロジェクトページでForkボタンをクリックすることで簡単に利用でき、好きなプロジェクト名を入力して新しいプロジェクトを作成できます。

プロジェクトURLにアクセスしForkボタンをクリック

プロジェクトページにアクセスし、Forkを選択します。

PlayCanvasではPublicのプロジェクトはForkとしてコピーをして作り始めることができます。

プロジェクト名を入力しForkをクリック

プロジェクト名を入力してプロジェクトを作成します。

好きなプロジェクト名を入力

「EDITOR」をクリック

EDITORをクリックし、プロジェクトに入ります。

ダッシュボードからウェブ上のエディターにアクセスができます

プロジェクトの中身について

プロジェクトの中身はCamera、Light、2D Screen、Left Hand, Right Handがあるシンプルなプロジェクトです。

フォークしたプロジェクトにはスクリプトなども設定されています

手のエンティティについて

それぞれの手のエンティティの中身にはメッシュとボーンが入っています。
これにより、手の動きが可能になっているようです。

LeftHandのヒエラルキーの階層構造

利用している3Dモデルの構造をBlenderで確認すると、以下のようにメッシュとボーンが入っている3Dモデルとなっています。

プロジェクトの3DモデルをBlenderで表示

プロジェクトを起動する

PlayCanvasのプロジェクトを起動すると、「Enter VR」と表示されたプロジェクトが開かれます。「Meta Quest 2」や「Quest Pro」などのハンドトラッキングに対応している端末からは、PlayCanvasのLaunch URLのプロジェクトURLにアクセスすることで体験が可能です。

起動されたプロジェクト

（応用）プロジェクトのカスタマイズと当たり判定の追加

プロジェクトをカスタマイズして、手で触れた指に応じてスフィアの色が変わるようにします。

人差し指で触れると青、小指で触れると赤に変化

空のスフィアを作る

PlayCanvasで空のスフィアを作成するには、ヒエラルキーから追加できます。
その後。当たり判定とコンポーネントの設定などを行います。

1. 「ヒエラルキー」右クリック→「3D」→「Sphere」をクリック

2. 位置 (Position)を調整

3. 「ADD COMPONENT」→「Physics」→「Collision」を追加

4. 「IMPORT AMMO」をクリック

5. 「TypeをBox」から「TypeをSphere」に変更

6. 「ADD COMPONENT」→「Rigid Body」を追加

設定完了

コンポーネントを設定後の「Sphere」

指に当たり判定を付ける

指に当たり判定を付けるためには、各指（例：人差し指、小指）に対して「Collision」と「Rigid Body」のコンポーネントを追加します。

1. 小指(`pinky-finger-tip`)に「Collision」と「Rigid Body」を追加

Sphereとは違い、指は動く当たり判定のためRigid BodyTypeをKinematicに変更

2. 人差し指(`index-finger-tip`)に「Collision」と「Rigid Body」を追加

Sphereとは違い、指は動く当たり判定のためRigid BodyTypeをKinematicに変更

スフィア(Sphere)にスクリプトの設定

PlayCanvasのスフィアは「Sphere.js」というスクリプトを設定します。
その後、スクリプト属性として設定されたマテリアルに変更をするスクリプトを作成し実装をします。

1. スクリプト（`Sphere.js`)をプロジェクトに追加

プロジェクトのアセット一覧で右クリックをし、スクリプトSphere.jsを作成します。

ASSETの右クリックでスクリプトの追加

const Sphere = pc.createScript('sphere');
Sphere.attributes.add("colors", { array: true, type: "asset", assetType: "material" });

Sphere.prototype.initialize = function () {
    this.entity.collision.on("collisionstart", ({ contacts, other }) => {
        const entity = other;
        if (entity.name === "index-finger-tip") { // 人差し指だった場合
            this.entity.render.material = this.colors[0].resource;
        } else if (entity.name === "pinky-finger-tip") { // 小指だった場合
            this.entity.render.material = this.colors[1].resource;
        }
    });
};

スクリプトをダブルクリックすると、コードエディターが開かれますので、そちらに、下記のスクリプトをコピー・アンド・ペーストをして保存をしてください。
※Ctrl + Sで保存ができます

2. エンティティに`Shpere.js`を追加

スフィア（Sphere）のエンティティを選択し「ADD COMPONENT」→「Script」コンポーネントを追加した後、「ADD Script」をクリックして、Sphere.jsを追加します。

3. マテリアルの設定

4. マテリアルをスクリプト属性に追加

青色と、赤色のマテリアルを2つ作成してblue / redと名前を変更して、スクリプト属性にドラックアンドドロップをします。

完成プロジェクト

人差し指で触れると青、小指で触れると赤に変化

これで、プロジェクトが完成しました。お手軽にWebXRのハンドトラッキングのプロジェクトを作成できますのでぜひお試しください。

デモURL: https://playcanv.as/p/JLGYXcmt/

なにかありましたらTwitter: mxcn3へお願いします。