¿Qué hay de nuevo en Babylon.js v2.1? Uso de WebGL y 3D en los navegadores más recientes

los babilonia.js El equipo de Microsoft lanzó recientemente una nueva actualización (v2.1) con una serie de herramientas nuevas y mejoradas para crear experiencias 3D basadas en navegador, como Piratas del credo del asesino y Arcade de vuelo. En este artículo, lo guiaré a través de algunas de las principales actualizaciones, junto con enlaces a demostraciones y compilaciones de sandbox que puede probar usted mismo.

Primero, un rápido ‘gracias’ a la comunidad. En los últimos meses, hemos tenido más apoyo orientado a la comunidad que nunca. ¡Gracias a todas estas personas maravillosas, pudimos lanzar MUCHAS funciones y mejoras nuevas! ¡Entonces empecemos! Puedes encontrar todo el código aquí: https://github.com/BabylonJS/Babylon.js/releases/tag/v2.1

Exportador de la unidad 5

Unity es una herramienta increíble para crear juegos que pueden funcionar en casi todos los sistemas operativos que existen. Me encanta el exportador WebGL de Unity 5: es una excelente manera de exportar todos sus juegos a un sitio web WebGL/ASM.JS/WebAudio. Para completar esta solución, si desea exportar mallas a una proyección más ligera que podría ejecutarse sin ASM.JS, ahora puede instalar el exportador Babylon.js: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Unity%205

Cuando está instalado, el exportador le permite exportar una escena yendo al menú del exportador de Babylon.js:

Después de unos segundos, se genera un archivo .babylon junto con las texturas asociadas:

Ahora puede cargar este Babylon desde su proyecto de JavaScript o probarlo directamente usando el sandbox de Babylon.js: http://www.babylonjs.com/sandbox

Calcomanías

Las calcomanías generalmente se usan para agregar detalles en objetos 3D (agujero de bala, detalles locales, etc.). Internamente, una calcomanía es una malla producida a partir de un subconjunto de una anterior con un pequeño desplazamiento para aparecer encima de ella. El desplazamiento se puede ver como la propiedad zIndex cuando se usa CSS. Sin él, verá problemas de z-fighting cuando dos objetos 3D estén exactamente en el mismo lugar:

El código para crear una nueva calcomanía es este: var newDecal = BABYLON.Mesh.CreateDecal(«decal», mesh, decalPosition, normal, decalSize, angle); Por ejemplo, en la siguiente demostración, puede hacer clic en el gato para aplicarle algunas calcomanías de agujeros de bala: http://www.babylonjs-playground.com/#1BAPRM

SIMD.js

Borde de Microsoft, junto con Firefox y Chrome, anunciaron la compatibilidad con SIMD.js, una API para usar la potencia bruta de su CPU multiescalar directamente desde su código JavaScript. Esto es especialmente útil para operaciones escalares como la multiplicación de matrices. Decidimos (con la gran ayuda de Intel) integrar la compatibilidad con SIMD directamente en nuestra biblioteca matemática. Y esto, por ejemplo, lleva a evolucionar este tipo de código (donde se aplica la misma operación 4 veces):

Para:

La idea principal es cargar el registro SIMD con datos y luego ejecutar solo una instrucción donde antes se requerían múltiples. Puedes probarlo ahora directamente en nuestro sitio: http://www.babylonjs.com/scenes/simd.html

Esta demostración intenta mantener una velocidad de fotogramas constante (50 fps por defecto) mientras agrega un nuevo bailarín cada segundo. Esto conduce a una gran cantidad de multiplicaciones de matrices para animar esqueletos utilizados por los bailarines. Si su navegador es compatible con SIMD, puede habilitarlo y ver el aumento de rendimiento (tenga en cuenta que por ahora, Microsoft Edge admite SIMD solo dentro del código ASM.js pero esta limitación se eliminará en una versión futura).

Colisiones Webworkers

Rana Weber (uno de los principales contribuyentes de Babylon.js) hizo una gran cantidad de trabajo para mejorar en gran medida el motor de colisiones al permitir que Babylon.js calculara las colisiones en un trabajador web dedicado. Antes de esto, si deseaba habilitar las colisiones en una escena, terminaba agregando impostores invisibles alrededor de sus objetos para reducir los cálculos necesarios. Ahora, esto sigue siendo válido, pero debido a que los cálculos no se realizan en el hilo principal, puede abordar fácilmente escenas mucho más complicadas. Por ejemplo, tomemos esta escena donde tenemos una malla bastante decente (una hermosa calavera) con colisiones habilitadas en la cámara (lo que significa que si usas la rueda del mouse no podrás atravesar la calavera). Esta demostración no utiliza un impostor para las colisiones sino la propia malla real que tiene más de 41000 vértices para comprobar. Con las colisiones regulares, el hilo principal tiene que trabajar en la representación de la escena Y también en el cálculo de las colisiones. Con los trabajadores web habilitados, el subproceso principal no tiene que preocuparse por las colisiones porque un trabajador web (o sea, otro subproceso) trabaja en él. Como la mayoría de las CPU tienen al menos 2 núcleos hoy en día, esta es una optimización realmente impresionante. Para habilitar las colisiones en un webworker, debe ejecutar este código: scene.workerCollisions = true|false; Para saber más sobre las colisiones: http://doc.babylonjs.com/page.php?p=22091

