Tips de Desarrollo Web

Escrito por Juan David Nicholls

NAVEGACIÓN

Iniciando con Babylon.js

1. enero 2015 22:44 / Nicholls / / Comentarios (0)

Aprovechando los artículos anteriores donde doy una introducción a Blender, en este artículo vamos a observar como podemos aprovechar todo lo anterior y de paso iniciar en el desarrollo de Juegos 3D con HTML5 y WebGL utilizando la excelente librería que es Babylon.js (Se puede utilizar esta librería para crear apps para Windows 8.1!).

Artículos de Blender

http://www.nicholls.co/blog/post/Animacion-Digital-con-Blender

http://www.nicholls.co/blog/post/Continuacion-de-Blender

Enlaces Interesantes

Babylon.js

Es un Framework Javascript desarrollado por programadores de Microsoft para la creación de Juegos 3D con HTML5 y WebGL que cuenta con una serie de características como el manejo de luces, materiales, cámaras, sprites, capas, mallas, motor de colisiones, texturas, motor de animaciones, sistemas de partículas, conversión de archivos de modelado 3D como .OBJ, .FBX y .MXB, entre otras.

Características avanzadas

Iniciando con Babylon.js

De una manera rápida podemos descargarnos desde GitHub el archivo sin minimizar que se encuentra en la raíz del repositorio e importarlo en nuestra página Web.

Index.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title></title>
  7.     <meta name="description" content="">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <script src="babylon.1.14.js"></script>
  10.     <style>
  11.         html, body {
  12.             width: 100%;
  13.             height: 100%;
  14.             padding: 0;
  15.             margin: 0;
  16.             overflow: hidden;
  17.         }
  18.  
  19.         #renderCanvas {
  20.             width: 100%;
  21.             height: 100%;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <canvas id="renderCanvas"></canvas>
  27.     <script type="text/javascript" src="main.js"></script>
  28. </body>
  29. </html>

Como podemos ver estamos creando un canvas que será el lienzo que utilizará Babylon.js  para dibujar las escenas mediante WebGL. En nuestro archivo main.js es donde pondremos nuestro código para añadir mallas (Los objetos 3D), las luces, las cámaras, los materiales, etc.

main.js
  1. if (BABYLON.Engine.isSupported()) {
  2.     var canvas = document.getElementById("renderCanvas");
  3.     //Motor que se encarga de trabajar con WebGL
  4.     var engine = new BABYLON.Engine(canvas, true);
  5.     //Contenedor para todas las entidades, que trabajando juntas crearan la imagen en 3D
  6.     //Luces, camara y mallas
  7.     var scene = new BABYLON.Scene(engine);
  8.  
  9.     var renderloop = function () {
  10.         scene.render();
  11.     };
  12.     //Definimos un ciclo para el renderizado
  13.     engine.runRenderLoop(renderloop);
  14.  
  15.     //Nuestro codigo...
  16.     //Babylonjs viene con una libreria matematica completa para manejar vectores, matrices, colores, rayas, etc
  17.     var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
  18.     var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
  19.     var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
  20. }
  21. else {
  22.     alert("El Navegador debe de soportar WebGL");
  23. }

Babylon.js nos deja saber si el navegador soporta WebGL o por el contrario debemos mostrarle al usuario que se necesita un navegador más moderno. Luego instanciamos el motor que se encargará de mostrarnos todo en el lienzo que creamos previamente y podemos empezar a crear escenas en las cuales crearemos nuestros objetos. Para que constantemente se este actualizando nuestro canvas definimos un ciclo para el renderizado de una forma muy fácil.

Materiales

