@webspatial/platform-visionos 0.0.1

package/web-spatial/views/PlainWindowContainerView.swift

@@ -0,0 +1,84 @@
+//
+//  PlainWindowContainerView.swift
+//  web-spatial
+//
+//  Created by ByteDance on 5/9/24.
+//
+
+import RealityKit
+import SwiftUI
+
+struct PlainWindowContainerView: View {
+    @EnvironmentObject private var sceneDelegate: SceneDelegate
+    @Environment(SpatialWindowContainer.self) private var windowContainerContent: SpatialWindowContainer
+
+    @State private var windowResizeInProgress = false
+    @State private var timer: Timer?
+
+    private func setSize(size: CGSize) {
+        sceneDelegate.window?.windowScene?.requestGeometryUpdate(.Vision(size: size))
+    }
+
+    var body: some View {
+        OpenDismissHandlerUI().environment(windowContainerContent).onDisappear {
+            windowContainerContent.destroy()
+        }
+
+        let rootEntity = windowContainerContent.getEntities().filter {
+            $0.value.getComponent(SpatialWindowComponent.self) != nil && $0.value.coordinateSpace == .ROOT
+        }.first?.value
+
+        GeometryReader { proxy3D in
+            ZStack {
+                if let e = rootEntity {
+                    let _ = e.forceUpdate ? 0 : 0
+                    let x = proxy3D.size.width / 2
+                    let y = proxy3D.size.height / 2
+                    let z = CGFloat(e.modelEntity.position.z)
+                    let width = proxy3D.size.width
+                    let height = proxy3D.size.height
+
+                    if windowResizeInProgress {
+                        VStack {}.frame(width: width, height: height).glassBackgroundEffect().padding3D(.front, -100_000)
+                            .position(x: x, y: y)
+                            .offset(z: z)
+                    } else {
+                        // Avoid showing webview until its loading completes
+                        let wc = e.getComponent(SpatialWindowComponent.self)
+                        let didFinishFirstLoad = wc != nil ? wc!.didFinishFirstLoad : false
+
+                        SpatialWebViewUI().environment(e)
+                            .frame(width: width, height: height).padding3D(.front, -100_000)
+                            .rotation3DEffect(Rotation3D(simd_quatf(ix: e.modelEntity.orientation.vector.x, iy: e.modelEntity.orientation.vector.y, iz: e.modelEntity.orientation.vector.z, r: e.modelEntity.orientation.vector.w)))
+                            .position(x: x, y: y)
+                            .offset(z: z)
+                            .opacity(didFinishFirstLoad ? 1.0 : 0.0)
+                            .animation(.linear(duration: 0.2), value: didFinishFirstLoad)
+                    }
+                }
+            }
+            .onReceive(windowContainerContent.setSize) { newSize in
+                setSize(size: newSize)
+            }
+            .onChange(of: proxy3D.size) {
+                // WkWebview has an issue where it doesn't resize while the swift window is resized
+                // Treid to call didMoveToWindow to force redraw to occur but that seemed to cause rendering artifacts so that solution was rejected
+                // Now we use a windowResizeInProgress state to hide the webview (by removoving from the view) and other content (using opacity).
+                // After resize is completed the webview is added back to the page which causes a redraw at the correct dimensions/position
+                if let wv = rootEntity?.getComponent(SpatialWindowComponent.self) {
+                    windowResizeInProgress = true
+                    if timer != nil {
+                        timer!.invalidate()
+                    }
+                    // If we don't detect resolution change after x seconds we treat the resize as complete
+                    timer = Timer.scheduledTimer(withTimeInterval: 0.2, repeats: false) { _ in
+                        windowResizeInProgress = false
+                    }
+
+                    // Trigger resize in the webview's body width and fire a window resize event to get the JS on the page to update state while dragging occurs
+                    wv.evaluateJS(js: "var tempWidth_ = document.body.style.width;document.body.style.width='" + String(Float(proxy3D.size.width)) + "px'; window.dispatchEvent(new Event('resize'));")
+                }
+            }
+        }
+    }
+}

