Tutorial: Criar um piano no WebXR usando o Babylon.js

Artigo
03/21/2023

Construir um piano no mundo real exige muito em termos de tempo, habilidades e materiais. E a criação de um para o mundo de VR/RA?

Nesta série de tutoriais, você aprenderá a usar o Babylon.js para criar um aplicativo Web de Realidade Misturada que contém um piano vertical funcional com 88 teclas no mundo virtual. No aplicativo pronto, você poderá se teletransportar para o piano e tocar as teclas usando seus controladores de realidade misturada.

Nesta série de tutoriais, você aprenderá a:

Criar, posicionar e mesclar malhas para criar um teclado de piano
Importar um modelo do Babylon.js de uma estrutura de piano vertical
Adicionar interações de ponteiro a cada tecla do piano
Habilitar o teletransporte e o suporte para vários ponteiros no WebXR

Pré-requisitos

Um computador conectado à Internet
Conhecimento básico de JavaScript
Tutorial Olá, Mundo de JavaScript para WebXR
Navegador com suporte para WebXR, por exemplo, Microsoft Edge
Babylon.js 4.2 ou superior
Qualquer headset de VR ou um simulador do Windows Mixed Reality
Opcional: Windows 10 Creator Update se você quiser usar um Simulador do Windows Mixed Reality

Introdução

Vamos começar configurando a página da Web HTML que conterá a cena do Babylon.js.

Crie uma pasta chamada babylonjs-piano-tutorial e abra essa pasta no Visual Studio Code.

Observação

Embora você possa usar qualquer editor de código para acompanhar, usaremos o Visual Studio Code neste tutorial por conveniência.

Na pasta, crie um arquivo chamado index.html e insira o modelo abaixo nele:

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

Se precisar de mais explicações sobre o conteúdo deste modelo, confira o Tutorial Olá, Mundo, que é um pré-requisito deste tutorial.

Se você tentar abrir o arquivo em um navegador, o console mostrará um erro indicando que a função createScene() não foi encontrada. Vamos resolver esse erro implementando a função createScene() na próxima seção.

Configurar a cena

Na mesma pasta em que se encontra index.html, crie outro arquivo chamado scene.js. Armazenaremos todo o código JavaScript relacionado à configuração da cena e à criação do piano nesse arquivo.
Vamos adicionar a função createScene() a scene.js:
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}
```
Observe que estamos fazendo de createScene() uma função assíncrona. Preste atenção para descobrir por quê.
Em seguida, precisaremos de uma luz e de uma câmera para tornar a cena visível para nós. Atualize a função 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;
}
```
Aqui, criamos uma ArcRotateCamera, que aponta quase completamente para baixo e está direcionada para o ponto de origem do espaço. A luz que criamos é uma HemisphericLight que aponta para o céu e é útil para simular um espaço ambiente. Também esmaecemos um pouco a luz diminuindo sua intensidade.

Se precisar de um lembrete sobre como criar uma câmera e uma luz, reveja a seção Preparar cena da série de tutoriais Olá, Mundo antes de seguir para a próxima etapa.
Por fim, como estamos desenvolvendo para uma plataforma WebXR, precisaremos habilitar a experiência de XR na cena inserindo a seguinte linha antes de return scene;:
```
const xrHelper = await scene.createDefaultXRExperienceAsync();
```
No JavaScript, para usar a palavra-chave await em uma função async dentro de uma função, a função pai também teria que ser async. Por isso definimos a função createScene como assíncrona anteriormente. Mais adiante nesta série de tutoriais, usaremos esse xrHelper para habilitar e configurar diferentes recursos do WebXR com suporte do Babylon.js.

O arquivo scene.js concluído deve ser semelhante a este:

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

Agora que temos uma função createScene() funcional, vamos fazer com que index.html carregue o arquivo scene.js como um script para que a função createScene() seja reconhecida em index.html. Adicione esta linha de código dentro da seção <header> do arquivo 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>

Abra index.html no navegador e você descobrirá que a mensagem de erro que vimos anteriormente não está mais presente e que temos uma cena do Babylon.js vazia na página.

Próximas etapas

Próximo tutorial: Criar um modelo de piano em 3D

Tutorial: Criar um piano no WebXR usando o Babylon.js

Pré-requisitos

Introdução

Configurar a cena

Próximas etapas

Recursos adicionais