Cinco apresentações WebGL que surpreendem

Um navegador em um computador, um navegador em um telefone ou smartwatch, ou talvez até alguém em um bule de chá? As tecnologias da Web nos cercam de todos os lados e, à medida que o enchimento de ferro se desenvolve, elas se tornam mais espetaculares e perfeitas. Apenas alguns anos atrás, o WebGL foi mencionado como um brinquedo divertido com perspectivas vagas. Mas muita coisa mudou e o flash anteriormente popular está sendo substituído por tecnologias HTML5 / WebGL mais avançadas.

O tempo passou quando as demonstrações do WebGL eram primitivas, artesanato artesanal ou demonstrações de demonstração de desenvolvedores de software. Agora, muitas marcas conhecidas usam essa tecnologia para apresentações e muitas parecem muito convincentes.



Porshe 911


Todo mundo já ouviu falar do Porsche. Alguém acabou de ver, alguém com carinho esfrega um pano em sua garagem. Bem, o restante do famoso fabricante alemão se oferece para se familiarizar com a máquina em seu site . E não basta olhar para as fotos, mas "sondar" os controles, aprender sobre alguns destaques tecnológicos.

A primeira coisa que impressiona quando você inicia uma demonstração é a qualidade. O modelo parece um carro "ao vivo". Com pequenos detalhes feitos com carinho, reflexões de cenas, superfícies cromadas. E, o mais interessante, não há freios no navegador!

Rolagem livre do modelo, a escala permite considerar literalmente tudo e até olhar para o interior. Os desenvolvedores fizeram o melhor possível, otimizando perfeitamente a cena e não à custa da beleza.



E aqueles que estão cansados ​​de torcer o modelo podem "torcer" o volante. Na verdade, a ação proposta demonstra as capacidades de iluminação adaptativa e farol alto dinâmico, mas não apenas o garoto quer “dirigir” um carro magnífico. Parece incrível!

No entanto, alemães prudentes não se limitaram à aparência do carro e permitiram vislumbrar seu interior. Obviamente, todas as imagens são marcadas pela qualidade fotográfica, seja no interior de um carro, nas unidades de suspensão tecnológica ou no motor brilhante. Tudo gira, gira e oferece uma tonelada de informações. Alguns detalhes são tão precisos que a dúvida surge, e essas fotos não estão “esticadas” no quadro das primitivas?

Como uma apoteose ou apenas um desejo de "espremer" o cliente, no final da apresentação é oferecido um tipo de designer onde você pode escolher uma modificação do carro, trocar as rodas ou a cor. Obviamente, tudo isso é apenas uma jogada de marketing bem-sucedida, mas que visualização de alta qualidade aqui! A propósito, muitas marcas conhecidas (sim, AvtoVAZ!) Usam uma abordagem semelhante para demonstrações de carros novos.

Ande em Marte


Se a primeira apresentação foi feita usando o mecanismo three.js., o próximo programa é o mérito dos nossos programadores. Não, o aplicativo em si foi criado nas entranhas da NASA, apenas o desenvolvimento doméstico Blend4Web foi usado como base. Então, o que é interessante aqui ...

Em 2012, um dispositivo com o nome modesto Curiosity foi entregue à superfície de Marte (traduzido do inglês "Curiosity"). Tranquilamente e pacificamente rastejando na superfície do planeta, o veículo analisou o solo, enviou numerosas fotografias da paisagem marciana e emocionou os irmãos científicos com inúmeras descobertas. Tudo ficaria bem, mas a NASA decidiu popularizar a operação da unidade e criou um aplicativo da web exclusivo, permitindo não apenas admirar os recursos de design do dispositivo, mas também olhar em tempo real em Marte com os "olhos" do Curiosity.



A principal característica deste aplicativo são as trajetórias reais do aparelho na superfície de Marte. Além disso, tudo isso é acompanhado por um vídeo filmado por várias câmeras do veículo espacial. A trajetória percorre vários pontos-chave onde algumas ações foram executadas pelos operadores do dispositivo. Por um lado, é divertido ver como a unidade agita o manipulador, ajustando-se à tarefa. Ao mesmo tempo, as narrações comentam o que está acontecendo e, ao mesmo tempo, são mostradas fotografias ligadas ao terreno.