package/web-spatial/views/SpatialModel3DView.swift

@@ -0,0 +1,193 @@
+//
+//  SpatialModel3DView.swift
+//  web-spatial
+//
+//  Created by ByteDance on 1/21/25.
+//
+import RealityKit
+import SwiftUI
+
+class SpatialModel3DViewGestureData {
+    // for dragging state
+    var isDragging = false
+}
+
+struct SpatialModel3DView: View {
+    @Environment(SpatialEntity.self) var e: SpatialEntity
+    var parentYOffset = Float(0.0)
+
+    @State private var gestureData = SpatialModel3DViewGestureData()
+
+    var drag: some Gesture {
+        DragGesture()
+            .onChanged(onDragging)
+            .onEnded(onDraggingEnded)
+    }
+
+    var tapGesture: some Gesture {
+        TapGesture(count: 1)
+            .onEnded(onTapEnded)
+    }
+
+    var doubleTapGesture: some Gesture {
+        TapGesture(count: 2)
+            .onEnded(onDoubleTapEnded)
+    }
+
+    var longPressGesture: some Gesture {
+        LongPressGesture(minimumDuration: 1.0)
+            .onEnded(onLonePressEnded)
+    }
+
+    @ViewBuilder
+    var body: some View {
+        if e.coordinateSpace == .DOM {
+            if let childModel3DComponent = e.getComponent(SpatialModel3DComponent.self),
+               let url = URL(string: childModel3DComponent.modelURL)
+            {
+                let x = CGFloat(e.modelEntity.position.x)
+                let y = CGFloat(e.modelEntity.position.y - (childModel3DComponent.scrollWithParent ? parentYOffset : 0))
+                let z = CGFloat(e.modelEntity.position.z)
+                let width = CGFloat(childModel3DComponent.resolutionX)
+                let height = CGFloat(childModel3DComponent.resolutionY)
+                let anchor = childModel3DComponent.rotationAnchor
+                let opacity = childModel3DComponent.opacity
+                let resizable = childModel3DComponent.resizable
+                let aspectRatio: CGFloat? = childModel3DComponent.aspectRatio == nil ? nil : CGFloat(childModel3DComponent.aspectRatio!)
+                let contentMode = childModel3DComponent.contentMode
+
+                let enableTapEvent = childModel3DComponent.enableTapEvent
+                let enableDoubleTapEvent = childModel3DComponent.enableDoubleTapEvent
+                let enableDragEvent = childModel3DComponent.enableDragEvent
+                let enableLongPressEvent = childModel3DComponent.enableLongPressEvent
+
+                // Matrix = MTranslate X MRotate X MScale
+                Model3D(url: url) { newPhase in
+                    switch newPhase {
+                    case .empty:
+                        ProgressView()
+
+                    case let .success(resolvedModel3D):
+                        resolvedModel3D
+                            .resizable(resizable)
+                            .aspectRatio(
+                                aspectRatio,
+                                contentMode: contentMode
+                            )
+
+                            .onAppear {
+                                self.onLoadSuccess()
+                            }
+
+                    case let .failure(error):
+                        //                            use UIView.onAppear to notify error phase.
+                        Text("").onAppear {
+                            self.onLoadFailure(error.localizedDescription)
+                        }
+
+                    @unknown default:
+                        EmptyView()
+                    }
+                }
+                .frame(width: width, height: height)
+                //                    .background(Color.blue)
+                .scaleEffect(
+                    x: CGFloat(e.modelEntity.scale.x),
+                    y: CGFloat(e.modelEntity.scale.y),
+                    z: CGFloat(e.modelEntity.scale.z),
+                    anchor: anchor
+                )
+                .rotation3DEffect(
+                    Rotation3D(simd_quatf(
+                        ix: e.modelEntity.orientation.vector.x,
+                        iy: e.modelEntity.orientation.vector.y,
+                        iz: e.modelEntity.orientation.vector.z,
+                        r: e.modelEntity.orientation.vector.w
+                    )),
+                    anchor: anchor
+                )
+                .position(x: x, y: y)
+                .offset(z: z)
+                .frame(maxDepth: 0, alignment: .back)
+                .opacity(opacity)
+                .gesture(enableDragEvent ? drag : nil)
+                .gesture(enableDoubleTapEvent ?doubleTapGesture : nil)
+                .gesture(enableTapEvent ? tapGesture : nil)
+                .gesture(enableLongPressEvent ? longPressGesture : nil)
+                .hidden(!e.visible)
+            } else {
+                Text("").onAppear {
+                    self.onLoadFailure("invalid URL")
+                }
+            }
+        } else {
+            EmptyView()
+        }
+    }
+
+    private func onLoadSuccess() {
+        if let model3DComponent = e.getComponent(SpatialModel3DComponent.self) {
+            let data = "{eventType: 'phase', value: 'success'}"
+            model3DComponent.wv?.fireComponentEvent(componentId: model3DComponent.id, data: data)
+        }
+    }
+
+    private func onLoadFailure(_ error: String) {
+        if let model3DComponent = e.getComponent(SpatialModel3DComponent.self) {
+            let data = "{eventType: 'phase', value: 'failure', error: '\(error)'} "
+            model3DComponent.wv?.fireComponentEvent(componentId: model3DComponent.id, data: data)
+        }
+    }
+
+    private func onDragging(dragValue: DragGesture.Value) {
+        var eventType = "drag"
+        if !gestureData.isDragging {
+            gestureData.isDragging = true
+            eventType = "dragstart"
+        }
+        fireDragEvent(eventType, dragValue)
+    }
+
+    private func onDraggingEnded(dragValue: DragGesture.Value) {
+        gestureData.isDragging = false
+        let eventType = "dragend"
+        fireDragEvent(eventType, dragValue)
+    }
+
+    private func onTapEnded(_: TapGesture.Value) {
+        print("onTapEnded")
+        if let model3DComponent = e.getComponent(SpatialModel3DComponent.self) {
+            let eventType = "tap"
+            let data = "{eventType: '\(eventType)' } "
+            model3DComponent.wv?.fireComponentEvent(componentId: model3DComponent.id, data: data)
+        }
+    }
+
+    private func onDoubleTapEnded(_: TapGesture.Value) {
+        print("onDoubleTapEnded")
+        if let model3DComponent = e.getComponent(SpatialModel3DComponent.self) {
+            let eventType = "doubletap"
+            let data = "{eventType: '\(eventType)' } "
+            model3DComponent.wv?.fireComponentEvent(componentId: model3DComponent.id, data: data)
+        }
+    }
+
+    private func onLonePressEnded(_: LongPressGesture.Value) {
+        print("onLonePressEnded")
+        if let model3DComponent = e.getComponent(SpatialModel3DComponent.self) {
+            let eventType = "longpress"
+            let data = "{eventType: '\(eventType)' } "
+            model3DComponent.wv?.fireComponentEvent(componentId: model3DComponent.id, data: data)
+        }
+    }
+
+    private func fireDragEvent(_ eventType: String, _ value: DragGesture.Value) {
+        if let model3DComponent = e.getComponent(SpatialModel3DComponent.self) {
+            let startLocation3D = value.startLocation3D
+            let translation3D = value.translation3D
+
+            let data = "{eventType: '\(eventType)', value: { translation3D : { x: \(translation3D.x), y: \(translation3D.y), z: \(translation3D.z) }, startLocation3D: { x: \(startLocation3D.x), y: \(startLocation3D.y), z: \(startLocation3D.z)} } } "
+            model3DComponent.wv?.fireComponentEvent(componentId: model3DComponent.id, data: data)
+        }
+    }
+}

