どん兵衛を生け贄に青眼の白龍を召喚！

はじめに

React Native で ARKit を使ってみたかったのやってみました。
使用するライブラリは react-native-arkit です。

完成形は以下のようになります。

では、実装していきます。

インストール

正直、ここが一番面倒でした。
公式が、 React Native >= 60.0 から追加された Autolink に対応していない…！

まだ取り込まれていない修正プルリクエストがあったので、そちらに従いました。

yarn add github:code-matt/react-native-arkit react-native-svg

Pod.file に下記の二行を追加します。

  pod 'RCTARKit', :path => "../node_modules/react-native-arkit/ios/RCTARKit.podspec"
  pod 'PocketSVG

これで pod install が動くはずです。

下準備

ARKit がどん兵衛を認識できるように、画像を取り込みます。
Asset Catalog のImages.xcassetsの中にAR Resource Groupを作成して、写真を設定します。

次に 3D オブジェクトを用意します。
最後に紹介する参考ページで紹介されていたサイトから青眼の白龍のオブジェクトをダウンロードして、.scnファイルを作成します。

XCode でSceneKit Catalogを作成し、名前をart.scnassetsとしました。
作成された.scnファイルをその中に移動させます。

私の環境では、これだけだと色のない真っ白なオブジェクトになりました。
PNG ファイルを見て色を当てているようだったので、一緒に入っていた PNG ファイルも格納したところ、ちゃんと色ありで表示されるようになりました。

実装

const ARKitContainer: React.FunctionComponent = () => {
  const [position, setPosition] = useState(null);
  return (
    <ARKit
      style={{ flex: 1 }}
      debug
      // enable plane detection (defaults to Horizontal)
      planeDetection={ARKit.ARPlaneDetection.Horizontal}
      // enable light estimation (defaults to true)
      lightEstimationEnabled
      onAnchorDetected={(anchor) => {
        setPosition(anchor?.position);
      }}
      onAnchorUpdated={(anchor) => {
        setPosition(anchor?.position);
      }}
      onAnchorRemoved={(anchor) => {
        setPosition(null);
      }}
      // you can detect images and will get an anchor for these images
      detectionImages={[{ resourceGroupName: 'AR Resources' }]}
    >
      {position && (
        <ARKit.Model
          position={{ ...position, z: position.z * 1.25, frame: 'local' }}
          scale={0.01}
          model={{
            scale: 1,
            file: 'art.scnassets/BlueEyes.scn',
          }}
        />
      )}
    </ARKit>
  );
};

AR Resources のリソースグループを検知した時に、その座標をpositionに設定しています。
positionが存在する場合、その位置にart.scnassets/BlueEyes.scnを表示しています。

ARKit の検出精度が良いので、特に変わったことをしなくても、どん兵衛を見つけると青眼の白龍を召喚できるようになりました。

おわりに

いかがでしたでしょうか。
Swift x ARKit の例はたくさん出てきたのですが、React Native で AR をやっていた記事はあまり見つけられませんでした。
ライブラリがアップデート（Autolink対応）されておらず、インストールでつまづいたのが一番難点でした。

3D モデルさえ手に入れれば色々と可能性を感じたので、もうちょっと ARKit で遊んでみたいと思います。

参考

休日2日を生け贄に青眼の白龍を召喚！