initial commit

1 files changed, 58 insertions, 0 deletions

diff --git a/files/zh-cn/tools/shader_editor/index.html b/files/zh-cn/tools/shader_editor/index.html
new file mode 100644
index 0000000000..ec23028fc9
--- /dev/null
+++ b/files/zh-cn/tools/shader_editor/index.html
@@ -0,0 +1,58 @@
+---
+title: 着色编辑器
+slug: Tools/Shader_Editor
+translation_of: Tools/Shader_Editor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>着色器编辑器使您可以查看和编辑<a href="/en-US/docs/Web/WebGL">WebGL</a>使用的顶点和片段着色器。</p>
+
+<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p>
+
+<p>WebGL是一种JavaScript API，用于在不使用插件的情况下在浏览器中呈现交互式3D图形和2D图形。使用WebGL，您可以提供2个名为"着色器"的程序，这些程序在<a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL渲染管道</a>的适当阶段调用：<a href="https://www.opengl.org/wiki/Vertex_Shader">顶点着色器</a>，提供要绘制的每个顶点的坐标;以及<a href="https://www.opengl.org/wiki/Fragment_Shader">片段着色器</a>，为每个像素提供颜色被绘制。<br>
+ <br>
+ 这些着色器是用OpenGL着色语言或<a href="https://www.opengl.org/documentation/glsl/">GLSL</a>编写的。在WebGL中，它们可以通过多种方式包含在页面中：作为JavaScript源代码中的硬编码文本，使用&lt;script&gt;标记包含的单独文件，或者作为纯文本从服务器检索。然后在页面中运行的JavaScript代码使用WebGL API将它们发送以进行编译，并且它们在设备的GPU上执行。</p>
+
+<p>使用着色器编辑器，您可以检查和编辑顶点和片段着色器的源。</p>
+
+<p>这是另一个截屏视频，展示了如何将着色器编辑器用于复杂的应用程序(在本例中为<a href="http://www.unrealengine.com/html5/">虚幻引擎</a>演示)：</p>
+
+<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
+
+<h2 id="打开着色器编辑器">打开着色器编辑器</h2>
+
+<p>默认情况下禁用着色器编辑器。要启用它，请打开<a href="/en-US/docs/Tools_Toolbox#Settings">工具箱设置，</a>然后选中"默认Firefox开发人员工具"项中的"着色器编辑器"。您现在将看到"着色器编辑器"出现在工具栏中。单击它，打开着色器编辑器。<br>
+ <br>
+ 首先，您只会看到一个空白窗口，其中有一个按钮，要求您重新加载页面：</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>首先，加载一个创建WebGL上下文并将程序加载到其中的页面。以下屏幕截图来自<a href="http://www.unrealengine.com/html5/">虚幻引擎</a>演示。</p>
+
+<p>您现在将看到一个窗口分为三个窗格：左侧所有GLSL程序的列表，中间当前所选程序的顶点着色器，右侧当前所选程序的片段着色器：</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="管理程序">管理程序</h2>
+
+<p>左侧窗格列出了WebGL上下文当前使用的所有程序。如果将鼠标悬停在列表中的某个条目上，该程序绘制的几何图形将以红色突出显示：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">如果单击程序条目左侧的眼球图标，则该程序将被禁用。这对于聚焦某些着色器或隐藏重叠几何体非常有用：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">如果单击该条目，其顶点和片段着色器将显示在其他两个窗格中，您可以编辑它们。</p>
+
+<h2 id="编辑着色器">编辑着色器</h2>
+
+<p>中间和右侧窗格显示当前所选程序的顶点和片段着色器。<br>
+ <br>
+ 您可以编辑这些程序，并在下次重绘WebGL上下文时查看结果(例如，在下一个动画帧中)。例如，您可以修改颜色：</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;">编辑器突出显示代码中的语法错误：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">如果将鼠标悬停在包含错误的行旁边显示的十字形上，您将看到有关该问题的更多详细信息：</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> </p>