Usando Shaders para Criar Efeitos Especiais Realistas em Web Design

WebGL tornou-se objeto de experimentação e teste dos limites do que é possível na web. Quase todos os dias nos deparamos com soluções grandiosas alimentadas por ele. Como prova, já examinamos vários projetos reais.

Hoje vamos explorar alguns conceitos que mostram os benefícios do uso de shaders. Vamos nos concentrar no GLSL.

GLSL significa Graphics Library 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 gráficos de forma intuitiva. Nas mãos certas, é capaz de dar vida a quase qualquer ideia.

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. Vamos mergulhar.

Waterdroplet WebGL Shader por Stefan Weck

Stefan Werk abre nosso roundup com sua obra-prima, provando a todos que as tecnologias de ponta são mágica de verdade. Ele conseguiu recriar a chuva caindo em uma janela (ou no nosso caso, uma tela). O comportamento e a percepção das gotas de chuva são tão reais que você quer tocá-las. Aqui, o JavaScript está por trás da simulação de chuva, enquanto o shader WebGL assume a responsabilidade pelo efeito pegajoso e pela refração.

Three js water shader por Jonathan Blair / ShaderToy Compilation 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 obrigue seu computador a operar em plena capacidade para lidar com tudo o que acontece nos bastidores, no entanto, vale a pena. Cada conceito, com todas essas ondulações, ondas pequenas e grandes, juntamente com a mudança de cores, parece incrivelmente realista e muito inspirador.

Enquanto Jonathan Blair recriou apenas a superfície da água, David Hartley tornou as coisas um pouco interessantes, dando a esta uma forma esférica, imitando habilmente a Terra. Ambos os projetos são alucinantes.

Exemplo de Shader Pixijs.v3 por Omar Shehata

Desenvolvido por Pixi.js, este conceito fascinante de Omar Shehata irá surpreendê-lo com sua simulação altamente detalhada de um efeito de neblina. Apimentadas 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 fascinante.

Snowfall WebGL Shader por Boris Šehovac

Este conceito faz jus ao seu nome. É altamente realista. Boris Sehovac usou diferentes tamanhos de flocos de neve, diferentes níveis de desfoque 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 WebGL nativo está por trás dessa beleza.

Conceito de Anand Davaasuren

Se o exemplo anterior deixou uma boa impressão em você, o conceito de Anand Davaasuren, sem dúvida, agradará 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 encantadora 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.

Sombra de Nuvens de David Hartley

Esta é outra obra-prima criada por David Hartley. Desta vez, o artista demonstra sua visão sobre as nuvens e seu comportamento flutuante. Mais uma vez, o Pixi.js está por trás desse projeto grandioso. Aqui, a câmera atravessa as nuvens, deixando você sentir toda a beleza da ideia. Mas não foi suficiente para David. Ele também nos deu a oportunidade de explorar a cena movendo o cursor. Simplesmente incrível.

Tonalizador de fogo por 14 ilhas

De uma tempestade de neve congelante e nuvens frias e fofas a coisas quentes, aqui está uma tentativa bem-sucedida de simular fogo. A equipe por trás do 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.

GLSL: Chrome por Liam Egan

Chrome by Liam Egan apresenta líquido com alta densidade. O projeto lembra um pouco uma 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 realistas. Além disso, você pode brincar movendo o mouse para cima e para baixo para alterar o parâmetro de suavização.

Efeito cascata de Martin Laxenaire

Este projeto de Martin Laxenaire é um exemplo perfeito de shaders colocados em prática. Aqui, o autor conseguiu um efeito cascata real que faz a imagem se mover como uma cortina ao passar o mouse. Curtains.js potencializa esse conceito. A única desvantagem é que pode ser muito cedo para fornecer todas as imagens em um site com esse efeito, pois ainda é muito pesado para um computador de baixo custo “digerir” isso.

Vagalumes com Falhas de 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 ao redor do eixo vertical. Estamos falando de um efeito de falha que ocasionalmente atinge a tela. É simplesmente incrível. E como é popular nos dias de hoje, esse conceito pode servir como base perfeita para seus experimentos.

Jogue alguma sombra

Shaders são ferramentas poderosas. Embora tenhamos focado 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 sua imaginação pode correr solta.

No entanto, com grandes poderes vêm grandes responsabilidades. Há alguns problemas que você precisa levar em consideração antes de entrar nessa coisa de sombreamento.

Primeiro, há um problema com a compatibilidade do navegador. Nem todos podem desfrutar de sua beleza. E em segundo lugar, nem todo computador pode lidar com isso sem problemas. Isso significa que os shaders não são ferramentas universais – pelo menos ainda não.