ViroとExpoで始めるAR開発 React Native Meetup #20

⾃⼰紹介 株式会社BLUEISH フロントエンドエンジニア 開発：Next.js・Typescript・React Native 趣味：ビストロ巡り・スパイスカレー作り 　　　サウナ・美容 Haruka Kawaji

⽬次 1. 背景 2. Viroとは 3. Viroの基本実装 4. 様々なARの実装 ○ 3DオブジェクトAR ○ 画像認識AR ○ アニメーションAR 5. このライブラリの⾟い点

1. 背景

AR =「拡張現実」 現実世界にデジタル情報（映像‧⾳‧3Dオブジェクトなど）を 重ねて表⽰する技術 実⽤例 ● ポケモンGO ● IKEA Place 背景

「AR × SNS」融合したアプリケーション 背景 👉 React Nativeの「Viro」でAR機能の技術検証を⾏う 技術 特徴 Swift/Kotlin （ARKit / ARCore） iOSならARKit、AndroidならARCoreを活用し、各プラットフォームのネイティ ブなAR機能を最大限に活かせる。 開発コストが高くなる。 Unity 高度な3D表現が可能で、ARとの相性も良い。 ゲーム開発向けのプラットフォームであり、SNS機能を実装するには適してい ない。 React Native（Viro） クロスプラットフォーム対応で、JavaScriptで開発しやすい。 SNS機能と統合しやすい。

2. Viroとは

Viro = React Native でARを⼿軽に実装できるライブラリ ● https://github.com/ReactVision/viro ● Expo対応可能 ● 内部的にはネイティブのARKit（iOS）と ARCore（Android）が動作している 歴史 ● Viro Media社によって開発 ● 2019 オープンソース化 ● 2020以降 Viroコミュニティによってサポート Viroとは

様々なAR ● テキスト‧画像‧3Dオブジェクト表⽰ ● 画像認識 ● アニメーション etc... Viroとは

3. Viroの基本実装

① ViroARScene：シーンを定義するためのコンポーネント ② ViroARSceneNavigator：シーンを表⽰‧管理するためのナビゲーター viroの基本実装

const MyScene = () => { return ( ); }; viroの基本実装 ① ViroARScene: シーン（AR空間）を定義 ● カメラに写っているAR体験エリア =「シーン」 ● シーンはViroARSceneでラップする必要がある ● ARはViroコンポーネント（例: ViroText, ViroImage, Viro3DObject など）を中に配置することで構築 ○ Viroコンポーネントを組み合わせて独⾃のARを作る ⚠ 注意点 ● ViroARSceneの中にはViro以外のReact Nativeのコンポーネント を配置できない

const MyScene = () => { return ( ); }; const App = () => { return ( ); }; viroの基本実装 ② ViroARSceneNavigator: 定義したシーンを管理 ● initialSceneに、作成したシーン（例: MyScene）を登録 ● React NativeのUI上に配置することで、画⾯にシーンを表⽰ ● 複数のシーンを管理し切り替えることも可能

4. 様々なARの実装 〜3DオブジェクトAR〜

様々なARを作ってみる（3DオブジェクトAR）

様々なARを作ってみる（3DオブジェクトAR） const MyScene = () => { return ( ); }; 3Dオブジェクトを⽤意 ● BlenderやMayaなどの3Dモデリングツールで作成 or 無料ダウンロード ○ glb、fbx形式をサポート ※fbxは変換が必要 3Dオブジェクトを読み込む ● 3Dオブジェクトをassetsフォルダに配置 ● Viro3DObjectコンポーネントを使⽤し、初期表⽰設定 ○ 位置 ○ ⼤きさ ○ 向き

様々なARを作ってみる（3DオブジェクトAR） const MyScene = () => { const { onRotate, onPinch, currentScale, currentRotation } = useOperation(); return ( {}} onPinch={onPinch} onRotate={onRotate} /> ); }; インタラクションな操作の実装 ● ユーザーの操作に応じたコールバック関数を設定 ○ ドラッグ操作 ○ ピンチ操作 ○ 回転操作 ● ピンチや回転操作を検知し、リアルタイムの⼤きさ‧ 向きを計算して返すカスタムフック ● オブジェクトの拡⼤‧縮⼩、回転

4. 様々なARの実装 〜画像認識AR〜

様々なARの実装（画像認識AR）

様々なARの実装（画像認識AR） const MyScene = () => { ViroARTrackingTargets.createTargets({ targetOne: { source: require("../../assets/ar/starbucks.jpg"), physicalWidth: 0.15, }, }); return ( ); }; トリガーとなる画像を登録 ● assets配下に画像を配置 ● ViroARTrackingTargetsで“targetOne”というキーで ターゲット画像を設定

様々なARの実装（画像認識AR） const MyScene = () => { ViroARTrackingTargets.createTargets({ targetOne: { source: require("../../assets/ar/starbucks.jpg"), physicalWidth: 0.15, }, }); return ( ); }; 画像を認識した時に表⽰されるオブジェクトを登録 ● 表⽰するオブジェクトをViroARImageMarker でラップする ● “targetOne”というキーを指定 カメラをかざして登録した画像の物体を認識すると、 オブジェクトが出現！

4. 様々なARの実装 〜アニメーションAR〜

様々なARの実装（アニメーションAR） ① コード上で実装するアニメーション ② 3Dオブジェクトが持つアニメーション

様々なARの実装（アニメーションAR） ① コード上で実装するアニメーション ② 3Dオブジェクトが持つアニメーション

様々なARの実装（アニメーションAR） const MyScene = () => { ViroAnimations.registerAnimations({ slowRotate: { properties: { rotateY: "+=360" }, duration: 4000, easing: "Linear", }, }); return ( ); }; ① コード上で実装するアニメーション ● “slowRotate”というキーでY軸⽅向に回転するアニ メーションを登録

様々なARの実装（アニメーションAR） const MyScene = () => { ViroAnimations.registerAnimations({ slowRotate: { properties: { rotateY: "+=360" }, duration: 4000, easing: "Linear", }, }); return ( ); }; ① コード上で実装するアニメーション ● 動かしたいオブジェクトのanimationに “slowRotate”を設定 ● ループ再⽣

様々なARの実装（アニメーションAR） const MyScene = () => { const [anim, setAnim] = useState("jump"); return ( { setAnim("breath"); }, }} /> ); }; ② 3Dオブジェクトが持つアニメーション ● Blenderなどで作成した3Dオブジェクトのアニ メーション名（“jump”、”breath”など）を設定 する ● 連続再⽣可能

5. このライブラリの課題

このライブラリの課題 ● 情報が少ない。 ○ 最新情報はコミュニティのDiscord。 ● 3Dオブジェクトの制約が厳しい ○ 表⽰不具合 ○ 3Dオブジェクトを編集するためにBlenderやMayaを触ることも。 ● カメラ機能が充実していない ○ 内カメラ、フラッシュ、⼿動フォーカスなど ❌

感想 ● Viroはネイティブ開発をせずにReact Nativeで「⼿軽」にAR開発ができるのが 強み。 ● ⾼度なAR機能やカメラ機能を求めるなら、ネイティブ開発（ARKit/ARCore） を検討する必要がある。 Zenn ● 【技術検証】ExpoとViroで始めるAR開発 ● 3DモデルをViroで表⽰させるためのMayaエクスポート⽅法 ● アニメーションARを実装 ● 画像を認識してARを表⽰する

Thank You ご清聴ありがとうございました！