Hello!
We’re trying to come up with some solutions for our UI, but nothing looks as good as the native frosted glass look of SwiftUI.
Does anyone have some good recommendations or rules of thumb for a good looking UI that doesn’t use the native OS components?
We’ve tried with a semi-transparent material with some noise texture, but it’s far from looking great. 
Unfortunately there isn’t – I’d encourage you to submit a Feedback Assistant item to Apple asking for a RealityKit material for the frosted glass background. If one existed, we could easily expose it.
2 Likes
Here’s something to try - write a custom material that samples the IBL as if it were a reflective material a few times (basically perturbed normals over some small solid angle) and blur the resulting samples. It won’t be the same as the system, but you should be able to get you a lot closer than just using random noise, as the IBL encodes the real-time illumination.
1 Like
For reference, we’re going to be adding support for the Environment Radiance node, which allows one to obtain the image based lighting result within a shader graph for further processing. By using a normal that’s orthogonal to the view direction with that node, you can sample the IBL in any direction, and the Roughness parameter gives you access to a degree of blurring. The result isn’t quite as good as the built-in frosted glass material, since we only have access to the environment image directionally (versus being able to sample/blur it in screen space), but it’s better than nothing:
5 Likes
Thank you all for the great feedback. The Environment Radiance node specifically seems to be exactly what we were hoping for.
@kapolka Will that new feature come with a sample in the next release? Thanks.
It will be in 0.7.x - which we hope to ship before end of 2023.
2 Likes
It’ll take us a little longer to include a sample scene, but this is the shader graph I used above (applied to a quad):
The roughness parameter is 0.0025, and modifying that value gets you different degrees of blurring.
1 Like
Thanks @kapolka!
Although that Polyspatial Environment Radiance node will only be available in the 0.7.x release, correct?
Yes, that is correct.
1 Like
@kapolka The shader works well for the most part, but there are some of these very strong reflections that make it unusable. I’ve tried playing around with the specular and metallic values but they don’t seem to make (much) difference.
Do you have any hints?
Here’s a video to demonstrate the issue: https://youtu.be/FFh0G4By-uI
Yes; the strong reflections come from the so-called “system image-based light [IBL],” which is a fixed pattern of highlights that’s added to the reflection probe image. It’s possible to remove them by using the PolySpatial Image Based Light/Receiver components. Basically, somewhere in the scene, you want a PolySpatial Image Based Light component with no Source textures assigned. Then, on the object with the frosted glass material (or an ancestor of it), you want a PolySpatial Image Based Light Receiver that references the PolySpatial Image Based Light. That should get rid of the extra highlights:
4 Likes
Oh man, that’s beautiful. Thank you so much! 
2 Likes
Hello,I used this shader. It works well in the Editor. When I use the simulator, I found it become black.
Try changing the lighting (day to night) / environment in the simulator, there’s a known bug with objects being dark when first loading an app.
2 Likes
We’re trying to implement this shader, but seeing some odd behavior. Anyone else seeing these issues with this shader? We’re trying some different combinations in this test, attaching VisionOSImageBasedLightReceiver or not, alpha on the shader or not.
- In immersive view, any gameobjects with VisionOSImageBasedLightReceiver are black: immersive.mp4 - Google Drive
- We see popping when not in immersive as you move around: popping.mp4 - Google Drive
Any thoughts on anything else to try? It seems like we can’t use VisionOSImageBasedLightReceiver with this because it breaks completely when in immersive view. And the popping feels like the ambient radiance node is slow to update or something and pops to your new head position slowly. Maybe we try some other effect for our UI backgrounds if this doesn’t work, but weird if no one else is seeing these issues.
Unfortunately we couldn’t launch with this shader due to the same problems you’re reporting… More about it here: Black glass material issue - Rejected game - #12 by luispedrofonseca
Right; when the immersion dial is turned up, the “system IBL” that the VisionOSImageBasedLightReceiver replaces is the immersive environment; that is, you’re replacing the mountain backdrop environment map with black.
Yes, I’ve noticed this as well when testing on device. Unfortunately, there’s nothing we can do about either of these issues; they’re simply details of Apple’s implementations of ImageBasedLightComponent and the RealityKit Environment Radiance node, which our features directly map to. I would suggest providing feedback to Apple via their Feedback Assistant about the issues.
1 Like
Thanks @luispedrofonseca and @kapolka, great info. We’ll just try some different effects or design around it to not use a “frosted glass” background.
I still can’t achieve a SwiftuI-like effect, when the background light is bright, the whole panel is white and you can’t read the text. And changing the Base Color node doesn’t feel any different