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

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

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

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

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

打开着色器编辑器

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

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

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

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

管理程序

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

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

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

编辑着色器

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

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

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

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

 

 

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, SphinxKnight, wbamberg, lixuanh
最后编辑者: mdnwebdocs-bot,