Material Editor UI


The Material Editor UI consists of a menu bar, a toolbar, and, by default, four open panels.


  1. Menu Bar - Lists the menu options for the current Material.

  2. Toolbar - Contains tools that you can use to work with your Material.

  3. Viewport Panel - Previews the Material on a mesh.

  4. Details Panel - Lists the properties of the Material or the selected material expression or function nodes.

  5. Graph Panel - Displays the material expression and function nodes that create shader instructions for your Material.

  6. Palette Panel - Lists all the available material expression and function nodes.

There is also an HLSL Code panel, but by default, it is not visible. To display it, on the Window menu, click HLSL Code. For more information, see HLSL Code .

您可以通过点击选卡右上角的小 "X" 来关闭任何面板。您也可以通过右击面板,然后在弹出的关联菜单中点击 Hide Tab(隐藏选卡),来隐藏任何面板。要想再次显示您已经关闭的面板,在 Window(窗口) 菜单中点击那个面板的名称即可。







Material Editor Toolbar

The following table lists the options in the Toolbar and what they do.

Icon Description





toolbar_apply.png Applies any changes made in the Material Editor to the original Material and any uses of that Material in the world.
toolbar_search.png Finds expressions and comments in the current Material.
toolbar_home.png Centers the base Material node in the Graph panel.
toolbar_clean.png Deletes any material nodes that are not connected to the Material.
toolbar_show.png Shows or hides material nodes that are not connected to anything.
toolbar_live_nodes.png If enabled, updates the Materials in each material node in real time. Disable this option for faster Material Editor performance. See the Live Nodes and Live Update section.
toolbar_live_update.png If enabled, compiles the shaders of all subexpressions every time nodes are added, deleted, connected, or disconnected, or have their property values changed. Disable this option for faster Material Editor performance. See the Live Nodes and Live Update section.
toolbar_stats.png Shows or hides Material statistics in the Graph panel.
toobar_release_stats Toggles use of release or development shaders in stats reporting.
toolbar_built_in_stats Toggles displaying of stats for an empty Material. Helps identify cost of changes in the graph.
toolbar_mobile_stats Toggles Material stats and compilation errors for mobile.

Viewport Panel

Material Editor Preview Panel

The Viewport panel displays the Material being edited applied to a mesh.

You can navigate in the Viewport panel by using the options in the following table.

Action Description
Drag with the left mouse button Rotate the mesh
Drag with the middle mouse button Pan
Drag with the right mouse button Zoom
Hold down L and drag with the left mouse button Rotate the light direction

The viewport mesh can be changed by using the associated toolbar controls (the shape buttons, Select Preview Mesh combo, and Use Selected StaticMesh button). The viewport mesh is saved with the Material so that the next time the Material is opened in a Material Editor, it will be previewed on the same mesh.

Several icons appear along the top of the Preview panel; the following table details their usage.

Icon Description
toolbar_cylinder.pngtoolbar_sphere.pngtoolbar_plane.pngtoolbar_cube.png Shows the result of your current Material on the respective primitive shape in the Preview panel.
toolbar_mesh.png Makes the selected Static Mesh in the Content Browser the preview mesh.
toolbar_grid.png Toggles the background grid in the Preview panel.
toolbar_realtime_preview.png If enabled, updates the Material on the preview mesh in real time. Disable this option for faster Material Editor performance.

Details Panel

Material Editor Details Panel

This panel contains a property window for all currently selected material expression and function nodes. If no nodes are selected, the properties of the Material being edited will be displayed.

See 材质属性 for descriptions of all Material properties.

Graph Panel

Material Editor Graph Panel

This panel contains a graph of all material expressions that belong to this Material. The number of shader instructions used in the Material as well as any Compiler Errors are displayed in the upper left corner. The fewer the number of instructions, the less costly the Material. Material expression nodes that are not connected to the base material node do not contribute to the instruction count (cost) of the Material.

By default, each Material contains a single base Material node. This node has a series of inputs, each associated with a different aspect of the Material, that other material nodes can connect to.

Material Editor Material Node

See 材质输入 for descriptions of the various inputs of the base Material node.

Palette Panel

The Palette panel contains a list of material nodes that can be placed in a Material via "drag and drop". To place a new material node, drag it into the Graph panel.

You can filter the material nodes listed in the Palette panel by choosing either Expressions or Functions in the Category drop-down list.

For more information about material functions, see Material Functions .

HLSL Code Panel


This panel shows the High Level Shader Language (HLSL) code that is generated by the current Material. Be aware that this is not an editor; you will not be able to change the HLSL code. Rather, this is merely a viewer to allow you to visualize the code defined by your material network.

The Code View panel is not visible by default. To display it, on the Window menu, click HLSL Code.

Graph Controls

Controls in the Material Editor generally match the controls of other tools in the Unreal Editor. For example, the material expression graph can be navigated as with other linked object editors, the material preview mesh can be oriented as per other mesh tools, etc.

Mouse Controls

Control Action
LMB or RMB drag on background Pan material expression graph
Rotate Mouse Wheel Zoom in and out
LMB + RMB drag Zoom in and out
LMB on object Select expression/comment
Ctrl + LMB on object Toggle selection of expression/comment
Ctrl + LMB drag Move current selection/comment
Ctrl + Alt + LMB drag Box select
Ctrl + Alt + Shift + LMB drag Box select (add to current selection)
LMB drag on connector Create connection (release on connector)
LMB drag from connection Move connection (release on same type connector)
Shift + LMB on connector Marks the connector. Performing the action again with a connector marked will create connection between the two connectors. This is a quick way of making connections over large distances.
RMB on background Bring up New Expression menu
RMB on object Bring up Object menu
RMB on connector Bring up Object menu
Alt + LMB on connector Break all connections to connector

Keyboard Controls

Control Action
Ctrl + B Find in Content Browser
Ctrl + C Copy selected expressions
Ctrl + S Save all
Ctrl + V Paste
Ctrl + W Duplicate selected objects
Ctrl + Y Redo
Ctrl + Z Undo
Delete Delete selected objects
Spacebar Force update all material expression previews
Enter (same as clicking apply)


You can use hotkeys to place commonly used material expression types. Hold down the hotkey and left-click to drop in the node. The hotkeys are as follows:

Hotkey Expression
A Add
B BumpOffset
C Comment
D Divide
E Power
F MaterialFunctionCall
I If
L LinearInterpolate
M Multiply
N Normalize
O OneMinus
P Panner
R ReflectionVector
S ScalarParameter
T TextureSample
U TexCoord
V VectorParameter
1 Constant
2 Constant2Vector
3 Constant3Vector
4 Constant4Vector
Shift + C ComponentMask