MDN wants to talk to developers like you:



着色编辑器通过WebGL使你能够查看,编辑vertex和fragment shaders。

WebGL是一个JavaScript API,用于不借助插件即可在浏览器显示互动的3D或2D图像。With WebGL you provide 2 programs called "shaders" which are called at the appropriate stage of the OpenGL rendering pipeline: a vertex shader, which provides the coordinates for each vertex to be drawn, and a fragment shader, which provides the color for each pixel to be drawn.

These shaders are written in OpenGL Shading Language, or GLSL. In WebGL they can be included in a page in several ways: as text hardcoded in JavaScript sources, as separate files included using <script> tags, or retrieved from the server as plain text. JavaScript code running in the page then sends them for compilation using the WebGL APIs, and they're executed on the device's GPU.

通过着色编辑器你可以检测并编辑the vertex and fragment shaders资源。

Here's another screencast, showing how you can use the Shader Editor for complex applications (in this case, the Unreal Engine demo):


着色编辑器默认为关闭。为了激活它,打开Toolbox settings并在"Default Firefox Developer Tools"选项中选中"Shader Editor"。然后你可以看到"Shader Editor"在工具栏中显示。点击即可打开着色编辑器。


To get started, load a page which creates a WebGL context and loads a program into it. The screenshots below are from the Unreal Engine demo.

你会发现窗口分割成三个部分:左边是所有的GLSL程序,中间是目前选中的程序的vertex shader,右边是目前选中的程序的fragment shader:

Managing programs管理程序

The left hand pane lists all programs currently in use by a WebGL context. If you hover over an entry in the list, the geometry drawn by that program is highlighted in red:

If you click the eyeball icon just left of the program's entry, that program is disabled. This is useful for focusing on certain shaders or hiding overlapping geometry:

If you click the entry, its vertex and fragment shaders are shown in the other two panes, and you can edit them.

Editing shaders编辑着色器

The middle and right hand panes show the vertex and fragment shaders for the currently selected program.

You can edit these programs and see the results the next time the WebGL context redraws (for example, in the next animation frame). For example, you can modify the colors:

The editor highlights syntax errors in your code:

If you hover over the cross shown next to a line containing an error, you'll see more details about the problem:




 此页面的贡献者: lixuanh
 最后编辑者: lixuanh,