Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

1. 背景

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

2. Viroとは

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

3. Viroの基本実装

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

様々なARの実装(画像認識AR)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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