30 experimentos WebGL que são apenas wow!

Eis que uma grande ferramenta com grandes promessas está chegando aos seus olhos. É rápido e suave. Renderiza em 3D, e com a integração anima, adivinha o que é? HTML5? CSS3 Não, chama-se WebGL, uma biblioteca de software que amplia a capacidade do JavaScript para gerar gráficos 3D interativos e, sim, sem plug-ins!

Neste mostruário, não queremos mostrar as coisas normais. Queremos mostrar para você 30 experimento WebGLs que são cuidadosamente elaborados por desenvolvedores profissionais para você testemunhar o verdadeiro potencial do WebGL, que não são apenas inspiradores, mas também permitem que você tenha uma ideia de como o futuro da Web pode ser. Pule para o futuro depois de clicar!

É altamente recomendável ver essas demonstrações usando a versão mais recente da versão de desenvolvedor do Google Chrome. A maioria das demonstrações suporta a versão mais recente do Firefox, Google Chrome e Safari, embora.

3 sonhos de preto

De autoria da Equipe de Artes de Dados do Google, 3 Dreams of Black traz para você três mundos de sonho construídos por meio de uma combinação de desenhos 2D e animações interligados com sequências 3D interativas. Confira as maravilhas para uma experiência maravilhosa!

Partículas de volume animadas

Este é realmente artístico - animais animados construídos por partículas 3D usando texturas flutuantes e objetos de buffer de quadros. Mais surpresa se você mover o mouse!

Aquário

Simular um ambiente subaquático? Isso não é um problema para o WebGL. A demo apresenta modelos 3D com texturas de alta qualidade, animação de cenas, animação de pixel shader, reflexos, refração e cáusticos, tudo para criar uma cena subaquática realista.!

Azatioprina

Provavelmente o mais épico demo WebGL, disse o suficiente. Dica de chapéu para o autor Jochen Wilhelmy.

Viagem dos Atratores

Se você quer experimentar o 3D, essa é a melhor demonstração para você, e também se meditar com a imensa beleza dos gráficos gerados por WebGL usando a fórmula Hopalong de Martin.

Medusa

“Modelagem procedural feita com o Side FX Houdini. Exportado com um exportador Python no formato json. Textura pintada usando o Autodesk Mudbox. Animado com um shader de vértice.”

Chrysaora

Esta não é uma demonstração regular de animação, mas sim esqueletos dinamicamente simulados, simulação parcial do lado do servidor e sincronização com WebSocket, sistema de partículas voltado para a câmera, efeito de luz volumétrico e biblioteca matricial mjs de Vladimir Vukićević. Em suma, uma experiência incrível com obras complexas.

HelloRacer

Apresentamos a simulação de carros interativos high-end, trazida a você exclusivamente pelo HelloEnjoy.

Materiais: carros

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 e Chevrolet Camaro no seu navegador. Escolha seu passeio e aprecie a vista. Heck, você pode até escolher suas cores.

Carros WebGL

O futuro da série Need For Speed ​​estará no navegador da web. Muito ambicioso? Certamente não se você tiver visitado esses carros que são renderizados com mapas de cubo dinâmicos, mapas de sombra e efeitos de pós-processamento.

My Robot Nation

Bem, se a figura não é a sua favorita, então tente construir um robô legal e charmoso e mostre ao seu amigo! Você pode até gastar seus dólares para torná-lo um negócio real.

Pacmaze

Que tal um jogo 3D Pac-Man? O gráfico e a jogabilidade são bons e, o mais importante, é divertido!

Capuz de tiro vermelho

Ora aqui está um bonito ... ou sangrento. Este não é nada além de um jogo interessante para mostrar as capacidades do WebGL quando ele é desenvolvido no jogo de tiro top down. Divertido e divertido, com certeza.

TankWorld

Você adivinha, um divertido jogo de atirador de tanques com armas para usar e mapas para explorar, e em alguns níveis você pode até pegar um helicóptero para explorar o mundo! É realmente mais do que apenas um jogo normal, e o gráfico parece confortável!

Pulpo

Melhor exemplo de como gráficos e animações simples podem impressionar as pessoas quando elas são feitas corretamente.

