Set Camera Dislay Region for Multi-Camera View

CreatiCode

Introduction

Usually, we only use one camera in a 3D scene, and we display that camera’s output in the stage window. However, sometimes we may need to show the content of 2 or more cameras. For example, we may use a “Picture-in-Picture” layout to show the content of a second camera in a small overlay window like this:

To achieve this result, we need to carry out 2 steps:

Use more than one camera in the scene
Set the display region for each camera within the stage window.

Add Multiple Cameras

Each scene has one active camera, but you can add new cameras that are not active. For example, in this program below, we add 2 cameras named “1” and “2”. Camera 1 is at a shorter distance. When camera 2 is added, it is set to be not active, so it will not replace camera 1.

Also, since no display region has been defined yet, the stage will only show the output of camera 1:

Set the Display Region for Each Camera

To display the output of more than one camera in the stage window, we need to specify a rectangle area in the stage window called “display region”, using the following block:

Bottom % and Left %: These 2 parameters control the position of the bottom left corner of the rectangle region. The “bottom %” is relative to the stage window’s height. For example, if the stage window is 360 units tall, and the “bottom %” is 50%, then the distance between the bottom left corner and the bottom edge of the stage window will be 180. Similarly, the “left %” is relative to the stage window’s width. For example, if the stage window is 480 units wide, and “left % is 25%”, then the bottom left corner is 120 away from the left edge of the stage window.
Width % and Height %: These 2 parameters control the width and height of the display region relative to the width and height of the stage window. For example, if “width %” is 50%, and the stage window’s width is 480, then the display region’s width is 240.
Border Width and Color: These 2 parameters control the thickness and color of the border around the display region. This border will make it easier for us to find the boundary of the display region.
Camera Name: Lastly, this input controls which camera’s output will be displayed in this region. You would need to assign a name to the camera when you add the camera, then use that name in this block.

Example 1 - Picture in Picture

In this example, we display camera 1’s output in the entire stage, then display camera 2’s output in a small overlay window at the bottom center. The overlay window is 40% in width and height relative to the stage window.

And here is the result:

Example 2 - Left and Right

In this example, we split the stage window into 2 display regions left and right. Each region is 50% the width of the stage window, with the same height as the stage window.

Here is the result: