I am following this example to create a stereoscopic image: https://developer.apple.com/documentation/visionos/creating-stereoscopic-image-in-visionos
I would also like to add corner radius to the stereoscopic RealityView. With ordinary SwiftUI views, we typically just use .clipShape(RoundedRectangle(cornerRadius: 32)):
struct StereoImage: View {
var body: some View {
let spacing: CGFloat = 10.0
let padding: CGFloat = 40.0
VStack(spacing: spacing) {
Text("Stereoscopic Image Example")
.font(.largeTitle)
RealityView { content in
let creator = StereoImageCreator()
guard let entity = await creator.createImageEntity() else {
print("Failed to create the stereoscopic image entity.")
return
}
content.add(entity)
}
.frame(depth: .zero)
}
.padding(padding)
.clipShape(RoundedRectangle(cornerRadius: 32)) // <= HERE!
}
}
This doesn't seem to actually clip the RealityView shown in the sample above. I am guessing this is due to the fact that the box in the RealityView has a non-zero z scale, which means it isn't on the same "layer" as its SwiftUI containers, and thus isn't clipped by the modifiers apply to the containers.
How can I properly apply a clipshape to RealityViews like this? Thanks!
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Following up on my previous question here: https://developer.apple.com/forums/thread/774262
Having solved the clipping problem, I am now trying to overlay some content in front of the RealityView. However, it looks like any content with transparency does not render in front of the RealityView, while opaque views seem to work; placing content with transparency like glassBackgroundEffect() behind the RealityView in a ZStack causes the entire window to flicker.
Additionally, my SwiftUI attachment placed in front of the stereoscopic image plane are invisible if the user look at it straight at 90 degrees. However, if the user look at it from increasing angles from the sides, the attachment gradually turns visible again.
Are these behaviors expected? What is a recommended approach to overlay content in front of a RealityView? Thanks!
Take this piece of code for example:
Menu {
...
} label: {
Image(systemName: "ellipsis.circle")
.resizable()
.foregroundStyle(Color.primary)
.frame(width: 24, height: 24)
.contentShape(.circle)
.padding(.spacing8)
.glassEffect(.regular.interactive(), in: .circle)
}
.tint(nil)
When tapped, the interactive liquid glass effect expands in response, but the expanded glass is then clipped by the original bounds of the view. In this example, the button would briefly show up as a highlighted square due to the clipping.
If I add enough padding around the Menu's label, the expanded glass effect is be able to show unclipped, but this feels like a hack.
Is this a bug in the framework, or am I doing something wrong? I have submitted FB19801519 with screen recording and demo project.