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.
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 itsOut
to thecolor
property on anUnlitSurface
. - Add a
TextureCoordinates
node. Connect itsOut
to theIn
of aRemap
node. - For both columns of the
Remap
node, change:Out Low
to -1 andOut High
to 1. Drag itsOut
to theIn
ofMagnitude
node. - Drag the
Out
of theMagnitude
node to a newRemap
node. SetOut Low
to 1 andOut High
to 0. Drag theOut
toOpacity
on theUnlitSurface
you created in the first step. - Note: you can change the
In Low
property on theRemap
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!