Tutorial for Blurred Background for Text

Last Edited: Connor Flick, 05/10/2025

OverView

One option for text backgrounds in AR environments is to create a background that blurs objects behind it, producing a frosted glass or plastic mesh effect. This may be useful for creating a background that allows for both legibility and visibility of the surrounding environment. This tutorial walks through the steps to create this effect.

Prerequisites

This tutorial relies on Unity 6 and the Meta passthrough camera example. Setup Unity 6 for a project to be deployed in the Meta Quest 3, then replicate and run the passthrough camera example.

Passthrough Camera

This tutorial provides an effective example on how to set this up in a Unity project, although you may wish to extract a working plane and WebCamTextureManagerPrefab from the example to more easily facilitate setup. For copying in this manner, you should make sure that the android manifest includes the permissions for access to the headset camera, along with updating the ShaderSampleManagerPrefab to include the correct plane and WebCamTextureManagerPrefab. Ensure that the plane marked as the Renderer in Shader Sample Manager has a transparent texture. Note that the passthrough texture only works when deployed to headset – both the Unity XR Simulator and project streaming over Link will not work.

Make sure that the passthrough plane is placed in front of the camera on startup. You may wish to position it in front of the camera in the world editor and make it a child object of the CenterEyeAnchor ([Building Block] Camera Rig > Tracking Space > CenterEyeAnchor) so it follows head movement.

At this stage (or in later ones), deploying the project may lead to the passthrough camera only outputting to one eye. To resolve this, go to Edit > Project Settings > XR Plug-in Management and select only Oculus under the Android tab.

Then, go to XR Plug-in Management > Oculus and select Multi Pass. This will render separate images for both eyes, which will resolve the issue.

Acrylic Texture

At this stage, when deploying and running the app on the Quest, you should see a plane with the output of one of the passthrough cameras. Now, an acrylic texture is added to create a blur effect.

These textures rely on the acrylic layer system from the Mixed Reality Toolkit. For ease, this tutorial simply extracts the acrylic textures and planes from the MRTK example and does not explore the nuances of this system, particularly as they may change rapidly. From the Unity Asset Store, add MRTK Graphics Tools to the project and import the Acrylic (Experimental) Sample. Load the scene in Assets/Samples/MRTK Graphics Tools/0.8.0/Acrylic (Experimental). Copy the Canvas containing the StandardAcrylic object (should show as a black plane in the editor) and the AcrylicLayerManager and add them both to your working scene with the passthrough camera plane. Set the target camera on the AcrylicLayerManager to be the CenterEyeAnchor. Place the StandardAcrylic plane in front of the passthrough plane. Now, when deployed, the passthrough texture will be blurred by the acrylic plane.

(This is in the simulator, hence the grey plane. However, one can still see from the seam that it’s blurred by the acrylic plane.)

Text and Finalization

Now, text can be added in front of the acrylic plane, which should complete the effect. However, simply adding the text causes the color of the acrylic texture to be blown out by the color of the text.

This is caused by the acrylic texture being rendered after all of the transparent textures, including both the passthrough plane and the text, have finished rendering. To fix this, first, set the CaptureEvents in the layers in the AcrylicLayerManager to be After Rendering Skybox.

After, select the transparent texture for the passthrough camera plane and set the Render Queue value to be 2000. This causes the texture to be rendered with geometry, before other transparent textures. As such, the passthrough and acrylic textures will finish rendering before the text does.

Now, the color of the text will no longer effect the acrylic plane and the effect is complete.

At this stage, you may wish to adjust the transparent texture on the passthrough plane to more closely match the part of the screen where the plane overlaps the environment. To do this, you may wish to determine the aspect ratio of the plane, then adjust both the tiling and offset of the texture until there is sufficient parity. This is easiest to do by guessing and checking until it looks alright. There will always be some distortion due to the fact that the passthrough texture can only sample from one of the Quest cameras.

Page updated

Google Sites

Report abuse