Un material es un objeto que define la forma de la malla. Babylon.js provee un objeto llamado StandardMaterial el cual cuenta con las siguientes propiedades:

  1. diffuseColor y diffuseTexture: Definir el color base de la malla (Es el color como tal del objeto).
  2. ambientColor y ambientTexture: Definir el color ambiente de la malla (Color de un objeto que se encuentra en la sombra, color que se refleja cuando es iluminado por la luz ambiente en lugar de la luz directa).
  3. specularColor y specularTexture: Definir el color especular de la malla (Color de la luz de una reflexión especular, reflexión que es característica de la luz reflejada de una superficie brillante).
  4. emissiveColor y emissiveTexture: Definir el color emitido por la malla (Color que tiene el objeto sin luz).
  5. opacityTexture: Definir la transparencia de la malla.
  6. reflectionTexture: Definir el color de reflexión recibida por la malla.
  7. bumpTexture: Definir el nivel de protuberancia de la malla sobre una base por pixel (Básicamente nos permite cambiar el aspecto de la superficie de los objetos sin cambiar su geometría).
  8. alpha: Definir la transparencia global de la malla.
  1. //Materiales
  2. //Objeto que define la forma de la malla
  3. var material = new BABYLON.StandardMaterial("default", scene);
  4. material.diffuseColor = new BABYLON.Color3(1, 0, 0);
  5. material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  6. material.specularColor = new BABYLON.Color3(1, 1, 1);
  7. sphere.material = material;

Material en Babylon.js

Para entender más sobre los materiales puedes ver los siguientes enlaces:

- http://blogs.msdn.com/b/eternalcoding/archive/2013/07/01/babylon-js-unleash-the-standardmaterial-for-your-babylon-js-game.aspx

- http://blogs.msdn.com/b/eternalcoding/archive/2013/07/10/babylon-js-using-multi-materials.aspx

Luces

Babylon.js cuenta con 4 tipos de luces diferentes (Puedes crear tantas luces como quieras pero el StandardMaterial sólo puede tener en cuenta hasta 4 luces simultáneamente):

  • PointLight: Emite luz en todas las direcciones desde una posición específica como el sol.
  • DirectionalLight: Emite luz desde el infinito hacia una dirección específica.
  • SpotLight: Emite luz desde una posición a una dirección, como si fuera dentro de un cono.
  • HemisphericLight: Luz ambiental especial basada en una dirección para determinar si el color de la luz viene desde el suelo o desde el cielo.

Las luces tienen 3 propiedades principales:

  • diffuse: Color difuso que determina la parte reflejada de la luz.
  • specular: Color especular.
  • position: posición/dirección.

Spot Lights también cuentan con:

  • angle: Ángulo del cono.
  • exponent: Exponente de atenuación.

Hemispheric Lights también cuentan con:

  • groundColor: Color de la parte del suelo de la luz.

Para entender más sobre las luces: http://blogs.msdn.com/b/eternalcoding/archive/2013/07/08/babylon-js-using-lights-in-your-babylon-js-game.aspx

Cámaras

Babylon.js soporta varios tipos de cámaras (Puedes crear tantas cámaras como quieras pero solo una puede estar activa al tiempo, se pueden activar varias cámaras solo si usas multi-ventanas):

  1. FreeCamera: Cámara FPS que se puede controlar con las teclas y el mouse (Cámara en primera persona).
  2. TouchCamera: Cámara controlada con eventos táctiles (Require hand.js para trabajar).
  3. ArcRotateCamera: Cámara que gira alrededor de un pivote dado, se puede controlar con los eventos del ratón o toque (Require hand.js para trabajar).
  4. DeviceOrientationCamera: Cámara que reacciona a los eventos de orientación del dispositivo, es decir cuando giras el dispositivo móvil.
  5. FollowCamera: Cámara diseñada para seguir cualquier elemento de la escena desde cualquier ángulo.
  6. VirtualJoysticksCamera: Cámara que reacciona a los eventos de un Joystick virtual, el cual es dibujado en el canvas mediante gráficos 2D para controlar las cámaras y otros elementos del escenario.
  7. OculusCamera: Cámara de doble vista que reacciona a los eventos generados por el Oculus Rift (Casco de realidad virtual).
  8. AnaglyphCamera: Cámara para gafas 3D de colores rojo y cian, que utiliza técnicas de filtrado de post-procesamiento.
  9. GamepadCamera: Cámara para trabajar con gamepads.

Todas las cámaras pueden manejar automáticamente las entradas del canvas llamando a la función attachControl, se puede revocar mediante el uso de detachControl.

Mallas

