Tabla de contenidos

Aprender WebGL y Babylon.js a su propio ritmo

no dude en visitar nuestra línea de golf en 3D con WebGL Programación y Babylon.js para principiantes en Zenva Academia. El curso cubre el marco Babylon.js y explica todo lo que necesita para empezar con el uso de esta fantástica biblioteca en proyectos nuevos o existentes.

Tutorial

¿Alguna vez aviso cómo un juego de física es adictivo? En realidad, puedo pasar horas jugando con pequeñas simulaciones de física sólo porque se ve tan real.

Es por eso que decidió integrar un motor de física en babylon.js.

No se puede esperar y querer jugar en este momento? Sólo tienes que ir allí ..

Estado del arte

El objetivo no era crear un motor de física a partir de cero, ya hay un motor de buena física pocas escrito para JavaScript por la comunidad (Esta es una de las razones por qué amo JavaScript:. Existen es siempre un proyecto Js para lo que quieres hacer ^^) . Estos son algunos ejemplos (no me refiero a motor 2D pero sólo 3D los):

• Cannon.js: Un motor de JavaScript puro. Decidí usar esta porque el código es clara, eficiente y muy bien mantenido
  
• JigLibJS: Un puerto de JavaScript de la biblioteca de C / C ++ llamada JigLib
  
• Ammo.js:. Puerto A JavaScript de bala puerto engine.The se hizo usando emscripten y por lo tanto este es un puerto automatizado
  
