ViroとExpoで始めるAR開発

React Native Meetup #20 ft. meta & callstack!
https://react-native-meetup.connpass.com/event/340533/

Transcript

1. ViroとExpoで始めるAR開発 React Native Meetup #20
2. ⾃⼰紹介 株式会社BLUEISH フロントエンドエンジニア 開発：Next.js・Typescript・React Native 趣味：ビストロ巡り・スパイスカレー作り 　　　サウナ・美容 Haruka Kawaji
3. ⽬次 1. 背景 2. Viroとは 3. Viroの基本実装 4. 様々なARの実装 ◦ 3DオブジェクトAR ◦ 画像認識AR ◦ アニメーションAR 5. このライブラリの⾟い点
4. 1. 背景
5. AR =「拡張現実」 現実世界にデジタル情報（映像‧⾳‧3Dオブジェクトなど）を 重ねて表⽰する技術 実⽤例 • ポケモンGO • IKEA Place 背景
6. 「AR × SNS」融合したアプリケーション 背景 👉 React Nativeの「Viro」でAR機能の技術検証を⾏う 技術 特徴 Swift/Kotlin （ARKit / ARCore） iOSならARKit、AndroidならARCoreを活用し、各プラットフォームのネイティ ブなAR機能を最大限に活かせる。 開発コストが高くなる。 Unity 高度な3D表現が可能で、ARとの相性も良い。 ゲーム開発向けのプラットフォームであり、SNS機能を実装するには適してい ない。 React Native（Viro） クロスプラットフォーム対応で、JavaScriptで開発しやすい。 SNS機能と統合しやすい。
7. 2. Viroとは
8. Viro = React Native でARを⼿軽に実装できるライブラリ • https://github.com/ReactVision/viro • Expo対応可能 • 内部的にはネイティブのARKit（iOS）と ARCore（Android）が動作している 歴史 • Viro Media社によって開発 • 2019 オープンソース化 • 2020以降 Viroコミュニティによってサポート Viroとは
9. 様々なAR • テキスト‧画像‧3Dオブジェクト表⽰ • 画像認識 • アニメーション etc... Viroとは
10. 3. Viroの基本実装
11. ① ViroARScene：シーンを定義するためのコンポーネント ② ViroARSceneNavigator：シーンを表⽰‧管理するためのナビゲーター viroの基本実装
12. const MyScene = () => { return ( <ViroARScene> <ViroText/> <ViroImage/> <Viro3DObject/> <ViroBox/> </ViroARScene> ); }; viroの基本実装 ① ViroARScene: シーン（AR空間）を定義 • カメラに写っているAR体験エリア =「シーン」 • シーンはViroARSceneでラップする必要がある • ARはViroコンポーネント（例: ViroText, ViroImage, Viro3DObject など）を中に配置することで構築 ◦ Viroコンポーネントを組み合わせて独⾃のARを作る ⚠ 注意点 • ViroARSceneの中にはViro以外のReact Nativeのコンポーネント を配置できない
13. const MyScene = () => { return ( <ViroARScene> <ViroText/> </ViroARScene> ); }; const App = () => { return ( <ViroARSceneNavigator initialScene={{ scene: MyScene, }} /> ); }; viroの基本実装 ② ViroARSceneNavigator: 定義したシーンを管理 • initialSceneに、作成したシーン（例: MyScene）を登録 • React NativeのUI上に配置することで、画⾯にシーンを表⽰ • 複数のシーンを管理し切り替えることも可能
14. 4. 様々なARの実装 〜3DオブジェクトAR〜
15. 様々なARを作ってみる（3DオブジェクトAR）
16. 様々なARを作ってみる（3DオブジェクトAR） const MyScene = () => { return ( <ViroARScene> <ViroAmbientLight color="#ffffff" /> <Viro3DObject source={require("../../assets/ar/chair.glb")} position={[0, 0, -2]} // 位置 scale={[0.5, 0.5, 0.5]} // 大きさ rotation={[0, 0, 0]} // 向き type="GLB" /> </ViroARScene> ); }; 3Dオブジェクトを⽤意 • BlenderやMayaなどの3Dモデリングツールで作成 or 無料ダウンロード ◦ glb、fbx形式をサポート ※fbxは変換が必要 3Dオブジェクトを読み込む • 3Dオブジェクトをassetsフォルダに配置 • Viro3DObjectコンポーネントを使⽤し、初期表⽰設定 ◦ 位置 ◦ ⼤きさ ◦ 向き
17. 様々なARを作ってみる（3DオブジェクトAR） const MyScene = () => { const { onRotate, onPinch, currentScale, currentRotation } = useOperation(); return ( <ViroARScene> <ViroAmbientLight color="#ffffff" /> <Viro3DObject source={require("../../assets/ar/chair.glb")} position={[0, 0, -2]} scale={currentScale} // 拡大縮小 rotation={currentRotation} // 回転 type="GLB" onDrag={() => {}} onPinch={onPinch} onRotate={onRotate} /> </ViroARScene> ); }; インタラクションな操作の実装 • ユーザーの操作に応じたコールバック関数を設定 ◦ ドラッグ操作 ◦ ピンチ操作 ◦ 回転操作 • ピンチや回転操作を検知し、リアルタイムの⼤きさ‧ 向きを計算して返すカスタムフック • オブジェクトの拡⼤‧縮⼩、回転
18. 4. 様々なARの実装 〜画像認識AR〜
19. 様々なARの実装（画像認識AR）
20. 様々なARの実装（画像認識AR） const MyScene = () => { ViroARTrackingTargets.createTargets({ targetOne: { source: require("../../assets/ar/starbucks.jpg"), physicalWidth: 0.15, }, }); return ( <ViroARScene> <ViroAmbientLight color="#ffffff" intensity={200} /> <ViroARImageMarker target={"targetOne"}> <Viro3DObject source={require("../../assets/ar/coffee.glb")} scale={[0.05, 0.05, 0.05]} type="GLB" /> </ViroARImageMarker> </ViroARScene> ); }; トリガーとなる画像を登録 • assets配下に画像を配置 • ViroARTrackingTargetsで“targetOne”というキーで ターゲット画像を設定
21. 様々なARの実装（画像認識AR） const MyScene = () => { ViroARTrackingTargets.createTargets({ targetOne: { source: require("../../assets/ar/starbucks.jpg"), physicalWidth: 0.15, }, }); return ( <ViroARScene> <ViroAmbientLight color="#ffffff" intensity={200} /> <ViroARImageMarker target={"targetOne"}> <Viro3DObject source={require("../../assets/ar/coffee.glb")} scale={[0.05, 0.05, 0.05]} type="GLB" /> </ViroARImageMarker> </ViroARScene> ); }; 画像を認識した時に表⽰されるオブジェクトを登録 • 表⽰するオブジェクトをViroARImageMarker でラップする • “targetOne”というキーを指定 カメラをかざして登録した画像の物体を認識すると、 オブジェクトが出現！
22. 4. 様々なARの実装 〜アニメーションAR〜
23. 様々なARの実装（アニメーションAR） ① コード上で実装するアニメーション ② 3Dオブジェクトが持つアニメーション
24. 様々なARの実装（アニメーションAR） ① コード上で実装するアニメーション ② 3Dオブジェクトが持つアニメーション
25. 様々なARの実装（アニメーションAR） const MyScene = () => { ViroAnimations.registerAnimations({ slowRotate: { properties: { rotateY: "+=360" }, duration: 4000, easing: "Linear", }, }); return ( <ViroARScene> <ViroAmbientLight color="#ffffff" intensity={200} /> <Viro3DObject source={require("../../assets/ar/poster/blackpanther/object_bpanther_anim.vrx")} position={[0, -1.45, -3]} scale={[1, 1, 1]} type="VRX" animation={{ name: "slowRotate", run: true, loop: true, }} /> </ViroARScene> ); }; ① コード上で実装するアニメーション • “slowRotate”というキーでY軸⽅向に回転するアニ メーションを登録
26. 様々なARの実装（アニメーションAR） const MyScene = () => { ViroAnimations.registerAnimations({ slowRotate: { properties: { rotateY: "+=360" }, duration: 4000, easing: "Linear", }, }); return ( <ViroARScene> <ViroAmbientLight color="#ffffff" intensity={200} /> <Viro3DObject source={require("../../assets/ar/poster/blackpanther/object_bpanther_anim.vrx")} position={[0, -1.45, -3]} scale={[1, 1, 1]} type="VRX" animation={{ name: "slowRotate", run: true, loop: true, }} /> </ViroARScene> ); }; ① コード上で実装するアニメーション • 動かしたいオブジェクトのanimationに “slowRotate”を設定 • ループ再⽣
27. 様々なARの実装（アニメーションAR） const MyScene = () => { const [anim, setAnim] = useState("jump"); return ( <ViroARScene> <ViroAmbientLight color="#ffffff" intensity={200} /> <Viro3DObject source={require("../../assets/ar/poster/blackpanther/object_bpanther_anim.vrx")} position={[0, -1.45, 0]} scale={[0.5, 0.5, 0.5]} type="VRX" animation={{ name: anim, run: true, loop: false, onFinish: () => { setAnim("breath"); }, }} /> </ViroARScene> ); }; ② 3Dオブジェクトが持つアニメーション • Blenderなどで作成した3Dオブジェクトのアニ メーション名（“jump”、”breath”など）を設定 する • 連続再⽣可能
28. 5. このライブラリの課題
29. このライブラリの課題 • 情報が少ない。 ◦ 最新情報はコミュニティのDiscord。 • 3Dオブジェクトの制約が厳しい ◦ 表⽰不具合 ◦ 3Dオブジェクトを編集するためにBlenderやMayaを触ることも。 • カメラ機能が充実していない ◦ 内カメラ、フラッシュ、⼿動フォーカスなど ❌
30. 感想 • Viroはネイティブ開発をせずにReact Nativeで「⼿軽」にAR開発ができるのが 強み。 • ⾼度なAR機能やカメラ機能を求めるなら、ネイティブ開発（ARKit/ARCore） を検討する必要がある。 Zenn • 【技術検証】ExpoとViroで始めるAR開発 • 3DモデルをViroで表⽰させるためのMayaエクスポート⽅法 • アニメーションARを実装 • 画像を認識してARを表⽰する
31. Thank You ご清聴ありがとうございました！