Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. HTML5

Physics WebGL y detección de colisiones con Babylon.js y Oimo.js

by
Difficulty:IntermediateLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Hoy, quiero compartir con ustedes los fundamentos de las colisiones, la física y las cajas delimitadoras jugando con el motor WebGL Babylon.js y un compañero del motor de physics llamado Oimo.js.

Aquí está la demo quevamos a construir juntos: Babylon.js Espilit Physics demo con Oimojs

Babylonjs Espilit Physics demo with Oimojs

Puedes iniciarlo en un navegador compatible con WebGL—como IE11, Firefox,Chrome, Opera, Safari 8 o Microsoft Edge en Windows 10 Technical Preview—y luego moverte dentro de la escena como en un juego de FPS. Presionela tecla s para lanzar algunas esferas / bolas y la tecla b para lanzar algunas cajas. Utilizando el ratón, también puede hacer clic en una de las esferas o cuadros para aplicar una fuerza de impulso en ella.

1. Comprensión de las colisiones

Mirando a la definición de detección de colisiones en Wikipedia, podemos leer que:

La detección de colisiones se refiere típicamente al problema computacional de detectar la intersección de dos o más objetos. Si bien el tema se asocia más a menudo con su uso en videojuegos y otras simulaciones físicas, también tiene aplicaciones en robótica. Además de determinar si dos objetos han colisionado, los sistemas de detección de colisiones también pueden calcular el tiempo de impacto (TOI), e informar un colector de contacto (el conjunto de puntos de intersección). La respuesta de colisión trata de simular lo que ocurre cuando se detecta una colisión (vea physics engine, ragdoll physics). La resolución de problemas de detección de colisiones requiere un amplio    uso de conceptos de álgebra lineal y geometría computacional.

Ahora descomprimiremos esa definición en una escena 3D que actuará como nuestra base de partida para este tutorial.

Puede moverse en este gran museo como lo haría en el mundo real. No caerás a través del piso, ni caminaras a través de las paredes, o volaras. Estamos simulando la gravedad. Todo eso parece bastante obvio, pero requiere un montón de computación para simular eso en un mundo virtual 3D.

La primera pregunta que debemos resolver cuando pensamos en la detección de colisiones es lo complejo que debería ser. De hecho, probar si dos mallas complejas están colisionando podría costar mucho CPU, aún más con un motor de JavaScript donde es complejo descargarlo en algo que no sea el hilo de interfaz de usuario.

Para entender mejor cómo estamos manejando esta complejidad, navegue hacia el museo Espilit cerca de esta mesa:

the Espilit museum near the desk

Estás bloqueado por la mesa aunque parezca haber algún espacio disponible a la derecha. ¿Es un error en nuestro algoritmo de colisión? No, no lo es (Babylon.js está libre de errores!). Es porque Michel Rousseau, el artista 3D que construyó esta escena, ha hecho esto por elección. Para simplificar la detección de colisiones, ha utilizado un colisionador específico.

¿Qué es un Colisionador?

En lugar de probar las colisiones contra las mallas detalladas completas, puedes ponerlas en figuras geométricas invisibles simples. Esos colisionadores actuarán como la representación de malla y serán utilizados por el motor de colisión en su lugar. La mayoría de las veces, usted no verá las diferencias, pero nos permitirá utilizar mucho menos CPU, como la matemática detrás de que es mucho más fácil de calcular.

Cada motor soporta al menos dos tipos decolisionadores: la caja delimitadora y la esfera delimitadora. Entenderá mejor mirando esta imagen:

Illustration of bounding box and bounding sphere
Extraído de: visualización de computadora, rastreo de rayos, videojuegos, reemplazo de cajas de límite

Este hermoso pato amarillo es la malla que se muestra. En lugar de probar las colisiones contra cada una de sus caras, podemos intentar insertarla en la mejor geometría delimitadora. En este caso, una caja parece una mejor opción que una esfera para actuar como el impostor de malla. Pero la elección depende realmente de la propia malla.

Volvamos a la escena de Espilit y mostramos el elemento delimitador invisible en un color rojo semitransparente:

invisible bounding element in a semitransparent red color

