Este post es un resumen de tres experimentos que hicimos hace unos meses con TheeJS e información capturada con un Kinect.

-72.922615 287.8525 1105.0 177 187 177 1 -67.8342 290.718 1116.0 169 165 160 1 -86.35575 285.93344 1105.0 159 150 174 1

Los ejemplos muestran la visualización de este archivo en ThreeJS, utilizando lineas, puntos o ribbons. Podéis verlo en movimiento haciendo click en cada imagen.

Ver ejemplo en movimiento

Este ejemplo consiste en generar un terreno en 3 dimensiones con ThreeJS a partir de una imagen generada con Perlin Noise. El Perlin Noise es una función matemática que utiliza gradientes precalculados para generar valores pseudoaleatorios que pueden generar a su vez (por ejemplo) imágenes. Por ejemplo, un par de imágenes generadas a partir de Perlin Noise:

Como se puede ver en la imagen, el Perlin Noise genera imágenes con apariencia aleatoria, pero con cambios de color progresivos entre pixel. Es decir, no vemos un pixel negro junto a uno blanco, sino que los pixels aparecen "difuminados", sin cambios de color bruscos entre ellos.

En este ejemplo he utilizado la libería ToxicLibsJS, que tiene un módulo para generar imágenes con Perlin Noise. Al crear la imagen, almaceno el valor de color de cada pixel generado en una matriz para utilizarlo posteriormente. Después creo un plano con tantos vértices como pixels tiene la imagen. Como la imagen es de 200x200 pixels, necesito un plano de 200x200 vértices. Viendo la estructura de un plano:

Vemos que por ejemplo un plano de 3x3 segmentos tiene 4x4 vértices, es decir, un plano de nxn vértices tendrá (n-1)x(n-1) segmentos (el tercer y cuarto parámetro del constructor de un plano en ThreeJS son los segmentos de ancho y de alto), por lo que generamos nuestro plano con:

Hecho esto, recorremos la matriz de vértices y colocamos cada uno en una altura proporcional al color del pixel que le corresponde(en color hexadecimal, el blanco sería 0, y el negro 1)

Y ya está! a partir de aquí podemos hacer lo que queramos con el terreno generado. En este caso yo he dejado fija la cámara y giro el terreno para generar la sensación de movimiento, y he añadido unos sliders (con MinimalCompsJS) para hacer modificaciones sobre el terreno. El código del ejemplo está comentado, cualquier duda, comentario o propuesta la podéis hacer en los comentarios del post.

ThreeJS puede renderizar de dos modos: canvas y WebGL. El rendimiento de WebGL es muy superior, pero canvas tiene la ventaja de que está soportado en la mayoria de navegadores, incluidos los móbiles.

En la página http://caniuse.com podemos ver el soporte de los distintos navegadores para desktop y mobile de la etiqueta canvas:

Como se puede ver esta etiqueta está soportada por la mayoria de navegadores, incluso por los de móvil. En el caso de Internet Explorer 7 y 8, no son compatibles con esta etiqueta, pero existe la posibilidad de utilizar la libreria http://code.google.com/p/explorercanvas/ para que el contenido se visualice en estos navegadores.

En el caso de WebGL tenemos la siguiente tabla de compatibilidades:

El soporte total se limita a Chrome en escritorio, aunque la mayoria de cosas funcionan también en Firefox y Opera. En Mobile hay compatibilidad en Firefox para Android, aunque el rendimiento es bastante pobre (un cubo rotando en un Samsung galaxy S3 se mueve a 20fps).

Para IE hay una opción llamada http://iewebgl.com/ que permite instalar un plugin para el navegador y poder visualizar asi contenido WebGL en Explorer, pero esta instalación hay que realizarla en cada dispositivo.

Este ejemplo de ThreeJS va a ser el primero de una serie sobre esta librería. ThreeJS es un motor de 3D para Javascript, "parecido" a Papervision o Away3D para Actionscript.

Podéis bajar ThreeJS de aquí: THREEJS

Dentro de la descarga de ThreeJS viene una carpeta de ejemplos y varios JS adjuntos, como el Detector.js (para ver capacidades del navegador y mostrar mensajes en caso de que alguna funcionalidad no esté disponible).

En este primer ejemplo veremos cual es la estructura básica de una escena 3D y creamos un cubo.

