Etiqueta : 3d

Three.js 3D en nuestros navegadores web

Por José Manuel Cristóbal
Consultor Open Source en OpenSistemas

En octubre de 2014 el World Wide Web Consortium (W3C) publicó la versión definitiva de la quinta revisión del estándar de HTML. El CEO de la W3C Jeff Jaffe, dijo “Ahora estamos en un punto estable en el que cualquiera puede construir sobre el estándar y tener la certeza de que funcionará en todos los navegadores”.

Citando a Tim Berners-Lee, director del W3C y creador de la WWW, dijo “Hoy en día no damos importancia a ver vídeo y audio de forma nativa en el navegador, o de ejecutar un navegador en un teléfono”, “Esperamos poder compartir fotos, comprar, leer noticias y buscar información donde sea, en cualquier dispositivo. Aunque sigue siendo invisible para muchos usuarios, el HTML5 y la Open Web Platform están conduciendo estas expectativas crecientes de los usuarios”.

Lo cierto es que HTML5, incorpora nuevos elementos y atributos, unos más ocultos de cara al usuario, como la semántica de las etiquetas y otros más visuales como el audio, vídeo o canvas.

A canvas 2D, popularmente se le conoce como “el sustituto Flash Player”, pero canvas también es capaz de renderizar y crear 3D interactivos en los navegadores, sin necesidad de plugins de terceros.

Actualmente, los navegadores están desarrollando y mejorando el WebGL, que es la especificación estándar basada en OpenGL 2.0, para mostrar gráficos 3D acelerados por hardware GPU, (unidad de procesamiento gráfico). A fecha de hoy el navegador más aventajado para el renderizado 3D, es el navegador Google Chrome.

A la par, se están desarrollando nuevas librerías de JavaScript, que facilitan la programación de WebGL, entre ellas la más popular y la que tiene más seguidores es Three.js

Three.js fue creada por el español Ricardo Cabello en abril de 2010, en un principio fue desarrollado para flash action script y después fue trasladado a JavaScript, pudiendo renderizar en canvas y en SVG, posteriormente Paul Brunt añadió un módulo para renderizar en WebGL. En la actualidad hay más de 90 programadores que están manteniendo esta librería.

Las características principales son:

  • Renderizadores: Canvas, SVG y WebGL.
  • Efectos: Anaglyph, cross-eyed y parallax barrier.
  • Escenas: añadir y eliminar objetos en tiempo de ejecución; efecto niebla.
  • Cámaras: perspectiva y ortográfica; controladores: trackball, FPS, trayectoria y otras.
  • Animación: armaduras, cinemática directa, cinemática inversa, morphing y fotogramas clave.
  • Luces: ambiente, dirección, luz de puntos y espacios, sombras: emite y recibe.
  • Materiales: Lambert, Phong, sombreado suave, texturas y otras.
  • Shaders: el acceso a las capacidades del OpenGL Shading Language (GLSL): reflejos en la lente, pase profundo y una extensa biblioteca de post-procesamiento
  • Objetos: mallas, partículas, sprites, líneas, cintas, huesos y otros.
  • Geometría: plano, cubo, esfera, toroide, texto en 3D y otras; modificadores: torno, extrusión y tubo.
  • Cargadores de datos: binario, imagen, JSON y escena.
  • Utilidades: conjunto completo de funciones matemáticas en 3D, incluyendo tronco, matriz Quaternian, UVs y otras.
  • Exportación e importación: utilidades para crear archivos compatibles con JSON Three.js desde: Blender, openCTM, FBX, Max, y OBJ.
  • Soporte: La documentación de la API se encuentra en construcción, foro público y wiki.
  • Ejemplos: Más de 150 archivos de códigos de ejemplo más las fuentes, modelos, texturas, sonidos y otros archivos soportados.
  • Depuración: Stats.js, WebGL Inspector, Three.js Inspector.

En un futuro creo, que esta tecnología encierra un gran potencial por explorar, a simple vista podríamos pensar que sólo se hará un uso exclusivo en video juegos, pero también puede adaptarse a nuevas formas de representar la información, con interfaces interactivas en 3D, haciendo un uso adecuado de esta tecnología.

Una alternativa podría ser una interfaz para navegadores web, que sea capaz de hacer, una representación gráfica interactiva, de recogida de datos actualizados de votaciones, con animaciones de mapas en 3D, etc, el resto queda para nuestra imaginación.

El tiempo nos irá diciendo, cuáles son las soluciones que hoy parecen impensables, y que mañana se convertirán en hechos cotidianos, sin apenas darnos cuenta.

A mí particularmente me ha picado el gusanillo y he estado trasteando con Three.js. Añadiendo objetos, jugando con luces y movimientos, al final me ha quedado una especie de salva pantallas, con el cual aprovecho para desearos que tengáis un Próspero Año Nuevo.

Para visualizar esta demo, pinchar en este link. Es recomendable usar el navegador Google Chrome actualizado, en un ordenador con una potencia de mediana a alta.

En Three.js hay muchos más ejemplos interesantes, que muestran las posibilidades de los navegadores web actuales.

El modo de pensar de Pixar

Por Facundo Ferré Luparia
Web Designer de OpenSistemas

Hoy en día no sorprende que una película de animación esté realizada en su totalidad usando gráficos tridimensionales creados por ordenador. La cartelera, cada año y con más abundancia, anuncia estrenos de este tipo de películas donde despunta sin duda la productora pionera en semejante empresa: Pixar. (más…)

Blender

Logo

En este post, he decidido hablaros de una herramienta llamada Blender, la cual ha sido el instrumento principal en la realización de mi PFC en la Universidad Politécnica de Madrid. El proyecto consistía en la simulación de efectos meteorológicos, tales como avalanchas o incendios, y a pesar de que en un principio la utilización de la herramienta es compleja y necesita mucho tiempo de investigación, finalmente me ayudo a conseguir un resultado óptimo.

Es un programa multiplataforma para modelar, animar y crear gráficos tridimensionales. Es de distribución libre y pese a que su interfaz es complicada y poco intuitiva, el programa tiene muchas ventajas sobre otros programas con la misma dedicación.

Interfaz

Entre las características mas relevantes tenemos:

* Tamaño de origen realmente pequeño comparado con otros paquetes de 3D.
* Gran variedad de primitivas geométricas, incluyendo curvas, mallas poligonales, vacíos, NURBS, metaballs.
* Incluye cinemática inversa, deformaciones por armadura o cuadrícula, vértices de carga y partículas estáticas y dinámicas.
* Edición de audio y sincronización de vídeo.
* Características interactivas para juegos.
* Renderizado interno versátil e integración externa con potentes trazadores de rayos.
* Lenguaje Python para automatizar o controlar varias tareas.
* Blender acepta formatos gráficos como TGA, JPG, Iris, SGI, o TIFF.
* Motor de juegos 3D integrado.
* Simulaciones dinámicas para softbodies, partículas y fluidos.

Actualmente, blender va por la versión 2.54 Beta, ha sido la principal herramienta usada en el largometraje “Plumíferos”, el cual es el primero realizado íntegramente con software libre, y fue usado en la producción de “Spider man 2” para la previsualización de escenas.

Gracias.