Raanan también escribió dos excelentes artículos sobre este tema: · http://blog.raananweber.com/2015/05/26/collisions-using-workers-for-babylonjs/
· http://blog.raananweber.com/2015/05/30/web-worker-sin-un-archivo-separado/

Nuevo motor de sombras

Agregar sombras a una escena siempre le da un impulso al realismo. La versión anterior del motor de sombras solo podía procesar sombras dinámicas para luces direccionales. La nueva versión agrega soporte para focos, así como dos nuevos filtros para producir sombras suaves muy atractivas, como puede ver en esta demostración: http://www.babylonjs.com/?SOFTSHADOWS

Otra demostración le muestra las diversas opciones que ahora tiene para proyectar sombras dinámicas: http://www.babylonjs.com/?SOMBRAS AVANZADAS

Para ir más allá con las sombras, lea la documentación asociada: http://doc.babylonjs.com/page.php?p=22151

Formas paramétricas

Jerónimo Bousquie (otro colaborador principal) agregó una cantidad increíble de mallas nuevas basadas en formas paramétricas. Las mallas básicas que ha visto hasta ahora con Babylon.js tienen una forma esperada: cuando crea una malla esférica, espera ver una forma esférica. Lo mismo ocurre con una malla de caja, un toro, un cilindro, etc. Hay otro tipo de malla cuyas formas finales no son fijas. Su forma final depende de algunos parámetros utilizados por una función específica. Entonces llamamos a estas mallas «Formas paramétricas». Jerome, usando estas formas paramétricas, agregó las siguientes formas a la lista de mallas listas para usar:

• Cintas (http://www.babylonjs.com/?RIBBONS)
• Dto
• Líneas puntedas
• Torno
• Tubo

Si quieres saber más sobre formas paramétricas: http://doc.babylonjs.com/page.php?p=24847. Jerome también creó un tutorial para comprender mejor las cintas: http://doc.babylonjs.com/page.php?p=25088

Nuevo efecto de lente

Jahow (otro de los principales colaboradores) usó la canalización de procesamiento posterior al proceso de Babylon.js para permitirle lograr un realismo similar al de una fotografía. Se utilizan dos procesos posteriores en la canalización:

• un sombreador de ‘aberración cromática’, que cambia muy ligeramente los canales rojo, verde y azul en la pantalla. Este efecto es más fuerte en los bordes.
• un sombreador de ‘profundidad de campo’, que en realidad hace un poco más que eso:
• Desenfoque en el borde de la lente
• Distorsión de la lente
• Desenfoque de profundidad de campo y realce de luces
• Efecto ‘bokeh’ de profundidad de campo (formas que aparecen en áreas borrosas)
• Efecto granulado (ruido o textura personalizada)

Puedes jugar con una demostración en vivo en el patio de recreo: http://www.babylonjs-playground.com/#DX6AV

Y como siempre, si quieres ir más allá: http://doc.babylonjs.com/page.php?p=24841

Y tantas cosas mas

Como mencioné antes, esto es solo un extracto de todas las funciones que agregamos. Por lo tanto, siéntase libre de probarlo usted mismo utilizando los siguientes enlaces: · Sitio web principal: http://www.babylonjs.com/
· repositorio de GitHub: https://github.com/BabylonJS/Babylon.js
· Aprende experimentando con Playground: http://www.babylonjs.com/playground
· Documentación: http://doc.babylonjs.com/

Más prácticas con JavaScript

Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de JavaScript de código abierto y tenemos la misión de crear mucho más con Borde de Microsoft. Aquí hay algunos para revisar:

• Cumbre web de Microsoft Edge 2015 (una serie completa de lo que puede esperar con el nuevo navegador, las nuevas características de la plataforma web y los oradores invitados de la comunidad)
• Compilación de //BUILD/ y Windows 10 (incluido el nuevo motor de JavaScript para sitios y aplicaciones)
• Avance de JavaScript sin romper la Web (Discurso de apertura reciente de Christian Heilmann)
• Innovaciones en plataformas web y aplicaciones web alojadas (una inmersión profunda en temas como manifold.JS)
• Consejos prácticos de rendimiento para hacer que su HTML/JavaScript sea más rápido (una serie de 7 partes desde el diseño receptivo hasta los juegos casuales y la optimización del rendimiento)
• La plataforma web moderna JumpStart (los fundamentos de HTML, CSS y JS)

Y algunas herramientas gratuitas para empezar: código de estudio visual, Prueba de Azurey herramientas de prueba de navegador cruzado – todos disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)