チュートリアル: 3D ピアノを弾く

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

前のチュートリアルでは、完全な 88 鍵ピアノの鍵盤のモデルをうまく作成できました。次に、それを XR 空間で演奏できるようにしましょう。

このチュートリアルでは、次の内容を学習します。

ポインターイベントを使用して対話型ピアノの機能を追加する
メッシュを異なるサイズにスケーリングする
XR でテレポートとマルチポインターのサポートを有効にする

開始する前に

このシリーズの前のチュートリアルを完了し、コードへの追加を続けられる状態になっていることを確認します。

index.html

<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>

scene.js

const buildKey = function (scene, parent, props) {
    if (props.type === "white") {
        /*
        Props for building a white key should contain: 
        note, topWidth, bottomWidth, topPositionX, wholePositionX, register, referencePositionX

        As an example, the props for building the middle C white key would be
        {type: "white", note: "C", topWidth: 1.4, bottomWidth: 2.3, topPositionX: -0.45, wholePositionX: -14.4, register: 4, referencePositionX: 0}
        */

        // Create bottom part
        const bottom = BABYLON.MeshBuilder.CreateBox("whiteKeyBottom", {width: props.bottomWidth, height: 1.5, depth: 4.5}, scene);

        // Create top part
        const top = BABYLON.MeshBuilder.CreateBox("whiteKeyTop", {width: props.topWidth, height: 1.5, depth: 5}, scene);
        top.position.z =  4.75;
        top.position.x += props.topPositionX;

        // Merge bottom and top parts
        // Parameters of BABYLON.Mesh.MergeMeshes: (arrayOfMeshes, disposeSource, allow32BitsIndices, meshSubclass, subdivideWithSubMeshes, multiMultiMaterials)
        const key = BABYLON.Mesh.MergeMeshes([bottom, top], true, false, null, false, false);
        key.position.x = props.referencePositionX + props.wholePositionX;
        key.name = props.note + props.register;
        key.parent = parent;

        return key;
    }
    else if (props.type === "black") {
        /*
        Props for building a black key should contain: 
        note, wholePositionX, register, referencePositionX

        As an example, the props for building the C#4 black key would be
        {type: "black", note: "C#", wholePositionX: -13.45, register: 4, referencePositionX: 0}
        */

        // Create black color material
        const blackMat = new BABYLON.StandardMaterial("black");
        blackMat.diffuseColor = new BABYLON.Color3(0, 0, 0);

        // Create black key
        const key = BABYLON.MeshBuilder.CreateBox(props.note + props.register, {width: 1.4, height: 2, depth: 5}, scene);
        key.position.z += 4.75;
        key.position.y += 0.25;
        key.position.x = props.referencePositionX + props.wholePositionX;
        key.material = blackMat;
        key.parent = parent;

        return key;
    }
}

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 keyParams = [
        {type: "white", note: "C", topWidth: 1.4, bottomWidth: 2.3, topPositionX: -0.45, wholePositionX: -14.4},
        {type: "black", note: "C#", wholePositionX: -13.45},
        {type: "white", note: "D", topWidth: 1.4, bottomWidth: 2.4, topPositionX: 0, wholePositionX: -12},
        {type: "black", note: "D#", wholePositionX: -10.6},
        {type: "white", note: "E", topWidth: 1.4, bottomWidth: 2.3, topPositionX: 0.45, wholePositionX: -9.6},
        {type: "white", note: "F", topWidth: 1.3, bottomWidth: 2.4, topPositionX: -0.55, wholePositionX: -7.2},
        {type: "black", note: "F#", wholePositionX: -6.35},
        {type: "white", note: "G", topWidth: 1.3, bottomWidth: 2.3, topPositionX: -0.2, wholePositionX: -4.8},
        {type: "black", note: "G#", wholePositionX: -3.6},
        {type: "white", note: "A", topWidth: 1.3, bottomWidth: 2.3, topPositionX: 0.2, wholePositionX: -2.4},
        {type: "black", note: "A#", wholePositionX: -0.85},
        {type: "white", note: "B", topWidth: 1.3, bottomWidth: 2.4, topPositionX: 0.55, wholePositionX: 0},
    ]

    // Transform Node that acts as the parent of all piano keys
    const keyboard = new BABYLON.TransformNode("keyboard");

    // Register 1 through 7
    var referencePositionX = -2.4*14;
    for (let register = 1; register <= 7; register++) {
        keyParams.forEach(key => {
            buildKey(scene, keyboard, Object.assign({register: register, referencePositionX: referencePositionX}, key));
        })
        referencePositionX += 2.4*7;
    }

    // Register 0
    buildKey(scene, keyboard, {type: "white", note: "A", topWidth: 1.9, bottomWidth: 2.3, topPositionX: -0.20, wholePositionX: -2.4, register: 0, referencePositionX: -2.4*21});
    keyParams.slice(10, 12).forEach(key => {
        buildKey(scene, keyboard, Object.assign({register: 0, referencePositionX: -2.4*21}, key));
    })

    // Register 8
    buildKey(scene, keyboard, {type: "white", note: "C", topWidth: 2.3, bottomWidth: 2.3, topPositionX: 0, wholePositionX: -2.4*6, register: 8, referencePositionX: 84});

    // Transform node that acts as the parent of all piano components
    const piano = new BABYLON.TransformNode("piano");
    keyboard.parent = piano;

    // Import and scale piano frame
    BABYLON.SceneLoader.ImportMesh("frame", "https://raw.githubusercontent.com/MicrosoftDocs/mixed-reality/docs/mixed-reality-docs/mr-dev-docs/develop/javascript/tutorials/babylonjs-webxr-piano/files/", "pianoFrame.babylon", scene, function(meshes) {
        const frame = meshes[0];
        frame.parent = piano;
    });

    // Lift the piano keyboard
    keyboard.position.y += 80;

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    return scene;
}

