May is a huge month for Viro! Using the Viro platform, we launched Posemoji — AR Filters & Effects.

Posemoji uses state-of-the-art motion tracking ML to transform whole-body movements into special effects in real-time. You can overlay neon trails as you dance, create puppets that mimic your movements, control lightning and fire with your hands, or turn your world upside down with filters and warps. Download for free on iOS and try it for yourself.

TRY POSEMOJI NOW

Latest Release Updates

The latest Viro platform releases focused on upgrading to newer libraries with minor bug fixes.

ViroReact 2.14.0

• ViroReact 2.14.0 was updated to be compatible with React Native 0.59.3 and ARCore 1.7

ViroCore 1.14.0

• ViroCore 1.14.0 was updated to be compatible with ARCore 1.7

BUILD YOUR AR APP NOW

Viro Developer Shoutouts

We are continually blown away by the apps and experience built by the Viro developer community. We want to share some tweets from community members showcasing their work. A little show of support/appreciation and some inspiration for others:

Tag us in your tweets (@virohq) and show us what you are building.

Just a reminder, you can find more sample code and assets on our main Github pages for each product:

ViroCore Github | ViroReact Github

Posemoji — State of the Art Motion Tracking App and Viro Platform Updates! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

January is another important month for updating our platform to work with the latest React and Android SDKs. We now support Android API 28, the latest GVR, and React 0.57.7.

Latest Release Updates

React Native 0.57.7

Viro now supports the React Native 0.57.7 platform.

Android Target API Level 28 Support

Viro now supports Android Target API level 28. This is needed since as of November 2018. Google play store now does not accept APKs built using any targets older than 26. Along with API level 28, Viro also works with 26 & 27, if needed.

Variable Animation Speed Playback and Time Offset

Using ViroCore, you can now set variable animation speed during playback and also set the time offset to start the animation from any frame. Combine the two to enable cool effects, like freezing an animation in a point in time (as seen in the top image).

…and more!

Check out the release notes for a full list of features:

ViroCore Release Notes | ViroReact Release Notes

Just a reminder, you can find more sample code and assets on our main Github pages for each product:

ViroCore Github | ViroReact Github

React Native 0.57.7 Support, Updated Android SDK Support, Variable Animation Speed, and more! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

November is an important month for performance improvements and greater stability to the Viro Media platform.

We added ARCore 1.5 support, improved battery-life performance and reduced heat, and requested bug fixes.

Latest Release Updates

ARCore 1.5 Support

With ARCore 1.5 support, you can expect:

• Better plane detection/stability
• Support for more Android devices including: OnePlus 6T, Huawei Mate 20, LG Q6, LG Q8, Asus ROG Phone, Samsung Galaxy Tab S3 and more

Improved Battery Life and Performance

ViroReact v2.12.0 and ViroCore v1.12.0 optimizes the platform for improved battery life and overall better performance for your apps. We also plugged some important memory leaks.

Polyline Rendering Fixes

Polylines now appear correctly and thickness is consistent throughout the lines.

Improved Camera Intrinsics

Added unproject/project methods for Camera intrinsics.

Improved Record Video Issues

Fixed discoloration and brightness issues while recording video

…and more!

Check out the release notes for a full list of features:

ViroCore Release Notes | ViroReact Release Notes

Just a reminder, you can find more sample code and assets on our main Github pages for each product:

ViroCore Github | ViroReact Github

ARCore 1.5 Support, Improved Battery-Life Performance, and more! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

September is a milestone month with Apple’s release of iOS 12. The Viro platform now supports ARKit 2.0 which enables new features such as Continuous Image Tracking and 3D Object Detection.

We also added other in demand features such as custom geometry to a scene, ARCore 1.4.0 integration, animated GIF support and more.

ARKit 2.0 Support

This is the update you’ve been waiting for! ARKit 2.0 integration means big features including:

3D Object Detection

Using ViroReact, you can now use the ViroARObjectMarker component to detect actual real-world objects.

Continuous Image Tracking

Seen those cool AR business cards and want to make your own? Viro supports Continuous Image Tracking with ARKit 2.0. This enables your marker to be tracked and followed smoothly as the user moves it around.

Latest Release Updates

Animated GIF Support

Expanding our list of compatible media filetypes, we’re proud to integrate GIF support!

