Creating a Parallax 2.5D Scene

February 28, 2025 14:31

Overview

This workflow can be considered to be between directly mapping images/videos to the LED screen, and creating a full real-time rendered virtual environment. Here we create a scene using several plates of varying depth, and images with transparency/an alpha channel. These images are different "layers" of a normally 2D image. They can then be applied to each of these plates. When you have a camera looking at these plates and move around, it produces an illusion of depth via parallax, with each layer moving at varying speeds dependent on their distance away from the viewpoint camera.

2.5D Workflow

disguise

Note: This disguise workflow is summarizing off of the 2.5D Workflow training module on the disguise Learning portal, which goes into further detail. The Unreal Engine 2.5D workflow will also use the NY_Skyline example files, provided by disguise.
In the Stage properties menu, under 'Projection Surfaces', create four screens. Start by creating one and titling it 'background' or whichever name makes sense for your scene/configuration. Set the scale to be 20x10x0, and the offset to be 0, 5, 30.
In the Projection Surface properties for background, under Output > Render layer, set it to Backplate (MR).
Under Appearance, set the Screen background to Transparent.
Duplicate the 'background' projection screen, and move it forward by 5 units (offset should now be 0,5,25). Rename this duplicate to 'midground 2'. Create two more, and name them 'midground 1' and 'foreground' and offset each of these plates 5 units forward from the previous one. You should now have four projection surfaces.
Create four Video layers, map each of them to their respective projection surface, then set the layers' content to be their respective image plate.
Create a Stage Render layer. Set the Mapping to emerson_xr target (backplate).
And now, you should see your Projection Screen-based parallax scene on the wall and responding to the tracked camera.

Unreal Engine

This is another way to create a parallax-based scene, this time using Unreal Engine.

This workflow will use the XR Studio Basic Template, with a level containing a Cine Camera Actor preconfigured with a RenderStream Channel Definition component. We will only be configuring this as a backplate-only scene.
In your level, create a Media plate (Add Content > Media Plate > MediaPlate). This can be used for Video playback; however, for this initial example we will be treating it as a regular plane mesh and applying the images as a material.
For this example, we will resize the MediaPlate's scale to be 1x20x10. Set the location to be 0,0,500.
Next, we will select the MediaPlate and duplicate ([CTRL] + [D]). Set the new MediaPlate's location to be 500,0,500.
We will duplicate and do this two more times, moving each back by 500 units. By the end, we should have 4 MediaPlates spaced equally apart.
In the Outliner, let's create a folder and contain these MediaPlate objects.
1. Right click in the Outliner, Create Folder.
2. Name the folder, we'll put Plates for this example.
3. Select the four MediaPlate objects, then click and drag into the new folder.
4. Great, let's name these plate objects.
5. The one in front, we will name Foreground. The last one, Background. The middle two can be named Midground 1 and 2 respectively.
6. Next, let's import our image plates. In the Content Drawer ([CTRL] + [SPACE]), create a new folder. We'll name it ImagePlates.
7. In that folder, we will import our images. These are different 2D image layers of an environment, which we will map onto each of the MediaPlates to give the illusion of depth and 3D-dimensionality.
8. Save all [CTRL] + [SHIFT] + [S]. Next, let's select the image for our front-most layer and drag it onto the foreground Media Plate.
9. In the Content Drawer, you will see that this also creates a corresponding Material in the same Content directory as the images.
10. Click and drag the images to their respective plates.
11. Now we have a 2.5D scene providing the illusion of depth, using the parallax effect.
12. Let's say we wanted to take advantage of Unreal Engine's real-time environmental lighting, and have our level be illuminated more-so for the evening. We can hold [CTRL] + [L] and move the mouse around the level editor viewport to change the directional light/sun in our current level.
13. You may notice, that the illusion breaks down, since the image plates are too dim and are cast in shadow. We can make these images emissive by going into the plates' respective materials. Double-click on one of the materials, to enter the material editor window.
14. In the material editor, take the RGB output and direct it into the material's Emissive Color input.
15. At the current setting, we may find the emissive intensity to be too bright. Let's adjust this.
16. In the material editor, drag the RGB output into the open editor space. Let go, this will bring up a small browser allowing you to search available blueprint nodes. Search and select Multiply.
17. The Texture Sample node's RGB output will already be connected to the Multiply node. Connect the Multiply node's output into Emissive Color.
18. From here, you can control the intensity of this material's Emissive value by editing the multiplier/factor (the b value) of the Multiply node. Be sure to save in the Material Editor in order for the changes to take effect.
19. If we want to have slightly more flexibility in adjusting the emissive intensity, rather than needing to directly modify the value within the material's blueprint, we can create a parameter from the Multiply node's factor (B) value. Right click on the Multiply's input for the B value, and Promote to Parameter.
20. This will automatically create a node providing a direct input into that value., which we can name to our convenience. In this case, we'll call it emissiveIntensity.
21. With the new parameter node selected, go to the Details panel on the bottom left of the Material Editor window. If you would like to set a minimum and/or maximum for this (or any) parameter as well as its default value, you may do so here. We'll set the Default Value to 0.5 for this material.
22. This would effect an object when the material is initially applied. We're able to adjust this parameter on an object-by-object basis by selecting the object (in our level) with the material applied. Then in the Details section in the general level editor, search up "Material" and scroll down to the Materials section. There, you will see the currently applied material to the selected object (as Element 0, though we currently do not have multiple). Double-click on the material's icon (the box with the green lower border).
23. This will bring up the editor for the current material instance. You should see your custom parameter available to enable, then adjust the value of on the right Details sidebar.
24. Remember to press save (top left) in the current editor to apply your material's changes.
25. Let's adjust the blueprints of the other three materials, and have their emissive values be modifiable as parameters. From here, feel free to adjust your materials' properties as desired. (In this example, I've hidden the Background plate, and instead am using the level's Sky Atmosphere).