O Shader Editor permite que você veja e edite os vértices e fragment shaders usados pela WebGL.
{{EmbedYouTube("hnoKqFuJhu0")}}
A WebGL é uma API JavaScript para renderizar gráficos 3D interativos e gráficos 2D no navegador sem usar plugins. Com WebGL você fornece dois programas chamados de "shaders" que são chamados na fase adequada do OpenGL rendering pipeline: o vertex shader, que fornece as coordenadas para cada vértice a ser desenhado, e um fragment shader, que proporciona a cor para cada pixel a ser desenhado.
Esses shaders são escritos em OpenGL Shading Language, ou GLSL. Na WebGL eles podem ser incluídos em uma página de várias maneiras: com texto escrito em JavaScript, como arquivos separados inclusos usando a tag <script>, ou obtidos do servidos como somente texto (plain text). O código JavaScript em execução na página então os envia para compilação usando as API de WebGL, e eles são executados na GPU do equipamento (computador).
Com o Shader Editor você pode examinar e editar o fonte dos vertices e dos fragment shaders.
Veja aqui outro video mostrando como usar o Shader Editor em aplicações complexas (nesse caso, a demo da Unreal Engine):
{{EmbedYouTube("YBErisxQkPQ")}}
O Shader Editor está desabilitado por padrão. Para habilitar abra os ajustes da Caixa de Ferramentas (Toolbox settings) e marque a caixa "Shader Editor" no item "Ferramentas de Desenvolvimento Padrão do Firefox". Agora você verá "Shader Editor" na barra de ferramentas. Clique no item e o Shader Editor vai abrir.
A princípio você verá apenas uma janela vazia com somente um botão pedindo para você recarregar a página:
Para iniciar, carregue uma página que crie um contexto WebGL e carregue um programa nela. A figuras abaixo são da demo da Unreal Engine.
Você verá uma janela dividida em três paineis: uma lista de todos os programas em GLSL do lado esquerdo, o vertex shader para o programa atualmente selecionado no meio, e o fragment shader para o programa atualmente selecionado a direita:
O painel da esquerda lista toos os programas em uso no momento por um contexto WebGL. Se você parar o mouse sobre um entrada da lista, a parte desenhada por aquele programa é destacada em vermelho:
Se você clicar no ícone de olho ao lado esquerdo da entrada do programa, esse programa é desabilitado. Isso é útil para que você se concentre em certos shaders ou oculte as figuras que se sobrepõem:
Se você clicar na entrada, o vertex e o fragment shaders ligados a ela são exibidos nos outros dois painéis, e voce pode editá-los.
Os painéis do meio e da direita mostram o vertex e os fragment shaders para o programa atualmente selecionado.
Você pode editar esses programas e ver os resultados na próxima vez o contexto WebGL for redesenhado (por exemplo, no próxmo quadro da animação). Por exemplo, você pode modificar as cores:
O editor destaca os erros de sintáxe em seu código:
Se você parar o mouse sobre o 'x' que aparece perto de uma linha que contem algum erro, você vai ver mais detalhes sobre o problema:
Nota: a palavra entrada no texto acima refere-se a um item em uma lista.