Son las entidades las cuales cuentan con muchas propiedades y que se pueden crear a partir de formas básicas o de lista de vértices y caras. Las formas básicas son el Cubo, la Esfera, el Plano, el Cilindro, el Toro y el Nudo.

  1. //Nombre de la caja, capacidad y escena
  2. var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
  3. //Nombre de la esfera, segmentos, diametro y escena
  4. var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
  5. //Nombre del plano, capacidad y escena
  6. var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
  7. //Nombre del cilindro, altura, diametro superior, diametro inferior, teselado, [altura opcional de las subdivs], escena y si es actualizable
  8. var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
  9. //Nombre del toro, diametro, espesor, teselado, escena y si es actualizable
  10. var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
  11. //Nombre del nudo, tubo, segmentos radiales, segmentos tubulares, p, q, escena y si es actualizable
  12. var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);

También se pueden crear mallas a partir de líneas, vértices e índices. Luego de creada la malla esta se puede modificar mediante las propiedades de posición, rotación y escala.

  1. box.position = new BABYLON.Vector3(0, 5, 0);
  2. box.rotation.z = 0.5;
  3. box.scaling.x = 4;

 

 

Un punto muy interesante es que se tiene la opción de poder establecer jerarquía entre las mallas, de esta forma todas las transformaciones en cuanto a la posición, rotación y escala del padre afectarán a los hijos.

  1. var cylinder = BABYLON.Mesh.CreateBox("Box" , 1.0, scene);
  2. cylinder.position = new BABYLON.Vector3(0, 2, 2);
  3. cylinder.parent = plane;

 

 

Otras propiedades con que contamos para la activación y la visibilidad de las mallas son:

  • StandardMaterial permite controlar la opacidad de un objeto con: La propiedad alpha para controlar la transparencia por malla, el canal alfa de diffuseTexture que hará que babylon.js active pruebas alfa para descartar todos los pixeles con valor alfa < 0.5 y la propiedad opacityTexture para definir la mezcla alfa por píxel.
  • La propiedad visibility para controlar la transparencia por malla directamente sin usar un material.
  • La propiedad isVisible para activar la renderización de la malla. La malla se mantiene en la escena para otras operaciones y esta no es transmitida a los hijos.
  • La función setEnabled para desactivar una malla y todos sus descendientes.

Colisiones

Babylon.js cuenta con un sistema de colisiones completo y muy fácil de utilizar. Para configurarlo hay que realizar los siguientes pasos:

  • Activar las colisiones en la escena a nivel mundial y definir la gravedad
  1. scene.collisionsEnabled = true;
  2. scene.gravity = new BABYLON.Vector3(0, -9, 0);
  • Configurar la cámara que se utilizará para las colisiones (El motor de colisiones considera la cámara como un elipsoide, una especie de capsula). También se puede crear una cámara volando para que no se aplique la gravedad a esta.
  1. camera.checkCollisions = true;
  2. camera.applyGravity = true;
  3. camera.ellipsoid = new BABYLON.Vector3(0.5, 1, 0.5);
  • Se definen las mallas que van a colisionar 
  1. plane.checkCollisions = true;
  2. sphere.checkCollisions = true;

  • Intersección entre objetos

  1. intersectsMesh: Podemos detectar si hay colisión entre objetos.
  2. intersectsPoint: Podemos detectar si hay colisión con un vector en el espacio, es decir puntos específicos.

Sistemas de partículas

Mediante un sistema de partículas podemos añadir muy fácilmente efectos impresionantes en nuestras escenas como explosiones, impactos, efectos mágicos, etc. Crear un sistema de partículas es tan simple como:

  1. //Nombre, cantidad maxima de particulas activas simultaneamente y escena
  2. var particleSystem = new BABYLON.ParticleSystem("boom", 2000, scene);

