UI Image with Transparent Material Disappears When Using VideoKit on Magic Leap 2

Unity Development
1

Hi all,

I’m encountering an issue with UI masking on Magic Leap 2 when using VideoKit. Here are the details:

Environment:

  • Unity Editor: 2022.3.22f1

  • Magic Leap Hub: Magic Leap Hub 3

  • Magic Leap 2 OS: 1.12.0

  • Magic Leap SDK (OpenXR): 1.12.0

Setup:
I have a prefab consisting of a Canvas (set to Screen Space - Overlay) with an Image component that uses a custom transparent material (for simulating visual impairments, e.g. central vision loss). The masking logic is handled via shader and works correctly without VideoKit.

Issue:
When I enable VideoKit (to record the camera output), the UI mask (i.e., the transparent Image) disappears from view. However, other UI elements remain visible — especially a World Space Canvas (placed in the scene, not from prefab) which renders fine. So the issue only seems to affect Screen Space - Overlay UI with custom transparent shaders.

Things I’ve confirmed:

  • The prefab is instantiated correctly.

  • The custom shader works fine when VideoKit is not recording.

  • The issue does not happen for world-space UI or UIs without transparent materials.

  • There’s no error or warning in the console.

Has anyone experienced this? Is there a known incompatibility between Screen Space - Overlay canvases and VideoKit on Magic Leap 2?
Any suggestions on how to keep the overlay-based masking UI visible while using VideoKit would be greatly appreciated.

Thanks!

2

Hey @yanghouze ,

This sounds like it might be a render queue issue with VideoKit and the transparent shader you are using.

There are two solutions you might be able to try

  1. Instead of using Screen Space - Overlay, use Screen Space - Camera
    1. Change your Canvas from Screen Space - Overlay to Screen Space - Camera
    2. Assign the Main Camera (ML Rig camera) as the render camera
    3. Adjust canvas distance (Plane Distance) so it appears the same as before
  2. Try adjusting the render queue portion of your custom transparent shader to use a smaller value
    1. Ensure your shader is in the UI render queue (Transparent or around 3000).
    2. Tags { "Queue" = "Transparent" "RenderType" = "Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
ZWrite Off

Let me know if either of these potential solutions work for you!

Best,
Corey

4

Problem Solved. Thank you!

1 Like