miércoles, 8 de junio de 2016

Assimp, convierte tus modelos 3D entre formatos de la mejor manera posible

Assimp es un fantástico programa gratuito, software libre bajo la licencia BSD que convierte tus modelos 3D de un formato a otro. Muy útil si descargamos modelos de alguna página web y el formato en el que viene no es el que deseamos.

La lista de formatos que acepta como entrada:
  • Autodesk ( .fbx )
  • Collada ( .dae )
  • glTF ( .gltf, .glb )
  • Blender 3D ( .blend )
  • 3ds Max 3DS ( .3ds )
  • 3ds Max ASE ( .ase )
  • Wavefront Object ( .obj )
  • Industry Foundation Classes (IFC/Step) ( .ifc )
  • XGL ( .xgl,.zgl )
  • Stanford Polygon Library ( .ply )
  • *AutoCAD DXF ( .dxf )
  • LightWave ( .lwo )
  • LightWave Scene ( .lws )
  • Modo ( .lxo )
  • Stereolithography ( .stl )
  • DirectX X ( .x )
  • AC3D ( .ac )
  • Milkshape 3D ( .ms3d )
  • * TrueSpace ( .cob,.scn )
  • Biovision BVH ( .bvh )
  • * CharacterStudio Motion ( .csm )
  • Ogre XML ( .xml )
  • Ogre Binary (.mesh)
  • Irrlicht Mesh ( .irrmesh )
  • * Irrlicht Scene ( .irr )
  • Quake I ( .mdl )
  • Quake II ( .md2 )
  • Quake III Mesh ( .md3 )
  • Quake III Map/BSP ( .pk3 )
  • * Return to Castle Wolfenstein ( .mdc )
  • Doom 3 ( .md5* )
  • *Valve Model ( .smd,.vta )
  • *Open Game Engine Exchange ( .ogex )
  • *Unreal ( .3d )
  • BlitzBasic 3D ( .b3d )
  • Quick3D ( .q3d,.q3s )
  • Neutral File Format ( .nff )
  • Sense8 WorldToolKit ( .nff )
  • Object File Format ( .off )
  • PovRAY Raw ( .raw )
  • Terragen Terrain ( .ter )
  • 3D GameStudio (3DGS) ( .mdl )
  • 3D GameStudio (3DGS) Terrain ( .hmp )
  • Izware Nendo ( .ndo )
El asterisco indica soporte limitado. A su vez, Assimp permite exportar a:
  • Collada ( .dae )
  • Wavefront Object ( .obj )
  • Stereolithography ( .stl )
  • Stanford Polygon Library ( .ply )
 El proyecto Assimp cuenta con una interfaz gráfica para Windows llamado Open 3D Model Viewer.

¿Cómo se usa Assimp?

Assimp es un programa de línea de comandos. Para Windows acude a la página oficial, para Debian/Ubuntu usa
sudo apt install assimp-utils
Desde la línea de comandos la sintaxis usada para transformar el modelo de un formato a otro es sencilla
assimp export MiModeloOriginal.blend MiModeloExportado.obj
Y ya está, no puede ser más sencillo. Si lo tuyo no es la línea de comandos, echa un vistazo a Open 3D Model Viewer, aunque solo está disponible en Windows.

lunes, 6 de junio de 2016

Autodesk 123D Catch, escanea objetos del mundo real y conviértelos en modelos 3D

Autodesk 123D Catch es un producto de la compañía Autodesk, famosa por AutoCAD, 3DS MAX, Maya y un sinfín de programas de edición, para capturar objetos de la realidad y convertirlos en objetos 3D informatizados, listos para ser usados en aplicaciones y juegos, usando herramientas como Babylon.js. 123D Catch es gratuito para uso no comercial, se enmarca dentro de la suite 123D, 100% online.



Para capturar el objeto se recomienda descargar la aplicación, compatible con iOS y Android. Debemos realizar unas cuantas fotos, cuántas más mejor, del objeto a escanear, desde distintos puntos de vista. Las imágenes se suben a los servidores de Autodesk que las procesan. Más tarde podremos ver el modelo 3D. La aplicación se estructura a modo de red social, pudiendo compartir en un muro nuestros escaneos, aunque hay espacio de almacenamiento infinito para proyectos privados también.