Ahora puede entender por qué no puede moverse por el lado derecho de la mesa. Es porque estás chocando (bueno, la cámara de Babylon.js está chocando) con esta caja. Si desea hacerlo, simplemente cambie su tamaño reduciendo el ancho para encajar perfectamente en el ancho del escritorio.:

Nota: si desea comenzar a aprender Babylon.js, puede seguir el curso gratuito de formación en Microsoft Virtual Academy (MVA). Por ejemplo, puedes ir directamente a Introducción a WebGL 3D con HTML5 y Babylon.js: Usar Babylon.js para Principiantes donde cubrimos esta partede colisión de Babylon.js. También puede echar un vistazo al código dentro de nuestra herramienta de juegos interactiva, Babylon.js playground: Muestra de Colision.

Basado en la complejidad del motor de colisión o física, hay otros tipos de colisionadores disponibles: la cápsula y la malla, por ejemplo.

Box sphere capsule and mesh colliders
Extraído de: Introducción a Unity - Colisionadores y UnityScript

Cápsula es útil para los seres humanos o humanoides, ya que mejor se adapta a nuestro cuerpo que una caja o una esfera. La malla casi nunca es la malla completa en sí misma; más bien—es una versión simplificada de la malla original a la que apunta—pero sigue siendo mucho más precisa que una caja, una esfera o una cápsula.

2. Cargando la escena inicial

Para cargar nuestra escena de Espilit, tienes varias opciones:

Opción 1: Descargalo desde nuestro repositorio de GitHub, y luego sigue el módulo Introducción a WebGL 3D con HTML5 y Babylon.js: Carga de activos de nuestro curso MVA para aprender a cargar una escena .babylon. Básicamente, es necesario alojar los activos y el motor Babylon.js en un servidor web y establecer los tipos MIME adecuados para la extensión .babylon.

Opción 2: Descargue este archivo comprimido de la solución de Visual Studio (Archivo .zip).

Nota: Si no está familiarizado con Visual Studio, eche un vistazo a este artículo: Desarrolladores web, Visual Studio podría ser una gran herramienta gratuita para desarrollar con... tenga en cuenta también que la versión Pro ahora es gratuita para una gran cantidad de diferentes escenarios. Se llama Visual Studio 2013 Community Edition.

Por supuesto, todavía puede seguir este tutorial si no desea utilizar Visual Studio. Aquí está el código para cargar nuestra escena. Recuerde que la mayoría de los navegadores soportan WebGL ahora—recuerde probar Internet Explorer incluso en su Mac.

Utilizando este material, sólo se beneficiará del motor de colisión integrado de Babylon.js. De hecho, estamos haciendo una diferencia entre nuestro motor de colisión y un motor physics.

El motor de colisión se dedica principalmente a la cámara que interactúa con la escena. Puede activar la gravedad o no en la cámara, y puede activar la opción checkCollision en la cámara y en las distintas mallas.

El motor de colisión también puede ayudarle a saber si dos mallas están chocando. Pero eso es todo (¡esto ya es mucho, de hecho!). El motor de colisión no generará acciones, fuerza o impulso después de que dos objetos de Babylon.js estén colisionando. Necesitas un motor de física para que la vida a los objetos.

La forma en que hemos estado integrando la física en Babylon.js es a través de un mecanismo de complemento. Puedes leer más sobre esto aquí: Agregar tu propio plugin de motor physics a Babylon.js. Estamos apoyando dos motores de física de código abierto: Cannon.js y Oimo.js. Oimo es ahora el motor preferido por defecto de la física.

Si has elegido la Opción 1 para cargar la escena, entonces necesitas descargar Oimo.js de nuestro GitHub. Es una versión ligeramente actualizada que hemos hecho para apoyar mejor a Babylon.js. Si ha elegido la Opción 2, ya está referenciada y disponible en la solución VS en la carpeta scripts.

3. Habilitar el apoyo de la física en la escena y transformar los colisionadores en físicos Impostors

Lo primero que debemos hacer es activar la física en la escena. Para ello, agregue estas líneas de código:

Estás configurando el nivel de gravedad (-10 en el eje Y en este código de ejemplo, que es más o menos como lo que tenemos en la Tierra) y el motor de física que te gustaría usar. Usaremos Oimo.js, pero la línea comentada muestra cómo usar Cannon.js.

