displaying value or image output by a specified node or going through a specified node connector
displaying bitmaps and vector graphics resources
displaying additional information about the content it currently holds, such as color channels or exact color values
controlling parameters' gizmos

When a displayed image or value is modified, the 2D View updates automatically to stay in sync with the current state of the data.
Multiple 2D View panels can be active at any time, and each can display different images or values. You can control when a new panel should be used by using the Pin feature of the user interface panel.

Displaying content in the 2D View

Alert:

All mentions of actions made on nodes in this section only apply to Substance graphs.

The most straightforward way to display any image in the 2D View is to double-click LMB...

...on a Bitmap or vector graphics resource in the Explorer
...on a node or node connector in the Graph View

Images can also be dragged and dropped directly into the viewport by holding LMB on a resource in the Explorer panel, or RMB on a node in the Graph View.

In the Graph View, you can send an image to the 2D View using the View output in 2D View contextual menu option, which is accessed by clicking RMB...

...on a node to display that node's output. If the node has more than one output, select the desired output in the submenu
...on empty space in the Graph View to display that graph's output. If the graph has more than one output, select the desired output in the submenu

When loading a graph, its first output is automatically displayed in the 2D View by default. You can disable this behaviour in the Preferences. Go to Edit > Preferences > Graph > Substance compositing graph and uncheck the View output in 2D view when opening a graph option.

Viewport

The viewport is the display area of the 2D View, and lets you navigate the displayed image using the following mouse and keyboard shortcuts:

Pan: Ctrl+RMB / MMB
Zoom: Alt+RMB / MouseWheel / 'Display scale' tool:
Adjust to fit viewport: F / 'Fit to view' button
Adjust to 1:1 scale: Z / 'Fit to scale' button

Using a trackpad (macOS only)

Pan: Two-finger swipe
Zoom: Two-finger pinch / Two-finger swipe while holding Cmd

Unavailable actions

It is not possible to pan the image if the current display size of the image is lower than the size of the viewport.

It is not possible to zoom in/out of the image if the displayed content does not exist anymore – e.g. a image's reference node or resource was deleted.

Zoom direction

Each of the zooming methods is inverted with the other:

Mouse wheel up pulls the image closer
Alt+RMB and drag up pushes the image away

The zoom direction can be inverted in the Preferences.

The image native resolution, color format and bit depth appear in the bottom left area of the viewport.

In addition to navigation, the viewport offers the following features:

Tiled display: repeats the image in the viewport in a tiled pattern. This is useful for checking how a pattern or texture will repeat. It is enabled using the Space bar or Tiled display button
Physical size display: Displays the image with a ratio matching the Physical size property of the graph It is enabled using the Physical size ratio button
Keep view size: This option locks the display scale so it stays consistent throughout different images. It is enabled by default and can be disabled using the Keep view size button

Main toolbar

The main toolbar of the 2D View panel lets you do more with your displayed images, and offers the following features:

You can overlay a different image on top of the currently displayed one. Press the Background Image button and you will be prompted to select an image file to use as an overlay.

Once the file is selected, a new toolbar appears with the following controls for the image overlay:

Close: close the overlay controls toolbar and disable the background image overlay.

Load image: select another image file to use as an overlay.

Source image: sets the overlay image to 0% opacity.

Background image: sets the overlay image to 100% opacity.

Reset: sets the overlay image to 50% opacity.

A slider gives you manual control over the opacity of the overlay image.

Note:

The toolbar can be repositioned around the 2D View panel using the leftmost handle represented by three parallel lines.

The image currently displayed can be exported to an image file. Press the Save Image... button and you will be prompted to select an location, name and file format for the exported file.

While the image will be exported as its native resolution – which is displayed in the bottom left area of the viewport – the bit depth and color format will depend on the image format selected. For instance, 32-bit floating point precision images can only be exported at their full data range with image formats which support this precision, such as TIFF, EXR and HDR. If the image format does not support the data, clamping and/or color banding are likely to occur in the exported image.
In general, be mindful of which precision and features are offered by the image formats you intend to use – floating point support, ICC profiles, etc.

If either OCIO or Adobe ACE color management mode is currently used, and additional option is available to select the color space of the exported image.

The image currently displayed can be copied to the clipboard. Press the Copy Image to Clipboard button and the image will be ready to be pasted into any third party software, such as Adobe Photoshop.

The image will be copied as an 8-bit precision image at its native resolution, which is displayed in the bottom left area of the viewport.

If the image currently displayed is a graph output, you can quickly switch to any other graph output using the Select output button.

This feature is not available to other nodes, including nodes which have more than one output.

If the Display UVs in 2D View option is enabled in the Scene menu of the 3D View panel, then the UV overlay feature is available in the 2D View. You can enable it using the UV button.

This displays the UVs of the 3D View panel's current mesh as a colored wireframe. If material color information is available in the mesh file, then the material color is used as the color of the UV overlay.

If the mesh has multiple UV sets, the desired UVs can be selected in the drop-down checklist which can be opened by clicking the arrow next to the UV label in the button.

You can display the exact pixel values and coordinates in an image with the Information panel, which is enabled using the Image Information button. This is very helpful when inspecting HDR images, for instance, or making sure stepping between pixels follows the intended progression.