Los sistemas de partículas cuentan con un gran listado de propiedades:

  • particleTexture: Define la textura asociada con cada partícula.
  • minAngularSpeed/maxAngularSpeed: El rango de la velocidad de rotación angular de cada partícula.
  • minSize/maxSize: El rango de tamaños de cada partícula.
  • minLifeTime/maxLifeTime: El rango de vidas de cada partícula.
  • minEmitPower/maxEmitPower: El rango de velocidad de emisión de cada partícula.
  • minEmitBox/maxEmitBox: La caja desde donde cada partícula es creada o un punto si el valor mínimo y máximo son el mismo.
  • direction1/direction2: El rango de direcciones de cada partícula.
  • color1/color2: El rango de colores de cada partícula.
  • colorDead: El color de una partícula muerta (Babylon.js interpolará el color de las partículas a este color).
  • deadAlpha: El alfa de una partícula muerta (Babylon.js interpolará el alfa de la partícula para finalizar con el alfa especificado).
  • textureMask: Una mascara usada para filtrar que parte de la textura se utiliza para cada partícula.
  • blendMode: Modo de fusión Alfa (BLENDMODE_ONEONE para agregar el color actual y el color de la partícula o BLENDMODE_STANDARD para mezclar el color actual y el color de la partícula usando el alfa de las partículas).
  • emitter: Un Vector3 define la posición del sistema de partículas. También se puede utilizar una malla y en este caso el sistema de partículas utilizará la posición de la malla.
  • emitRate: La cantidad de partículas que se pueden emitir en cada fotograma.
  • manualEmitCount: Al especificar un valor >= 0 deshabilitará emitRate, permitiendo controlar manualmente la cantidad de partículas emitidas.
  • updateSpeed: Velocidad global del Sistema.
  • gravity: La gravedad que se aplica a las partículas.
  • targetStopDuration: Detiene el sistema de partículas después de una duración especifica.
  • disposeOnStop: Determina la parada del sistema de partículas (Útil para un sistema de partículas de un disparo con un específico targetStopDuration).

Nota: Un sistema de partículas se controla mediante las funciones start y stop.

Sprites y Capas

Babylon.js esta diseñado para utilizar WebGL para el desarrollo de aplicaciones y juegos. Babylon.js por lo tanto soporta sprites y capas 2D para el desarrollo de juegos 2D.

A una malla se le puede definir la propiedad billboardMode para alinearlo con la cámara para simular un objeto 2D:

  1. plane.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;

Un sprite es definido por una textura que contiene todos sus estados de animación

El estado actual se define mediante la propiedad cellIndex, la cual se puede manipular por código o usar la función playAnimation para dejar que Babylon.js controle esta propiedad.

Para optimizar el uso de los recursos varios sprites pueden utilizar la misma textura mediante un SpriteManager.

  1. //Nombre del sprite, ubicacion, capacidad de movimientos, tamao y escena
  2. var spriteManager = new BABYLON.SpriteManager("Enemy", "Enemies.png", 100, 64, scene);
  3. var enemy1 = new BABYLON.Sprite("enemy1", spriteManager);
  4. var enemy2 = new BABYLON.Sprite("enemy2", spriteManager);
  5. enemy1.position.y = enemy2.position.y = 0;
  6. enemy1.position.z = 20;
  7. enemy2.position.z = 100;
  8. enemy1.position.x = enemy2.position.x = 50;
  9. enemy2.invertU = true;//Invierte horizontalmente la textura
  10. //Donde inicia, donde termina, si es ciclica y la velocidad
  11. enemy1.playAnimation(0, 9, true, 100);
  12. enemy2.playAnimation(0, 9, true, 100);

Babylon.js es compatible con capas 2D con el fin de añadir fondos o poner en primer plano.

  1. //Nombre, archivo, escena y si la capa es de fondo
  2. var background0 = new BABYLON.Layer("back0", "Layer0.png", scene);
  3. var background1 = new BABYLON.Layer("back1", "Layer1.png", scene);
  4. var foreground = new BABYLON.Layer("fore0", "Layer2.png", scene, false);

 

Animaciones

La animación es básicamente el cambio de estado de un objeto mediante las transformaciones como la traslación, la rotación y la escala.

