チュートリアル: Babylon.js を使用して WebXR でピアノを構築する

[アーティクル]
03/21/2023

現実の世界でピアノを作るには、多くの時間、スキル、素材が必要です。 VR/AR の世界でそれを作る場合はどうでしょうか。

このチュートリアルシリーズでは、Babylon.js を使用して、仮想世界で機能する 88 鍵のアップライトピアノを含む Mixed Reality Web アプリを作成する方法について学習します。完成したアプリでは、ピアノにテレポートし、Mixed Reality コントローラーを使用して鍵盤を操作することができます。

このチュートリアルシリーズで学習する内容は次のとおりです。

メッシュを作成、配置、マージして、ピアノの鍵盤を作成する
アップライトピアノのフレームの Babylon.js モデルをインポートする
ピアノの各鍵にポインターの対話式操作を追加する
WebXR でテレポートとマルチポインターのサポートを有効にする

前提条件

インターネットに接続されているコンピューター
JavaScript の基本的な知識
WebXR JavaScript Hello World チュートリアル
WebXR でサポートされているブラウザー (例: Microsoft Edge)
babylon.js 4.2 以上
任意の VR ヘッドセットまたは Windows Mixed Reality シミュレーター
省略可能: Windows 10 Creator Update (Windows Mixed Reality シミュレーターを使用する場合)

作業の開始

まず最初に、Babylon.js のシーンを格納する HTML Web ページを設定しましょう。

babylonjs-piano-tutorial という名前のフォルダーを作成し、Visual Studio Code でそのフォルダーを開きます。

注意

任意のコードエディターを使用して作業できますが、このチュートリアルでは便利なので全体を通して Visual Studio Code を使用します。

このフォルダーに index.html という名前のファイルを作成し、次のテンプレートをファイルに挿入します。

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas"); 
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

このテンプレートの内容についてさらに詳しい説明が必要な場合は、このチュートリアルの前提条件である Hello World チュートリアルに関する記事を参照してください。

ブラウザーでこのファイルを開こうとすると、createScene() 関数が見つからないことを示すエラーがコンソールに表示されます。次のセクションでは、createScene() 関数を実装することによってこのエラーを解決しましょう。

シーンをセットアップする

index.html と同じフォルダーに、scene.js という名前の別のファイルを作成します。シーンのセットアップとピアノの作成に関連するすべての JavaScript コードを、このファイルに格納します。
createScene() 関数を scene.js に追加します。
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}
```
createScene() を非同期関数として作成していることに注意してください。その理由については後で説明します。
次に、シーンを見えるようにするためのライトとカメラが必要です。 createScene() 関数を更新します。
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    return scene;
}
```
ここで作成した ArcRotateCamera は、ほぼ完全に下を向き、空間の原点をターゲットにしています。作成したライト HemisphericLight は、空を向いており、周囲の空間をシミュレートする場合に便利です。また、強度を下げることで、光を少し暗くしてあります。

カメラとライトの作成方法を復習する必要がある場合は、次のステップに進む前に、Hello World チュートリアルシリーズのシーンの準備に関するセクションを見返してください。
最後に、WebXR プラットフォーム用の開発を行っているので、return scene; の前に次の行を挿入することによって、シーンで XR エクスペリエンスを有効にする必要があります。
```
const xrHelper = await scene.createDefaultXRExperienceAsync();
```
JavaScript の関数内の async 関数で await キーワードを使用するには、親関数も async にする必要があります。先ほど createScene 関数を非同期として定義したのは、このためです。このチュートリアルシリーズで後ほど、この xrHelper を使用して、Babylon.js によってサポートされているさまざまな WebXR 機能を有効にして構成します。

完成した scene.js は次のようになります。

const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    return scene;
}

動作する createScene() 関数ができたので、index.html で scene.js ファイルをスクリプトとして読み込み、createScene() 関数が index.html で認識されるようにしましょう。 html ファイルの <header> セクションに、次のコード行を追加します。

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="scene.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

ブラウザーで index.html を開くと、前に表示されたエラーメッセージが表示されなくなったことがわかり、ページに空の Babylon.js シーンが表示されます。

次のステップ

次のチュートリアル: 3D ピアノモデルを構築する

次の方法で共有

チュートリアル: Babylon.js を使用して WebXR でピアノを構築する

前提条件

作業の開始

シーンをセットアップする

次のステップ

フィードバック

その他のリソース