package/web-spatial/views/SpatialViewUI.swift

@@ -0,0 +1,168 @@
+//
+//  SpatialViewUI.swift
+//  web-spatial
+//
+//  Created by ByteDance on 11/6/24.
+//
+import RealityKit
+import SwiftUI
+
+extension View {
+    @ViewBuilder
+    func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
+        if condition {
+            transform(self)
+        } else {
+            self
+        }
+    }
+}
+
+struct SpatialViewUI: View {
+    @Environment(SpatialEntity.self) var ent: SpatialEntity
+    @State var isRoot = false
+
+    // Entity which will contain all the content of this realityView and scale to fit frame
+    @State var world = Entity()
+    @State var portal = Entity()
+    @State var light = PointLight()
+    @State var portalModel = ModelComponent(
+        mesh: .generatePlane(width: 1.0, height: 1.0, cornerRadius: 0.0),
+        materials: [PortalMaterial()]
+    )
+    @State var worldComponent = WorldComponent()
+
+    private func toJson(val: SIMD3<Float>) -> String {
+        return "{x: " + String(val.x) + ",y: " + String(val.y) + ",z: " + String(val.z) + "}"
+    }
+
+    var dragGesture: some Gesture {
+        DragGesture(minimumDistance: 0).handActivationBehavior(.automatic)
+            .targetedToAnyEntity()
+            .onChanged { value in
+                let startPos = value.convert(value.startLocation3D, from: .local, to: .scene)
+                let translate = value.convert(value.location3D, from: .local, to: .scene)
+                let spatialEntity = value.entity.components[SpatialBridgeComponent.self]!.spatialEntity
+                let ic = spatialEntity.getComponent(SpatialInputComponent.self)!
+
+                if !ic.isDragging {
+                    ic.isDragging = true
+                    ic.trackedPosition = startPos
+                    let delta = translate - ic.trackedPosition
+                    ic.trackedPosition = translate
+
+                    ic.wv!.fireComponentEvent(componentId: ic.id, data: "{eventType: 'dragstart', translate: " + toJson(val: delta) + "}")
+                } else {
+                    let delta = translate - ic.trackedPosition
+                    ic.trackedPosition = translate
+                    ic.wv!.fireComponentEvent(componentId: ic.id, data: "{eventType: 'drag', translate: " + toJson(val: delta) + "}")
+                }
+            }
+            .onEnded { value in
+                let spatialEntity = value.entity.components[SpatialBridgeComponent.self]!.spatialEntity
+                let ic = spatialEntity.getComponent(SpatialInputComponent.self)!
+                ic.wv!.fireComponentEvent(componentId: ic.id, data: "{eventType: 'dragend'}")
+                ic.isDragging = false
+            }
+    }
+
+    var body: some View {
+        if let viewComponent = ent.getComponent(SpatialViewComponent.self) {
+            GeometryReader3D { proxy in
+                // Get dimensions of the frame
+                let proxySize3d = proxy.frame(in: .local)
+
+                RealityView { _, _ in
+                } update: { content, attachments in
+                    // Scale content so it will be a 1x1x1 space and not exceed the frame
+                    let viewSpaceDimensions = content.convert(proxySize3d, from: .local, to: content)
+                    let newScale = min(viewSpaceDimensions.extents.x, viewSpaceDimensions.extents.y)
+
+                    world.transform.scale.x = newScale
+                    world.transform.scale.y = newScale
+                    world.transform.scale.z = newScale
+                    portal.transform.scale.x = newScale
+                    portal.transform.scale.y = newScale
+                    portal.transform.scale.z = newScale
+
+                    if !isRoot {
+                        // Pull out content so volume sits in front of the page
+                        world.transform.translation.z = world.transform.scale.z / 2
+                    }
+
+                    for (_, entity) in ent.getEntities() {
+                        world.addChild(entity.modelEntity)
+                    }
+
+                    // Add attachments for window entities
+                    let entities = ent.getEntities().filter { _, entity in
+                        entity.coordinateSpace == .APP && entity.hasComponent(SpatialWindowComponent.self)
+                    }
+                    for key in Array(entities.keys) {
+                        let e = entities[key]!
+                        let windowComponent = e.getComponent(SpatialWindowComponent.self)
+                        if windowComponent != nil && e.coordinateSpace == .APP {
+                            if let windowAttachment = attachments.entity(for: key) {
+                                if e.modelEntity.children.count == 0 {
+                                    e.modelEntity.addChild(windowAttachment, preservingWorldTransform: false)
+
+                                    // Scale the window to fit the resolution to unit ratio as defined by setResolution API
+                                    let b = windowAttachment.attachment.bounds
+                                    let wv = e.getComponent(SpatialWindowComponent.self)!
+                                    let scaleFact = (Float(wv.resolutionX) / 1360.0) / (b.max.x - b.min.x)
+                                    windowAttachment.scale.x = scaleFact
+                                    windowAttachment.scale.y = scaleFact
+                                    windowAttachment.scale.z = scaleFact
+                                }
+                            }
+                        }
+                    }
+                    if viewComponent.isPortal {
+                        // Setup portal
+                        portal.components.set(portalModel)
+                        portal.transform.translation.z = 0.0001 // avoid z fighting
+                        if !portal.components.has(PortalComponent.self) {
+                            portal.components.set(PortalComponent(target: world))
+                        }
+
+                        // Setup default light
+                        light.light.intensity = 5000
+                        light.position.z = 2
+                        light.position.y = 1
+                        light.position.x = 0.5
+                        world.addChild(light)
+
+                        // Position volume behind portal instead of in front
+                        world.transform.translation.z *= -1
+
+                        // Add portal to scene
+                        world.components.set(worldComponent)
+                        content.add(portal)
+                    } else {
+                        // Remove portal elements/components
+                        content.remove(portal)
+                        world.components.remove(WorldComponent.self)
+                        world.removeChild(light)
+                    }
+
+                    content.add(world)
+                }
+                attachments: {
+                    // Create an attachment for each window component
+                    let entities = ent.getEntities().filter { _, entity in
+                        entity.coordinateSpace == .APP && entity.hasComponent(SpatialWindowComponent.self)
+                    }
+                    ForEach(Array(entities.keys), id: \.self) { key in
+                        let entity = entities[key]!
+                        let wv = entity.getComponent(SpatialWindowComponent.self)!
+                        Attachment(id: key) {
+                            SpatialWebViewUI().environment(entity).frame(width: wv.resolutionX, height: wv.resolutionY)
+                        }
+                    }
+                }.gesture(dragGesture).if(!isRoot) { view in
+                    view.clipped()
+                }
+            }
+        }
+    }
+}

