Hi, I am trying to implement a “frosted glass” effect. Basically a semi-transparent overlay with blur. Is this possible in Lightning?
Yes you can do it - check out those examples. You’ll need to set the components underneath the shader to rtt: true so the blur will take affect.
Chris
What is rtt? I don’t think I’ve come across that before. Also, is there a way to have multiple shaders on the same texture? For example, if I wanted to create the effect in the picture, I would want to have rounded corners and a blur, but as far as I can tell, it’s not possible to stack shaders like that.
i.e. I want to do:
Glass: {
rect: true,
alpha: 0.8,
shader: { type: Lightning.shaders.RoundedRectangle, radius: 40 },
shader: { type: Lightning.shaders.LinearBlur, x: 45 },
},
I don’t think you can have shaders in the same component. You’ll have to apply one shader and then wrap it in another container with the next shader (or create you’re own shader).
rtt is render to texture, the shaders will need that on to be able to apply the shader. So if something isn’t working try adding that flag.
@Jeffrey - Any more info on how to combine shaders?
1 Like
@lightningdev This repository has an example similar to what you’re after; GitHub - mlapps/com.metrological.app.vod-example
If you scroll the list of movies to the right, the content goes underneath the left-hand menu and is blurred. I imagine you can repurpose this to what you want.
1 Like
This is great - thank you!
Hello,
I am trying to incorporate this FastBlurComponent into my project’s side menu, but am running into trouble when trying to give it a color and radius.
Essentially, I want my side menu colored with rounded corners, and to have this blur effect on items that go below it to create this sort of glass effect talked about.
I can set the blur up and have it working fine, but I cannot style it with a color or radius. I essentially set it up the way the repo did that you linked to keep things easy to follow. I have tried to put these color and radius properties on the FastBlur object, on the MirrorContent object, and on the Background object, but all that does in any case is create the rounded rectangle with the color I want, but it turns off the FastBlurComponent.
How can I combine these together?
Furthermore, I want the menu items to have a background highlight that also has this glass effect alongside the background. I also run into the issue where setting a highlight turns the blur off where the highlight is active
Hello, I was able to fix all issues except the radius on the blur.
How can I add a radius to the fast blur? I can’t clip it with a clear or solid rectangle (overflow), or cut a hole, or seemingly do anything that will turn it into something with rounded corners. It just stays blocked off.
Any advice?
The look of the fast blur is exactly what I need, the linear does not look very good. Are these the only two glass-effect blurs?
Thanks!
To add a radius make sure that the component you’re applying the radius to has rtt: true on it.
You can use any blur effect you want - you just need to convert it to a shader for Lightning. You can find samples here:
I am applying rtt: true. Here is a snippet:
MenuBackground: {
FastBlur: {
w: 128,
h: 1080,
type: Lightning.components.FastBlurComponent,
amount: 3,
// rtt: true,
content: {
// rtt: true,
MirrorContent: {
// rtt: true,
BackgroundWithRadius: {
// rtt: true,
// clipping: true,
h: h => h,
w: w => w,
rect: true,
shader: { type: Lightning.shaders.RoundedRectangle, radius: [0, 30, 30, 0] },
color: 0x40ff0000,
},
},
},
},
},
Anywhere I apply rtt:true, it either does nothing, or turns off the blur. I want to put a radius on the blur so that the rounded rectangle is the only thing seen. Clipping the overflow from the rounded rectangle does not work, as even the docs say if it is non-rectangular, clipping won’t work, which is why rtt should be used. But rtt isn’t doing anything. If i have the rounded rectangle appear over the blur shader, then the shader remains a rectangle, allowing you to see it at the rounded corners.
Am I using rtt in the wrong way? I’ve tried moving this out of the component, setting the zIndexes, but all I end up doing is coloring the blur with the tint, or stacking a rounded rectangle on top of the blur, which pokes out of the rounded corners (since it is not being clipped)
Try doing the rounding last, not first. You should Blur first and then use RoundedRectangle to crop it. Example