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

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

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

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

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

前提条件

作業の開始

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

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

    注意

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

  2. このフォルダーに 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 チュートリアルに関する記事を参照してください。

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

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

  1. index.html と同じフォルダーに、scene.js という名前の別のファイルを作成します。 シーンのセットアップとピアノの作成に関連するすべての JavaScript コードを、このファイルに格納します。

  2. createScene() 関数を createScene() に追加します。

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

    createScene() を非同期関数として作成していることに注意してください。 その理由については後で説明します。

  3. 次に、シーンを見えるようにするためのライトとカメラが必要です。 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 チュートリアル シリーズのシーンの準備に関するセクションを見返してください。

  4. 最後に、WebXR プラットフォーム用の開発を行っているので、 の前に次の行を挿入することによって、シーンで XR エクスペリエンスを有効にする必要があります。

    const xrHelper = await scene.createDefaultXRExperienceAsync();
    

    JavaScript の関数内の async 関数で await キーワードを使用するには、親関数も async にする必要があります。先ほど createScene 関数を非同期として定義したのは、このためです。 このチュートリアル シリーズで後ほど、この xrHelper を使用して、Babylon.js によってサポートされているさまざまな WebXR 機能を有効にして構成します。

  5. 完成した 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;
    }
    
  6. 動作する createScene() 関数ができたので、createScene()scene.js ファイルをスクリプトとして読み込み、 関数が 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>
    
  7. ブラウザーで index.html を開くと、前に表示されたエラー メッセージが表示されなくなったことがわかり、ページに空の Babylon.js シーンが表示されます。

次のステップ