MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

O Shader Editor permite que você veja e edite os vértices e fragment shaders usados pela WebGL.

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):

Abrindo o Shader Editor

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:

Gerenciando os programas

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.

Editando shaders

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.

Etiquetas do documento e colaboradores

 Colaboradores desta página: stephaniehobson, bassam, joselima, idenilson
 Última atualização por: stephaniehobson,