Apple Vision Proで空間上に画像を配置してみた

はじめに

こんにちは。
クラウドソリューショングループのyamasaki.sです。

Apple Vision Proで空間上に無数の画像を配置するアプリケーションを作成しました。
応用することで画像ライブラリのアプリであったり、雑誌や漫画などの紙面画像を一面に表示させることなど、
さまざまなアプリケーションができそうですね。

目次

• Immersive Spaceについて
• Entityを空間上に表示する
• Entityにテクスチャ(画像)を表示する
• 実装してみた
• さいごに

ImmersiveSpaceについて

Apple Vision Proでいくつかある表示方式の1つになります。
空間上に3Dオブジェクトを配置することができ、より没入感を得ることができます。

他の表示形式との違いやより具体的な内容に関しては、過去の記事で紹介されていますので、こちらをご覧いただければと思います。
visionOS アプリ開発の基礎 —— Window, Volume, Immersive Space を理解する

Entityを空間上に表示する

では、早速Immersive Spaceに3Dモデル(Entity)を配置してみましょう！
今回は空間上に画像を配置するための土台として、板状のEntityを配置します。

var material = SimpleMaterial()
let entity = ModelEntity(mesh: .generatePlane(width: 0.5, height: 0.7),
                         materials: [material])
return entity

板状のEntityを配置することができました。

Entityにテクスチャ(画像)を表示する

次に、取り込んだ画像をテクスチャとして先ほどのEntityに適用します。
画像はURL経由で取得しますが、そのままテクスチャとして適用することができないため、
一度ローカルに保存してから適用します。

let fileUrl = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0].appendingPathComponent("temp.png")
let url = URL(string: "画像のURL")!

do {
    // NOTE: URL経由で画像を表示させる際は、一度Imageとして取り込んでからテクスチャとして読み込む
    if let data = UIImage(data:try Data(contentsOf: url))?.pngData(),
        ((try data.write(to: fileUrl)) != nil ),
        let texture = try? TextureResource.load(contentsOf: fileUrl) {
        createBoard(texture: MaterialParameters.Texture (texture))
    } else {
        break;
    }
} catch {
    break;
}

取得したテクスチャ情報をマテリアルに適用することで、画像を空間上に配置することができました。

material.color = .init(texture: texture)

実装してみた

実際にビルドしてみると、空間上に画像を配置することができました。

さいごに

今回、実装した機能を利用することで美術館や広告など、さまざまな分野に応用できそうですね！

まだまだ触れていない機能も多いですが、これからもさらに新しい機能が増えていくと思いますのでどんどん発信していきたいと思います。