• Bullet.js: Otro puerto de bala JavaScript
  
  

  Todos estos motores son grandes, pero tenía que hacer una elección. Así que decidí utilizar un motor puramente JavaScript (en frente a un puerto de uno ya existente) porque quería un motor diseñado y pensado para JavaScript.
  

  Por ejemplo, yo no mantener Ammo.js porque fue creado con emscripten. Debido a la forma en emscripten convierte las bibliotecas Javascript a que hay algunas cosas en Ammo.js que son más difíciles de usar -. Punteros por ejemplo, añadir una capa adicional de complicación
  

  Debido a que son los puertos y no escritos en Javascript, no están optimizados para la web. Javascript tiene sus propias características y peculiaridades que hacen de desarrollo único.
  

  Activación de la física con babylon.js
  

  Así que vamos a volver a Babylon.js. Desde el punto de vista de un desarrollador web, motor de física le puede dar una gran cantidad de características interesantes entre las que podemos obtener por ejemplo:
  

  
  
  • simulación realista de las formas básicas (recuadro, Esfera, compuestos, etc …)
    
  • Simulación de fricción y bounciness
    
  • Link entre objetos (a cadenas Simular por ejemplo)
    
    

    Así que vamos a echar un vistazo sobre cómo activar todas estas cosas divertidas con Babylon.js:
    

    Habilitación de motor de física
    

    Para activar el motor de física, sólo tiene que ejecutar esta línea de código:
    scene.enablePhysics ();

    Se puede definir la gravedad de la simulación con el siguiente comando:
    scene.setGravity (nueva BABYLON.Vector3 (0, -10, 0)); 1scene.setGravity (newBABYLON.Vector3 (0, -10,0));

    Definición de impostores para sus mallas
    

    La simulación no funcionará directamente en sus mallas (demasiado complejo). En realidad, tendrá que crear un impostor geométrica para ellos. En este momento, lo único apoyo cajas, esferas y planos, pero en un futuro no muy lejano voy a seguir añadiendo nuevos impostores.
    

    Para definir un impostor, sólo tiene que llamar a la setPhysicState función:
    sphere.setPhysicsState ({impostor: BABYLON.PhysicsEngine.SphereImpostor, la masa: 1}); 1sphere.setPhysicsState ({impostor: BABYLON.PhysicsEngine.SphereImpostor, la masa: 1});

    El parámetro de la masa se puede establecer en 0 si desea crear un objeto estático (como una planta, por ejemplo).
    

    También puede definir la fricción (resistencia del objeto a movimiento) y la restitución (tendencia del objeto a rebote después de chocar con otra):
    ground.setPhysicsState ({impostor: BABYLON.PhysicsEngine.BoxImpostor, masa: 0, la fricción: 0,5, la restitución: 0,7}); 1ground.setPhysicsState ({impostor: BABYLON.PhysicsEngine.BoxImpostor, masa: 0, la fricción: 0,5, la restitución: 0,7});

    Creación de vínculos
    

    También puede vincular sus impostores con el fin de mantener siempre mallas enlazadas. Por ejemplo, puede crear cadenas como ésta:
    

    
    

    Para ello, sólo tiene (como siempre) una línea de código para ejecutar:
    esferas [índice] .setPhysicsLinkWith (esferas [índice + 1], nuevo BABYLON.Vector3 (0, 0,5, 0), nuevo BABYLON.Vector3 (0, -0,5, 0)); 1spheres [índice] .setPhysicsLinkWith (esferas [índice 1], newBABYLON.Vector3 (0,0.5,0), newBABYLON.Vector3 (0, -0.5,0));

    Creación de impostores compuestos
    

    Si desea crear la física más compleja objetos puede utilizar el scene.createCompoundImpostor función:
    // Compoundvar part0 = BABYLON.Mesh.CreateBox ( «part0», 3, escena); part0.position = nuevo BABYLON.Vector3 (3, 30, 0); var part1 = BABYLON.Mesh.CreateBox ( «part1», 3 , escena); part1.parent = part0; // Necesitamos una jerarquía para objectspart1.position compuesto = nuevo BABYLON.Vector3 (0, 3, 0); scene.createCompoundImpostor ({masa: 2, la fricción: 0,4, la restitución: 0,3, partes: [{malla: part0, impostor : BABYLON.PhysicsEngine.BoxImpostor}, {malla: part1, impostor: BABYLON.PhysicsEngine.BoxImpostor}]}); 12345678910111213 // Compoundvarpart0 = BABYLON.Mesh.CreateBox ( «part0», 3, escena); part0.position = newBABYLON .Vector3 (3,30,0); varpart1 = BABYLON.Mesh.CreateBox ( «part1», 3, escena); part1.parent = part0; // necesitamos una jerarquía para objectspart1.position compuesto = newBABYLON.Vector3 (0 , 3,0); scene.createCompoundImpostor ({masa: 2, la fricción: 0,4, la restitución: 0,3, partes: [{malla: part0, impostor: BABYLON.PhysicsEngine.BoxImpostor}, {malla: part1, impostor: BABYLON.PhysicsEngine .BoxImpostor}]});.

    Esto creará un objeto cuerpo rígido único basado en la jerarquía proporcionado
    

    La aplicación de un impulso
    

    Una vez que la escena está configurado, se puede jugar con sus mallas utilizando este código:
    var pickResult = scene.pick (evt.clientX, evt.clientY); var dir = pickResult.pickedPoint.subtract (scene.activeCamera.position); dir.normalize (); pickResult.pickedMesh.applyImpulse (dir.scale (10) , pickResult.pickedPoint); 1234varpickResult = scene.pick (evt.clientX, evt.clientY); vardir = pickResult.pickedPoint.subtract (scene.activeCamera.position); dir.normalize (); pickResult.pickedMesh.applyImpulse (dir. la escala (10), pickResult.pickedPoint);.

    Esto se aplicará un impulso sobre la malla seleccionada en un punto dado (en el espacio mundo)
    

    Exportación de una escena de la licuadora con la física habilitada
    

    Gracias a las capacidades de extensibilidad de Blender (con Python
    ), Yo era capaz de soportar exportación de información de la física

    Sólo tiene que seleccionar una malla e ir directamente a la pestaña Física:.
    

    
    

    A continuación, será capaz de definir masa, forma, la fricción y la restitución (bounciness):
    

    
    

    Y ya está! Simplemente exportar la escena en un archivo .babylon y utilizarlo en su propia aplicación / sitio
    o arrastrar y soltar a nuestra caja de arena.

    El poder de la web
    

    sigo siendo sorprendido por el poder de los navegadores actuales. En este momento, se puede tener una completa simulación 3D junto con un motor de física más exacta. Y que, con sólo unas pocas líneas de código JavaScript !!
    

    Ahora usted tiene todo lo necesario para crear maravillosos juegos y dinámicas para la web y para Windows 8! Así que vamos a dar rienda suelta a su creatividad. Quién sabe, el próximo Angry Bird es tal vez unas pocas líneas de código de distancia
    

    Mensajes relacionados