Superfície

Confira o Surface, um experimento elegante e inspirador feito por Paul Lewis. Você pode não apenas alterar a magnitude, a elasticidade, a órbita automática, o wireframe e os pingos de chuva na demonstração, mas também arrastar e soltar suas próprias imagens para sentir o efeito de forma diferente..

Partículas Fotográficas

Basta deixar sua imagem favorita nesta demo e assistir vendo ela explodir em uma tonelada de partículas e interagir com alguma forma de magnetismo. O experimento é uma combinação de quatro tecnologias: Drag and Drop do HTML5, File API, Canvas e WebGL.

Rutt-Etra-Izer

Rutt-Etra-Izer é uma emulação WebGL do clássico sintetizador de vídeo Rutt-Etra. A demonstração permite que você coloque suas próprias imagens e as manipule. Com essas coisas, uma imagem 2D pode até parecer uma 3D!

The Wobble Dance

Uma demo simples, mas digna de nota, que mostra como o WebGL pode ser líquido, com shaders de luz anisotrópicos e deformação de vértice oscilante.

Ultranoir

Outra grande experiência mostrando o potencial do WebGL. A Nouvelle Vague oferece uma experiência 3D poética e interativa em tempo real com base no Twitter, e o que você vê serão tweets realizados com diferentes objetos voadores. Certamente uma maneira artística de curtir os tweets.

Macaco ondulante

“Desta vez, eu só queria fazer um teste para ver quantas posições de vértices e normais eu poderia atualizar diretamente em JavaScript. Acontece que 2.000 é muito bem :) Eu também adicionei em um pouco de mapeamento de ambiente. E estranheza. Sempre adicione estranheza.”

Vídeo FX

Aplicativo impressionante feito por Daniel Pettersson que permite aplicar vários efeitos de pós-processamento simultâneos a um trailer de Happy Feet 2. Experimente e divirta-se!

Voxels Liquid

Representação 3D do algoritmo clássico de efeito de água 2D, também mostra como o WebGL interativo é.

Estante WebGL

Navegue por mais de 10.000 capas de livros com esta Estante WebGL, desenvolvida pela equipe do Google Data Arts. Você também pode pesquisar por assunto, abrir um modelo 3D de cada um clicando nele e baixar livros em seu telefone com o código QR.

Globo WebGL

Um experimento legal da equipe do Google que faz você se sentir no futuro com sua visualização de dados bonita, elegante e futurística.

Vôos do mundo

Outro aplicativo visual de visualização de dados que visualiza as principais rotas de voos das companhias aéreas parece promissor!

Filtro de Imagem WebGL

Aplicativo de editor gráfico com WebGL? Isso nunca é impossível. O melhor de tudo, é rápido e suave!

WebGL Water

“Uma poça de água renderizada com reflexão, refração, cáustica e oclusão de ambiente. A piscina é simulada com um campo de altura e contém uma esfera que pode interagir com a superfície da água.”

Reflexão

O maior problema enfrentado pela WebGL é talvez sua segurança. De acordo com a Wikipedia, a Equipe de Prontidão de Emergência do Computador dos Estados Unidos (US-CERT) emitiu o aviso de que o WebGL contém vários possíveis problemas de segurança que podem levar à execução de código arbitrário, negação de serviço e até mesmo ataques entre domínios. Isso significa muito, muito para o dono do site.

No entanto, o Grupo Khronos, que inclui a Mozilla e o Google, vem sugerindo possíveis soluções e uma futura abordagem de desenvolvimento para fortalecer a segurança contra as possíveis ameaças à segurança. Espero que os problemas possam ser reduzidos e até mesmo resolvidos no futuro, já que o WebGL tem tantas possibilidades como as apresentadas pelos desenvolvedores talentosos e profissionais.!

Deixe-nos saber qual experiência te surpreende mais e, claro, mostrar-nos se você tem um!

Mais posts relacionados:

• Site em HTML5: 48 demonstrações em potencial de Flash-Killing
• Website HTML5: 15 mais experiências
• Demos de Animação CSS3 Inspiradoras