• エンジニアブログ

2024.07.02

絵画を「観る」から「体験する」へ ― 新しい鑑賞体験を支援するARKitの技術

エンジニアリング改革部の加藤です。

現在上田市立美術館で開催されている「上田市立美術館　コレクション展Ⅰ」では弊社が開発した鑑賞補助アプリが設置され、来場者にiPadを使ったデジタルでの多色摺り版画が体験できるようになっています。本記事ではアプリ内で使っているARKitの使い方について紹介します。

鑑賞補助アプリについて

鑑賞補助アプリは対象の芸術作品をその特徴とする技法で分解・再構築できるアプリです。自分なりの作品にアレンジして芸術の楽しさを体感してもらうことに加え、翻って元作品の色彩や構図のバランスの素晴らしさに気づくことができることが特徴です。

アプリは次のような手順で使います。

  1. 1. iPadを手に持ち絵画作品にカメラを向ける
  2. 2. 絵画を認識すると画面上で絵画にエフェクトがかかり、その後に版画の体験画面に遷移する
  3. 3. 多色摺り版画をiPadの画面内で体験する
  4. 4. 出来上がった作品はプロジェクションマッピングやARなどによりオリジナルと比較表示して楽しむ

アプリ使用イメージ.png

「アプリによって作品をiPadに取り込み、自分なりの作品を作ったら、もう一度外に出して比較する」というフローを実現しています。

絵画がまるでiPadに取り込まれているように見せる部分には、ARKitと呼ばれるiOS SDKのフレームワークの１つを使っています。ARKitには登録した画像を認識するAPIが提供されていて、カメラ映像内に同じものが含まれているとその場所や向きが分かります。鑑賞補助アプリではその場所にエフェクトをかけつつ体験画面に遷移することで、まるで作品がiPadに取り込まれたかのような演出を醸し出しています。

ARKitでどう実現しているか

画像が認識できるようになるまでの手順は以下のとおりです。なお開発環境はXcode 15、iPadOS 17を想定しています。

1. アセットに認識画像を登録する

XcodeプロジェクトのAssetsを開き「+」ボタンから[AR and Textures]→[AR Resource Group]を選択して、画像を登録します。このとき画像のプロパティとして画像の実際の大きさを指定します。ARKitはカメラに写る物体のサイズを計算しつつ動いていることから、認識するときの目安として使われているようです。

ただし実際は大きさが多少違っていても認識できているので、そこまで正確な値は必要ありません。

ちなみに認識画像はAssetsとして事前登録しておく以外にも、ARReferenceImageクラスを使えばランタイムでCGImageやCVPixelBufferから作成できます。

2. 登録した画像をARセッションに設定して動作開始

登録した画像は、AR画像を表示するセッションの設定項目の１つとして設定します。

guard let referenceImages = ARReferenceImage.referenceImages(inGroupNamed: "AR Resources", bundle: nil) else {
    fatalError("Missing expected asset catalog resources.")
}

let configuration = ARWorldTrackingConfiguration()
configuration.detectionImages = referenceImages

その後、ARSCNView.sessionに作成したconfigurationを渡しつつ開始します。

sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])

セッションの開始には時間がかかるので、表示されるまでの時間をフェードインさせたりアクティビティインジケータを表示しておくなどするとユーザー体験が向上します。

3. 認識結果を受け取る

セッションを開始した状態でカメラを対象に向けると、認識できたタイミングでARSCNViewDelegateプロトコルのrenderer(_:didAdd:for:)デリゲートメソッドが呼ばれ、対象画像のARReferenceImageとその位置・姿勢を表すSCNNodeそれぞれのオブジェクトが手に入ります。

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    guard let imageAnchor = anchor as? ARImageAnchor else { return } // 画像に対する認識結果であることを確認
    let referenceImage = imageAnchor.referenceImage

    // SCNNodeの位置を使ってエフェクトを適用
    :
}

あとはこのARReferenceImage・SCNNodeオブジェクトを使って、認識した位置に関連した処理・描画を行うだけです。

鑑賞補助アプリでもSCNNodeオブジェクトの位置に画像をオーバーレイしたりエフェクトを適用したり、画面遷移のトリガーとして使用しています。

終わりに

本記事ではARKitを使って画像を認識する方法を紹介しました。この技術を使った鑑賞補助アプリは上田市立美術館やエプソンスクエア丸の内、各種展示会で触れることができます。

本記事をお読みの皆さんも、ぜひARKitを活用したアプリを作ってみましょう！

関連記事

※ iPadをはじめとする本文中に記載されている会社名、製品名等は、各社の登録商標または商標です。本文中ではTM、(R)マーク等は明記していません。
※ 葛飾北斎「神奈川沖浪裏」にはメトロポリタン美術館蔵のパブリックドメインで公開されている画像を使用しています。

この記事を書いた人

エンジニアリング改革グループの加藤 寛人です。

フリースタイルリフティングを始めましたがなかなか上達しません。
華麗なコンボが決められるようになりたいです。

戻る