Desde la web podremos descargar el modelo, con sus texturas en formato OBJ, STL y 3DP. Tendremos una vista previa del modelo y podremos editarlo con otros programas de la suite 123D, como 123D Make.

sábado, 4 de junio de 2016

Babylon.js Sandbox, prueba tus archivos .babylon

¿Conocías el sandbox de Babylon.js? Se trata de una web oficial desde la que podemos ver nuestros archivos .BABYLON directamente. Está pensado para comprobar rápidamente si hay errores en la exportación desde Blender o 3DS MAX. Para acceder al sandbox solo debes entrar en: http://www.babylonjs.com/sandbox/

jueves, 2 de junio de 2016

Tutorial de Babylon.js - Construyendo una escena básica

Babylon.js es el motor más popular para trabajar con juegos 3D en HTML5. A diferencia de Three.js, también muy conocido, Babylon.js se enfoca totalmente a juegos con audio, físicas, controles, etc mientras que Three.js es un motor gráfico, sin más.

¿Qué necesitamos para empezar?

Abre un navegador que soporte WebGL. Tanto Firefox como Chrome son buenos, nosotros usaremos Firefox. Edge y Safari también lo soportan pero las herramientas de desarrollo que incorporan no son tan buenas.

Crea una carpeta para guardar tus proyectos. Descárgate la última versión de Babylon.js desde la página oficial.

Fichero HTML

Todas las aplicaciones HTML5 no dejan de ser páginas web corrientes que usan unas APIs que antes no existían. Así pues, y aunque la programación dura se haga con JavaScript, siempre es necesario un fichero HTML para empezar. La estructura para empezar va a ser la siguiente:
¿Qué podemos apreciar? Es una página corriente con su título y su charset, sin embargo dentro del body solo encontramos la etiqueta Canvas y la etiqueta Script con un fichero escena.js. La etiqueta Canvas fue añadida en HTML5 y sirve para dibujar en ella. Es agnóstica, en el sentido de que varias APIs diferentes pueden trabajar y mostrar sus resultados en Canvas. Los dos modos principales son 2d y webgl. La API 2D está pensada para juegos, animaciones, etc en dos dimensiones. La API WebGL nos permite usar el poderío de la tarjeta gráfica, pues es simplemente un puente con los drivers OpenGL de tu tarjeta. Una vez hecha esta aclaración vamos a crear la escena.

Iniciando la escena

Dentro del archivo escena.js, que debe estar en la misma carpeta que el fichero HTML escribimos.

var canvas = document.getElementById("main");
var engine = new BABYLON.Engine(canvas);
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.6,0.6,0.6);

Con esto primero obtenemos el elemento canvas para que pueda ser usado por JavaScript. A continuación creamos una nueva instancia del motor Babylon.js, usando como lienzo el canvas que acabamos de obtener. A continuación creamos una escena. Una escena es un conjunto de objetos, cámaras y luces y puede ser renderizado. A esa escena le asignamos un color de fondo con una terna de números siguiendo el patrón RGB. Es decir, 0.6 sobre 1 de rojo, 0.6 sobre 1 de verde y 0.6 sobre 1 de azul.

Renderizando la escena

Antes de continuar vamos a ver como se renderiza la escena. En Babylon tenemos que usar una función como render loop. Esta función se encargará de dibujar constantemente la escena, un frame, haya habido cambios o no. El número de frames que se han generado en un segundo se conoce popularmente como FPS y para un rendimiento óptimo los FPS nunca deberían ser inferiores a 30. Añade en el mismo archivo más abajo lo siguiente:

function renderLoop(){
 scene.render();
 // box.rotation.x += 0.01;
 // box.rotation.y += 0.01;
}
engine.runRenderLoop(renderLoop);

He comentado una rotación de un cubo que vamos a añadir después, al final puedes quitar el comentario y ver como gira el cubo.

Cámaras

Las cámaras son objetos dentro de una escena que sirven para indicar qué y cómo ha de renderizarse. Piensa como si fuera una cámara de cine, la escena puede ser muy amplia, pero solo se verá lo que enfoques con la cámara. Babylon.js trae muchos tipos de cámara, para empezar usaremos la FreeCamera.