ピアノの鍵盤を演奏できるようにする

現在、作成したピアノの鍵盤は、ユーザーの操作に応答しない静的モデルです。このセクションでは、鍵が下に移動し、誰かが鍵を押すと音が鳴るようにプログラムします。

Babylon.js には、対話式に操作できるさまざまな種類のイベント (オブザーバブル) が用意されています。この例では、マウスクリック、タッチ、XR コントローラーのボタンクリックなどを使用して、ポインターで鍵を押すとアクションが実行されるように鍵盤をプログラムしたいので、onPointerObservable を処理します。

onPointerObservable に任意の動作を追加する方法の基本的な構造を次に示します。
```
scene.onPointerObservable.add((pointerInfo) => {
    // do something
});
```

Babylon.js によって多くの種類のポインターイベントが提供されていますが、ピアノの鍵盤の動作をプログラムするには POINTERDOWN および POINTERUP イベントのみを使用し、次のような構造を使用します。

scene.onPointerObservable.add((pointerInfo) => {
    switch (pointerInfo.type) {
        case BABYLON.PointerEventTypes.POINTERDOWN:
            // When the pointer is down on a piano key,
            // move the piano key downward (to show that it is pressed)
            // and play the sound of the note
            break;
        case BABYLON.PointerEventTypes.POINTERUP:
            // When the pointer is released,
            // move the piano key upward to its original position
            // and stop the sound of the note of the key that is released
            break;
    }
});

最初に、ピアノの鍵を押したり離したりしたときに、鍵が下向きや上向きに動くようにしましょう。

ポインターダウンイベントでは、クリックされているメッシュを検出し、それがピアノの鍵であることを確認し、メッシュの y 座標を少しだけ小さくして鍵が下に押されたように見えるようにする必要があります。

ポインターアップイベントの場合は、ある鍵で押されたポインターがその鍵で離されない場合があるので、もう少し複雑です。たとえば、鍵 C4 をクリックし、マウスを E4 にドラッグしてから、クリックを離します。この場合でも、pointerUp イベントが発生した場所 (E4) ではなく、押された鍵 (C4) を離す必要があります。

