9 usos brillantes de 3D en diseño web

3D en la web realmente llegó en 2011 con el lanzamiento de WebGL, una API de JavaScript para renderizar gráficos 3D dentro de un navegador compatible sin el uso de complementos. Y los años siguientes vieron mucha emoción por las posibilidades del 3D entre los diseñadores web.

Ese bombo inicial puede haber disminuido en los últimos años. Pero el desarrollo de 3D en línea ha continuado a buen ritmo, y existen algunas implementaciones bastante impresionantes; desde elementos visuales de 'factor sorpresa' que actúan principalmente como prueba de concepto, hasta usos reflexivos de 3D directamente orientados a crear una gran experiencia web.



En esta publicación, enumeramos algunos usos recientes de 3D en la web (algunos pequeños y sutiles, otros llamativos y épicos) para inspirar sus propios proyectos. Ah, y si hay un gran uso de 3D que ha visto en la naturaleza, comparta un enlace en los comentarios.



01. Acko.net

Un encabezado largo y sinuoso para el sitio web del desarrollador Steve Wittens

Un encabezado largo y sinuoso para el sitio web del desarrollador Steve Wittens

Si está buscando un ejemplo de lo que el 3D basado en navegador puede aportar a la web, no necesita buscar más allá de Acko.net, el sitio personal del desarrollador web Steven Wittens. Cuenta con un hermoso encabezado animado inspirado en el arte callejero; es una idea simple pero maravillosamente ejecutada.



Wittens lo creó usando una combinación de CSS 3D y WebGL. “La torsión de cada cinta no se genera arbitrariamente, sino que se deriva matemáticamente”, explica. “Encarna el principio diferencial del transporte paralelo. La dirección ascendente cambia en paralelo a cada curva, lo que significa que las cintas nunca giran en su lugar. Solo se vuelven cuando naturalmente quieren. Por lo tanto, el diseño tiene una voluntad propia '.

Puedes leer la historia completa de cómo lo armó en esta publicación de blog . Y si la animación no funciona en su navegador, puede verla en este video .

02. Cometas Campo Alle

Ingrese a un mundo fantástico a través de este galardonado sitio web de vinos



Ingrese a un mundo fantástico a través de este galardonado sitio web de vinos

Desde su lanzamiento en febrero, este sitio web ya ha ganado un montón de premios y no es difícil ver por qué. Creado para promocionar el vino italiano Campo Alle Comete, representa una ciudad flotante en 3D, “donde los sueños y la magia finalmente pueden encontrarse”. Las cualidades imaginativas del diseño, combinadas con la fluidez de la implementación, son bastante asombrosas, y es realmente un placer recorrer este mundo fantástico con el mouse.

  • 7 nuevas herramientas de diseño gráfico para hacerte la vida más fácil

Construido por estudios italianos Este y Monogrid , este brillante uso de 3D en la web se creó utilizando WebGL y GSAP junto con three.js y AngularJS.

03. Stripe.com

Una implementación simple pero efectiva de 3D en el sitio de la plataforma de pago Stripe

como recortar un logo en photoshop
Una implementación simple pero efectiva de 3D en el sitio de la plataforma de pago Stripe

Una implementación mucho más simple de 3D, este icosaedro rotatorio interactivo es, sin embargo, muy efectivo para presentar una variedad de opciones de menú de una manera fresca y original. Presentado en el sitio de la plataforma de pago Stripe, fue diseñado por Bill Labus, basado en una idea de Krithika Muthukumar, quien trabaja en marketing de productos en Stripe.

'Ella estaba imaginando una forma de representar visualmente un cargo de Stripe desde la perspectiva de Radar, que utiliza el aprendizaje automático para calificar los cargos entrantes y predecir la probabilidad de que sean legítimos o fraudulentos', explica Labus. 'El aprendizaje automático es bastante abstracto por naturaleza, por lo que un objeto 3D parecía una forma eficaz de hacer que el concepto fuera más tangible'.