Colors are represented by RGBA and HSV values, and displayed depending on the precision of the image, as follows:

8-bit: 0-255 integer / 0.0-1.0 floating point
16-bit: 0-65532 integer / 0.0-1.0 floating point
16F (16-bit floating point): raw floating-point value
32F (32-bit floating point): raw floating-point value

Pixel coordinates are represented by X and Y values.

Note:

The Information panel can be resized, repositioned and undocked from the 2D View panel into a floating panel.

You can display the histogram of the image with the Histogram panel, which is enabled using the Display Histogram button.

The following histogram modes are available:

Luminance
Red
Green
Blue
RGB
Alpha

The following information is listed below the modes:

Pixels: the number of pixels in the image
Range: the entire value range available
Used range: the value range from the lowest value pixel to the highest

Additionally, you can click LMB on the histogram, or hold LMB and drag across the histogram to select a specific portion of the data. The following information is then displayed for this selection:

Selected pixels: the number of pixels which have the selected values
Selected range: the value range of the selected portion
Selected max: the highest number of pixels which have a value included in the selected portion

The selection can be cleared by clicking RMB on the histogram.

How some of the values above are represented depends on the precision selected in the lower section of the panel, as follows:

8 bits: 0-255 integer
16 bits: 0-65532 integer
32 bits: raw floating-point value

Some portions of the histogram may include very low pixel count values, and thus be challenging to read. In this case, you may enable the square root mode, using the Sqrt button, which uses the square root of the actual values to draw the histogram.

Note:

The Histogram panel can be resized, repositioned and undocked from the 2D View panel into a floating panel.

Display toolbar

The Display toolbar, which is located at the bottom of the 2D View panel by default, lets you control how the image is displayed in the viewport.

The leftmost section includes controls for color and transparency, while the rightmost section includes the viewport controls detailed in the Viewport section of this page.

Note:

The toolbar can be repositioned around the 2D View panel using the leftmost handle represented by three parallel lines.

Color channels

You can display a single channel of the image using the Color channels button. This opens a combo Box letting you select which of the Red, Green, Blue and Alpha channels should be displayed. The normal aspect of the image with all channels is restored by selecting the RGB option.

The following keyboard shortcuts can be used to quickly switch over to different color channels:

RGB: C
Red: R
Green: G
Blue: B
Alpha: A

The icon of the Color channels button changes depending on the currently display channel(s).

Note:

Keyboard shortcuts can only be used if the 2D View panel has focus. You may click on this panel at least once to ensure this is the case.

Since the panel needs focus, these shortcuts do not interfere with any custom shortcuts you may have set for creating nodes in the graph – learn more about this feature here.

Transparency toggle

Transparency display can be toggled on and off, using the / Show checkerboard button. When this is enabled, transparency is displayed using a checkerboard pattern.

There are two main ways to interpret transparency, which can be selected using the / Transparency mode button:

Straight: transparency information is only stored in the alpha channel, and does not impact any other aspect of the image

Premultiplied: transparency information is stored in the alpha channel, and also impacts the RGB channels since they are effectively multiplied against the alpha channel

To display correct colors, the appropriate transparency mode should be selected in the 2D View panel to match the transparency method which was applied when the image was created.

Color space

For the most accurate representation of color, images are displayed by default in a color space which matches the one used by the monitor.

The available controls and the effect of the / Color space button will depend on the Color management mode set in the Project settings. Learn more about these controls in the Color management section in this page.

Bitmap painting tools

The Bitmap painting tools are available for Bitmap resources matching these criteria:

The bitmap uses 8-bit precision
The bitmap resource is imported into the package, linked images are not supported

Note:

New bitmap resources created within Substance 3D Designer will automatically match these criteria.

Tip:

You can learn more in the Bitmap painting editor page of the documentation.

Vector graphics editor

The Vector graphics editor is available for imported SVG resources, linked resources are not supported.

Note:

New SVG resources created within Substance 3D Designer will automatically match this criterion.

Tip:

You can learn more in the Vector Graphic Editor (deprecated) page of the documentation.

Color management

The 2D View offers simple color management controls to let you choose which display color space should be used when displaying the image.

These controls will adapt to the current Color management mode set in the Project settings, as follows:

Legacy: you can disp.lay the image in the sRGB or Linear sRGB color spaces;
Adobe ACE: you can enable color management and set the most appropriate color space for the current monitor as detected by the Adobe ACE engine, or disable color management and display the image using the Raw color values;
OCIO: you can enable color management and set the most appropriate one for the current monitor as detected by the OCIO engine, use the combo box and select any of the display color spaces available in the OCIO configuration file currently used, or disable color management and display the image using the Raw color values.

Alert:

Be mindful that these controls only impact the display color space. The original color space of images and the working color space should also be taken into account to make sure colors are displayed accurately in the 2D View.

Tip:

Go to the Color management section of this documentation to learn more about this feature and its broader implementation in Designer.

Get help faster and easier

New user?

2D view | Substance 3D Designer

2D view

In this page

Overview

Displaying content in the 2D View

Viewport

Main toolbar

Display toolbar

Color channels

Transparency toggle

Color space

Bitmap painting tools

Vector graphics editor

Color management

Get help faster and easier

Ask the Community

Contact Us