Las animaciones en Babylon.js las podemos realizar nosotros mismos utilizando Javascript con lo que se ha visto anteriormente en este artículo o se pueden realizar utilizando el motor de animaciones. El motor de animaciones se basa en objetos llamados Animation, una animación se define por tanto por las propiedades y una colección de claves (Cada una representa la animación en un momento dado) y después de creada se puede añadir a la propiedad animations de un objeto.

  1. //Nombre de la animacion, propiedad a animar, fotogramas por segundo, tipo de animacion y ciclos de la animacion
  2. var animation = new BABYLON.Animation("animation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
  3. animation.setKeys([
  4.     { frame: 0, value: 1 },
  5.     { frame: 50, value: 0.2 },
  6.     { frame: 100, value: 1 }
  7. ]);
  8. box.animations.push(animation);

Las animaciones pueden trabajar con varios tipos:

  • Float (BABYLON.Animation.ANIMATIONTYPE_FLOAT).
  • Vector3 (BABYLON.Animation.ANIMATIONTYPE_VECTOR3).
  • Quaternion (BABYLON.Animation.ANIMATIONTYPE_QUATERNION).

Y pueden tener diferentes comportamientos cuando llegan al límite de la animación:

  • Incrementar utilizando los valores anteriores (BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE).
  • Reiniciar al valor inicial (BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE).
  • Mantener el valor final (BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT).

Y para iniciar la animación solo basta con llamar la siguiente función

  1. //Objeto, Clave inicial, Clave final y si es un ciclo
  2. scene.beginAnimation(box, 0, 100, true);

  • Animaciones Complejas

Permiten elegir todo en cada fotograma de la animación. Se utiliza la función registerBeforeRender porque nos es útil cuando deseamos mover en función de muchos parámetros.

  1. scene.registerBeforeRender(function () {
  2.     sphere.rotation.x += 1;
  3. });

 

Texturas avanzadas

Las texturas pueden ser basadas en imágenes pero con Babylon.js se puede utilizar funciones avanzadas para generar texturas en tiempo de ejecución.

  • Texturas Dinámicas: Utiliza un lienzo para generar su contenido. Para crearla y modificarla es muy sencillo: 
  1. var dynamicTexture = new BABYLON.DynamicTexture("textura dinamica", 512, scene, true);
  2. dynamicTexture.hasAlpha = true;
  3. material.diffuseTexture = dynamicTexture;

Después de creada puedes actualizarla cuando quieras

  1. var count = 0;
  2. scene.beforeRender = function () {
  3.     // Dynamic
  4.     var textureContext = dynamicTexture.getContext();
  5.     var size = dynamicTexture.getSize();
  6.     var text = count.toString();
  7.  
  8.     textureContext.save();
  9.     textureContext.fillStyle = "red";
  10.     textureContext.fillRect(0, 0, size.width, size.height);
  11.  
  12.     textureContext.font = "bold 120px Calibri";
  13.     var textSize = textureContext.measureText(text);
  14.     textureContext.fillStyle = "white";
  15.     textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height - 120) / 2);
  16.  
  17.     textureContext.restore();
  18.  
  19.     dynamicTexture.update();
  20.     count++;
  21. };

El getContext devuelve el contexto de un verdadero canvas, así que todo lo que se puede hacer en un canvas esta disponible en una textura dinámica.

  • Texturas de vídeo: Puedes utilizar texturas en donde la fuente del contenido es un vídeo. 
  1. var ecran = scene.getMeshByName("Ecran");
  2. //Nombre, un arreglo de diferentes codecs del vdeo, capacidad, escena y si se desea utilizar mipmaps
  3. ecran.material.diffuseTexture = new BABYLON.VideoTexture("video",
  4. ["Scenes/Flat2009/babylonjs.mp4", "Scenes/Flat2009/babylonjs.webm"], 256, scene, true);

Para controlar el estado del vídeo (play/pause/stop) se puede utilizar la propiedad VideoTexture.video la cual da acceso al objeto interno en el DOM del vídeo.

  • Espejos

Son otro tipo de texturas dinámicas que utiliza Babylon.js para simular “Espejos” mediante la reflexión y llenar la textura con los resultados. Estos se pueden configurar mediante el canal reflectionTexture de un standardMaterial

  1. var mirror = BABYLON.Mesh.createBox("Espejo", 1.0, scene);
  2. mirror.material = new BABYLON.StandardMaterial("espejo", scene);
  3. mirror.material.diffuseColor = new BABYLON.Color3(0.4, 0, 0);
  4. mirror.material.reflectionTexture = new BABYLON.MirrorTexture("espejo", 512, scene, true);
  5. mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);//El plano de reflexion
  6. mirror.material.reflectionTexture.renderList = [box, sphere];//Objetos que se renderizaran

 

