How can I achieve this effect using SwiftUI or ShaderGraph?

Here is What I have tried. But it seems the right edge is gray.

I have achieved this using SwiftUI. It works great.

Hi @NahtanMak

I was able to achieve a similar effect using shader graph. I adjust each pixel's opacity based on its distance from the center of the image. I used texture coordinates to calculate that distance.

Here's how to setup the graph:

• Add an Image node. Connect its Out to the color property on an UnlitSurface.
• Add a TextureCoordinates node. Connect its Out to the In of a Remap node.
• For both columns of the Remap node, change:Out Low to -1 and Out High to 1. Drag its Out to the In of Magnitude node.
• Drag the Out of the Magnitude node to a new Remap node. Set Out Low to 1 and Out High to 0. Drag the Out to Opacity on the UnlitSurface you created in the first step.
• Note: you can change the In Low property on the Remap node you created in the previous step to control when the gradient begins. If you set it to 0 the gradient will start in the center of the image. If you set it to 0.5 the gradient will start 50% from the center of the image. If you set it to 1, there will be no gradient.

Please accept the answer if it works for you. Otherwise follow up with questions so I can help you achieve your goal!

Hi @Vision Pro Engineer this Shader Graph creates a nice gradient. Could you also provide another Shader Graph that applies the same gradient effect within a rounded rectangle mask?

@ahmedg

Hi, thanks for comment. I'm working on a shader graph for cropping an image within custom shapes. I have created the shapes in float but haven’t yet found the way to convert into texture coordinates in Reality Composer. Right now, Im trying to separate (x, y) to generate parts of the shape and then add a gradient, it should be good.

BTW, my goal is to achieve the visual effect shown in this post. Could you please share any idea on how to create glowing edge for videos using Shader Graph? Thanks!