The Future is Now!

Nenhuma dessas novas tecnologias seria útil se não fosse ágil. Felizmente, o JavaScript já é rápido o suficiente para executar jogos em 3D e manipular vídeo em tempo real. A composição acelerada por hardware também está sendo implementada em diferentes navegadores. Isso significa que até mesmo transições e transformações em CSS serão cada vez mais suaves.

Os desenvolvedores estão tirando proveito desses recursos: uma enxurrada de demos de gráficos HTML apareceram na web, desde a implementação algoritmos de antigos gráficos 2D até novas técnicas criadas especificamente para a web moderna.

Suporte a navegadores

“Gráficos” é um tópico tão extenso que existem diversas especificações em desenvolvimento. Uma demonstração de gráfico abrangente pode utilizar várias das seguintes opções:

• Transparência Alfa PNG
• URLs de dados
• CSS3 Colors
• SVG (suporte básico)
• Canvas (suporte básico)
• Elemento de vídeo
• CSS Transforms
• API de texto para Canvas
• SVG em Fundos de tela CSS
• Efeitos SVG para elementos HTML
• Animação SVG SMIL
• Fontes SVG
• Filtros SVG
• Animação CSS3
• SVG embutido em HTML5
• Gráficos do 3D Canvas / WebGL
• CSS 3D Transforms

Clique em cada especificação para ver o status de suporte no caniuse.com (link em inglês). Detalhes específicos sobre o Google Chrome podem ser encontrados no Status da plataforma do Google Chrome (link em inglês).

Demos

• Chrome Experiments Várias demonstrações WebGL/canvas que aproveitam a aceleração do hardware
• TinkerCad Modelagem sólida CAD em WebGL
• Animated CSS3 cube using 3D transforms Efeitos 3D sem WebGL
• Hakim.se / Experiments Experimentos bem-acabados de canvas
• 8-Bit color cycling with HTML5 Efeito de jogo retrô
• IE9 Graphics demos Várias demonstrações do canvas que aproveitam a aceleração de hardware
• Blowing up HTML5 video and mapping it into 3D space Boa integração entre vídeo e canvas

In the Wild

Resources

• svgweb Suporte SVG em todos os navegadores
• Adobe Illustrator HTML5 pack Suporte para SVG, CSS e Canvas no Adobe Illustrator
• Raphaël SVG para fechamento de biblioteca de animação
• cakejs Biblioteca scenegraph do JavaScript para o elemento canvas
• Processing.js Porto de Processamento de linguagem de scripts de animação para JavaScript - utiliza canvas
• three.js Mecanismo 3D leve. Utiliza canvas, SVG e WebGL
• GPU Accelerated Compositing in Chrome Histórico e detalhes sobre a implementação de hardware de composição acelerada no Google Chrome