次のコードでこれがどのように行われているかを見てみましょう。
```
const pointerToKey = new Map();
scene.onPointerObservable.add((pointerInfo) => {
    switch (pointerInfo.type) {
        case BABYLON.PointerEventTypes.POINTERDOWN:
            if(pointerInfo.pickInfo.hit) {
                const pickedMesh = pointerInfo.pickInfo.pickedMesh;
                const pointerId = pointerInfo.event.pointerId;
                if (pickedMesh.parent === keyboard) {
                    pickedMesh.position.y -= 0.5;
                    // play the sound of the note
                    pointerToKey.set(pointerId, {
                        mesh: pickedMesh
                    });
                }
            }
            break;
        case BABYLON.PointerEventTypes.POINTERUP:
            const pointerId = pointerInfo.event.pointerId;
            if (pointerToKey.has(pointerId)) {
                pointerToKey.get(pointerId).mesh.position.y += 0.5;
                // stop the sound of the note of the key that is released
                pointerToKey.delete(pointerId);
            }
            break;
    }
});
```
pointerId は、すべてのポインターに固有であり、複数のコントローラーがある場合、またはタッチスクリーンを使用している場合に、ポインターを識別するのに役立ちます。ここでは、pointerToKey という名前の Map オブジェクトを初期化して、押されたポインターと鍵の関係を格納しているので、ポインターが離されたときに、それが発生した場所に関係なく、どの鍵を離す必要があるかがわかります。
上記のコードによる対話式操作は次のようになります。
次に、鍵が押されて離されたときに、音が鳴って止まるようにしてみましょう。これを実現するには、soundfont-player という名前の JavaScript ライブラリを利用します。これを使用すると、選択した楽器の MIDI サウンドを簡単に再生できます。

ライブラリの縮小されたコードをダウンロードし、index.html と同じフォルダーに保存して、index.html の <header> タグに含めます。
```
<head>
    <title>Babylon Template</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="scene.js"></script>
    <script src="soundfont-player.min.js"></script>
    <style>
            body,#renderCanvas { width: 100%; height: 100%;}
    </style>
</head>
```
ライブラリがインポートされた後は、そのライブラリを使用して、次のように楽器を初期化し、MIDI サウンドを再生および停止することができます。
```
const pianoSound = await Soundfont.instrument(new AudioContext(), 'acoustic_grand_piano');
const C4 = piano.play("C4"); // Play note C4
C4.stop(); // Stop note C4
```

次に、これをポインターイベントに組み込み、このセクションのコードを完成させます。

const pointerToKey = new Map()
const piano = await Soundfont.instrument(new AudioContext(), 'acoustic_grand_piano');

scene.onPointerObservable.add((pointerInfo) => {
    switch (pointerInfo.type) {
        case BABYLON.PointerEventTypes.POINTERDOWN:
            if(pointerInfo.pickInfo.hit) {
                let pickedMesh = pointerInfo.pickInfo.pickedMesh;
                let pointerId = pointerInfo.event.pointerId;
                if (keys.has(pickedMesh)) {
                    pickedMesh.position.y -= 0.5; // Move the key downward
                    pointerToKey.set(pointerId, {
                        mesh: pickedMesh,
                        note: pianoSound.play(pointerInfo.pickInfo.pickedMesh.name) // Play the sound of the note
                    });
                }
            }
            break;
        case BABYLON.PointerEventTypes.POINTERUP:
            let pointerId = pointerInfo.event.pointerId;
            if (pointerToKey.has(pointerId)) {
                pointerToKey.get(pointerId).mesh.position.y += 0.5; // Move the key upward
                pointerToKey.get(pointerId).note.stop(); // Stop the sound of the note
                pointerToKey.delete(pointerId);
            }
            break;
    }
});

各鍵のメッシュにはそれが表す音で名前を付けたので、メッシュの名前を pianoSound.play() 関数に渡すことにより、どの音を再生するかを簡単に示すことができます。また、鍵が離されたときに停止するサウンドがわかるように、サウンドを pointerToKey マップに格納していることにも注意してください。

イマーシブ VR モード用にピアノを拡大縮小する

対話式操作機能を追加したので、マウス (またはタッチスクリーン) を使用してピアノを演奏できるようになっているはずです。このセクションでは、イマーシブ VR 空間に移動します。