Podéis ver el ejemplo en movimiento en el siguiente enlace:

VER EJEMPLO EN MOVIMIENTO

y el código comentado tras el salto.

La API de geolocalización de Javascript permite obtener la geoposición del usuario. Este ejemplo muestra como obtener la posición (latitud y longitud) del usuario y posicionarla sobre un mapa de GoogleMaps.

Algunas cosas a tener en cuenta a la hora de utilizar esta API son:

• La geolocalización es compatible con la mayoría de navegadores modernos, tanto de mobile como de escritorio. Los casos mas "problemáticos" de incompatibilidad pueden ser IE8 e inferiores, y Opera Mini
• La precisión de este método depende del navegador/dispositivo. Por ejemplo Chrome utiliza los Google Location Services e Internet Explorer los Microsoft Locacion Service, por lo que los resultados pueden variar en un mismo dispositivo de un navegador a otro.
• Cuando se llama al método getCurrentPosition el navegador mostrará una ventana al usuario solicitando permiso para obtener su posición.

Algunos enlaces de interes:

• Especificación W3C de la API de geolocalización
• Artículo de Mozilla
• Precisión y funcionamiento de la API de geolocalización
• Compatibilidad con navegadores

Ejemplo en Movimiento

El código comentado:

Monster Debugger es un depurador open source para Adobe Flash, Flex y Air.

Como introduccíón para uso, la gente de De Monsters ha preparado un juego que tenemos que completar modificando variables y accediendo a métodos.

Lo mejor es verlo, podéis descargaros la líbreria y jugar, aquí:

http://demonsterdebugger.com/game

Las clase AdjustColor permite crear un filtro para modificar las propiedades brillo, contraste, matiz y saturación de cualquier elemento de visualización. Esto nos permite, por ejemplo, pasar una imagen a blanco y negro (poniendo la saturación al mínimo(-100)) o ajustar los colores de una foto.

La clase AdjustColor está disponible para Flash Player 9 o superior.

El código comentado y los fuentes a continuación:

La versión 11 del player incluye, entre otras novedades, las APIs para aceleración GPU lanzadas en su día bajo el nombre de "Molehill" (ahora Stage3D). Dicho de forma muy resumida, estas APIs permiten al player el acceso a la GPU (unidad de procesamiento gráfico), que es mucho mas rápida que la CPU (unidad central de procesamiento). Por poner un ejemplo práctico, con los motores 3D hechos para Flash Player 10 (Papervision3D, Away3D 3.x o Alternativa3D 7), el límite de polígonos en una escena estaba en unos 10.000 (y ya iba la cosa regular), mientras que con estas nuevas librerias, podemos tener en escena cientos de miles de polígonos con un rendimiento superior (en la wiki de Alternativa hablan de 3 millones de polígonos).

Aunque estas APIs están disponibles para cualquier persona, al ser de muy bajo nivel lo mas probable es que a no ser que queramos programar algo muy específico nos sea mas cómodo utilizar alguna de las librerías que hay ahora mismo en desarrollo y que traducen estas instrucciones a "lenguaje humano".

Algunas de las librerías que ya hacen uso de Stage3D son:

-Alternativa3D (a partir de la versión 8)

-Away3D (a partir de la versión 4)

-Flare3D

Otros enlaces de ayuda sobre Flash Player 11 y Stage3D son:

-Flash Player Developer Center - Stage 3D

-Adobe Max 2011: Flash Player 11 and Adobe Air 3: Changing the game

-Stage3D (Molehill): The History

Este truco sirve para cuando necesitamos obtener las coordenadas de un punto en Google Maps (por ejemplo para utilizarlas luego para mostrar ese mismo punto en un mapa que montemos nosotros en Flash con la API de Google). Para obtener estas coordenadas basta con que busquemos la dirección que queramos en Google Maps y después, en la barra de dirección pongamos esta linea de javascript:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Pulsamos intro, y nos saltará una ventana con las dos coordenadas del punto que hemos buscado.

Ya queda poco para que salga la versión beta de Away3D 4, mientras tanto he estado haciendo pruebas con las últimas actualizaciones y ha salido esto. En cuanto esté en beta publico los fuentes.

Para poder ver esta demo hay que tener instalado FP11.

VER DEMO