Figment AR

This repository contains the entire source code, built using ViroReact and React Native, for Viro Media's Figment AR App. Available on Google Play and App Store.

Installation

Follow the installation guide below to set up and run this source code locally on Mac/Linux (For setting up on Windows, go through Windows specific steps to setup Android Studio here and here

Prerequisites

1. Make sure you have signed up on www.viromedia.com/signup and have your API key

2. And have gone through our Quick Start (Mac/Linux) page and installed the required dependencies.

3. iOS Device with A9 chip or higher and running iOS 11 or an ARCore supported device running Android N or higher.

4. For iOS - Xcode 9 or later.

5. For Android - Android Studio for the Android SDK and tools.

   Make sure to install the Android SDK and build tools for API level 26

Clone Repo

git clone https://github.com/viromedia/figment-ar.git
cd figment-ar

Install and setup dependencies

All platforms

npm install

iOS

cd ios
pod install

Android

Nothing needed here

Running and Debugging the app

Add your API key

Open file js/app.js. Update ViroARSceneNavigator definition's apiKey at lines 127 with your own API Key

Android

1. For Android, make sure you have downloaded and installed Android Studio from here to get required SDK and platform-tools for building android apps Make sure you have the required environment variables set - $ANDROID_HOME, and added platform-tools to $PATH variable. If not,

   export ANDROID_HOME=/YOUR_PATH_TO/Android/sdk
   export PATH=$ANDROID_HOME/platform-tools:$PATH
   export PATH=$ANDROID_HOME/tools:$PATH
   

2. To build, install and launch the android app, from the root of the project (viro/ directory)

   react-native run-android --variant=gvrDebug
   

iOS

For building iOS App via Xcode

1. Open Xcode workspace

cd ios
open figment.xcworkspace

2. Select correct Team and Provisioning Profiles for Signing the app in Xcode.
3. Click Play button to build and install

Project Structure

The JS portion of the app is structured as below:

figment-ar/js/
├── app.js    // Entry point for the app
├── figment.js    // AR Scene where all the Viro Components are rendered 
├── component
│   ├── ARInitializationUI.js    // AR Initialization animation
│   ├── ButtonComponent.js    // Buttons used in the bottom-left menu switching listview contents between Portals, Objects, Effect 
│   ├── ContextMenuButton.js    // Menu on the top right that appears when you tap a 3D object / Portal
│   ├── EffectItemRender.js    // Render the selected effect from listview
│   ├── FigmentListView.js    // ListView at the bottom
│   ├── ListViewItem.js    // Individual items in ListView
│   ├── ModelItemRender.js    // Render the Model (Object) from the listview added by user
│   ├── PSConstants.js    // Constants used in PhotoSelector and Portals
│   ├── PhotosSelector.js    // UI to enable user to select backgrounds for Portals
│   ├── PortalItemRender.js   // Render the Object from the listview added by user
│   ├── RecordButton.js    // Red record video button at the bottom
│   ├── ShareScreenButtonComponent.js   // Share button on preview screen
│   └── SuccessAnimation.js   // Save to Camera Roll Success animation
├── effects
│   └── effects.js    // Post Processing effects and Particle Emitters list

├── helpers
│   └── renderIf.js    // Helper function for conditional rendering
├── model
│   ├── EffectItems.js   // Data model for Effects
│   ├── ModelItems.js    // Data model for Models (Objects)
│   ├── PortalItems.js    // Data model for Portals
│   └── emitters
│       ├── BirthdayCakeEmitter.js    // Particle Emitter for "flame" on top of birthday cake 
│       ├── EmojiAngryEmitter.js    // Particle Emitter for "smoke" coming out from Angry Emoji's ears 
│       └── ParticleEmitter.js     // Helper function to add above particle emitters to birthday cake and emoji models
├── redux
│   ├── EffectsConstants.js
│   ├── LoadingStateConstants.js
│   ├── UIConstants.js
│   ├── actions
│   │   └── index.js    // Redux actions
│   └── reducers
│       ├── arobjects.js    // Redux store / reducers for Viro components in AR Scene
│       ├── index.js    // Combining arobjects.js and ui.js reducers
│       └── ui.js    // Redux store / reducers for 2D UI components
└── res