Habilidade de Herói Raymarched

Produza um index.html único e autônomo que renderiza uma cena 3D em tempo real inteiramente em um fragment shader via sphere tracing, em tela cheia, com uma sobreposição tipográfica limpa por cima.

Por que este é um artefato powered

OpenDesign detecta getContext('webgl2') e renderiza este arquivo em powered preview — um iframe cross-origin-isolated com allow-same-origin. O pipeline completo da GPU está disponível; você não precisa contornar o sandbox opaco.

Mapa de recursos

webgl-raymarched-hero/
├── SKILL.md      ← you're reading this
└── example.html  ← a working SDF metaball raymarcher (READ FIRST)

Fluxo de trabalho

Etapa 0 — Leia a referência

Leia example.html de ponta a ponta. Observe a forma: um triângulo de tela cheia; uma função de distância sinalizada map(p) que une suavemente (smin) várias esferas em movimento; normais por diferenças finitas; uma marcha softShadow; e uma câmera construída a partir de ro/ta com uma órbita lenta. Sombreamento = difuso × sombra suave + aro de fresnel + um especular apertado.

Etapa 1 — Escolha a SDF

Mantenha o marcher barato para que ele mantenha 60fps:

• Metaballs (padrão): algumas esferas misturadas com smin — orgânico, sempre legível.
• Primitivas arredondadas: SDFs de caixa/toro/cápsula com repetição de domínio para um herói estruturado.
• Superfície deslocada: uma esfera mais um deslocamento de ruído de baixa amplitude para um visual derretido.

Etapa 2 — Construa index.html

• Um arquivo, zero requisições externas. Triângulo de tela cheia + raymarch de fragmento.
• Limite a marcha: limite as iterações (~90), saída antecipada ao atingir (d < 0.001) e ao atingir distância distante; limite o DPR a ~1.5 — raymarching é pesado por pixel.
• Ilumine-o: difuso, uma sombra suave/penumbra, um aro de fresnel (pow(1 - dot(n,-rd), 3)) e um lóbulo especular. Gamma suave no final.
• Compile os shaders com log de erros para que um erro de digitação falhe ruidosamente, não silenciosamente em preto.

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 tinge a superfície em direção ao verde-limão #63fe13 e a contorna em azul-petróleo).
• Título ≤ 13 caracteres mais uma linha de suporte. Mantenha a forma 3D como o herói.

Etapa 4 — Auto-revisão (P0)

• Renderiza continuamente a ~60fps; o selo de FPS é atualizado.
• A superfície tem pistas de profundidade reais: sombra, aro e um especular em movimento.
• Sem artefatos de banding na silhueta; as normais são estáveis.
• Redimensiona de forma nítida ao redimensionar a janela (sem alongamento / borrão).
• Degrada para uma mensagem (não uma página em branco) se webgl2 não estiver disponível.