ARCore 1.4.0 Integration

ARCore 1.4.0 integration includes a much needed autofocus update using ViroReact that will help with AR scenes using image recognition.

Support for Augmented Image Database

We added support for Augmented Image Database using ViroCore for image targets.

Render Order Prop

We updated the RenderingOrder prop on ViroReact for most components to enable how you want to occlude nodes in your scene.

Custom Geometry

Create custom defined geometry objects through code using ViroReact or ViroCore.

Check out the release notes for a full list of features:

ViroCore Release Notes | ViroReact Release Notes

Just a reminder, you can find more sample code and assets on our main Github pages for each product:

ViroCore Github | ViroReact Github

iOS ARKit 2, ARCore 1.4.0, Animated GIF Support, and More! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

Viro’s mission is to enable AR/VR everywhere by building the tools developers need to create blockbuster apps. Hollywood releases the biggest blockbusters every summer. This also mean big, creative digital promotion. This month, Viro worked closely with Paramount Pictures to develop the official Mission : Impossible FALLOUT AR experience contained within the new Paramount AR+ app!

Continuing our tradition of top notch developer support, we added requested features to make your AR/VR apps even richer including 3D text, drop shadows, concave polygons, new renderer setting and much more. See Latest Release Updates below for more details.

1. Mission : FALLOUT Impossible AR Experience

Using ViroReact, the official Paramount AR+ app was created to promote current releases such as Mission : Impossible — FALLOUT and future Paramount Pictures movies. Using a phone, users can scan any M:I — FALLOUT poster and make it come to life! A unique mission briefing AR experience and other features were enabled using API’s such as the ViroARImageMarker.

Check it out in the app store:

Paramount AR+ App: iOS | Android

2. Latest Release Updates

More Text Options

3D text, outlined text, and drop shadowed text! Further enhance your labels, titles, etc in your scenes!

• Create 3D text by setting extrusion depth
• Create outlined and drop-shadow text by setting outer stroke
• Improved text rendering speed

New Renderer Settings

New renderer settings enable you to enable or disable features like HDR, PBR, and Shadows.

Concave Polygons

Render concave polygons, and polygons with holes

ARCore 1.3.0 Integration

ARCore 1.3.0 integration with access to Camera intrinsics

Process raw AR image Data w/ ViroCore

New CameraImageListener you can use to process raw AR image data

Android Views in 3D w/ ViroCore

Now you can render 2D UI in your scenes easily. Render Android views in 3D with AndroidViewTexture

Check out the release notes for a full list of features:

ViroCore Release Notes | ViroReact Release Notes

3. Building AR Apps with React Native

Vladimir Novick’s entire talk on building AR Apps using ViroReact at the Chain React 2018 conference is now up. Check it out:

Just a reminder, you can find more sample code and assets on our main Github pages for each product:

ViroCore Github | ViroReact Github

Start Building Your AR Apps Today!

1. Get Setup with ViroReact using our Quickstart Guides (Mac/Linux | Windows)
2. Run through our initial Tutorial AR where we go through how to modify the Hello World Scenes.
3. Check out our AR Tutorial Blog Posts and Code Samples on Github that highlight different use cases:

• How to build an interactive AR app in 5 mins w/ React Native & Viro AR
• How to build AR Portals in 5 mins w/ React Native & Viro AR
• Add Snapchat-like AR Lenses to any app w/ Viro AR in React Native
• How to use Particles to enhance your AR app using ARKit & React Native
• ViroReact Github

We are excited to see all the great AR applications you build using the Viro platform.

Mission : Impossible FALLOUT AR Experience, 3D Text support, and more! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

Since Viro Media launched its developer platform, it has been our mission to make cross-platform AR/VR development simple. Whether it’s building an AR/VR app from the ground up or adding AR/VR as a feature, we’re proud to say Viro has enabled many developers to build some amazing apps.

Here’s some of our favorites:

Paramount AR+ (Mission : Impossible FALLOUT)

Download: Android | iOS

App Description: The Paramount AR+ App is your portal into a world of AR experiences from your favorite Paramount Pictures movies!

• Use the app to scan movie posters in the real world to trigger exclusive AR Experiences
• Play through the AR Experiences to unlock bonus 2D content such as behind-the-scenes footage and cast interviews.
• Unlock 360 content viewable through AR Portals.

