Desenvolvimento WEB – O WebGL se tornou o assunto da experimentação e testa os limites do que é possível na web. Quase todos os dias, nos deparamos com soluções grandiosas acionadas por ele.
Hoje vamos explorar alguns conceitos que mostram os benefícios do uso de shaders. Vamos nos concentrar no GLSL.
GLSL significa Graphics Shader Language. É parte integrante do WebGL e responsável pela maioria das soluções alucinantes que vemos na natureza.
Fazendo jus ao seu nome, fornece aos desenvolvedores ferramentas para manipular os gráficos intuitivamente. Nas mãos certas, é capaz de dar vida a quase qualquer ideia.
O Codepen já está repleto de projetos fascinantes criados com a ajuda de shaders. No entanto, aqueles que mostram efeitos realistas são os mais impressionantes e inspiradores. E vamos provar isso na coleção de hoje.
Gotas d’água utilizando WebGL Shader por Stefan Weck
Stefan Werk abre o nosso roundup com sua obra-prima, provando a todos que as tecnologias de ponta são mágicas reais. Ele conseguiu recriar a chuva caindo em uma janela (ou no nosso caso, uma tela).
O comportamento e a realização dos pingos de chuva são tão reais que você deseja tocá-los. Aqui, JavaScript está por trás da simulação de chuva, enquanto o shader WebGL assume a responsabilidade pelo efeito e refração pegajosos.
Ondas por Jonathan Blair / Compilação por David Hartley
Talvez os próximos dois projetos estejam entre os exemplos mais impressionantes do uso de shaders em nossa coleção.
Embora cada um force seu computador a operar com capacidade total para lidar com tudo o que acontece nos bastidores, mesmo assim, vale a pena. Cada conceito, com todas essas ondulações, pequenas e grandes ondas, juntamente com a mudança de cores, parecem incrivelmente realistas e muito inspiradores.
Enquanto Jonathan Blair recriou apenas a superfície da água, David Hartley tornou as coisas um pouco interessantes, dando a estas uma forma esférica, imitando habilmente a Terra. Ambos os projetos são alucinantes.
Névoa por Omar Shehata
Produzido por Pixi.js, este conceito fascinante de Omar Shehata irá surpreendê-lo com a sua simulação altamente detalhada de um efeito de neblina.
Temperadas com uma bela coloração arroxeada e um fundo escuro, essas nuvens de fumaça parecem incrivelmente autênticas. O comportamento é bem pensado. O conceito é simplesmente hipnotizante.
Queda de neve WebGL Shader por Boris Sehovac
Este conceito faz jus ao seu nome. É altamente realista. Boris Sehovac usou diferentes tamanhos de flocos de neve, diferentes níveis de desfocagem e diferentes velocidades para recriar a profundidade.
Além disso, ele também tentou simular o vento, forçando a composição a mudar sua direção da esquerda para a direita e vice-versa.
Como resultado, podemos testemunhar algum tipo de pequena tempestade de neve. Um shader nativo do WebGL está por trás dessa beleza.
Conceito por Anand Davaasuren
Se o exemplo anterior deixou uma boa impressão em você, então o conceito de Anand Davaasuren irá, sem dúvida, agradar aos seus olhos.
A solução é baseada na mesma ideia. O efeito da neve caindo está no centro disso: embora com uma exceção. Este exemplo usa corações em vez de flocos de neve.
Como resultado, o conceito tem uma atmosfera adorável que é difícil de resistir. Talvez não seja brutalmente realista, mas ainda assim, o efeito de queda e o comportamento dos corações são incrivelmente polidos.
Nuvens Shader por David Hartley
Esta é outra obra-prima criada por David Hartley. Desta vez, o artista demonstra sua opinião sobre as nuvens e seu comportamento flutuante.
Novamente, o Pixi.js está por trás desse grandioso projeto. Aqui, a câmera vai direto através das nuvens, deixando você sentir toda a beleza da ideia. Mas não foi o suficiente para David. Ele também nos deu a oportunidade de explorar a cena movendo o cursor ao redor. Simplesmente incrível.
Fogo
De uma nevasca gelada e nuvens macias e frias ao material quente, aqui está uma tentativa bem sucedida de simular fogo. A equipe por trás da 14islands usa um monte de partículas e shaders personalizados para dar vida a essa ideia. Como resultado, podemos testemunhar uma pequena fogueira com fumaça que exala calor em todas as frentes.
Chrome por Liam Egan
Chrome by Liam Egan apresenta líquido com alta densidade. O projeto lembra um pouco da cena do épico Terminator 2 , quando o malvado T-1000 mostrou sua composição de metal líquido.
O conceito parece artificial, sem dúvida. No entanto, o comportamento e a superfície brilhante parecem incrivelmente naturais. Além disso, você pode brincar movendo o mouse para cima e para baixo para alterar o parâmetro de suavização.
Efeito de ondulação por Martin Laxenaire
Este projeto de Martin Laxenaire é um exemplo perfeito de shaders colocados em prática. Aqui, o autor conseguiu realizar um efeito de ondulação real que faz a imagem se mover como uma cortina após o foco do mouse.
O curtains.js alimenta esse conceito. A única desvantagem é que pode ser muito cedo para fornecer toda e qualquer imagem em um site com esse efeito, pois ainda é muito pesado para um computador de baixo custo “digeri-lo”.
Vaga-lumes com falha por Fabien Motte
O projeto de Fabien Motte também apresenta uma solução prática. No entanto, não nos referimos a esses vaga-lumes brilhantes que se movem caoticamente pelo eixo vertical. Estamos falando de um efeito de falha que ocasionalmente atinge a tela. É simplesmente incrível. E, como é popular atualmente, esse conceito pode servir de base perfeita para seus experimentos.
Conclusão
Shaders são ferramentas poderosas. Embora tenhamos nos concentrado em soluções realistas neste artigo, há vários outros conceitos alucinantes que parecem mais artificiais. Você pode criar cenas e composições absolutamente diferentes – é aqui que a sua imaginação pode correr solta.
No entanto, com grande poder vem uma grande responsabilidade. Há um par de questões que você precisa levar em conta antes de entrar de cabeça no shader.
Primeiro, há um problema com a compatibilidade do navegador. Nem todo mundo pode apreciar sua beleza. E em segundo lugar, nem todo computador pode lidar com isso sem problemas. Isso significa que shaders não são ferramentas universais – pelo menos não ainda.
Tem algo a dizer sobre este artigo? Comente abaixo ou compartilhe conosco no Facebook, Twitter ou no nosso LinkedIn.
Leia também: