Como o WebGL está reinventando o legado do Flash
Você se lembra de todos esses projetos com excelentes interações, animações alucinantes e efeitos sonoros emocionantes que resultaram em uma experiência de usuário intensamente imersiva? Sim, as chances são aquelas que foram criadas com a ajuda do Flash.
No entanto, eu odeio admitir isso, a era desta rica plataforma multimídia chegou ao fim. Flash finalmente está morto. Mas não tenha medo! Como muitas vezes acontece quando uma porta se fecha, outra se abre, e o Flash está sendo lentamente substituído por um sucessor mais vigoroso e vigoroso. Tecnologias como WebGL e acompanhando bibliotecas JavaScript como Three.js estão crescendo rapidamente - permitindo que os desenvolvedores criem projetos semelhantes ao Flash, sem os problemas de segurança associados.
Hoje vamos nos concentrar em WebGL e Three.js. Este emparelhamento é uma opção poderosa para UX imersiva.
WebGL e Three.js
O WebGL serve como uma base que fornece instrumentos para manipular com gráficos de computador 3D e 2D interativos. Ele oferece a oportunidade de misturar e combinar seus elementos com elementos HTML e combiná-los com outros componentes da página ou plano de fundo.
Three.js é uma biblioteca Javascript com uma lista de recursos avançados que permitem operar com cenas, câmeras, luzes, geometria e muito mais. Destina-se a desbloquear o potencial do WebGL adicionando funcionalidade extra à plataforma. Torna simples criar animações 3D aceleradas por GPU sem depender de plugins de navegador.
Problemas de compatibilidade
Com as tecnologias modernas, você sempre fica preso em um dilema: crie um projeto “tamanho único” que funcione em vários dispositivos e ofereça uma experiência de usuário consistente, ou coloque tudo na linha e impressione instantaneamente o público-alvo que você pode alcançar .
Com WebGL e Three.js, é a mesma história. O Safari, o Opera e a maioria dos navegadores móveis (e isso não quer dizer nada sobre o Internet Explorer) são como uma mosca no seu Chardonnay. Infelizmente, uma grande quantidade de usuários está presa a navegadores herdados, então a compatibilidade é um obstáculo - mas o suporte está crescendo (o que é mais do que pode ser dito para o Flash) e desde que você não use para qualquer coisa crítica, WebGL e Three.js são excelentes opções.
Exemplos
Vazio
Vazio é uma experiência do Hi-ReS !, um estúdio criativo baseado em Londres. Os desenvolvedores queriam abstrair das limitações inerentes às plataformas e navegadores modernos e testar os limites das tecnologias atuais. Parece que eles acertaram.
É uma aplicação puramente de desktop que é alimentada por recursos WebGL e Web Audio. Junto com o Howler.js, o GSAP e o Coffee Collider, o Three.js participou da produção deste excelente parque de diversões que, inexoravelmente, atrai visitantes on-line para uma jornada que se parece muito com um livro digital.
Reformulando a excelência
Esta campanha interativa dedicado ao aniversário da Sennheiser é uma odisséia épica que combina não apenas dramáticas paisagens de ficção científica, mas também inúmeros recursos e detalhes de ponta. É um experimento de cromo puro que permite aos visitantes participar na formação e modelagem de um monumento de som. Embora a fase de formação tenha sido completada - um milhão de pessoas em todo o mundo participaram do evento -, basta observar as rochas. Você é bem-vindo para fazer sua própria contribuição, examinar esta escultura de som massiva e apreciar o vídeo de introdução e execução de alto nível.
Bruno Quintela
O portfólio pessoal de Bruno Quintela é um experimento WebGL renderizado em tempo real que demonstra o potencial do artista e as possibilidades das atuais tecnologias da web. Use o mouse para examinar a cena completamente. Arraste-o em direções diferentes para ver o que está escondido dentro desse volume de polígonos 3d juntos com precisão, com superfícies brilhantes. A ideia serve como uma excelente abertura para o site que deixa uma primeira impressão forte e duradoura.
Teste de Partículas
Este projeto exibe um turbilhão de tubos de partículas menos ordenados e organizados que irradiam vibrações de alta tecnologia. Existe um centro de controle que o encoraja a brincar com atributos como o raio de uma nuvem de formato cilíndrico, a densidade dos tubos, a altura, a escala e muito mais. O conceito é hipnotizante.
Water Shader
Este artista conseguiu imitar uma superfície de água imitando o comportamento natural do líquido. A forma convexa e a superfície ondulada com reflexos de sol como toques finais recriam uma cena verdadeiramente realista que chama a atenção desde o primeiro segundo.
Cabeça de Partículas WebGL
Como eram quando o Flash foi bem-sucedido, as partículas estão na moda hoje em dia. Animações de vários tamanhos e tipos podem ser vistas em inúmeros projetos, e Este trabalho é um desses. A versão sutil de uma cabeça que é vagamente reminiscente de um robô humano-inteligente dos romances de Isaac Asimov é uma verdadeira obra-prima. Não apenas a realização surpreende, mas também seu comportamento. Reage aos movimentos do rato, inclinando naturalmente a cabeça para a direita, para a esquerda, para cima e para baixo.
Texto Confetti 3D Dinâmico
O efeito de texto é uma das maneiras de apimentar as interfaces chatas com uma nota de diversão e frieza, além de enfatizar as letras necessárias. Rachel Smith solução inspirada em confete certamente ajudará a enriquecer o design com emoções brilhantes e colocará o título no centro do palco. Digite uma palavra no campo de entrada abaixo para ver toda a mágica. Peças geométricas tridimensionais vibrantes e vivas moldarão o pedido e farão com que o resultado seja interativo.
Visualizador de Panorama 3D
Three.js vem a calhar em projetos comuns como Max Chuhryaev prova. Sua solução transforma facilmente as imagens panorâmicas em um detalhe essencial da experiência do usuário. Tem uma perspectiva agradável e câmera em movimento lento: juntos eles fazem você se sentir parte da composição. Ele vai bem com as paisagens, paisagens urbanas e interiores, permitindo aos usuários apreciar a beleza da multimídia estática.
Gerador de Padrão Triangular
Esta experiência dá-lhe um fantástico fundo poligonal com um lindo sentimento 3D. Ele também atua como um playground onde você pode tornar algumas áreas mais claras e outras mais escuras: basta usar o mouse. O painel de opções permite ajustar um volume de detalhes da tela, incluindo configurações de luz, malha, renderização e até exportação.