Filmr

Download: Android | iOS

App Description: With a clean vertical oriented design, super easy interface and extensive music library, Filmr opens the door to infinite possibilities right in your pocket! Share your stories with #Filmr , your super easy video editor!

Streem

Download: Android | iOS

App Description: Streem instantly connects you to a community of qualified Professionals through on-demand video and Augmented Reality.

Streem uses live video and Augmented Reality to make the remote collaboration experience between you and the home service professional more efficient. Streem also enables the pro to remotely collect information (measurements, serial numbers, etc) as good, if not better, than if they were on site. This means getting quotes and support just went from day/weeks to minutes with Streem.

Food Network in the Kitchen

Download: Android | iOS

App Description: CREATE CRAZY CONFECTIONS USING AUGMENTED REALITY

Access our virtual bakery via the “AR Fun!” link in menu sidebar, then pick a flat surface for your cupcake and decorate with colorful cupcake liners, frosting and wild and wacky cupcake toppers. Add a background frame and sticker to personalize your cupcake, then snap a pic to share something sweet without having to set foot in the kitchen. AR experience powered by Viro Media & ARCore.

Language Drops

Download: Android | iOS

App Description: The Drops team is launching the world’s first language learning practice in Augmented Reality for iOS and Android devices. Drops teaches the fundamental words of 28 languages in augmented reality via beautiful artistic low-poly 3D models!

Entur

Download: Android | iOS

App Description: Norway’s public transport in one app!

Entur gives you travel suggestions from door to door by bus, train, metro, boat and airplane, either if you want to check when the next bus is leaving from your destination, or if you are planning a vacation from Larvik to Lofoten.

The app makes it easy for you to travel with public transport wherever you are in Norway.

Kydy

Download: Android | iOS

App Description: Make friends smile today! Kydy is an app using augmented reality to send talking virtual pets (Kydys) who deliver your voice messages!
Answer daily trivia questions about your friends and tell them why you enjoy their company.
Or, record your own messages or questions and send them via Kydys!
Whether you are missing someone, thankful to have shared a moment together, or curious about what they like, just let them know through Kydy.

arshow.me

Download: Android | iOS

App Description: For retailers and manufacturers! Sell everything with technology of Augmented Reality (AR): furniture, doors, curtains and other interior items.

This application was created to demonstrate the capabilities of arshow.me

Vidi VR

Download: iOS

App Description: Vidi VR is the best way to experience and share life in immersive 3D virtual reality. With this app and a mobile virtual reality viewer you can view high-definition, user generated 3D videos displayed on a virtual screen floating in space.

Community:
Our community is addicted to exploration and the discovery of new experiences that they want to share through this new type of immersive media. Vidi VR makes you feel like you are actually there experiencing these moments together.

LightMeApp (Beta)

Download: Android

App Description: LightMeApp beta is offering a place for everyone to find their friends easily in a fun way. If you have ever felt lost in a big crowd at a festival or a concert, found yourself out of nowhere with a flat tyre or lost your family on the beach, then LightMeApp can be a very handy app for you.
In the first round we await you with the following functions:
- Add your friends and family to your friends list
- Find them on the map
- …and if you are in a big crowd, send them a request and signal to each other with a matching screen
Also coming in July:
- To make it more fun and easy to use: check out our Augmented Reality feature.

Chain React 2018 (AR Badge Experience)

Download: Android |iOS

App Description: Join us at the beautiful Armory in downtown Portland this summer! Chain React: The React Native Conference will consist of multiple talks on React Native given by mobile software engineers at Facebook, Microsoft, and others, on a variety of topics from beginner to expert level. We’re expecting a few hundred attendees and are working hard to put on a great conference.

This app provides the schedule, speakers, locations of the events for the conference, and an AR badge experience.

Start Building Your AR Apps Today!

1. Get Setup with ViroReact using our Quickstart Guides (Mac/Linux | Windows)
2. Run through our initial Tutorial AR where we go through how to modify the Hello World Scenes.
3. Check out our AR Tutorial Blog Posts and Code Samples on Github that highlight different use cases:

• How to build an interactive AR app in 5 mins w/ React Native & Viro AR
• How to build AR Portals in 5 mins w/ React Native & Viro AR
• Add Snapchat-like AR Lenses to any app w/ Viro AR in React Native
• How to use Particles to enhance your AR app using ARKit & React Native
• ViroReact Github

We are excited to see all the great AR applications you build using the Viro platform.

Built with Viro was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

Viro’s mission is to enable AR/VR everywhere by building the tools developers need to create amazing apps. This month, Viro open-sourced our award-winning AR app, Figment AR! Viro also partnered with Infinite Red to create a unique AR Badge experience for Chain React 2018. We take all your feedback seriously so July was a big month for crucial bug fixes, improvements to our renderer, and essential features including GLTF skeletal animation support.

Figment AR — Is now open source! We made a repository containing the entire source code, built using ViroReact and React Native, for Viro Media’s award winning Figment AR App.

GLTF skeletal animation support means not only do you have access to the “JPEG of 3D” formats, but now you can have them animated to make your scenes even more alive!

Sharper text means any text placed in your scenes will always be sharp and way more readable.

FrameListener support means ViroCore now has a Callback interface for listening to frame events. FrameListener can be used to receive a callback just before each frame is rendered.

1. Figment AR — Complete Open Source App

Rejoice! Built using ViroReact and React Native, we made our award winning Figment AR App open source and it’s now available for download! It is a single codebase that runs on both iOS and Android, enabling fast cross-platform development. We’re super excited to see what you build from it!

Read more about it on our Blog post:

Open Sourcing Figment AR

You can find the entire source code on our Github:

Figment AR Complete Open Source App

2. Latest Release Updates

GLTF Skeletal Animation Support

We added GLTF animation support to further enrich your AR scenes with animated 3D objects such as flying drones or dancing characters.

Sharper Text

Pixelation begone! Text placed in your scenes are now sharp and much more legible.

FrameListener

ViroCore now has a Callback interface for listening to frame events. FrameListener can be used to receive a callback just before each frame is rendered.

Check out the release notes for a full list of features:

ViroCore Release Notes | ViroReact Release Notes

3. Viro @ Chain React 2018

We were a proud sponsor and partner of one of the best React Native Conferences in the US: Chain React 2018 in Portland, OR!

Here’s some conference highlights:

Chain React AR Badge Experience

Partnering with Infinite Red, an AR experience built using ViroReact that Attendees could use to view the exhibit hall like never before!

The full Chain React 2018 Conference app code is available for free at Infinite Red’s Github! The code includes the AR portion that brings any image marker to life.

Chain React 2018 App Github

Building AR Apps with React Native

Packed theatre! React Native Evangelist Vladimir Novick gave an entertaining talk on how to build a great AR app using Viro and React Native.

You can download the slides as well as code for the demo here.

Viro Media Booth

Huge thanks to the many React Native developers that stopped by. We loved answering questions and sharing the powerful AR/VR apps you can build using Viro.

Start Building Your AR Apps Today!

1. Get Setup with ViroReact using our Quickstart Guides (Mac/Linux | Windows)
2. Run through our initial Tutorial AR where we go through how to modify the Hello World Scenes.
3. Check out our AR Tutorial Blog Posts and Code Samples on Github that highlight different use cases:

• How to build an interactive AR app in 5 mins w/ React Native & Viro AR
• How to build AR Portals in 5 mins w/ React Native & Viro AR
• Add Snapchat-like AR Lenses to any app w/ Viro AR in React Native
• How to use Particles to enhance your AR app using ARKit & React Native
• ViroReact Github

We are excited to see all the great AR applications you build using the Viro platform.

Open Sourcing Figment AR, a conference, and GLTF skeletal animation support! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

Viro’s mission is to enable AR/VR everywhere by building the tools developers need to create amazing apps. May was another big month for Viro as we continued to work hard to integrate the latest and greatest features including ARCore 1.2 and GLTF support.

ARCore 1.2 support means many new improvements and features: improved image detection, vertical plane detection, and more!

GLTF support means access to over 100,000 models currently available for free download at sites like Sketchfab.com. Now it’s even easier to import high quality models into your scenes!

1. ARCore 1.2 Support

We updated the Viro platform with a host of new features including:

• Improved image detection
• Vertical plane detection
• Much wider range of supported devices
• Chroma-key filtering enabling hologram videos in AR

… and much much more.

2. GLTF Support

