Introducción a Babylon.js

  • 2 minutos

Para que empiece a trabajar en su primer proyecto de Mixed Reality con Bablyon.js, le hemos proporcionado código de inicio.

Sugerencia

Si quiere obtener una explicación más detallada del proyecto de inicio, realice un paseo por el código. Asegúrese de que tiene la extensión de CodeTour instalada en Visual Studio Code. Expándala en el panel Explorador y seleccione Iniciar paseo.

HTML y CSS en index.html

Examinemos más detenidamente el proyecto de inicio. En el fragmento siguiente, vemos el código HTML y CSS que necesitamos. No es necesario que cambiemos nada, pero lo analizaremos con atención para entender qué está ocurriendo.

<!DOCTYPE html>
<html>

    <head>
        <style>
            html,
            body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>

    <body>
        <canvas id="renderCanvas"></canvas>
        <script src="index.js"></script>
    </body>

</html>

Un elemento style en línea tiene el código CSS mínimo que necesitamos. Después, el único código HTML que necesitamos es el elemento canvas y la etiqueta script para importar el archivo index.js.

Archivo index.ts de TypeScript

El archivo index.ts es el archivo de TypeScript que crea la escena principal. Al ejecutar npm run build, se transpila en JavaScript sin formato y se guarda en la carpeta dist. Después, se llama a este archivo con la etiqueta script en index.html.

Aquí usamos WebPack, un empaquetador de módulos JavaScript de código abierto. Genera recursos estáticos que representan esos módulos. La configuración de WebPack se encuentra en el archivo webpack.config.js. En este archivo se describe cómo agrupar los recursos para la carpeta dist. WebPack compila el script en un origen, que se usa para proporcionar el script del juego.

El código siguiente pertenece a la parte superior del archivo index.ts y muestra cómo se importan los paquetes necesarios de Babylon.js para crear la escena del juego. Cree la variable canvas para obtener la etiqueta HTML de lienzo renderCanvas de la sección html>body. Luego, cree la variable de motor y pase el nuevo motor de Babylon.js.

 import {
  Scene,
  HemisphericLight,
  Vector3,
  Engine,
  ArcRotateCamera,
  CannonJSPlugin,
  MeshBuilder,
  StandardMaterial,
  PhotoDome,
  PhysicsImpostor
} from "babylonjs";
import * as cannon from "cannon";
import { WoodProceduralTexture } from "babylonjs-procedural-textures";

var canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
// Load the 3D engine
var engine: Engine = null;
var sceneToRender = null;
var createDefaultEngine = function () {
  return new Engine(canvas, true, {
    preserveDrawingBuffer: true,
    stencil: true,
  });
};

Creación de la escena y de la experiencia de XR predeterminada

Con la función createScene que se muestra más adelante en esta sección, podemos inicializar la escena, pasar el motor y crear una cámara. La cámara es el punto de vista de la persona que juega.

Después, debemos agregar iluminación. Lo interesante de la realidad virtual es que funciona como una pizarra en blanco. Puede crear todo lo que le apetezca. No habrá iluminación a menos que la agreguemos a la escena.

Puede usar scene.createDefaultEnvironment() de Babylon.js para obtener de forma gratuita los elementos básicos que necesita en un entorno, sin necesidad de compilarlos. Esto es ideal si los valores predeterminados sirven para su proyecto. Aun así, a veces se necesita un entorno más personalizado y podría tener sentido crearlo manualmente.

Usaremos createDefaultXRExperienceAsync, ya que proporciona muchas funcionalidades de forma gratuita.

La experiencia de XR predeterminada permite lo siguiente:

  • Crear un asistente de experiencia básica e inicializarlo
  • Crear un botón de interfaz de usuario HTML para acceder a XR
  • Inicializar la clase de origen de entrada que inicializará los controladores
  • Habilitar las características de selección de puntero y teletransporte
// Function to create a scene with camera, lights, an environment, and a Mixed Reality experience
var createScene = async function () {
  // Create the scene and the camera
  var scene = new Scene(engine);
  var camera = new ArcRotateCamera("cam", -Math.PI / 2, Math.PI / 2, 10, new Vector3(0, -2, 3), scene);
  camera.wheelDeltaPercentage = 0.01;
  camera.attachControl(canvas, true);

  // Create a basic hemispheric light source and add it to the scene
  var light = new HemisphericLight(
    "light1",
    new Vector3(0, 1, 0),
    scene
  );

  // Reduce the light intensity to 70%
  light.intensity = 0.7;

  // Create the default environment
  const env = scene.createDefaultEnvironment();

  // Create the default XR experience
  const xr = await scene.createDefaultXRExperienceAsync({
    floorMeshes: [env.ground],
  });

  // Return the completed scene with camera, lights, an environment, and a Mixed Reality experience
  return scene;
};

Con esta función asincrónica, conseguirá una escena que tenga una cámara, iluminación, un entorno y una experiencia de Mixed Reality. Pero esta escena todavía no tiene física ni una manera de representarse.

Adición de física con un motor físico

Ahora necesitamos agregar algo de física al mundo que estamos creando. Con Babylon.js hay disponibles complementos para cuatro motores físicos: Cannon.js, Oimo.js, Energy.js y Ammo.js. Usaremos Cannon.js para este ejemplo, pero puede obtener más información sobre los motores en el sitio web de Babylon.js.

Cannon.js es un motor físico escrito completamente en JavaScript. Si no sabe en qué consisten los motores físicos, se trata de un elemento que proporciona una simulación aproximada de sistemas físicos como la masa, la gravedad, la fricción y la restitución.

En el código de inicio, agregue el código siguiente después de ajustar la intensidad de la luz, pero antes de crear el entorno predeterminado. Este código agregará CannonJSPlugin y establecerá la fuerza de gravedad.

  // Create the physics engine
  var cannonPlugin = new CannonJSPlugin(true, 10, cannon);

  //enable physics and set gravity force.
  scene.enablePhysics(new Vector3(0, -3, 0), cannonPlugin);

Ahora la escena transmite sensación de gravedad y física.

Representación de la escena

Por último, es el momento de representar la escena. Para ello, debe crear un motor, crear una escena, representarla mediante el motor y cambiar el tamaño del motor para adaptarlo al tamaño de la escena.

El código siguiente debe ir debajo de la función createScene() asincrónica:

// Create a default engine to load the scene
try {
  engine = createDefaultEngine();
} catch (e) {
  console.log(
    "the available createEngine function failed. Creating the default engine instead"
  );
  engine = createDefaultEngine();
}
if (!engine) throw "engine should not be null.";

// Create the scene
createScene().then((returnedScene) => {
  sceneToRender = returnedScene;
});

// Render the scene by using the engine
engine.runRenderLoop(function () {
  if (sceneToRender) {
    sceneToRender.render();
  }
});

// Resize the engine to fit the scene
window.addEventListener("resize", function () {
  engine.resize();
});

Ahora puede probar la escena que se representa en el explorador.

Ejecute npm start y vaya a localhost ("https://localhost:8080"). Si todavía está ejecutándose, la recarga activa debería haberlo actualizado al guardar los cambios y los verá reflejados. La escena será exclusivamente de color azul, ya que no ha agregado ninguna textura ni objeto de malla.

Ahora que ha configurado los elementos básicos de la escena, ya puede empezar a agregar mallas y a crear la experiencia de realidad virtual.

© 2021 Warner Bros. Ent. All Rights Reserved.