Bienvenido a Wonderful World, un lugar donde la imaginación y la creatividad son el límite.


Ver proyecto en funcionamiento

¿ De qué se trata WW?

Es un pequeño mundo en 3d en el que debes moverte con los botones del mouse donde será necesario encontrar una llave especial que abrirá el portal dimensional para dar con la solución (funciona mejor en Chome, es necesario una tarjeta gráfica potente). Fue elaborado mediante la librería Three.js y programas de animación 3d como 3d Studio Max y Zbrush.

Control principal - mouse

Girar / Accionar / Tomar objeto
Acercar / Alejar
Desplazarse

¿ Qué es Three.js ?

Si le interezan los gráficos, animaciones en 3d y desarrollo de juegos, le podría resultar interesante este proyecto.


¿Cómo empezó?

Todo tiene un inicio.

Para conocer a Three.js, me encontraba buscando la manera de como poder ver una escena 3d en la web. Descargué y utilicé varios programas: Alteros 3D v3.0, A360 Viewer A3dsViewer, es aquí en este último (A3dsViewer) el cual noté que daba la posibilidad de convertir un archivo 3DS a HTML5 con formato (webgl, three.js).


-Click en imagen para ver otras capturas de A3dsViewer-

Me gustó bastante el resultado ya que se podía rotar y escalar el modelo 3d en la web pero algo faltaba, aún no estaba satisfecho ya que no sólo deseaba pasar una escena estática sino un archivo animado a la web, es allí cuando me doy cuenta que existe algo que se llama three.js el cual decido investigar en google el cual me lleva donde quería, poder ver un ejemplo práctico, así que de google caí en el Blog de Andrew Ray.

Para comenzar en Three.js empecé con un ejemplo de una ballena animada en 3d que encontré en el blog de Andrew y me incentivó a investigar como estaba elaborado le apliqué la ingeniería inversa desarmándolo para alterar el original y ver que sucedía, pasé tiempo y no me aparecía la ballena en Chrome, sólo la pantalla en negro, algo andaba mal, luego de tanto buscar y de dar vueltas me di cuenta que era la versión de three.js, estaba utilizando otra diferente (el ejemplo funcionaba con una versión anterior).

Ver ejemplo en funcionamiento

(Sino se ve presiona Shift + F5 para actualizar a la librería de Three.js anterior , el ejemplo utiliza una versión anterior de la librería Three.js, no se verá si en la caché o temporal del explorador está una versión distinta).

Se utiliza un archivo de imagen .jpg en este caso almacenado en la carpeta skins que sería la textura o piel de cada parte de la ballena.

Puedes verlo paso a paso en : How to Export a Rigged, Animated Model From 3ds Max to Three.js
(El artículo está en inglés. Andrew Rays Blog)

Luego implementé las instrucciones con mi propio personaje 3d el cual aprendí a pasar de obj a json mediante exportadores que se emplean en cada programa de diseño 3d, en mi caso 3d studio max:

ThreeJSAnimationExporter Se utiliza para pasar un archivo .max con animación de los bones a formato json.

ThreeJSExporter Se utiliza para pasar un archivo .max sin animación a formato json.

ThreeJSExporter_MorphTargets_v0 Se utiliza para pasar un archivo .max con animación tipo morph a formato json.

Fuente en github


(Click para ver)


(Click para ver)

La escena se fue ampliando con nuevas ideas. Para el desplazamiento en la escena, fue una de las cosas que más me costó debido a que deseaba que la animación del personaje estuviese sincronizada con el desplazamiento por el escenario y que fuera lo más preciso posible, algo así como frame por frame.

Para la animación tuve que decidir hacerlo de una manera propia utilizando temporizadores, alguna otra técnica o utilizar la librería específica de animación Tween.js, rápidamente me di cuenta que la primera opción era bastante costosa.

Al utilizar Tween leí que era muy fácil, no sé porque me costó tanto aprender a utilizarlo, tardé 3 o 4 días con períodos de frustración sólo para animar 2 trayectos, en ese tiempo varias veces dudaba si Tween era lo que quería. Vi muchos ejemplos con Tween para mover un objeto de un punto a otro, pero eso es fácil hacerlo sin Tween, lo que se necesitaba era algo más preciso, luego al lograr animar más de un trayecto con Tween pude ver algo de luz, hasta que conseguí dominarlo y posicionar los objetos con mayor precisión en la línea del tiempo.


Modelado de personajes y objetos.

Pensé en hacer un suricata porque es uno de los juguetes que tengo en casa así como el cerdito, la cangrejita juguetes de niños. El castillo de los dragones y el edificio01 nacio de la nada.

Los misiles fue una idea de hacer un arma y de algo que también fuese por los aires, sólo por ver algo volar y aprovechar el espacio aereo de la escena, así como la idea del avión, el globo aereo, los personajes se crearon rápidamente, analizando las ventajas de algunos de los programas de modelado 3d más utilizados en esta área mediante pruebas de como obtener la mejor representación de un objeto con la menor cantidad de polígonos (ver resultados de pruebas).


(Click para ver)

Los modelos 3d se pueden mejorar pero para empezar era lo que buscaba. Luego tuve tantas ideas que las tuve que anotar para irlas incluyendo mientras andaba.

Peter es mi tío, lo hice de varias maneras y dejé la que mejor me pareció en low poly.

Al final decidí llamar la escena "WonderfulWorld" (WW)

Todo empezó como un experimento.


(Ver otras escenas)

No fue fácil al principio pero al final las mejores cosas de la vida muchas veces son las que más cuestan, luego es como abrir una lata de soda.

Continuar viendo como se hizo WW...


Tutoriales

Tutorial simple de iniciación a la librería Three.js en pdf

Beginning with 3D WebGL - Codepen

Juegos