Masking

One of the essential tools necessary to build robust and cohesive UI interfaces is masking. Masking in this case refers to the ability to display one visual object only within the bounds of another.

Since Screen Transform is the basis for building UI elements in Lens Studio, the Masking Component is designed to work with them and allows to mask any visuals or interactions to the bounds of Screen Transform it is attached to.

Please refer to the guides on Touch Interactions for Screen Transforms and Depth Filtering

Masking Component

Masking Component can be added to the scene through the Objects Panel by clicking the + button and selecting Masking. This way adds a corresponding Screen Transform hierarchy to your scene

Or by clicking on the Add Component button in the Inspector panel with a Scene Object selected.

Masking Component requires a ScreenTransform to be attached to the Scene Object in order for effect to apply.

Currently, there is a known bug with masking interactions. This will be addressed in an upcoming Lens Studio release.

Visual Masking

Let’s add a couple visuals - for example Screen Images or Screen Text and place them under the Masking object parent. As you can see from the example below - the image is visually clipped as it extends beyond the masking bounds.

Masking depends on stencil buffer usage, it may conflict with any other features that depend on the stencil buffer

Nesting Masks

Masks can be nested in the scene hierarchy, so a child mask will be masked by its parent mask. There is a maximum of 8 masks per camera. Masks function correctly regardless of render order.

Corner Radius

While custom image mask is not supported the Corner Radius property allows you to create appealing and cohesive UI elements

Check out the UI Scroll View custom component for usage example.