How can I achieve this effect using SwiftUI or ShaderGraph?

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!

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

I have achieved this using SwiftUI. It works great.

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!

How can I achieve this effect using SwiftUI or ShaderGraph?
 
 
Q