Developing Immersive Hotel Booking Applications on Apple Vision Pro: A Technical Guide

Background: Traditional hotel booking suffers from static images that fail to convey room size, layout, and lighting, leading to mismatched expectations; Apple Vision Pro’s mixed‑reality capabilities aim to solve this problem.

Results: Tongcheng Travel launched the first OTA mixed‑reality hotel‑booking app on the US App Store, pioneering the “mixed reality and spatial computing hotel booking” concept.

Technical principles: Vision Pro’s M2 chip, multiple high‑resolution cameras, LiDAR, and visionOS provide precise 3D data capture and rendering; three container types—Windows, Volumes, and Immersive Space—are used to present 2D information, thumbnail previews, and full‑scale immersive rooms.

Key technologies: ARKit supplies plane detection, world tracking, hand tracking, scene reconstruction, and image tracking; RealityKit renders 3D content, handles lighting, and enables interaction. Sample code demonstrates container setup and immersive‑space implementation.

Modeling workflow: Use Apple’s RoomPlan to scan real rooms, refine models in 3D software, export to USDZ (or GLTF for Android), and apply image‑based lighting (IBL) for realistic illumination.

Optimization: Reduce mesh complexity, simplify topology, compress and bake textures (roughness‑R, metallic‑G, ambient‑occlusion‑B), and choose appropriate file formats to lower model size while preserving visual quality.

Interactivity: Attachments link SwiftUI UI elements to RealityKit entities, enabling gestures such as drag‑rotation, custom close buttons, and other UI controls within the immersive space.

Promotion and methodology: The pipeline is portable across visionOS, iOS (SceneKit), and Android (GLTF), allowing a single 3D model to be reused on multiple platforms and providing a repeatable method for mixed‑reality hotel booking experiences.

@main
struct XXXApp: App {
    @State private var model = AppState()
    var body: some Scene {
        // Main window
        WindowGroup(id: "xxxxxxx") { XXXView().environment(model) }
        .windowStyle(.plain)
        // Image viewer window
        WindowGroup(id: "xxxxxxx", for: ImageViewerParams.self) { $params in
            XXXViewer(items: params?.items ?? [])
                .preferredSurroundingsEffect(.systemDark)
        }
        .windowStyle(.plain)
        .windowResizability(.contentSize)
        // Thumbnail window
        WindowGroup(id: "xxxxxxx") { MyXXXView().environment(model) }
        .windowStyle(.volumetric)
        .defaultSize(width: 1, height: 1, depth: 1, in: .meters)
        // Immersive space
        ImmersiveSpace(id: "xxxxxxx") { MyImmersiveXXXView().environment(model) }
    }
}

@Observable
class AppState {
    var session: ARKitSession = ARKitSession()
    var worldInfo = WorldTrackingProvider()
    var devicePosition: SIMD3
? {
        if worldInfo.state == .running, let pose = worldInfo.queryDeviceAnchor(atTimestamp: CACurrentMediaTime()) {
            let cameraTransform = Transform(matrix: pose.originFromAnchorTransform)
            return cameraTransform.translation
        }
        return nil
    }
    init() {
        Task.detached(priority: .high) {
            do { try await self.session.run([self.worldInfo]) }
            catch { logger.error("运行世界追踪失败：\(error.localizedDescription)") }
        }
    }
}

guard let resource = try? await EnvironmentResource(named: "xxxxxx") else { return }
var iblComponent = ImageBasedLightComponent(source: .single(resource), intensityExponent: 0.5)
iblComponent.inheritsRotation = true
roomEntity.components.set(iblComponent)
roomEntity.components.set(ImageBasedLightReceiverComponent(imageBasedLight: roomEntity))