El aprendizaje automático es bastante abstracto por naturaleza, por lo que un objeto 3D parecía una forma eficaz de hacer que el concepto fuera más tangible.

Bill Labus

La tecnología principal utilizada para esto es WebGL, aunque es una API de nivel bastante bajo, dice Labus. “Elegimos three.js como un marco de trabajo de nivel superior que se abstrae de WebGL y simplifica la carga de objetos, la configuración de iluminación y materiales, y más. De hecho, tuvimos la suerte de encontrar que three.js incluye un icosaedro por defecto como uno de sus primitivos incorporados.

cómo crear objetos inteligentes en photoshop

“La versión inicial simplemente usó la primitiva incorporada. Sin embargo, más tarde decidimos que queríamos bordes redondeados en la forma para adaptarse mejor al uso estético 3D existente en otros lugares stripe.com , por lo que renderizamos un icosaedro redondeado en Cinema4D y lo cargamos como un objeto en three.js. Las etiquetas de vértice que representan los diversos atributos de una carga no se representan en el entorno 3D, sino como elementos HTML normales sobre el lienzo 3D. Esto fue para garantizar la reproducción de texto de la más alta calidad y también para facilitar la localización.

“Al animar el icosaedro, calculamos las posiciones de los vértices, así como si están o no visibles u oscurecidos detrás del objeto, y luego usamos esa información para posicionar y mostrar / ocultar los elementos de la etiqueta.

“Otro elemento que no se renderiza en el entorno 3D es la sombra proyectada por el objeto. Como es suficientemente difuso, pudimos simplemente difuminar un detrás del lienzo 3D, sin que se note que la forma de la sombra no coincide perfectamente con la forma del icosaedro. Esto se hizo principalmente por razones de rendimiento, ya que las sombras grandes y difusas suelen ser uno de los efectos más costosos de renderizar, especialmente dentro de un bucle de animación '.

04. Diane Martel

Es divertido jugar con estos títulos giratorios que se desplazan

Es divertido jugar con estos títulos giratorios que se desplazan

Hemos visto texto web en el estilo de los créditos de apertura de Star Wars antes, pero nunca así. El sitio web de la directora de videos musicales y coreógrafa estadounidense Diane Martel (mejor conocida por el video 'Blurred Lines') utiliza el dispositivo con gran efecto para mostrar los títulos de su trabajo en su página de inicio.

Usa el mouse para girarlos y rotarlos mientras se desplazan, coloca el cursor sobre un título para revelar más imágenes fijas o haz clic en la página completa. Este colorido e impresionante sitio fue diseñado por Ben Wegsheider , cuyo propio sitio web también presenta algunos trucos 3D bastante ingeniosos.

05. Mapas de SO

Los mapas de Ordnance Survey se están volviendo 3D

Los mapas de Ordnance Survey se están volviendo 3D

Desde un uso divertido y frívolo de 3D hasta uno completo y funcional. Ayer, Ordnance Survey, la agencia nacional de cartografía del Reino Unido y uno de los mayores productores de mapas del mundo, le dio a su galardonado OS Maps una importante actualización, presentando mapas 3D precisos de la campiña británica.

Amado por los caminantes, ciclistas y otras personas que atraviesan las colinas y valles del Reino Unido, OS Maps está disponible a través de la web y como una aplicación. “Tiene más de 750.000 rutas almacenadas y el elemento 3D significa que puede ver mejor las rutas y tener una idea de si la ruta es alcanzable”, revela el oficial de prensa Keegan Wilson.

El mapeo 3D, que se ha construido con un detalle espectacular utilizando láseres increíblemente precisos, está disponible a través de la web solo para los suscriptores de OS Maps. Sin embargo, cualquiera que desee investigar y echar un vistazo puede hacerlo a través de una prueba gratuita de siete días.

06. Tierra 2050

Kaspersky presenta el futuro de la Tierra mediante un globo terráqueo interactivo en 3D

Kaspersky presenta el futuro de la Tierra mediante un globo terráqueo interactivo en 3D

