Heerich.js transforma cenas 3D em gráficos vetoriais para web

Heerich.js é uma engine JavaScript minimalista que oferece uma abordagem única para gráficos 3D na web. Em vez de renderizar para canvas ou WebGL, ela converte cenas de voxels (cubos 3D) em SVG puro. O resultado são composições vetoriais escaláveis infinitamente, que mantêm a nitidez em qualquer resolução e podem ser estilizadas e manipuladas com CSS padrão. Com menos de 4KB minificado, a biblioteca é um exercício de elegância técnica.

Técnica de Renderização

A engine opera construindo uma cena 3D com blocos voxelizados e, em tempo de execução, projeta cada face visível em elementos SVG <polygon>. Essa técnica permite que cada pixel 3D seja um objeto DOM, habilitando efeitos como hover states, transições CSS e animações via SMIL diretamente no gráfico.

Vantagens do SVG

O uso de SVG em vez de WebGL traz vantagens específicas: acessibilidade, pois o DOM é navegável por leitores de tela; indexação por motores de busca, já que o texto dentro do SVG é reconhecido; e impressão em alta qualidade sem perdas. Para projetos onde a performance de milhares de voxels não é crítica, Heerich.js oferece um caminho mais simples e integrado ao ecossistema web.

Aplicações Práticas

A aplicação prática vai além de curiosidade. Em arquitetura e engenharia, pode-se gerar plantas baixas 3D interativas e exportáveis como SVG. Em educação, modelos moleculares ou históricos podem ser explorados com zoom infinito. A engine também inspira uma reflexão sobre como gráficos vetoriais estáticos podem ser dinâmicos e interativos, desafiando a dicotomia entre SVG estático e WebGL dinâmico.

Para a comunidade front-end, Heerich.js é um lembrete de que inovação nem sempre requer complexidade extrema. Sua simplicidade explora uma intersecção subutilizada entre 3D, SVG e DOM, abrindo possibilidades criativas para desenvolvedores que buscam fugir do padrão de canvas para gráficos técnicos na web.