Importar escenas desde recursos 3D

Babylon.js puede cargar escenas desde un formato de archivo .babylon. Este formato de archivo de basa en JSON y contiene todos los datos necesarios para crear una escena completa.

Babylon Export

Un archivo .babylon puede ser creado mediante una herramienta personalizada la cual puede ser descargada desde GitHub https://github.com/BabylonJS/Babylon.js/tree/master/Exporters (BabylonExporter.zip). Aquí encontrarán un ejecutable que les permitirá exportar mediante la línea de comandos un archivo .babylon desde varios formatos de archivo:

  1. .FBX
  2. .OBJ
  3. .MXB 
  1. BabylonExport.exe /i:"C:\Archivo.obj" /o:"C:\CarpetaDestino"

 

Blender

Nosotros podemos producir archivos .babylon desde Blender, para estos debemos primeramente descargar el script desde GitHub https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Blender 

Luego de descargado abrimos Blender y nos vamos para File/User Preferences… y damos Click en Install From File, aquí debemos de seleccionar el script

Instalar el complemento para exportar de Blender a Babylon.js

Y para activar este complemento en User Preferences nos ubicamos en Addons, seleccionamos la categoría Import-Export y buscamos Babylon.js para habilitarlo

Habilitar complemento para exportar de Blender a Babylon.jsY para guardar los cambios damos Click en Save User Settings.

Ya luego podemos crear nuestra Escena en Blender con lo que aprendimos en artículos anteriores y por último exportarla a un archivo .babylon

Exportar de Blender a Babylon.jsPara cargar nuestra escena fácilmente en nuestra página web Babylon.js nos provee una función Load mediante el objeto BABYLON.SceneLoader

  1. if (BABYLON.Engine.isSupported()) {
  2.     var canvas = document.getElementById("renderCanvas");
  3.     var engine = new BABYLON.Engine(canvas, true);
  4.  
  5.     BABYLON.SceneLoader.Load("", "demo.babylon", engine, function (newScene) {
  6.         newScene.executeWhenReady(function () {
  7.             engine.runRenderLoop(function () {
  8.                 newScene.render();
  9.             });
  10.         });
  11.     }, function (progress) {
  12.         console.log(progress);
  13.     });
  14.     window.addEventListener("resize", function () {
  15.         engine.resize();
  16.     });
  17. }

También otra opción muy útil con que contamos es poder cargar uno o más objetos desde otra escena

  1. //(Nombre de la malla[si esta vacia carga todas], la carpeta donde se encuentra el archivo, el archivo .babylon, la escena a la que se importa la malla y el callback cuando ya se haya importado)
  2. BABYLON.SceneLoader.ImportMesh("", "", "guantes.babylon", newScene, function (newMeshes) {
  3.     guantes = newMeshes;
  4. });

Los siguientes modelos 3D (Archivos .OBJ) son creados por mi buen amigo Esteban Velaren

Configurar Servidor para cargar el tipo MIME .babylon

Si tu sitio Web se encuentra en un servidor IIS (Por ejemplo si estas trabajando en Azure) es necesario configurar el tipo MIME .babylon. El tipo MIME básicamente es una descripción del tipo de archivo para que el navegador pueda escoger de manera apropiada como mostrar el elemento

  1. <?xml version="1.0"?>
  2. <configuration>
  3.   <system.webServer>
  4.     <staticContent>
  5.       <mimeMap fileExtension=".babylon" mimeType="application/babylon" />
  6.       <!-- Ejemplo de otros tipos de Archivos -->
  7.       <mimeMap fileExtension=".json" mimeType="application/json" />
  8.       <mimeMap fileExtension=".obj" mimeType="application/octet-stream" />
  9.       <mimeMap fileExtension=".mtl" mimeType="application/octet-stream" />
  10.       <mimeMap fileExtension=".fx" mimeType="application/shader" />
  11.     </staticContent>
  12.   </system.webServer>
  13. </configuration>

Espero que te haya gustado este artículo y puedas trabajar con WebGL muy fácilmente mediante Babylon.js :D

Etiquetas :
blog comments powered by Disqus