着色编辑器 - Firefox 开发者工具 编辑

着色器编辑器使您可以查看和编辑WebGL使用的顶点和片段着色器。

WebGL是一种JavaScript API，用于在不使用插件的情况下在浏览器中呈现交互式3D图形和2D图形。使用WebGL，您可以提供2个名为"着色器"的程序，这些程序在OpenGL渲染管道的适当阶段调用：顶点着色器，提供要绘制的每个顶点的坐标;以及片段着色器，为每个像素提供颜色被绘制。

这些着色器是用OpenGL着色语言或GLSL编写的。在WebGL中，它们可以通过多种方式包含在页面中：作为JavaScript源代码中的硬编码文本，使用<script>标记包含的单独文件，或者作为纯文本从服务器检索。然后在页面中运行的JavaScript代码使用WebGL API将它们发送以进行编译，并且它们在设备的GPU上执行。

使用着色器编辑器，您可以检查和编辑顶点和片段着色器的源。

这是另一个截屏视频，展示了如何将着色器编辑器用于复杂的应用程序(在本例中为虚幻引擎演示)：

打开着色器编辑器

默认情况下禁用着色器编辑器。要启用它，请打开工具箱设置，然后选中"默认Firefox开发人员工具"项中的"着色器编辑器"。您现在将看到"着色器编辑器"出现在工具栏中。单击它，打开着色器编辑器。

首先，您只会看到一个空白窗口，其中有一个按钮，要求您重新加载页面：

首先，加载一个创建WebGL上下文并将程序加载到其中的页面。以下屏幕截图来自虚幻引擎演示。

您现在将看到一个窗口分为三个窗格：左侧所有GLSL程序的列表，中间当前所选程序的顶点着色器，右侧当前所选程序的片段着色器：

管理程序

左侧窗格列出了WebGL上下文当前使用的所有程序。如果将鼠标悬停在列表中的某个条目上，该程序绘制的几何图形将以红色突出显示：

如果单击程序条目左侧的眼球图标，则该程序将被禁用。这对于聚焦某些着色器或隐藏重叠几何体非常有用：

如果单击该条目，其顶点和片段着色器将显示在其他两个窗格中，您可以编辑它们。

编辑着色器

中间和右侧窗格显示当前所选程序的顶点和片段着色器。

您可以编辑这些程序，并在下次重绘WebGL上下文时查看结果(例如，在下一个动画帧中)。例如，您可以修改颜色：

编辑器突出显示代码中的语法错误：

如果将鼠标悬停在包含错误的行旁边显示的十字形上，您将看到有关该问题的更多详细信息：