📅 1 de junio, 2021 👁️ 19

Implementar threejs & webGL en Javascript

Imagen de la nota
Implementar threejs o webGL, tecnologías que abran las posibilidades tanto en dispositivos de escritorio como dispositivos móviles es sin duda una de las prioridades en la capacitación de todo desarrollador web. Hoy en día, en un mundo donde las personas viven "saturadas" por creaciones audiovisuales es muy necesario contar con herramientas como las que el mundo 3D ofrece y que muchas veces no se usan con todo su potencial en la web. Aunque eso es precisamente lo que esta pasando y evolucionando mientras escribo estas líneas.Para implementar webGL en algún desarrollo web primero necesitamos entender que es, las sigas WebGL (Web Graphics Library) nos hablan de una librería gráfica pero ¿disponible a través de que herramientas?, bueno básicamente una: Javascript.WebGL (Web Graphics Library) es una especificación estándar que define un API implementada para JavaScript que permite la renderización de gráficos en 3D dentro de cualquier navegador web. No requiere usar plugins​ adicionales. Funciona en cualquier plataforma que soporte OpenGL 2.0 u OpenGL ES 2.0.WebGL está integrada completamente en todos los estándares web de los navegadores, permitiendo la aceleración de hardware a través de la GPU y el procesamiento de imágenes y efectos como parte del lienzo o "canvas" de la página web.Los elementos de WebGL se pueden combinar con otros elementos HTML y estar compuestos con otras partes de la página o del fondo de la página. Los programas WebGL consiste en un código de control escrito en JavaScript que permite usar la implementación nativa de OpenGL ES 2.0, un lenguaje similar a C o C++, que se ejecuta en una unidad de procesamiento gráfico (GPU).Si quieres ver todas las posibilidades de WebGL en la web te recomiendo mucho visitar https://webglsamples.org/¿Pero como se pueden crear estas grandiosas animaciones?. En realidad si eres un verdadero crack podrías desarrollar directamente en código estas maravillas.  Puedes consultar toda la documentación aquí . Documentación WebGLSin embargo existen distintas herramientas que permiten exportar a través de Javascript y WebGL un código listo con nuestra "escena 3d" (no siempre se llaman así) y muchas veces nos permiten controlar los elementos a través de distintos métodos, cada uno varia de la herramienta pero esencialmente consisten en lo mismo. Generan funciones que puedes controlar desde el frontend y que permiten al usuario interactuar con la web en 3 dimensiones.Este artículo no es para hablar de todas ellas pero de una librería genial "three.js".Three.js es una biblioteca ligera escrita en JavaScript para crear y mostrar gráficos animados en 3D en nuestro navegador Web y puede ser utilizada junto con el elemento canvas de HTML5, SVG o WebGL. El código fuente está alojado en un repositorio en GitHub.Si deseas ver algunos ejemplos geniales te recomiendo visitar : https://threejs.org/Lograr este tipo de ejemplos es algo complejo y muchos de ellos tienen muchas horas de trabajo invertidas, pero esto nos muestra el potencial que three.js y webGl tienen para la web. No tengo duda cuando les digo que muchos juegos y aplicaciones web funcionarán usando estas librerías en el futuro ya lo hacen de hecho, muchos juegos. Pero no hemos visto aún sino la punta del iceberg.

Llegó la respuesta para los que amaban Flash de Macromedia después Adobe

Como muchos de los desarrolladores de antaño recordarán existió una época en que muchos desarrolladores web optaron por usar flash, el reproductor de youtube alguna vez estuvo escrito en flash player si no mal recuerdo. Muchos desarrolladores si bien no hacían todo el sitio wen en flash lo usaban como un recurso multimedia que abría muchas posibilidades, una de ellas era el 3D.Sin embargo como muchos saben también Apple y el entonces vivo Steve Jobs negaron la entrada de flash a los dispositivos móviles de la compañía lo que significo el principio del fin para la tecnología Flash. Adobe pronto retiró el programa y hoy en día para muchos no existe ningún equivalente y quizá no exista aún con una interfaz gráfica amigable (y esto no es totalmente cierto).Pero webGL pronto terminará de explotar y entonces si veremos lo maravilloso de poder conectar destinos de un motor de búsqueda hasta un punto en un plano en una escena 3d, por mencionar uno de muchos ejemplos. Existen muchos clientes que matarían por tener hoy en día ya una web totalmente en 3d, y por eso en DreaminMedia estamos por lanzar esta tecnología como parte de nuestros servicios.Así que para ir puliendo un poco todo lo que hemos estudiado y aprendido hemos desarrollado algunos ejemplos que les iremos mostrando en esta entrada del blog, también les iré contando como hice para implementar WebGl , three.js, y trataremos de que sea muy ilustrativo para todos aquellos que al igual que nosotros están comenzando en el uso de esta tecnología.También les iré dejando los enlaces a los sitios web con la documentación , ejemplos y recursos que tomemos para la creación de los ejemplos que estarán publicados a continuación. Sin más que decir por ahora, les agradezco su tiempo y guarden este URL que seguramente les servirá mucho si están decididos a aprender WebGL, three.js

Una muestra de webGL a través de Unreal Engine

Para poder dar un vistazo a las cosas que podemos lograr en esta tecnología hemos publicado un demo usando la herramienta Unreal Engine, usando uno de los proyectos que usan para mostrar lo fácil que es crear una interface de juego en Unreal Engine que de hecho puede ser exportada a HTML5.Puedes visitar el demo que publicamos de Unreal Engine en este enlace