如果你看过 Epic Games 的 Epic Citadel HTML5 版本，你一定对它惊人的性能和细节水平印象深刻。屏幕上看到的许多酷炫视觉效果的代码都是以**着色器**的形式编写的，它们通过**程序**链接在一起。这些程序是直接在 GPU 上执行的专门程序，用于提供高性能的实时视觉效果。

即使你使用的是库，编写顶点和片段着色器也是 Web 上 3D 开发的重要组成部分。事实上，Epic Citadel 演示 包含了 200 多个着色器程序。这是因为大多数渲染都是根据游戏需求进行定制和优化的。当前，着色器开发存在以下几个问题：

• 查看更改需要刷新页面
• 某些着色器在非常具体的条件下才会应用

这是一个屏幕截图，展示了如何使用一个相对简单的 WebGL 演示来操作着色器代码。

从 Firefox 27 开始，我们引入了一个名为“着色器编辑器”的新工具，它使得使用着色器程序变得更加简单：编辑器列出了 WebGL 上下文中运行的所有着色器程序，你可以实时编辑着色器并立即看到结果，而不会中断任何动画或状态。此外，编辑着色器**不会**影响 WebGL 性能。

启用着色器编辑器

着色器编辑器默认情况下不会显示，因为并非所有网页都包含 WebGL，但你可以轻松地启用它。

1. 通过按 F12 或 Ctrl/Cmd + Shift + I 打开工具箱。
2. 单击工具箱顶部边缘附近的“齿轮”图标，打开“工具箱选项”。
3. 在左侧的“默认 Firefox 开发者工具”下，确保选中“着色器编辑器”。你应该立即看到一个新的“着色器编辑器”工具选项卡。

使用着色器编辑器

要查看着色器编辑器在运行时的效果，只需访问一个 WebGL 演示，例如这个，然后打开工具箱。当你单击着色器编辑器选项卡时，你会看到一个“重新加载”按钮，需要单击它才能将编辑器连接到 WebGL 上下文。完成此操作后，你会看到着色器编辑器 UI。

• 在左侧，你有一个程序列表，每个程序对应一个顶点和片段着色器，它们的源代码在右侧的编辑器中显示并带有语法高亮显示。
• 着色器类型显示在每个编辑器的下方。
• 将鼠标悬停在程序上会以红色突出显示由其对应的着色器绘制的几何图形，这对于查找要处理的正确程序很有用。
• 单击每个程序旁边的眼睛图标会隐藏渲染的几何图形（如果作者只想专注于某些几何图形而不是其他几何图形，或者隐藏重叠的几何图形，这会很有用）。
• 该工具在停靠在侧面时具有响应性。

编辑着色器程序

你首先会注意到着色器程序代码**不是** JavaScript。有关着色器程序工作原理的更多信息，我强烈建议你从Khronos wiki 上的 WebGL 演示开始，或者阅读 Paul Lewis 优秀的HTML5 Rocks 文章。Learning WebGL 博客上也有一些很棒的长期教程。着色器编辑器让你可以直接访问这些程序，以便你可以尝试它们的工作原理。

• 在任何编辑器中编辑代码都会编译源代码并在用户停止输入后立即应用它；
• 如果代码中存在错误，渲染不会受到影响，但编辑器中会显示错误，并突出显示有问题的代码行；将鼠标悬停在图标区域将显示一个描述错误的工具提示。

在Mozilla 开发者网络 上了解更多关于着色器编辑器的信息。

这是一个第二个屏幕截图，展示了如何直接编辑 Epic Citadel 演示中的着色器程序。