package/web-spatial/views/SpatialWebViewUI.swift

@@ -0,0 +1,193 @@
+//
+//  SpatialWebViewUI.swift
+//  web-spatial
+//
+//  Created by ByteDance on 5/9/24.
+//
+
+import RealityKit
+import SwiftUI
+
+// Using scrollview has some side effects so only use it on elements we want to clip the edges of
+// Seems only scrollview has this clipping property so far on visionOS otherwise we would use ZStack
+struct OptionalClip<Content: View>: View {
+    var clipEnabled = true
+    let viewBuilder: () -> Content
+
+    var body: some View {
+        if clipEnabled {
+            ScrollView {
+                viewBuilder()
+            }.offset(z: CGFloat(0)).frame(maxWidth: .infinity, maxHeight: .infinity).scrollDisabled(true)
+        } else {
+            viewBuilder()
+        }
+    }
+}
+
+struct SpatialWebViewUI: View {
+    @Environment(SpatialEntity.self) var ent: SpatialEntity
+    var body: some View {
+        if let wv = ent.getComponent(SpatialWindowComponent.self) {
+            let parentYOffset = Float(wv.scrollOffset.y)
+
+            let childEntities = ent.getEntities()
+
+            // Display child entities of the webview
+            ZStack {
+                OptionalClip(clipEnabled: ent.coordinateSpace != .ROOT && wv.isScrollEnabled()) {
+                    ZStack {
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                let _ = e.forceUpdate ? 0 : 0
+                                if let childWindowcomponent = e.getComponent(SpatialWindowComponent.self) {
+                                    if e.coordinateSpace == .DOM {
+                                        let view = childWindowcomponent
+                                        let x = CGFloat(e.modelEntity.position.x)
+                                        let y = CGFloat(e.modelEntity.position.y - (view.scrollWithParent ? parentYOffset : 0))
+                                        let z = CGFloat(e.modelEntity.position.z)
+                                        let width = CGFloat(view.resolutionX)
+                                        let height = CGFloat(view.resolutionY)
+                                        let anchor = view.rotationAnchor
+
+                                        // Matrix = MTranslate X MRotate X MScale
+                                        SpatialWebViewUI().environment(e)
+                                            .frame(width: width, height: height)
+                                            // use .offset(smallVal) to workaround for glassEffect not working and small width/height spatialDiv not working
+                                            .offset(z: 0.0001)
+                                            .scaleEffect(
+                                                x: CGFloat(e.modelEntity.scale.x),
+                                                y: CGFloat(e.modelEntity.scale.y),
+                                                z: CGFloat(e.modelEntity.scale.z),
+                                                anchor: anchor
+                                            )
+                                            .rotation3DEffect(
+                                                Rotation3D(simd_quatf(
+                                                    ix: e.modelEntity.orientation.vector.x,
+                                                    iy: e.modelEntity.orientation.vector.y,
+                                                    iz: e.modelEntity.orientation.vector.z,
+                                                    r: e.modelEntity.orientation.vector.w
+                                                )),
+                                                anchor: anchor
+                                            )
+
+                                            .position(x: x, y: y)
+                                            .offset(z: z)
+                                            .zIndex(e.zIndex)
+                                            .gesture(
+                                                DragGesture()
+                                                    .onChanged { gesture in
+                                                        let scrollEnabled = view.isScrollEnabled()
+                                                        if !scrollEnabled {
+                                                            // Check if there is a nearest scroll-enabled SpatialWindowComponent in the current SpatialEntity
+                                                            // and scroll it if it exists
+                                                            if let targetScrollWV = wv.findNearestScrollEnabledSpatialWindowComponent() {
+                                                                if !view.dragStarted {
+                                                                    view.dragStarted = true
+                                                                    view.dragStart = (gesture.translation.height)
+                                                                }
+
+                                                                // TODO: this should have velocity
+                                                                let delta = view.dragStart - gesture.translation.height
+                                                                view.dragStart = gesture.translation.height
+                                                                targetScrollWV.updateScrollOffset(delta: delta)
+                                                            }
+                                                        }
+                                                    }
+                                                    .onEnded { _ in
+                                                        let scrollEnabled = view.isScrollEnabled()
+
+                                                        if !scrollEnabled {
+                                                            if let targetScrollWV = wv.findNearestScrollEnabledSpatialWindowComponent() {
+                                                                view.dragStarted = false
+                                                                view.dragStart = 0
+
+                                                                targetScrollWV.stopScrolling()
+                                                            }
+                                                        }
+                                                    }
+                                            )
+                                    }
+                                }
+                            }
+                        }
+
+                        // Model3D content
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                let _ = e.forceUpdate ? 0 : 0
+                                SpatialModel3DView(parentYOffset: parentYOffset)
+                                    .environment(e)
+                            }
+                        }
+
+                        // SpatialView content
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                if e.coordinateSpace == .DOM {
+                                    if let viewComponent = e.getComponent(SpatialViewComponent.self) {
+                                        let _ = e.forceUpdate ? 0 : 0
+                                        let x = CGFloat(e.modelEntity.position.x)
+                                        let y = CGFloat(e.modelEntity.position.y - parentYOffset)
+                                        let z = CGFloat(e.modelEntity.position.z)
+
+                                        let width = CGFloat(viewComponent.resolutionX)
+                                        let height = CGFloat(viewComponent.resolutionY)
+
+                                        SpatialViewUI().environment(e).frame(width: width, height: height).scaleEffect(
+                                            x: CGFloat(e.modelEntity.scale.x),
+                                            y: CGFloat(e.modelEntity.scale.y),
+                                            z: CGFloat(e.modelEntity.scale.z)
+                                        )
+                                        .rotation3DEffect(
+                                            Rotation3D(simd_quatf(
+                                                ix: e.modelEntity.orientation.vector.x,
+                                                iy: e.modelEntity.orientation.vector.y,
+                                                iz: e.modelEntity.orientation.vector.z,
+                                                r: e.modelEntity.orientation.vector.w
+                                            ))
+                                        ).position(x: x, y: y)
+                                        .offset(z: z)
+                                    }
+                                }
+                            }
+                        }
+                    }.frame(maxWidth: .infinity, maxHeight: .infinity).frame(maxDepth: 0, alignment: .back).offset(z: 0)
+                }
+
+                // Display the main webview
+                if wv.didFailLoad {
+                    VStack {
+                        Text("Failed to load webpage. Is the server running?")
+                            .foregroundColor(.white)
+                        Button("Reload") {
+                            if let url = wv.getURL() {
+                                wv.navigateToURL(url: url)
+                            } else {
+                                logger.warning("Unable to reload URL")
+                            }
+                        }
+                        .foregroundColor(.white)
+                    }
+                    .frame(maxWidth: .infinity, maxHeight: .infinity).glassBackgroundEffect()
+
+                } else {
+                    wv.getView()
+                        .materialWithBorderCorner(
+                            wv.backgroundMaterial,
+                            wv.cornerRadius
+                        )
+
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
+                }
+            }
+            .opacity(wv.opacity)
+            .hidden(!ent.visible)
+            .ornament(attachmentAnchor: .scene(.bottomTrailing), contentAlignment: .bottomTrailing) {
+                if wv.isRootWebview() {
+                    NavView(swc: wv)
+                }
+            }
+        }
+    }
+}