We added GLTF support so you now have access to a huge library of AR/VR compatible 3D models on the web. glTF (GL Transmission Format) is a file format for 3D scenes and models using the JSON standard. It is described by its creators as the “JPEG of 3D.”

Check out the release notes for a full list of features:

ViroCore Release Notes | ViroReact Release Notes

3. Viro @ AWE 2018

It was our 3rd year and every year it gets bigger and better. We had a great time meeting new and current developers and giving a talk. Here’s some highlights:

Beyond Novelty: Advanced AR Using React Native

Our Chief Architect, Raj Advani gave a talk on how to build a great AR app using Viro. You can watch it here.

Viro Media Booth

Our friendly team ready to show some slick AR demos and answer any questions. Many thanks to those that stopped by!

4. Image Recognition Code Samples

Just a reminder: To kickstart your AR application development using image recognition, we created a Tesla Product Showcase demo. Additionally, we made the code and assets available to all our developer in our Github Repository.

Logo/Product Showcase Demo — Teslas for Everyone

Tesla — ViroCore (Java) | Tesla — ViroReact (React Native)

You can find more sample code and assets on our main Github pages for each product:

ViroCore Github | ViroReact Github

Start Building Your AR Apps Today!

1. Get Setup with ViroReact using our Quickstart Guides (Mac/Linux | Windows)
2. Run through our initial Tutorial AR where we go through how to modify the Hello World Scenes.
3. Check out our AR Tutorial Blog Posts and Code Samples on Github that highlight different use cases:

• How to build an interactive AR app in 5 mins w/ React Native & Viro AR
• How to build AR Portals in 5 mins w/ React Native & Viro AR
• Add Snapchat-like AR Lenses to any app w/ Viro AR in React Native
• How to use Particles to enhance your AR app using ARKit & React Native
• ViroReact Github

We are excited to see all the great AR applications you build using the Viro platform.

New Release (ViroReact 2.7 / ViroCore 1.7) -> ARCore 1.2 Features, GLTF Support and more! was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

Step by Step guide to exporting PBR textured 3D models for use in AR/VR

Here’s a handy guide on how to properly export PBR (physically based rendering) textured models and import them successfully into your AR/VR projects. I’ll show you some best practices and go over my PBR workflow.

If you want to learn the basics of 3D modeling or import a 3D object using traditional materials, I suggest checking out my previous guide here.

Software

This is a list of what I currently use to produce and export 3D models with PBR materials. If you prefer other software packages, by all means use what you’re comfortable with. Just follow the guide to make sure you’re exporting the 3D model correctly.

Autodesk Maya 2018 (Free Trial) — Industry standard 3D modeling software for many years but no longer the king of the hill. There are many other software packages I use depending on the type of model I make, but this has a great exporting tool (Game Exporter) which has made it easy for me to export complex FBX models that work well with rendering platforms.

Substance Painter (Free Trial) — The most widely used PBR creation tool with lots of knobs and limitless controls of your textures. There’s plenty of resources to get started quickly.

Viro Media (Free) — developer platform for building AR/VR applications. Great tool for visualizing assets in AR or VR and for iterative AR/VR design.

Best Practices

It doesn’t matter what you use to create or get your 3D model, it just needs to be optimized for real-time use and exported to an OBJ or FBX format, the most widely supported formats. I prefer exporting to FBX, because you can embed multiple animations and yields the most consistent and predictable results.

3D Resources

If you’re not creating a 3D model from scratch, there are several great sites that have quality realtime models to download:

www.sketchfab.com | www.turbosquid.com | www.poly.google.com|www.free3d.com | www.cgtrader.com

I also frequently post free 3D assets for use in AR/VR apps here -> Viro 3D Assets

PBR Texture Specs

Metallic Roughness Shader — The most commonly used PBR shader is Metallic Roughness. Make sure when you create a PBR template, set it to Metallic Roughness and not Specular Glossiness.

Size Efficiency — Since the models will be loaded into mobile AR/VR, texture memory will be very limited compared to desktops. PBR uses more textures than traditional texturing so don’t create 2k textures for every object and see where you can downsize dimensions.

Supported PBR Textures — Using Viro as the renderer, current supported textures are Albedo, Normal, Metallic, Roughness, and AO (Ambient Occlusion). Support for Height and Emissive is coming soon.

