Cómo WebGL está reinventando el legado de Flash
¿Recuerdas todos esos proyectos con interacciones sobresalientes, animaciones alucinantes y emocionantes efectos de sonido acompañantes que dieron como resultado una experiencia de usuario intensamente inmersiva? Sí, es probable que se hayan creado con la ayuda de Flash.
Sin embargo, odio admitirlo, la era de esta rica plataforma multimedia ha llegado a su fin. Flash finalmente está muerto. ¡Pero no temas! Como sucede a menudo cuando una puerta se cierra, otra se abre, y Flash está siendo reemplazado lentamente por un sucesor más vigoroso y vigoroso. Tecnologías como WebGL y las bibliotecas de JavaScript que lo acompañan, como Three.js están creciendo rápidamente, lo que permite a los desarrolladores crear proyectos tipo Flash, sin los problemas de seguridad que los acompañan.
Hoy nos enfocaremos en WebGL y Three.js. Este emparejamiento es una opción poderosa para inmersión UX.
WebGL y Three.js
WebGL sirve como una base que proporciona instrumentos para manipular gráficos 3D interactivos y 2D. Le da la oportunidad de mezclar y combinar sus elementos con elementos HTML y combinarlos con otros componentes de la página o fondo.
Three.js es una biblioteca de Javascript con una lista de características de alta gama que le permiten operar con escenas, cámaras, luces, geometría y más. Está destinado a desbloquear el potencial de WebGL agregando funcionalidad extra a la plataforma. Hace que sea sencillo crear animaciones 3D aceleradas por GPU sin depender de los complementos del navegador.
Problemas de compatibilidad
Con las tecnologías modernas, siempre está atrapado en un dilema: o bien cree un proyecto de "talla única" que se ejecutará en varios dispositivos y ofrecerá una experiencia de usuario coherente, o pondrá todo en línea e impresionará instantáneamente a la audiencia a la que puede llegar .
Con WebGL y Three.js es la misma historia. Safari, Opera y la mayoría de los navegadores móviles (y nada de eso sobre Internet Explorer) son como una mosca en su Chardonnay. Desafortunadamente, una gran cantidad de usuarios están atrapados con navegadores heredados, por lo que la compatibilidad es todo un obstáculo, pero el soporte está creciendo (que es más de lo que se puede decir de Flash) y siempre que no se use para nada crítico, WebGL y Three.js son excelentes opciones.
Ejemplos
Vacío
Vacío es un experimento de Hi-ReS !, un estudio creativo con sede en Londres. Los desarrolladores querían abstraerse de las limitaciones inherentes a las plataformas y navegadores modernos y probar los límites de las tecnologías actuales. Parece que lo clavaron.
Es una aplicación puramente de escritorio que funciona con las funciones WebGL y Web Audio. Junto con Howler.js, GSAP y Coffee Collider, Three.js participó en la producción de este excelente parque infantil que inexorablemente atrae a los visitantes en línea en un viaje que se parece mucho a un libro digital.
Remodelación de la excelencia
Esta campaña interactiva dedicado al aniversario de Sennheiser es una odisea épica que combina no solo dramáticos paisajes de ciencia ficción sino también numerosas características y detalles de vanguardia. Es un experimento puro de Chrome que permite a los visitantes participar en la formación y la configuración de un monumento de sonido. A pesar de que la fase de formación se ha completado, un millón de personas en todo el mundo participaron en el evento. Le invitamos a hacer su propia contribución, examinar esta escultura de sonido masiva, y disfrutar del video de introducción y la ejecución de primera categoría.
Bruno Quintela
La cartera personal de Bruno Quintela es un experimento WebGL renderizado en tiempo real que demuestra el potencial del artista y las posibilidades de las tecnologías web actuales. Usa tu mouse para examinar la escena a fondo. Arrástrelo en diferentes direcciones para ver qué hay escondido dentro de esta gran cantidad de polígonos 3D colocados con precisión y con superficies brillantes. La idea sirve como una excelente apertura para el sitio web que deja una primera impresión fuerte y duradera.
Prueba de partículas
Este proyecto exhibe un torbellino de tubos de partículas más ordenados y organizados que irradian un ambiente de alta tecnología. Hay un centro de control que lo alienta a jugar con atributos tales como el radio de una nube de forma cilíndrica, la densidad de los tubos, la altura, la escala y más. El concepto es fascinante.
Shader de agua
Este artista ha logrado imitar una superficie de agua imitando el comportamiento natural del líquido. La forma convexa y la superficie ondulada con reflejos del sol como toques finales recrean una escena verdaderamente realista que llama la atención desde el primer segundo.
Cabeza de partícula WebGL
Como lo fueron cuando Flash tuvo éxito, las partículas están de moda hoy en día. Se pueden ver animaciones de varios tamaños y tipos en numerosos proyectos, y este trabajo es uno de esos. La versión sutil de una cabeza que recuerda vagamente a un robot humano inteligente de las novelas de Isaac Asimov es una verdadera obra maestra. No solo la realización es sorprendente, sino también su comportamiento. Reacciona a los movimientos del mouse, inclinando naturalmente la cabeza hacia la derecha, izquierda, arriba y abajo.
Texto de confeti 3D dinámico
El efecto de texto es una de las maneras de darle vida a las interfaces aburridas con una nota de alegría y diversión, así como enfatizar las letras requeridas. Rachel Smith solución inspirada en confeti sin duda ayudará a enriquecer el diseño con emociones brillantes y colocar el título en el centro del escenario. Escriba una palabra en el campo de entrada a continuación para ver toda la magia. Piezas geométricas vibrantes y vívidas en 3D darán forma a la solicitud y harán que el resultado sea muy interactivo.
Visor de panorama 3D
Three.js es útil en proyectos comunes como lo demuestra Max Chuhryaev. Su solución transforma fácilmente imágenes panorámicas en un detalle esencial de la experiencia del usuario. Tiene una perspectiva agradable y una cámara que se mueve lentamente: juntas te hacen sentir parte de la composición. Va bien con los paisajes, paisajes urbanos e interiores, lo que permite a los usuarios disfrutar de la belleza de los medios estáticos.
Generador de Patrones Triangulares
Este experimento te ofrece un fantástico fondo poligonal con una encantadora sensación 3D. También actúa como un patio de juegos donde puedes hacer que algunas áreas sean más brillantes y otras más tenues: solo usa el mouse. El panel de opciones le permite ajustar una gran cantidad de detalles del lienzo, incluidos los ajustes de luz, malla, render e incluso exportación.