E para aqueles que estão cansados ​​de olhar para o dispositivo, os desenvolvedores prepararam uma pequena ajuda on-line em seu design. Clicando nos detalhes que atraíram o mouse, você pode descobrir muitas coisas interessantes. Além disso, usuários particularmente corrosivos podem torcer manualmente os manipuladores rover, é claro, dentro dos disponíveis.

Entre na SkyNet


O apocalipse dirigido pela SkyNet está chegando! E, se você quiser conhecer futuros inimigos - é hora de entrar na rede .



O site especificado não passa de uma excelente tentação de assistir ao filme "Terminator: Genesis". Além de pôsteres, trailers e teasers - os cineastas criaram um ótimo show interativo.

O destaque da idéia é vincular gráficos tridimensionais a quadros reais do filme. Um visitante da SkyNet pode aprender detalhes interessantes sobre os personagens principais, robôs e atores ao vivo. Por exemplo, SpIder Tank. Que tipo de monstro é esse? E assim, ele torceu o modelo (a propósito, produzido qualitativamente), leu as informações sobre os nós principais e até assistiu a um vídeo relacionado às capacidades do monstro.



Honestamente, esta apresentação de informações sobre o filme parece inovadora e muito atraente. O WebGL / HTML5 eleva a fasquia a um nível de percepção completamente diferente.

Humano biodigital


E este é um nível completamente diferente. Se nos três primeiros casos a tecnologia WebGL foi usada mais para fins de entretenimento, então aqui os desenvolvedores oferecem suas melhores práticas em um contexto de aprendizado.



Este projeto se concentra em organizações relacionadas ao setor médico. Modelos executados qualitativamente de vários órgãos, visualização precisa dos processos em andamento, modos de visualização especiais - tudo isso nos permite simplificar o processo de aprendizado ou demonstrar as características do curso da doença.

E aqui não é nem a qualidade dos modelos, mas a precisão da implementação. Por exemplo, ao demonstrar a operação da articulação do joelho, você não poderá dobrá-la mais do que o esperado.

Além disso, existe um modo "raio-X" muito interessante, que é ativado por um botão especial no player. Nesse caso, o modelo se torna translúcido com a possibilidade de considerar alguns recursos internos. Além disso, se necessário, você pode destacar parte do objeto no fundo da "imagem de raio-x". Portanto, na captura de tela abaixo, você pode considerar claramente a ruptura do ligamento.



Segundo os desenvolvedores, um total de cerca de 5.000 objetos foram criados e várias lições completas sobre anatomia humana foram feitas. Parece que essa abordagem de aprendizado será muito mais eficaz do que nos atlas de papel convencionais.

Oi Halo!


O Webgl é perfeito para criar cenas interativas, apresentações, jogos e, o mais importante, une usuários de várias plataformas em uma janela do navegador. Os criadores da famosa série do jogo de Halo, aproveitou as capacidades únicas de tecnologias de navegador moderno e criou um especial “convidado” quarto .



A idéia é simples de desonrar, mas foi graças ao WebGL que foi possível combinar uma imagem visual incomum (você precisa parecer "ao vivo", pois a captura de tela não transmite o efeito) com algum quadro de mensagens em massa.

De fato, as partículas que formam a forma do capacete do famoso jogo são os desejos dos usuários. Centenas e centenas de mensagens deixadas na página do site formam gradualmente um modelo integral. Inicialmente, o capacete era uma grade simples e primitiva. Você pode verificar isso se mover o controle deslizante na linha do tempo na parte inferior da tela. Eu me pergunto como será o capacete depois de atingir um certo limite. Enquanto isso, você também pode se juntar aos que estão aguardando o jogo e rabiscar algumas linhas neste incomum "quadro de mensagens".

P.S


Como você pode ver, todas as apresentações selecionadas mostram a necessidade e facilidade de uso da tecnologia WebGL. Mais e mais próximos são os computadores pessoais com sistemas móveis. Chegará um momento em que os aplicativos do navegador se tornarão verdadeiramente multiplataforma.

Source: https://habr.com/ru/post/pt386071/


All Articles