ShatteredGlass

A deep-dive into deconstructing and replicating SwiftUI’s Liquid Glass effects using lower-level Core Animation layers like CABackdropLayer, CASDFLayer, and related private types. This project aims to expose and customize the visual building blocks of these effects, especially on macOS.

Layer Hierarchy Breakdown

The reconstructed effect is built from a multi-tiered CALayer hierarchy. Each layer has a specific responsibility, with named sublayers and filters orchestrated to simulate SwiftUI's original visual output.

CustomGlassView (NSView)
└── SwiftUI.SDFLayer (CALayer subclass, optional wrapper)
    ├── CABackdropLayer
    │   └── CASDFLayer ("@0")
    │       └── CALayer (container)
    │           └── CASDFElementLayer
    ├── CASDFLayer ("@1") – glass highlight
    │   └── SDFPortalLayer → sources CASDFElementLayer
    └── CASDFLayer ("@2") – glass highlight
        └── SDFPortalLayer → sources CASDFElementLayer

Key Roles

• SwiftUI.SDFLayer (optional): Subclass of CALayer with hidden delegate logic, possibly auto-inserted by SwiftUI.
• CABackdropLayer: Renders the primary distorted background using glassBackground filter.
• CASDFLayer (@0): Provides SDF texture for backdrop layer via CASDFOutputEffect.
• CASDFElementLayer: Defines the SDF shape
• CASDFLayer (@1, @2): Add glass edge highlights at opposite angles using CASDFGlassHighlightEffect and a vibrantColorMatrix filter.
• SDFPortalLayer: A variant of CAPortalLayer for SDF pipelines, mirroring the CASDFElementLayer into highlight layers.

Filters and Effects Used

• glassBackground (CAFilter):

  • Receives inputSourceSublayerName = "@0"
  • Applies various refraction, blur, vibrancy, and tone mappings

• CASDFOutputEffect:

  • Translates shape layers into backdrop-compatible SDF textures

• CASDFGlassHighlightEffect:

  • Applies direction-based highlights to simulate edge lighting

• vibrantColorMatrix (CAFilter):

  • Applies a custom 4×5 color matrix to tone the highlight layer output

---

Roadmap

• Reproduce basic glassBackground effect on macOS → Partial: structure functional, filter tuning ongoing

• Reproduce Liquid Lens effect (as can be seen in Slider or Toggle) → In progress

• Port effect and hierarchy to iOS → Not started, should be easy