O que é Playground de Shaders WebGL?

Escreva shaders GLSL de vértice e fragmento e veja o resultado renderizado instantaneamente via WebGL. Sem configuração local necessária. Use para aprender programação de shaders, prototipar efeitos ou experimentar gráficos acelerados por GPU.

Os uniforms embutidos são `u_time` para animação, `u_resolution` para o tamanho da tela, `u_mouse` para a posição do cursor, `u_frame` para a contagem de quadros renderizados e uma textura de ruído tileável `sampler2D u_noise` pronta para uso. Envie qualquer imagem para vinculá-la como `sampler2D u_texture` e amostrá-la direto no fragment shader. Dez presets (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), um controle deslizante de velocidade da animação, um indicador de FPS ao vivo, interruptor de autocompilação, controle de pausa para congelar a linha do tempo, link compartilhável que leva todo o código-fonte junto e exportação em PNG do quadro atual completam o conjunto.

Como usar

1. Escreva ou cole o código do seu shader GLSL de fragmento no editor. Um shader padrão já está carregado.
2. A pré-visualização ao vivo atualiza enquanto você digita. Os uniformes integrados incluem tempo, resolução e posição do mouse.
3. Exporte seu shader como uma captura de tela PNG ou copie o código para usar em seus próprios projetos WebGL.

Quando usar

• Aprender GLSL sem precisar montar um projeto local em C++ ou Three.js.
• Prototipar um efeito de fragment shader antes de portá-lo para um motor de jogo ou site.
• Gerar capturas de fundos animados para portfólios, slides ou posts em redes sociais.

Resultado

Um desenvolvedor de jogos prototipando um efeito de ondulação de água escreve um shader de fragmento com ondas senoidais e o uniforme de tempo. O painel de pré-visualização mostra o resultado animado atualizando ao vivo.

Perguntas frequentes

Preciso conhecer C ou programação gráfica para usar?

GLSL é uma linguagem pequena no estilo do C: laços, condicionais e contas com floats. Quem mexeu com C, Java ou JavaScript pega rápido. Os shaders dos presets vêm comentados, então mexer em valores costuma ser o suficiente para começar sem experiência prévia com GPU.

Meu shader compila mas a prévia fica preta. Por quê?

Causas comuns: escrever em `gl_FragColor` fora da função main, retornar `vec3` em vez de `vec4`, ou dividir por zero numa função de noise. Abra o console do navegador — o WebGL imprime alertas úteis mesmo quando a compilação aparenta ter funcionado.

Dá pra amostrar uma textura ou enviar uma imagem minha?

Sim. Clique em Enviar imagem na barra de pré-visualização para vincular qualquer PNG ou JPG como `sampler2D u_texture`. Um float complementar, `u_hasTexture`, vai para 1.0 assim que a imagem termina de carregar, então o shader pode decidir se a textura está disponível, no mesmo estilo dos channel inputs do Shadertoy.

Qual versão de WebGL é usada?

WebGL 1 com GLSL ES 1.0. Isso significa `varying` em vez de `in/out`, `gl_FragColor` em vez de uma saída nomeada e nada de texturas inteiras. Shaders escritos para WebGL 2 ou OpenGL 3+ de desktop precisam de pequenos ajustes de sintaxe para rodar aqui.

Alguma coisa é enviada para um servidor?

Não. Compilação e renderização acontecem na GPU local, dentro do navegador. O código do shader nunca sai da página; se você fechar a aba sem copiar, ele some.

Ferramentas relacionadas