How can I achieve this effect using SwiftUI or ShaderGraph?

Spatial Computing General
NahtanMak OP
Created
Replies 4
Boosts 0
Views 858
Participants 4

How do you call the effect where the edges around the central image gradually become transparent? This effect is also seen when viewing immersive mode of spatial photos in Vision Pro. How can I achieve this effect using SwiftUI or ShaderGraph? I want to use this effect when displaying images in my app.

Answered by Vision Pro Engineer in 825375022

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!

Replies  4
Boosts 0
Views  858
Participants  4
NahtanMak OP

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

I have achieved this using SwiftUI. It works great.

Vision Pro Engineer OP
Apple
Accepted Answer

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!
ZhengWeiX OP

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?
ZhengWeiX OP

@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!