PBR Workflow

For this guide, I created a quick sci-fi cylinder. You can grab it here.

Substance Painter Settings

• When first creating a Substance project, make sure PBR — Metallic Roughness (allegorithmic) is selected in the Template dropdown
• Then choose the mesh that will be worked on
• Normal map format — OpenGL
• Document resolution — I usually work on 2048 and since Painter is non-destructive, I can up-res or down-res the textures when I export
• If there’s no pre-made textures to import, hit OK and begin painting PBR textures

Export Textures

After creating my PBR textures within Painter, it’s now time to export them.

• Go to File > Export Textures
• The Export Document popup will appear. Define where textures should be saved to in the top button
• Make sure the Config has Document Channels + Normal + AO selected. This is selected because the default choice does not generate a separate AO texture.
• Under Texture sets, select document size. In this case, I changed it to 1024x1024
• Hit Export and find textures in the defined directory

Maya Export

• Open Maya then open the cylinder mesh. At this point there’s no textures assigned, so we need to get them defined
• Go to Windows > Rendering Editors > Hypershade
• Within the Hypershade window, under Create, I select Stingray PBS. Stingray PBS is a very popular PBR shader that works well with rendering engines.

Important: Make sure your material starts with the prefix: “StingrayPBS” for it to appear properly within the Viro Renderer.

• Under the Stingray PBS Property Editor > Attributes, select all the maps that will be used. In this case, select Use Color Map, Use Normal Map, Use Metallic Map, Use Roughness Map, Use AO Map.

• Then, scroll down and assign all the maps under Textures. Use *_Normal_OpenGL for normal map and disregard height map for this guide. Once all the textures are assigned, the cylinder in the viewport should appear properly w/ all its textures
• Now the mesh is ready for export. Go to File > Game Exporter

• Under Geometry, check Smoothing Groups and leave the other choices blank unless otherwise needed
• Under Settings, make sure Export to Single File is selected (unless you’re exporting multiple objects), Up Axis set to to Y and Embed Media is checked. Under FBX version, leave it on FBX 2018
• Under Path, set directory to save to in Path: and name the exported FBX underneath
• Click Export when ready! The 3D object should now be ready for use.

Visualizing 3D Assets AR/VR

Viro Media has a PBR guide to help you import your PBR-enabled object into a AR/VR renderer -> ViroCore PBR Guide | ViroReact PBR Guide

Asset Pipeline: Exporting PBR Textured 3D Models for AR/VR was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.

Step by Step guide to animating 3D assets for use in AR/VR

Here’s a handy guide on how to add animations to 3D characters and import them successfully into your AR/VR projects. I’ll show you some best practices and go over my 3D animation process.

If you want to learn the basics of 3D modeling or import just a static 3D object, I suggest checking out my previous guide here.

Software

This is a list of what I currently use to produce animated 3D characters. If you prefer other software packages, by all means use what you’re comfortable with. Just follow the guide to make sure you’re exporting the 3D model correctly.

Autodesk Maya (Free Trial) — Industry standard 3D modeling software for many years but no longer the king of the hill. There are many other software packages I use depending on the type of model I make, but this has a great exporting tool (Game Exporter) which has made it easy for me to export animated FBX characters that work well with rendering platforms.

Fuse (Free for Adobe CC members) — Quickly Design custom 3D characters using sets of pre-made components.

Pixelogic Zbrush ($795) — Industry standard 3D sculpting tool I use to create a high-poly base mesh for characters or complex objects.

FBX Review (Free) — A lightweight standalone tool that lets you view your exported FBX files. If it shows up properly here, it will show up properly in your rendering platform.

Mixamo (Free) — Quickly rig and animate your character for free using just your browser. Manually rigging a character is tough, time-consuming, and requires many hours of practice to get decent. Luckily, Adobe provides Mixamo, and with just a few clicks, does all the hard work for you. Not only does it rig, but you can apply one of many pre-made animations to your character. Note: Mixamo only works with standing bipedal humanoid models. Quadrupeds and snakes will not rig.

Viro Media (Free) — developer platform for building AR/VR applications. Great tool for visualizing assets in AR or VR and for iterative AR/VR design. (Detailed instructions below)

Best Practices

