1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
---
title: Shader Editor
slug: Tools/Shader_Editor
translation_of: Tools/Shader_Editor
---
<div>{{ToolsSidebar}}</div><p>O Shader Editor <span id="result_box" lang="pt"><span class="hps">permite que você veja</span> <span class="hps">e edite os</span> <span class="hps">vértices e <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shaders</a></span> <span class="hps">usados pela</span></span> <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p>
<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p>
<p><span id="result_box" lang="pt"><span class="hps">A WebGL</span> <span class="hps">é uma</span> <span class="hps">API</span> <span class="hps">JavaScript</span> <span class="hps">para renderizar</span> <span class="hps">gráficos 3D</span> <span class="hps">interativos</span> <span class="hps">e</span> <span class="hps">gráficos 2D</span> <span class="hps">no navegador</span> <span class="hps">sem usar</span> <span class="hps">plugins.</span></span> <span id="result_box" lang="pt"><span class="hps">Com</span> <span class="hps">WebGL</span> <span class="hps">você fornece</span> <span class="hps">dois</span> <span class="hps">programas</span> <span class="atn hps">chamados de "</span><span>shaders</span><span>"</span> <span class="hps">que são chamados</span> <span class="hps">na fase</span> <span class="hps">adequada do</span></span> <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL rendering pipeline</a>: o <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, <span id="result_box" lang="pt"><span class="hps">que fornece</span> <span class="hps">as coordenadas para</span> <span class="hps">cada vértice</span> <span class="hps">a ser desenhado</span><span>,</span> <span class="hps">e um</span></span> <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a>, <span id="result_box" lang="pt"><span class="hps">que proporciona</span> <span class="hps">a cor</span> <span class="hps">para cada pixel</span> <span class="hps">a ser desenhado.</span></span><br>
<br>
Esses shaders são escritos em OpenGL Shading Language, ou <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. 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).</p>
<p>Com o Shader Editor você pode examinar e editar o fonte dos vertices e dos fragment shaders.</p>
<p>Veja aqui outro video mostrando como usar o Shader Editor em aplicações complexas (nesse caso, a demo da <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>):</p>
<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
<h2 id="Abrindo_o_Shader_Editor">Abrindo o Shader Editor</h2>
<p>O Shader Editor está desabilitado por padrão. Para habilitar abra os <a href="/pt-BR/docs/Tools_Toolbox#Settings">ajustes da Caixa de Ferramentas</a> (<a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a>) 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.<br>
<br>
A princípio você verá apenas uma janela vazia com somente um botão pedindo para você recarregar a página:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Para iniciar, carregue uma página que crie um contexto WebGL e carregue um programa nela. A figuras abaixo são da demo da <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Gerenciando_os_programas">Gerenciando os programas</h2>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p>
<h2 id="Editando_shaders">Editando shaders</h2>
<p>Os painéis do meio e da direita mostram o vertex e os fragment shaders para o programa atualmente selecionado.<br>
<br>
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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">O editor destaca os erros de sintáxe em seu código:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p> </p>
<p><strong><u>Nota</u></strong>: a palavra <strong>entrada </strong>no texto acima refere-se a um item em uma lista.</p>
|
