Post

Parallax mapping plugin

Parallax mapping plugin

1. Introduction

The ParallaxMappingMaterial plugin is a C++ implementation of the free Interior Mapping Shader available on Fab.

The final result in-engine:

Parallax Mapping Demo

2. Usage

2.1 Background nodes

2.1.1 Nine-Grid Texture

If you’re using a 9-grid texture atlas like this:

9-Grid Texture

Drop an Interior Mapping UV node into your material graph.

Interior Mapping UV Node

PinTypeDescription
Inputs  
UVsTexCoordinatesUV coordinates. Defaults to TexCoord[0].
CameraVectorWsVector3Camera vector in world space. Use CameraVectorWS by default.
BoxDepthScalarDepth of the virtual room.
AspectRatioScalar\(\frac{Room_{Width}}{Room_{Height}}\) Defaults to 1 (a cube-shaped room).
AtlasColumnsScalarNumber of grid columns in the atlas. Defaults to 3.
AtlasRowsScalarNumber of grid rows in the atlas. Defaults to 3.
BackRowScalarWhich row contains the back wall. Top row = BackRow - 1, bottom row = BackRow + 1.
Outputs  
Return valueVector2The parallax-shifted UVs. Connect to the UVs pin of a TextureSample node.

2.1.2 One Texture Per Cell

If your textures are split into individual files:

  • CenterTop:
    CenterTop
  • CenterLeft:
    CenterLeft
  • Center:
    Center
  • CenterRight:
    CenterRight
  • CenterBottom:
    CenterBottom

Use the Atlas Composer node to merge them into a single atlas, then connect its AtlasUV with the output of the Interior Mapping UV node.

Background Material With Atlas Composer

2.3 Foreground Elements

Use a Billboard Layer UV node to layer foreground elements with independent parallax.

Foreground Material

PinTypeDescription
Inputs  
UVsTexCoordinatesUV coordinates. Defaults to TexCoord[0].
CameraVectorWsVector3Camera vector in world space. Use CameraVectorWS by default.
LayerDepthScalarControls where the layer sits in depth.
CellColScalarWhich column of the cell this foreground element belongs to.
CellRowScalarWhich row of the cell this foreground element belongs to.
AtlasColumnsScalarGrid columns. Defaults to 3. Set to 1 when using individual textures.
AtlasRowsScalarGrid rows. Defaults to 3. Set to 1 when using individual textures.
Outputs  
Pin 1Vector2The parallax-shifted UVs for the foreground layer.
Pin 2Scalar1.0 if the shifted UV stays within $[0,1]^2$; 0.0 if it falls outside the tile boundary.

Multiply the second output pin by your texture’s alpha to get the correct opacity mask.

2.4 Compositing Foreground and Background

Use a Lerp node, driven by the alpha mask computed in the foreground pipeline, to blend the layers together.

Two common compositing orderings:

  • Sequential blending — lerp each foreground layer over the background in order:
    Compose Foreground and Background V2

  • Flatten foreground first, then blend — combine all foreground layers together first, then lerp the result over the background:
    Compose Foreground and Background V1

Samples

Texture files: https://1drv.ms/f/c/53c607b8bea23158/IgDmN6ZhbhF_SIFqYHuihS8yAd4OvlsYO_YHI-Fe2mHs0Kk?e=DyZu2v

Sample Material: https://1drv.ms/f/c/53c607b8bea23158/IgAcOrITqqL9Rbpi2_DzZVFUAVaAHJgjyNPP6iRf4M7-bOM?e=ACCAZw

Copyable blueprint:

  1. Nine-grid: https://blueprintue.com/blueprint/cwzojttp/
  2. Individual texture: https://blueprintue.com/blueprint/fqkpjgb4/
This post is licensed under CC BY 4.0 by the author.

Trending Tags