Ahora, necesitamos iterar a través de todos los colisionadores no visibles usados por el motor de colisión y activar propiedades físicas en él. Para eso, sólo necesitas encontrar todas las mallas donde checkCollisions se establece en true pero no visible en la escena:

Por favor declare el meshesColliderList también:

¡Y hemos terminado! Estamos listos para lanzar algunos objetos en nuestra escena y poner un montón de lío en este hermoso pero muy tranquilo museo.

4. Creación de Esferas y Cajas con Estados Físicos

Ahora vamos a añadir algunas esferas (con una textura de Amiga) y algunas cajas (con una textura de madera) a la escena.

Estas mallas tendrán conjunto de estado de física. Por ejemplo, esto significa que rebotarán en el suelo si los lanzas en el aire, saltas entre ellos después de que se ha detectado una colisión, y así sucesivamente. El motor de la física necesita saber qué tipo de impostor le gustaría utilizar para la malla (plano, esfera o caja de hoy), así como las propiedades de masa y fricción.

Si ha elegido la opción 1, puede descargar las dos texturas aquí.

Agregue este código a su proyecto:

Puede ver que las cajas son más pesadas que las esferas por un factor de 4.

Nota: Si necesita comprender cómo funciona el material en Babylon.js, observe el módulo Introducción a Introduction to WebGL 3D with HTML5 and Babylon.js: Understanding Materials and Inputs, o juegue con nuestra muestra de patio de recreo dedicada, Babylon.js Playground: Muestra de materiales.

Agregue estas dos líneas de código después de la línea scene.enablePhysics:

Y lanzar el proyecto web. Navegue hasta el centro del museo y presione las teclas s o b. Obtendrás este divertido resultado:

Demo scene with spheres and boxes floating in the air

5. Adición de soporte de eleccion para hacer clic en mallas

Vamos a añadir otra característica interesante: la capacidad de hacer clic en uno de los objetos para tirarlo. Para ello, debe enviar un rayo desde las coordenadas 2D del ratón dentro de la escena 3D, verifique si este rayo toca una de las interesantes mallas, y si es así, aplique una fuerza de impulso para tratar de moverlo.

Nota: para entender cómo funciona la recolección, consulte el módulo MVA Introducción a WebGL 3D con HTML5 y Babylon.js: Funciones avanzadas. O jugar con nuestra muestra en línea, Babylon.js Playground: Muestra de Elecciones.

Agregue este código a la función addListeners():

Inicie su código en su navegador favorito. Ahora puedes hacer clic en tus mallas físicas para jugar con ellas.

6. Visualización de los Demilitacion Cuadrada para comprender mejor toda la historia

Por último, vamos a crear una escena de depuración para que pueda mostrar / ocultar los colisionadores y activar / desactivar las propiedades físicas en ellos.

Vamos a inyectar la interfaz de usuario en esta div:

Y usaremos esta función para manejar la interfaz de usuario:

Lo sé, genera una UI muy fea, pero yo era demasiado perezoso para pasar más tiempo en él. ¡Siéntase libre de mejorarlo!

Llame a esta nueva función y ejecute el proyecto web. Ahora, por ejemplo, muestre los colisionadores 12 y 17:

colliders 12 and 17

También puede, con la segunda casilla de verificación, activar / desactivar las propiedades físicas. Por ejemplo, si deshabilita las propiedades físicas en el colisionador 12 y lanza las esferas, ¡ahora atravesarán este muro! Esto se muestra en la siguiente captura de pantalla como la esfera rodeada por el cuadrado rojo:

sphere going through wall

Puedes jugar con esta muestra de depuración directamente en tu navegador aquí: Babylon.js Espilit Physicsdebug demo.

Por favor, eche un vistazo a esta impresionante demo construida por Samuel Girardin que también utiliza Oimo.js en algunos personajes divertidos:

demo built by Samuel Girardi

¡Espero que hayas disfrutado de este tutorial! Siéntase libre de escribirme en Twitter para comentar sobre ello, o utilice el campo de comentarios a continuación.

Este artículo es parte de la serie de tecnología web dev de Microsoft. Estamos encantados de compartir Microsoft Edge y el nuevo motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o pruebe de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.