Habilidade Galáxia de Partículas

Produza um index.html único e autônomo que renderiza um sistema de partículas em tempo real em tela cheia, com uma sobreposição tipográfica limpa por cima. O movimento característico: calcule a posição de cada partícula na GPU para que a CPU nunca itere sobre as partículas.

Por que este é um artefato poderoso

O OpenDesign detecta getContext('webgl2') e renderiza este arquivo em visualização poderosa — um iframe isolado de origem cruzada com allow-same-origin. O pipeline completo da GPU está disponível; você não precisa contornar o sandbox opaco.

Mapa de recursos

webgl-particle-galaxy/
├── SKILL.md      ← you're reading this
└── example.html  ← a working 50,000-point WebGL2 galaxy (READ FIRST)

Fluxo de trabalho

Etapa 0 — Leia a referência

Leia example.html de ponta a ponta. Observe a forma: sem buffer de vértices — o shader de vértices lê gl_VertexID, o hasheia em uma semente estável por partícula e deriva uma órbita log-espiral com uma curva de rotação interna-rápida. Os pontos são desenhados com gl.drawArrays(gl.POINTS, 0, N) em uma única chamada, misturados aditivamente (blendFunc(ONE, ONE) com cor pré-multiplicada) para que os pontos sobrepostos brilhem.

Etapa 1 — Escolha o movimento

Escolha um campo que o shader de vértices possa expressar de forma barata a partir de gl_VertexID + uTime:

• Galáxia espiral (padrão): braços log-espirais, curva de rotação speed ≈ k / (r + ε), disco fino.
• Atrator / fluxo: um vórtice ou um passo de atrator estranho incorporado como uma função de forma fechada do tempo.
• Explosão / reforma: interpolação entre um início semeado e uma forma alvo em um relógio em loop.

Etapa 2 — Construa index.html

• Um arquivo, zero requisições externas. Vincule um VAO mesmo sem atributos (alguns drivers exigem isso).
• Tamanho do ponto no shader de vértices (gl_PointSize), limitado e ciente do DPR; sprites redondos suaves via gl_PointCoord + uma atenuação gaussiana no shader de fragmentos.
• Mistura aditiva em uma cor de limpeza escura; pré-multiplique a cor do fragmento para que blendFunc(ONE, ONE) seja lido como brilho, não como dupla exposição.
• Compile shaders com registro de erros (getShaderInfoLog / getProgramInfoLog) para que um erro de digitação falhe ruidosamente.

Etapa 3 — Sobreposição + marca

• Mapeie as cores de destaque para o DESIGN.md ativo quando um estiver presente; caso contrário, uma paleta escura restrita com um destaque vívido (a referência usa verde limão #63fe13 para os braços e um núcleo branco-azulado).
• Título ≤ 15 caracteres mais uma linha de apoio. Nunca enterre as partículas atrás do texto.

Etapa 4 — Autoavaliação (P0)

• Renderiza continuamente a ~60fps; o selo de FPS é atualizado.
• Dezenas de milhares de pontos em uma única chamada de desenho (sem loop de CPU por partícula).
• Sem erros no console WebGL; o programa vincula-se limpidamente.
• Redimensiona de forma nítida ao redimensionar a janela (sem distorção / borrão).
• Degrada para uma mensagem (não uma página em branco) se webgl2 não estiver disponível.