Como a Layers entregou 103.802 pontos em apenas 82 KB

O ponto que mais chama atenção no relato da Layers é o uso de Float64Array no motor de simulação, logo depois de a equipe passar um bom tempo cortando precisão no formato de transporte. Não é contradição. O formato DOT2 trafega x e y como uint16 e o raio como uint8, mas, no cliente, a simulação roda em dez typed arrays planos, e os Float64Arrays existem para preservar a física de mola como era. Segundo o autor, números em JS são doubles, então Float64 mantém a conta idêntica, bit a bit. O arquivo na rede é pequeno, a simulação não muda.

O contexto: 13 ilustrações feitas à mão por Alberto Larizza, 103.802 pontos no total. O protótipo tinha um JSON de 8 MB. O código antigo fazia Array.from sobre o Float32Array e criava um objeto por ponto (a maior ilustração tem 12.115 dots, com onze campos cada). Agora são arrays tipados, sem objetos. O autor do texto (a equipe da Layers) descreve o pipeline, e o projeto em si é o formato DOT2 mais o motor de render. O decoder tem cerca de 40 linhas, valida o magic, as flags, o teto de 100 mil pontos e exige o buffer com exatamente 24 + count x 5 bytes.

O ganho de bytes veio do layout. Ordenar por y e x, separar x, y e raios em planos e deixar o Brotli q11 enxergar as linhas repetidas. Quantização sozinha não ajudou (ficou 1% maior que Brotli sobre os floats), a ordenação isolada piorou, e os planos responderam por mais da metade da redução. Deltas economizaram cerca de 1 KB. Resultado: 82 KB, 93% menor que a fonte sem compressão e 63% menor que Brotli sobre os floats originais. Limitações reais: o formato é com perdas (erro de centro abaixo de 0,011 px, de raio abaixo de 0,0065 px) e depende de a arte ser desenhada em linhas. Na renderização, o grid de fundo deixou de pedir frames quando nada se move (antes eram 2.772 células por frame em 390×844). A equipe testou juntar todos os arcs num único path, mas descartou porque o antialiasing escurecia a imagem. Em 52 comparações, a diferença média ficou abaixo de 0,2/255. O autor não separa o ganho de cada mudança de render, pois mediu tudo junto.

Para quem desenvolve front-end com canvas, a lição é prática: antes de escolher formato, abra os dados e veja o que o compressor consegue enxergar. Separar campos em streams pode render mais que truques de quantização ou delta. E manter Float64Array no runtime, mesmo com wire format enxuto, evita mudar comportamento de animação sem querer. Quem opera entrega de assets também ganha: dá para servir Brotli pré-comprimido sem WASM nem biblioteca extra.