It doesn’t matter what you use to create or get your 3D character, it just needs to be optimized for real-time use and exported to an OBJ or FBX format, the most widely supported formats. I prefer exporting to FBX, because you can embed multiple animations and yields the most consistent and predictable results.

3D Resources

If you’re not creating a 3D animated character from scratch, there are several great sites that have quality realtime characters to download:

www.sketchfab.com | www.turbosquid.com | www.poly.google.com|www.free3d.com | www.cgtrader.com | www.gumroad.com

I also frequently post free 3D assets for use in AR/VR apps here -> Viro 3D Assets

Real-Time Specs

• Polycount — I like to make sure my character model is not overly tessellated and running over 50k polys. On mobile, an animated character that is over 200k polys will most likely effect framerate and limit how much you can put in your scene.
• Texture Maps — Make sure it’s 1 texture per object. I’ve ran into issues when I assigned multiple textures to 1 object. For instance, if your character has separate texture maps for the body and head, make sure they are separate objects and not combined into 1 when exporting. Make sure texture maps are in .PNG or .JPG format.
• Skinning Skeleton— If manually binding skin to a skeleton, make sure max influences is set no higher than 4.
• T-Pose — Make sure your character is in the standard T-Pose. When importing your character into Mixamo, I found this resulted in the most predictable results.

Create or Download 3D Character

For this guide, I created a Cartoon Turkey as our sample asset. You can grab it here. (Want the Maya file? Grab it here.)

When creating a character from scratch, I start with sculpting in Zbrush, then use Geometry>ZRemesher to quickly retopologize and create a low-poly real-time version. This isn’t the most efficient way to create a low-poly character, but when you’re pressed for time, it provides fast results and generates nice, evenly-spaced quad-based topology. I then follow these steps to UV Unwrap my low-poly model, bake, and paint textures.

When purchasing/downloading a pre-made model from sites like Turbosquid, I usually filter my results to “Real-Time” and “10K to 50K” polys. After downloading the model, I import the model into Maya to double check and make changes as needed to follow the real-time specs defined here. I then export the static T-pose character as a .FBX.

Note: If your model is already rigged, for this tutorial, I suggest detaching the skin off the skeleton and making sure the character is in a T-pose.

Rig and Animate Character

Now that my turkey character model is ready for rigging, I use Mixamo.

1. Go to www.mixamo.com. Login with your Adobe CC account.
2. Upload .FBX character model and once loaded, it will display the Auto-Rigger tool.
3. Drag and place the markers on the appropriate spots on your character then hit “Next.”
4. It will take a couple min, but if your character is successfully rigged, you’ll be able to see it animating within the same window. Hit “Next” if it looks good.
5. You can now apply any pre-made animation loop to your newly rigged character. I wanted the turkey to dance, so I filtered the results to show only dancing animations.
6. Adjust animation using sliders in the right menu. For instance, the hands were clipping into the turkey’s body so I raised character arm-space.
7. When you find animation you want, hit the “Download” button on the right menu bar. I want to add 1 more idle animation to my character, so I download that as well. You browser will download the animated character as a .FBX file.

Set up Multiple Animations in 1 FBX

I want to have multiple animations for my character model: 1 dance, and 1 idle. I need to set them up both in 1 .FBX file. How do I do this? This is the easiest way that worked for me:

1. First, I import the .FBX with the dancing animation into Maya.
2. Then I select all the joints. Edit>Select All by Type>Joints. You should see red keyframes appear on the bottom timeline. Select all the keyframes, right click then click “Copy.” Note the keyframe length of the animation.
3. Then, I open the .FBX with the idle animation in Maya. This will completely replace the scene.
4. Next, I need to define where the idle animation starts and ends when I export. Open Game Exporter: File>Game Exporter.
5. Click on “Animation Clips” tab.
6. Click on the green plus icon. There should be open fields for Clip Name, Start, End. I label the field under “Clip Name” to 01. Then I fill in 0 under “start” and 208 under “End,” because that’s when the idle animation ends.
7. Next, I click on the green plus icon underneath the fields. This adds a new row to fill out for my dancing animation.
8. I label the new “Clip Name” to 02. Then, I define the starting keyframe of the dancing animation. I like to add a little padding between both, so I start it at 215. For “End,” since I noted the length of the dancing animation in step 2, I calculated it to end at 502.
9. Next, click on the film strip icon next to 502. This will focus only on the keyframe segment you defined for animation 02.
10. Next, I select all the turkey’s joints again: Edit>Select All by Type>Joints. With all the joints selected, I click on frame 215 in the bottom timeline. Right click>Paste>Paste. This will apply the dancing keyframes onto the same bones to this clip.
11. If you pasted the keyframes correctly, you should have both animation clips in 1 file now. Click on the filmstrip icon next to each clip to focus on each animation and hit play to view them.

