joogps / glur Goto Github PK

Progressive blurs in SwiftUI.

Home Page: https://apps.apple.com/app/glur/id6478063257

License: MIT License

Swift 68.80% Metal 31.20%

glur's Introduction

Glur

A SwiftUI library that uses Metal to display efficient progressive blurs, just like the ones used by Apple. Try it today on the App Store.

Installation

This repository is a Swift package, so just include it in your Xcode project and target under File > Add package dependencies. Then, import Glur to the Swift files where you'll be using it.

Note

While Glur is supported on older platforms, it will only utilize the Metal implementation of the blur effect on iOS 17.0 and later, macOS 14.0 and later, and tvOS 17.0 and later. Otherwise, it will present a worse, compatibility effect that should be tested by the developer before being used in production.

The Metal implementation is not available on watchOS, and therefore the compatibility effect will be presented on this platform by default.

Usage

You can add a glur effect with the following modifier:

.glur()

Here are all optional parameters:

.glur(radius: 8.0, // The total radius of the blur effect when fully applied.
      offset: 0.3, // The distance from the view's edge to where the effect begins, relative to the view's size.
      interpolation: 0.4, // The distance from the offset to where the effect is fully applied, relative to the view's size.
      direction: .down // The direction in which the effect is applied.
)

Warning

When being used in the iOS simulator, SwiftUI shader effects may not be displayed if the view exceeds 545 points in either dimension. Please note that, on a physical device, the effect should work as intented.

How it's done

This project builds on a proof of concept developed in June of 2023, right after WWDC.

It makes use of Apple's new simplified Shader API for SwiftUI. First, I coded a Metal shader that produced a gaussian blur for the modified view with the correct gaussian weights distribution, efficiently. Then, I modified it slightly to vary the blur radius over the vertical or horizontal axis given the offset, interpolation and direction values.

Warning

Given that the shader is applied through Apple's own Shader API for SwiftUI, it is restricted by the limitations imposed by that API. This means that Glur can only be applied to pure SwiftUI views, excluding UIKit-backed views, such as ScrollView.

Tip

If you want to learn how to write your first Metal shader with SwiftUI, check out this tutorial that I wrote for the Cindori blog.

Demo

You can run a demo of Glur in your device or simulator through the GlurDemo project in this repository.

glur's People

Contributors

Stargazers

Watchers

Forkers

appstorage proactive-solutions duhman lilingxi01 prikshitgupta heydoy mumer92 usagimaru mysticalbits kevincible ruslan-060793 bealex kyaw-codes mvandermeulen drewolbrich denandreychuk dstitzel

glur's Issues

Blur Easing

Right now, Glur blurs linearly. It would be great if we could change the easing of the blur.

.glur(
      offset: 0.3,
      interpolation: 0.4,
      easing: 1, // This controls the amount of easing to apply
      radius: 8.0,
      direction: .down
)

It might work like this...

1 is full ease out,
0.5 is half ease out,
0 is no easing (what it is now),
negative values are for easing in.

Improve edge handling

As pointed out by a (@aqnYRuzZStrJDpo)[https://twitter.com/aqnYRuzZStrJDpo/status/1754537410996904207?s=20] and (@sdw)[https://twitter.com/sdw] on Twitter, the current blurring algorithm does not handle edges well and could be improved.

Drop/use compatibility mode for watchOS targets

It appears that the SwiftUI shader support isn't available for watchOS 10.
(Reference: https://developer.apple.com/documentation/swiftui/shaderlibrary)

However, Glur's main metal-based modifier is set as available for watchOS 10, which is incorrect, resulting in a set of 'unavailable' errors when attempting to build for use in watchOS.

LayerEffect doesn't work when applied to a ScrollView

From one of your older tweets (https://x.com/joogps/status/1667240291869270032?s=20), it looked like you were able to achieve this effect on content contained in a ScrollView. Is this supported with Glur?

RTL support

In terms of supporting right-to-left interfaces, it's better to use leading/trailing notation in BlurDirection instead of left/right

Weird yellow background when using Glur on macOS

Hey all!

Loving the Glur library, super cool stuff. I've recently integrated it into my App Store screenshot app, and I've noticed some weird behaviour on macOS in particular.

Glur functions as expected on iOS and iPadOS, but when I view the same Glur on macOS, I get a yellow background. Have you seen this before? Any idea what's going on?

Note: The app tint is yellow, so perhaps the yellow is coming from there?

macOS	iPadOS

Glur can affect hittesting between independent views

Hey there,

Glur is really amazing and I like using it a lot. That being said I had some issues with buttons not working if they are added on top of a view which uses Glur. It took me a while to realise why. The Glur shader view does not necessarily have the exact size of the view it is applied to, it can in fact be much wider than what the user sees for example. So multiple views with Glur in a Slider or a GridRow can prevent interaction with Buttons on top of views, while not preventing simple .onTapGesture calls on views with Glur.

If you set .allowsHitTesting(false) after applying the Glur view modifier this source of issues can be eliminated.

I'm wondering if this should be part of Glur by default, as it just seems to be a quirk of the shader view used internally and would remove a possible source of confusing issues. What do you think?

Cheers,
Angelo

Blur relates from frame modifier. Some values cause entire view to disappear

We have gradient view in the project example. If I change only one line of code to make it rect not the square, the view completely disappears:

var gradient: some View {
        LinearGradient(colors: [Color("Color 1"), Color("Color 2"), Color("Color 3")], startPoint: .top, endPoint: .bottom)
            //.aspectRatio(1.0, contentMode: .fit)
            .frame(width: 256, height: 482) <<--- 482 cause view to disappear, while 481 still works fine
            .clipShape(.rect(cornerRadius: 57/2))
            .padding(32)
            .background(Color("Black"))
            .glur(offset: 0.3, interpolation: 0.5, radius: 32.0)
    }

Support for projects with minimum deployment target less that iOS 17.

For now, it's strictly iOS 17, which makes it impossible to add to projects with a lower minimum deployment target (MDT). What we can do is mark the modifier with @available and let the caller side decide how to handle it in older versions.

For example, it can be handled as a regular .blur() in older versions.