user22007718
user22007718

Reputation:

How to Achieve Blur Effect for Virtual UI Views in ARKit like Apple Vision Pro

I am working on an ARKit-based app where I want to create a virtual view with a blur effect similar to what is shown in Apple Vision Pro. However, I am currently only able to achieve opacity changes, and my implementation results in a black plane rather than a proper blur. Below, I have shared my code for generating a plane and adding it to the AR scene.

Plane Creation Code:

I use the following function to create a plane entity with a specified color:

func createSmallPlaneEntity(baseEntry: ModelEntity, index: Int) -> ModelEntity {
    let planeMesh = MeshResource.generatePlane(width: 0.1, height: 0.1)
    var material = UnlitMaterial()
    material.baseColor = MaterialColorParameter.color(index == 1 ? .blue : index == 2 ? .red : .green)
    
    let planeEntity = ModelEntity(mesh: planeMesh, materials: [material])
    planeEntity.move(to: Transform(pitch: 0, yaw: 0, roll: 0), relativeTo: baseEntry, duration: 1.5, timingFunction: .easeInOut)
    
    return planeEntity
}

Adding Plane to AR Scene:

I use the following code to add the plane entity to my AR scene:

let arView = ARView(frame: .zero)

// Configure AR session
let config = ARWorldTrackingConfiguration()
arView.session.run(config)

// Create a blurred plane entity
let planeEntity = createBlurredPlaneEntity()
planeEntity.position = [0.0, 0, 0.04]

let anchor = AnchorEntity(world: [0, 0, 0])
anchor.addChild(planeEntity)
arView.scene.addAnchor(anchor)

Despite setting baseColor with transparency, I cannot replicate the blur effect seen in Apple Vision Pro's UI. Instead, I only manage to apply a transparent or solid color plane. I’ve attached a screenshot showing my current implementation versus the desired effect in Apple Vision Pro.

My Questions:

  1. How can I create a blurred glass-like material or Gaussian blur effect on a virtual plane in ARKit using RealityKit?

  2. Is there a way to apply real-time blur effects or access ARKit’s depth information to simulate blurring of objects behind the plane?

I am seeking solutions that do not involve pre-rendered textures or static images, as I need the blur to be dynamic and interactive.

What I am trying to achieve.

What I achieved.

Upvotes: 2

Views: 68

Answers (0)

Related Questions