package/web-spatial/views/VolumetricWindowContainerView.swift

@@ -0,0 +1,38 @@
+
+//
+//  VolumetricWindowContainerView.swift
+//  web-spatial
+//
+//  Created by ByteDance on 5/9/24.
+//
+
+import typealias RealityKit.Attachment
+import typealias RealityKit.Entity
+import typealias RealityKit.MeshResource
+import typealias RealityKit.Model3D
+import typealias RealityKit.ModelEntity
+import typealias RealityKit.RealityView
+import typealias RealityKit.SimpleMaterial
+import SwiftUI
+
+struct VolumetricWindowContainerView: View {
+    @Environment(SpatialWindowContainer.self) var windowContainerContent: SpatialWindowContainer
+
+    var body: some View {
+        OpenDismissHandlerUI().environment(windowContainerContent).onDisappear {
+            // Don't destroy immersive space content as it is reused next time its opened
+            if windowContainerContent.id != SpatialWindowContainer.ImmersiveID {
+                windowContainerContent.destroy()
+            }
+        }
+
+        let entities = windowContainerContent.getEntities().filter { _, entity in
+            entity.coordinateSpace == .ROOT && entity.hasComponent(SpatialViewComponent.self)
+        }
+
+        ForEach(Array(entities.keys), id: \.self) { key in
+            let entity = entities[key]!
+            SpatialViewUI(isRoot: true).environment(entity)
+        }
+    }
+}