Animação Sidescroller 2D em WebGL

Efeitos visuais de parallax, partículas e desfoque em tempo real processados diretamente na GPU.

Este site abriga uma demonstração técnica em WebGL de uma cena 2D animada com rolagem lateral (sidescroller) e efeito parallax, desenvolvida por Domenico Parisi (domenicobrz).

Principais Recursos e Estrutura Técnica

• Efeito Parallax Multicamadas: A animação utiliza diversos arquivos de imagem sobrepostos (layer1 a layer4_2) que se movem em velocidades diferentes para simular profundidade de campo e perspectiva em 2D.

• Sistema de Partículas (Folhas Caindo):

  • Inclui shaders customizados (leaf_vertex e leaf_fragment) para renderizar partículas dinâmicas de folhas caindo com texturas variadas.

  • Utiliza matemática vetorial para simular rotação, movimento pendular e transparência conforme as folhas caem e saem da tela.

• Processamento de efeitos e blur:

  • Implementa algoritmos de desfocagem (blur) diretamente no fragment shader do GLSL para simular velocidade e desfoque de distância/movimento.

• Animação de glifos/texto:

  • Shaders dedicados (glyphv e glyphf) para renderização de caracteres e efeitos visuais com transições de cores em tempo real via funções trigonométricas.

• Tecnologias Utilizadas:

  • WebGL / GLSL para renderização gráfica e aceleração por GPU.

  • gl-matrix para cálculos matemáticos de matrizes e vetores 3D/2D.