Etiqueta : html5

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.

Contenidos elearning HTML5/swf con Adobe Flash

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

Antes de nada, quisiera recordar que Adobe Flash se compone de dos partes bien diferenciadas. Por un lado está el programa de escritorio Adobe Flash ProfessionalCC, generador de archivos .swf, y por otro lado, el motor de reproducción de estos archivos .swf, que es Adobe Flash Player. Actualmente Adobe Flash ProfessionalCC también ofrece otras posibilidades para crear aplicaciones para dispositivos móviles como iOS o Android mediante la tecnología Adobe AIR, pero esta faceta sería para tratarla en otro post.
(más…)

La importancia del continuo aprendizaje en el desarrollo web

Por José Antonio Rodríguez Martínez
Web developer de OpenSistemas

Son muchas las tecnologías utilizadas en el desarrollo web. En los últimos años, como se ha podido observar, ha habido un cambio vertiginoso en cuanto al tipo de herramientas que disponemos para desentrañar esta actividad, así como en la cantidad de nuevas opciones que ofrecen las nuevas tecnologías. (más…)

Reorientando la carrera profesional

por Javier Sotomayor
COO de OpenSistemas

Comentábamos en un post anterior que el sector de las tecnologías de la información es uno de los que mejor está resistiendo los embates de la crisis. Es un sector que crece y sigue generando empleo, sobre todo en empresas de tamaño medio, que son capaces de ajustar sus costes estructurales a la situación del mercado de forma más ágil que las grandes consultoras tecnológicas. Y esta situación es conocida ya en el mercado, sobre todo entre aquellos jóvenes que tras años de lucha para sacar adelante una carrera universitaria ven cómo el futuro prometedor que les aguarda es engrosar las listas del paro o probar suerte buscando un puesto de trabajo en el extranjero. Y eso si tienes un nivel de idiomas decente, que la mayoría no lo tiene. (más…)

¿Crisis?, ¿qué crisis?

por Javier Sotomayor Aramburu
COO de OpenSistemas


Ha quedado claro que el sector de las Tecnologías de la Información (TI) es el que mejor está resistiendo a la situación económica actual. Aparte de las grandes consultoras, que manejan contratos millonarios en empresas del sector público y sector banca, y que han visto reducido su negocio en un porcentaje significativo traduciéndose en ajustes de personal a gran escala, las pequeñas y medianas empresas, sobre todo si tienen un componente alto en innovación, están capeando la situación con bastante éxito. (más…)