Zenn
🗂

ARKit + AppClipCodeで念弾を出したかった

2022/09/29に公開
iOS
ARKit
tech

やったことをすぐ忘れてしまうので備忘録として
※ここでいう念弾は、HUNTER×HUNTERの念弾を想定しています。

きっかけ

WWDC2021を見て、ARKit5を触ってみたいと思った。（触った時はWWDC2022発表前）
自分で作った3Dモデル出してみたいと思った。（手から）

ARKit 5の紹介動画
https://developer.apple.com/videos/play/wwdc2021/10073/

今回参考にするサンプルhttps://developer.apple.com/documentation/app_clips/interacting_with_app_clip_codes_in_ar

やったこと

手の写真でも、ひまわりが生成されるか確認

  • ✋の写真を撮影
  • 写真をReferenceImageに設定

URLで指定する場合、下記のjpgを✋の写真に変更

ViewController.swift
let imageURLFor: [String: URL] = [
  "sunfl": URL(string: "https://developer.apple.com/sample-code/ar/sunflower.jpg")!
]

Assetsで指定する場合、ARReferenceImageを直接変更

ViewController+ProductKeyProcessing.swift
let modelAnchorImage = ARReferenceImage(
    image,
    orientation: .up,
    // Note: the width of the sample seed packet is about 8cm.
    physicalWidth: 0.08
)

結果

認識率が低いようで、アニメーションの途中でひまわりのオブジェクトが消える
消えた直後にまた生成されるが、安定しなかった
そのため、手に待つ必要があるがAppClipCodeAnchorに変更

念弾のUSDZファイル作成

  • blenderで光る球を作成
    ※Youtubeで調べて、そのまま真似をして作成

  • モデルをExport
    BlenderのFile->Export->glTF 2.0->Export glTF 2.0
    ※GeometryのApply Modifiersをチェック付けておく

  • Reality Converterで変換
    Reality ConverterでExportしたglbファイルを開き、ファイル->すべてを書き出す

  • マテリアルの修正
    書き出したファイルは、Blenderのマテリアルとは程遠くなってしまっているため、色をそれっぽく修正

AppClipCodeAnchorで設定

  • session(_:didAdd:)でモデルを読み込み、Anchorをセット
ViewController.swift
    func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
        for anchor in anchors {
            if anchor is ARAppClipCodeAnchor {
                let model = try? Entity.load(named: "nendan")
		// サイズ調整など
		.
		.
		let anchor = AnchorEntity(anchor: anchor)
                anchor.addChild(model)
		arView.scene.addAnchor(anchor)
		// アニメーションなど
		.
		.
  • AppClipCodeを印刷
    URLは使わないが、Interacting with App Clip Codes in ARの記載をそのまま実行し、出力したものを印刷
AppClipCodeGenerator generate --url https://developer.apple.com/sunfl --index 0 --output ~/Downloads/AppClipCode-sunflower.svg --logo badge
  • 手に持つ

できたもの


Discussion