Experiência WebGL

Produza um único index.html autocontido que renderize um visual WebGL (ou WebGL2) em tempo real em tela cheia, com uma sobreposição tipográfica limpa por cima.

Por que este é um artefato com poder

OpenDesign detecta getContext('webgl2') / new Worker / SharedArrayBuffer e renderiza este arquivo em visualização com poder — um iframe isolado entre origens com allow-same-origin. Isso significa que Web Workers reais, SharedArrayBuffer, WASM e o pipeline completo da GPU estão disponíveis. Você não precisa contornar o sandbox opaco. Prefira webgl2 para recursos modernos; recorra a webgl quando o efeito permitir.

Mapa de recursos

webgl-experience/
├── SKILL.md      ← you're reading this
└── example.html  ← a working WebGL2 aurora-field reference (READ FIRST)

Fluxo de trabalho

Etapa 0 — Leia a referência

Leia example.html de ponta a ponta. Observe a estrutura: um <canvas> de viewport completo, um loop de desenho de shader de fragmento em um triângulo de tela cheia, um redimensionamento ciente de DPR e um tick de requestAnimationFrame. A sobreposição (kicker → h1 → sub) é HTML/CSS puro sobreposto ao canvas via z-index.

Etapa 1 — Escolha o visual

Escolha UMA técnica que se encaixe no escopo:

• Campo de shader de fragmento (padrão): ruído fbm distorcido no domínio, campos de fluxo, plasma, gradientes. Mais barato, sempre 60fps.
• Cena raymarched: esferas/caixas SDF com sombras suaves para um herói 3D.
• Geometria instanciada: milhares de pontos/quads controlados por um shader de vértice.
• Imagem pós-processada: amostre uma textura de URI de dados e distorça/pontilhe-a.

Etapa 2 — Construa index.html

• Mantenha-o como um arquivo, zero requisições externas (incorpore o código do shader; incorpore qualquer textura como um URI data:). O modo com poder permite carregamentos de CDN, mas visualizações autocontidas são mais rápidas e portáteis.
• Sempre: alpha:false, DPR limitado a 2, viewport ao redimensionar e uma proteção que exibe uma mensagem graciosa se o contexto for nulo.
• Compile shaders com log de erros (getShaderInfoLog) para que um erro de digitação falhe ruidosamente, não silenciosamente em preto.

Etapa 3 — Sobreposição + marca

• Mapeie as duas cores de destaque de nível :root para o DESIGN.md ativo quando um estiver presente; caso contrário, use uma paleta escura restrita com um único destaque vívido (a referência usa verde limão #63fe13).
• Título ≤ 14 caracteres, uma linha de suporte. Nunca cubra todo o canvas — o visual é o herói.

Etapa 4 — Auto-revisão (P0)

• Renderiza continuamente a ~60fps; o indicador de FPS é atualizado.
• Sem erros no console WebGL; getError() limpo após o primeiro quadro.
• Redimensiona de forma nítida ao redimensionar a janela (sem alongamento / borrão).
• Contraste da sobreposição legível sobre o quadro mais brilhante.
• Degrada para uma mensagem (não uma página em branco) se webgl2 não estiver disponível.