イマーシブ VR ヘッドセットでページを開くには、まず、ヘッドセットを開発者用コンピューターに接続し、それが Windows Mixed Reality アプリで使用できるように設定されていることを確認する必要があります。 Windows Mixed Reality シミュレーターを使用している場合は、それが有効になっていることを確認します。
Web ページの右下に、イマーシブ VR ボタンが表示されるようになります。それをクリックすると、接続している XR デバイスでピアノを表示できるようになります。
仮想空間に入った後、作成したピアノが非常に大きいことに気付く場合があります。 VR の世界では、その足下に立って、ポインターで離れたところにある鍵をポイントして演奏することしかできない場合がありす。
現実の普通のアップライトピアノくらいのサイズになるように、ピアノを小さくしましょう。これを行うには、空間内のポイントを基準にメッシュを拡大縮小することができるユーティリティ関数を使用する必要があります。この関数を、scene.js (createScene() の外側) に追加します。
```
const scaleFromPivot = function(transformNode, pivotPoint, scale) {
    const _sx = scale / transformNode.scaling.x;
    const _sy = scale / transformNode.scaling.y;
    const _sz = scale / transformNode.scaling.z;
    transformNode.scaling = new BABYLON.Vector3(_sx, _sy, _sz); 
    transformNode.position = new BABYLON.Vector3(pivotPoint.x + _sx * (transformNode.position.x - pivotPoint.x), pivotPoint.y + _sy * (transformNode.position.y - pivotPoint.y), pivotPoint.z + _sz * (transformNode.position.z - pivotPoint.z));
}
```
この関数は、3 つのパラメーターを受け取ります。
- transformNode: 拡大縮小する TransformNode
- pivotPoint: 拡大縮小の基準にするポイントを示す Vector3 オブジェクト
- scale: 倍率
この関数を使用し、原点をピボットポイントにして、ピアノのフレームと鍵盤を 0.015 倍に縮小します。 keyboard.position.y += 80; の後に、createScene() 関数の呼び出しを追加します。
```
// Put this line at the beginning of createScene()
const scale = 0.015;
```
```
// Put this function call after keyboard.position.y += 80;

// Scale the entire piano
scaleFromPivot(piano, new BABYLON.Vector3(0, 0, 0), scale);
```

カメラの位置も忘れずに拡大縮小します。

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

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

VR 空間に再び入ると、今度は通常のアップライトピアノのサイズになります。

WebXR 機能を有効にする

VR 空間内で適切なサイズになるようにピアノの大きさを調整したので、いくつかの便利な WebXR 機能を有効にして、空間でのピアノ演奏エクスペリエンスを向上させましょう。

イマーシブ VR コントローラーを使用してピアノを演奏している場合は、一度に 1 つのコントローラーしか使用できないことに気付いたかもしれません。 Babylon.js の WebXR 機能マネージャーを使用して、XR 空でのマルチポインターサポートを有効にしましょう。

createScene() 関数の xrHelper の初期化行の後に、次のコードを追加します。
```
const featuresManager = xrHelper.baseExperience.featuresManager;

const pointerSelection = featuresManager.enableFeature(BABYLON.WebXRFeatureName.POINTER_SELECTION, "stable", {
    xrInput: xrHelper.input,
    enablePointerSelectionOnAllControllers: true        
});
```
さらに、始める場所によっては、ピアノの前に移動するのが少し難しい場合があります。イマーシブ VR 環境に慣れている場合は、テレポートについて既に知っているかもしれません。これは、空間内の別の場所をポイントすることで、そこにすぐに移動できる機能です。
Babylon.js のテレポート機能を使用するには、最初に、VR 空間内で "立つ" ことのできる地面メッシュが必要です。地面を作成するには、createScene() 関数に次のコードを追加します。
```
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 400, height: 400});
```
テレポートのサポートには、スナップ位置と呼ばれる非常に便利な機能も付属しています。簡単に言えば、スナップ位置は、ユーザーを配置する特定の位置です。

たとえば、ピアノの前にスナップ位置を設定し、ユーザーがピアノの近くをポインターでポイントすると、その場所に簡単にテレポートできるようにすることができます。

テレポート機能を有効にしてスナップ位置を指定するには、次のコードを追加します。
```
const teleportation = featuresManager.enableFeature(BABYLON.WebXRFeatureName.TELEPORTATION, "stable", {
    xrInput: xrHelper.input,
    floorMeshes: [ground],
    snapPositions: [new BABYLON.Vector3(2.4*3.5*scale, 0, -10*scale)],
});
```
これで、ピアノの前のスナップ位置にテレポートすることで、ピアノの前に簡単に移動し、両方のコントローラーを使用して一度に 2 つの鍵を演奏できるはずです。

まとめ

お疲れさまでした。一連の Babylon.js ピアノ作成チュートリアルを完了し、次の方法を学習しました。

メッシュを作成、配置、マージして、ピアノの鍵盤のモデルを作成する
アップライトピアノのフレームの Babylon.js モデルをインポートする
ピアノの各鍵にポインターの対話式操作を追加する
ピボットポイントを基にしてメッシュのサイズを拡大縮小する
テレポートやマルチポイントサポートなどの主要な WebXR 機能を有効にする

scene.js と index.html の最終的なコードを次に示しておきます。