var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0,0,-10),scene);
Para crear la cámara le asignamos un identificador (camera), le indicamos su posición con un vector X,Y,Z y con respecto a qué escena.

Las luces

La geometría 3D se aprecia en las pantallas de los ordenadores y los móviles gracias a los efectos luminosos. Por ello la luz es muy necesaria. Vamos a crear una luz puntual, es decir, concentrada en un punto y que dispersa en todas direcciones.

var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10,10,0),scene);
Como podrás comprobar, las luces se crean de manera similar a las cámaras.

Mesh

Los Mesh son los objetos "que se ven", es decir todo lo que hay en una escena que no es cámara ni luz. Los Mesh están compuestos de una geometría, que define su forma, y un material, que define cómo le afecta la luz. Babylon.js tiene unas geometrías ya precargadas, realizaremos un cubo.

var box = new BABYLON.Mesh.CreateBox("box",2,scene);
box.rotation.x = -0.2;
box.rotation.y = -0.4;
box.material = new BABYLON.StandardMaterial("material",scene);
box.material.emmisiveColor = new BABYLON.Color3(0, 0.58, 0.86); 
Con esto creamos el Mesh con geometría de cubo. Además lo hemos rotado en dos de sus ejes para así apreciar mejor el 3D. El material que hemos usado es StandardMaterial, al que le hemos configurado que cuando le llegue luz emita ese color.

El resultado

Si has hecho todo correcto ya deberías ver un cubo en la página que creamos al principio. Aquí también tienes el resultado.

martes, 31 de mayo de 2016

Three D Scans, obras de arte para tu proyecto en Babylon.js

Three D Scans es un magnífico proyecto que puede servirte en tus proyectos con Babylon.js. El sitio, propiedad de Oliver Laric, se dedica a escanear esculturas de museos de todo el mundo y poner a tu disposición los ficheros generados.
Los ficheros, nada ligeros, son del tipo OBJ o STL, dependiendo del modelo, se abren a la perfección en Blender. Ninguno posee texturas. Son de una calidad excepcional y los podemos usar en cualquier condición, pues según el sitio, no se aplica ninguna licencia de copyright a los modelos (supongo que se refiere a que están en Dominio Público, pero no lo especifica).

martes, 24 de mayo de 2016

¿Por qué elegir Babylon.js?

Babylon.js se ha convertido en el motor WebGL/HTML5 para juegos más popular. No ha sido fácil, al principio cuando surgió WebGL no había motores, al poco surgieron algunos motores gráficos muy buenos, que lo siguen siendo, como Three.js. Sin embargo eran motores gráficos, no de juegos. Si queríamos integrar un motor de físicas dentro de Three.js había que usar Physijs o Cannon.js, ambas soluciones tenían fallos o eran un engorro. Babylon.js nace cuando unos trabajadores de Microsoft deciden crear su propio motor.

Hoy en día Babylon.js posee unas características envidiables. A resaltar:
  • Un árbol de escena completo con múltiples cámaras, luces, objetos, animaciones y sonido.
  • Motor de colisiones integrado
  • Motor de físicas integrado usando oimo.js y cannon.js
  • Antialising
  • Motor de animaciones
  • Sistemas de partículas y partículas sólidas
  • Sprites y capas 2D
  • Motor de audio completo basado en WebAudio
  • Cuenta con modo offline
  • Uso de LOD, SIMD y WebWorkers para incrementar el rendimiento
  • Lenguaje de shaders y materiales propio
  • Niebla y otros efectos de postprocesado
  • Texturas dinámicas
  • Vídeo en las texturas
  • Compatibilidad con el formato DDS
  • Cámaras para WebVR, Occulus Rift y mandos de consola
  • Exportadores para OBJ, FBX y STL
  • Importadores para glTF, STL y OBJ
  • Compatibilidad con Blender, Unity 5 y 3DS Max
Además Babylon.js es software libre, bajo la licencia Apache 2.0 y puedes encontrar su código en GitHub. ¿Conoces más razones para usar Babylon.js? Cuéntanoslas
http://flightarcade.com/

http://www.babylonjs.com/Demos/HillValley
http://cdn.babylonjs.com/wwwbabylonjs/Screenshots/train.jpg