From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/tools/shader_editor/index.html | 56 ++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 files/pt-br/tools/shader_editor/index.html (limited to 'files/pt-br/tools/shader_editor') diff --git a/files/pt-br/tools/shader_editor/index.html b/files/pt-br/tools/shader_editor/index.html new file mode 100644 index 0000000000..71bb9c0d74 --- /dev/null +++ b/files/pt-br/tools/shader_editor/index.html @@ -0,0 +1,56 @@ +--- +title: Shader Editor +slug: Tools/Shader_Editor +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}

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")}}

+ +

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.

-- cgit v1.2.3-54-g00ecf