Para celebrar su vigésimo aniversario, el gigante de la seguridad Kaspersky ha lanzado un proyecto interactivo que invita a los usuarios a discutir el mundo del futuro, las oportunidades que brinda y las amenazas que podría causar. En su centro está Earth 2050, un sitio genial construido por el estudio de Moscú Posible que invita a diseñadores e ilustradores a subir sus visiones del futuro a través de un portal interactivo.

La página de inicio presenta un planeta Tierra en rotación dividido en áreas geográficas, cada una de las cuales incluye un pronóstico sobre un cierto aspecto de la vida en 2050. Cualquier diseñador, ilustrador o artista puede subir su trabajo, y el público puede comentar si creen que ciertas predicciones se harán realidad.

'Nuestro concepto se inspiró en Google Street View y juegos de PC como UFO y Civilization, así como en la perspectiva futurista de Kaspersky Lab', explica el equipo de Possible. 'El mundo estaba creando usando WebGL, HTML5, CSS3, JS, WebGL y PHP 7 nativos. La construcción de la interfaz implicaba optimización del ancho de banda y almacenamiento en caché estándar del navegador, módulos de contenido, codificación, módulos WebGL con el planeta, navegación y edición de panorámicas'.

07. Titouan Mathis

El desarrollador Titouan Mathis da vida a su sitio personal con una divertida serie de animaciones

El desarrollador Titouan Mathis da vida a su sitio personal con una divertida serie de animaciones

Titouan Mathis, un desarrollador web con sede en Estrasburgo, Francia, tiene un sitio web muy simple que utiliza para enlazar con su Twitter, Instagram y el sitio de su empleador Studio Meta. Pero lo anima con un divertido toque de 3D animado e interactivo: tres patrones en constante espiral que se ven súper elegantes y con los que no puedes evitar jugar.

“La inspiración provino principalmente de cosas con las que me encuentro durante el día”, explica Mathis. “A veces, todas estas cosas se mezclan y surge una idea en mi cabeza. Intentaré recrearlo y jugar con las formas para encontrar formas agradables de interactuar con ellas '.

cómo convertirse en diseñador gráfico de películas

Las tres animaciones fueron creadas con HTML, CSS y JavaScript, con Vue.js ayudando en términos de estructura, y el código está disponible en GitHub si quieres comprobarlo. “El mayor desafío técnico fue el rendimiento”, agrega Mathis. “Mi familiaridad con HTML, CSS y JavaScript permite la creación rápida de prototipos de ideas, pero la animación de muchos elementos DOM puede convertirse rápidamente en algo pesado en el navegador. Mis próximas animaciones ciertamente se crearán con Three.js o una biblioteca similar '.

08. Los magos temporada 2

Navega por el mundo de fantasía de The Magicians en este sitio creado por Unit 9

Navega por el mundo de fantasía de The Magicians en este sitio creado por Unit 9

En otro mapa interactivo, esta vez para el mundo ficticio del programa de fantasía de televisión de moda The Magicians. Agencia del Reino Unido Unidad 9 El equipo de programadores utilizó Three.js, WebGL y GLSL para desarrollar este mapa brillantemente interactivo, donde los usuarios pueden embarcarse en misiones y descubrir más sobre la segunda temporada. Desde criaturas fantásticas hasta dioses antiguos, cada misión semanal refleja el tema de cada episodio. Incluso si no ve el programa, vale la pena visitar este uso inmersivo de 3D web.

09. Búsqueda del sonido

Un juego divertido y loco del estudio francés Biborg

Un juego divertido y loco del estudio francés Biborg

Terminaremos con algo que es simplemente divertido. Evita los obstáculos, atrapa los elementos y crea tu propia banda sonora a través de tu loca carrera musical en este loco experimento de WebGL. Dirigido tanto al usuario casual de escritorio / móvil como al entusiasta de la realidad virtual (es compatible con Google Cardboard), este es un gran escaparate para la inteligencia 3D de la agencia creativa de París. Biborg . Cada vez que lo juegas, los entornos son diferentes y es muy adictivo ... ¡ten cuidado!