Design de Shader de Galáxia de Partículas

Três braços espirais, uma única chamada de desenho de pontos

Particle Galaxy é um exemplo oficial do OpenDesign, centrado em um canvas escuro, quase vazio, e em um grande campo de partículas tênues. O título criado para a peça, “Fifty thousand points, one draw call.”, torna a premissa técnica parte da identidade visual, em vez de escondê-la atrás de elementos de interface.

O campo de partículas e o título fixo no canto inferior esquerdo compartilham uma única viewport; o título não é uma seção separada abaixo da dobra. Pontos verdes, azuis e claros e tênues deixam amplas lacunas escuras entre os três braços. O compromisso visual é claro: o campo contido parece silencioso ao lado do texto brilhante, mas seu baixo contraste exige um olhar atento à imagem em tamanho real.

Onde este design se encaixa

Este design é adequado para uma cena de landing page de creative coding, uma vitrine interativa de tecnologia ou um estudo de WebGL com direção de arte. Seu valor é maior quando o próprio visual é o assunto e o texto de apoio pode permanecer curto.

A ausência de controles estáticos mantém a atenção no campo de partículas em mudança. Essa contenção também limita a descoberta: o markup fornecido não mostra controles criados para a peça, então o design se comunica por movimento, tipografia e pelo bloco compacto de estatísticas, e não por indicações explícitas de interação.

Como a composição funciona

O bloco no canto superior direito mostra 50,000 POINTS, 1 DRAW CALL e uma estimativa de FPS variável. O vertex shader deriva as posições dos pontos a partir de gl_VertexID, distribui-os entre três braços e varia a velocidade angular para que os pontos internos girem mais rápido. Uma inclinação fixa e uma rotação geral que muda lentamente definem a perspectiva do disco. Point sprites suaves e mistura aditiva dão brilho às partículas verdes, ciano e claras.

As estatísticas usam numerais brancos grandes e rótulos menores com espaçamento entre letras, enquanto a arte usa partículas verdes, azuis e claras de contraste muito menor. Essa separação torna os metadados fáceis de ler sem competir com a galáxia. Também cria um compromisso perceptivo: o bloco de desempenho é imediatamente legível, enquanto os braços de partículas exigem um olhar mais longo e um contraste de tela adequado.

As capturas mostram valores de FPS diferentes, mantendo as mesmas contagens de pontos e rótulos de draw call. Essa variação faz o campo de FPS parecer um estado local de exibição em mudança, e não uma afirmação estável sobre o desempenho em diferentes dispositivos.

Limite de Capacidade

O código-fonte WebGL2 define N = 50000 e chama gl.drawArrays com POINTS uma vez por frame renderizado. As posições das partículas são calculadas no vertex shader, em vez de atualizadas por um buffer de posições na CPU. A thread principal ainda cuida da configuração, dos uniforms de tempo, do redimensionamento e do desenho. Não há controles de ponteiro, teclado, direção de câmera nem parâmetros. Este é um visual procedural semelhante a uma galáxia, não uma simulação gravitacional científica.

Os comentários do código afirmam 60fps, mas capturas estáticas isoladas e o contador local de FPS não estabelecem desempenho garantido. Também não comprovam implantação em produção, serviços conectados nem um processo histórico de geração. As contagens de pontos e de draw calls são fatos do código; a leitura da taxa de quadros é uma observação que depende do ambiente.

O que os contadores descrevem

A exibição da contagem de pontos vem do valor configurado de N, e o rótulo de draw call concorda com o único draw POINTS no loop de renderização. O valor de FPS estima a cadência de requestAnimationFrame em janelas de cerca de meio segundo. Manter esses significados separados preserva um contexto técnico útil sem transformar a arte em um benchmark sem respaldo.