ios – SwiftUI Tips on how to Apply Shader “no matter” is behind the view

I’m writing a program that has some photographs the place you may scroll by and I even have a rectangle-like view that is named PixeleteView the place I wish to pixelate the content material behind, it’s straightforward to use my shader to the view and work nevertheless I wish to pixelate the pictures under with out making use of my shader to the pictures.

What I imply is that I wish to apply an impact identical to blur or some type nevertheless on the background content material of the present view that means taking the background content material redrawing it within the present background and making use of the impact to it
or that is what a I initially thought nevertheless I could not do this.

I’m new to Swift and tried a number of issues and coudn’t discover a working resolution not even partially.

// ContentView

struct ContentView: View {
    var physique: some View {
        ZStack() {
            Content material()
            PixeleteView()
                
        }
    }
}

Content material is only a scrollable photographs and texts, nevertheless it may be something.

Inside my PixeleteView I wish to apply my shader

// PixeleteView

struct PixeleteView: View {
    var physique: some View {
       .
       .
       .
       .background(
        
        //
        // That is the place I need my shader to be
        // Nevertheless as an alternative of this it should change the background of 
        // this view.
        //
        // You'll be able to consider this like
        // Rectangle()
        //    .fill(.ultraThinMaterial)
        //
       )
       .clipShape(RoundedRectangle(cornerRadius: 50))
    }

And my shader is jsut a easy steel file to pixelete the content material
With .layerEffect utilized to

// MySahder.steel

#embrace 
#embrace 
utilizing namespace steel;


[[ stitchable ]] half4 pixellate(float2 place, SwiftUI::Layer layer, float energy) {
    float min_strength = max(energy, 0.0001);
    float coord_x = min_strength * spherical(place.x / min_strength);
    float coord_y = min_strength * spherical(place.y / min_strength);
    return layer.pattern(float2(coord_x, coord_y));
}

So I consider I may deliver the concept of what I’m attempting to do as an alternative of utilizing Rectangle().fill(.ultraThinMaterial) I wish to implement my very own impact

Right here is an instance after I run this

// Instance

Picture(systemName: "determine.run.circle.fill")
    .font(.system(measurement: 300))
    .layerEffect(ShaderLibrary.pixellate(.float(10)), maxSampleOffset: .zero)

This code produces the instance on the static picture nevertheless what I need is to use this impact to no matter is behind.

Instance utilization:

And to be able to describe what I actually need right here is the Figma illustration of what I wish to implement
So as to perceive I recomend looking on the picture

Desired End result:

Once more I wish to reuse this impact on many locations so I do probably not wish to apply this to particular person view inside content material I consider there needs to be less-complex approach to obtain this.

To be clear once more, my drawback is:

I wish to apply “my shader” to the View; nevertheless, I need it to control/distort the content material behind it. That half is essential

I attempted to use the impact on to .ultraThinMaterial nevertheless it didn’t labored