Export Character

Now that you have both animations in 1 file, it’s time to export to .FBX.

1. Under “Clip Settings,” Make sure “Bake Animation” is checked.
2. Under “Clip Settings,” click on the drop down and choose “Save Multiple Clips to Single File.”
3. Choose directory and save file to under “Path.” I name my file turkey man_anim
4. Click “Export” button. A popup should confirm successful export.

Test Character in FBX Review

I like to verify my exported models in FBX Review. It’s a quick way to check the model is displaying and runs animations correctly.

1. Open the newly exported .FBX model.
2. It should default to clip 01. Click play button on the bottom controls to play animation.
3. To switch to clip 02, click on top right dropdown to select 02. Click play button to watch second clip. If both are playing properly, congrats, your character is ready to be used for your AR/VR app!

Visualizing 3D Assets AR/VR

This next section shows you how to view your assets in AR using the Viro platform (To view your assets in VR using Viro, follow the steps below starting with HelloWorldScene.js rather than HelloWorldSceneAR.js). While Viro is a platform for developers, it can also be used by designers and creatives to visualize 3D assets and iterate on ideas. Set up is simple and the steps listed below are the same one’s I use to view 3D characters in AR/VR as a designer.

Setting up Viro

Use our Quick Start guides to get setup with Viro in minutes. The Viro platform is free with no limits on distribution. Sign up to get your API key and start developing AR apps today:

• Mac/Linux Quick Start
• Windows Quick Start

You will also need either an iOS ARKit enabled device or an Android ARCore enabled device.

Java developer? Get started here.

Once you complete the setup step and see Hello World on your device, you should move onto the next section to display your 3D assets in AR.

Displaying 3D Assets in Viro

We will be using our Dancing Turkey model for this next section to simplify the steps.

First you need to convert our FBX files in VRX format by using the ViroFBX script. The ViroFBX script can found in your project’s bin directory.

Copy your turkeyman_anim.fbx and the associated texture files into a folder and name the folder -> turkeyman_anim. Copy the folder into your bin folder which is located within the ViroSample folder.

Open Terminal on your Mac and go to your bin directory. I setup Viro in a folder called “WorkSpace” so I would enter the command below (replace WorkSpace with your root folder in the command below):

cd WorkSpace/ViroSample/bin

Once you are at your bin directory, enter the command below.

./ViroFBX turkeyman_anim/turkeyman_anim.fbx turkeyman_anim/turkeyman_anim.vrx

Once the script is completed, you should see a file called “turkeyman_anim.vrx” in your turkeyman_anim folder in your bin directory.

Once the VRX file is created, it can be loaded into an application with <Viro3DObject>. Copy your turkeyman_anim folder and paste it into the res folder located at /ViroSample/js.

To see your animated character in AR, open your HelloWorldSceneAR.js file and replace the text in your HelloWorldSceneAR.js with the code below.

Save your HelloWorldSceneAR.js file. Shake your device to bring up the menu and tap “Reload”. You should see the Dancing Turkey in front of you below “Hello World”. We added a shadow to the character and enabled drag so you can move the character around with your finger. You can also tap on the turkey to pause/unpause the animation.

To see your own assets in AR:

1. Convert your FBX file into VRX format.
2. Place your VRX assets in the correct folder/path.
3. Update your code for the new asset. In the example above, you would change “turkeyman_anim.vrx” to your vrx file name and change the texture names (lines 49–52).
4. Make sure the name of your animation has been updated in line 57. The dancing animation for turkeyman is called “02”
5. Save your file and reload to see your 3D asset in AR.

Questions? Problems? Need extra help importing your 3D object? Send me an email. I’ll be glad to help.

Asset Pipeline: Animating 3D Characters for AR/VR was originally published in VR & AR App Development Blog — Viro Media on Medium, where people are continuing the conversation by highlighting and responding to this story.