Welcome to the AR Production documentation server

Sketch 4

Reference Documentation for Field / AR.

The Cookbook for Field / AR.

Box of Rain tutorial.

Notes on Unity and Facebook AR Studio.

Sketch 2 & 3

How to install Field2 on a mac

Download link for MacOS Field2 (alpha.16d)

  1. Decompress and move out of the Downloads folder (perhaps, say, to your Desktop)
  2. Right-click and select ‘open’ (rather than double-clicking on the .app). This will give you an opportunity to consent to running this strange, unauthorized app on your computer.

How to install Field2 on Windows

Download link for Win10 Field2 (alpha.16)

  1. Extract All of the archive
  2. Double click on field2.bat

Welcome for Sketch 2 here.

Welcome for Sketch 3 here.

Sketch 1

Direct links:

Brief how-to to put a photograph on a plane in (AR) space:

For Sketch 1 we’ll be working with a specially hacked ‘AR’ version of the three.js editor. Here’s the desktop version of it in action:

Three.js is an open source web-browser based library for drawing and interacting with 3d objects and animations. We’ve (gently) modified it to work with our AR apps and frameworks with the assumption that once things settle down this work will either be contributed back to the project or it will be made redundant.

Steps & notes in the above video:

  1. Menu ‘add’ a ‘plane’ (this will put a plane somewhere near the ‘origin’. In an ambient AR space that might not be where you expect — look around)
  2. Select the object from the list on the right, select the ‘material’ tab. Consider giving the object a name.
  3. Change the material to meshbasicmaterial — this is a material that doesn’t simulate how light interacts with it. This is what you want, because there are no lights in your scene. A textured unlit object is just as black as an untextured unlit object!
  4. Click on the ‘map’ box to select a file. Make sure the ‘map’ checkmark is set. You should see your photograph. iOS will have (severe) trouble taking photographs while doing AR (since both things use the camera) – plan accordingly.
  5. If the UI layout gets disturbed, rotate your camera back and forth to reset it.
  6. Edit the position, rotation and scale of you geometry with your finger and the tool pallet below.
  7. Consider changing the opacity of the object (after marking it as ‘transparent’); consider naming your object.
  8. In the phone versions there’s a disclosure box in the bottom left of the screen. Pressing this hides everything else so you can witness your creation at full scale.

How to run AR / WebXR code on your phone

The instructions are different for iOS and Android phones. Ground rules: 1. prepare for failure — anything from old phones, old operating systems, bad light to just plain bad luck might stop code from running correctly on your phone — prepare to team up with somebody who has this working, or check out the Android phone from the Logan equipment cage. 2. when failure occurs let us know — write a message on canvas, keep detailed notes about what you’ve tried and the kind of phone you are using.

On final note, turn on the debugging option from the URL bar on the screen (using the ‘graphic equalizer’ button). This will let you see the markers and the detected planes. If there are no planes visible, ARKit / ARCore doesn’t understand the map of the environment enough to track the camera. Give it time, or change your carpet.

Sketch 1 [iOS]

requires the use of a custom iOS app built specifically for this class (currently called Field_AR_1). This app bridges the gap between Apple’s proprietary ARKit and “the open web” — albeit in this case we’re only allowed to get as far as this very particular custom web-browser. This maneuver brings our situation for iOS much closer to the situation that exists on Android — a partial, work-in-progress implementation of the “WebXR” standard — and, hopefully, takes us to a preview of some future: where the same AR code can run on normal web-browsers across all devices.

Getting the app [iOS]

Consider for a moment that this is 1/5th of the effort required to submit something to Apple for testing. Remember to appreciate the “the open web”.

To get this iOS app on your phone is a little involved. There’s a two stage process. First, send the apple ID you use for your phone to Marc. This will allow the generation of the first invitation — to add this ID to Apple’s list of who is in the class. You’ll get this invitation in your inbox (the one associated with your Apple ID). Accept this invitation — welcome to the class, again. Next, you’ll be invited to download our app itself through an intermediate app (!) called TestFlight. This app is made by Apple for the express reason of letting people test apps that might not be ready to go through the actual app store. Search for and download TestFlight from the iOS App store, then accept the second invitation in your inbox to become a ‘tester’ of Field_AR_1. Finally, you’ll have the new app on your home screen. Opening it should bring you to this page.

Sketch 1 [Android]

The situation for Android is also complex, in a different way.

  1. Firstly you’ll want to make sure that you are running the most recent version of Android. Then two steps: First download ‘Chrome Dev’ (this is a leading edge version of Chrome). Then, in this browser, navigate to “chrome://flags”. Search for ‘WebXR’ and set to ‘enabled’ the ‘WebXR Device API’ as well as any other WebXR related flags you find. Then reboot your browser. Now you have the latest browser on your phone, and you’ve given permission to your phone to use the latest WebXR extensions (which are still very much in flux). You might be prompted to upgrade various parts of your OS when browsing the Sketch website (or, your phone / OS combination might be deemed ‘too old’). Google’s official compatibility guide is here.

  2. The above instructions are sufficient for Sketch 1; but for Sketch 2 you’ll need an extra step. Chrome will only admit to having AR capabilities to webpages served securely via https. This poses a problem for Field, because we’re talking to a webpage dynamically. To square this circle we need a bridge that talks https to our cell-phones but plain old http to Field. One such bridge that works really well is https://ngrok.com/ . Sign up (for the free tier!), download it, install it, and then open a terminal and type:

ngrok http 8090

You’ll see a window like:

You can leave that running during all of your work on your computer. The ip-address you want to type into your Chrome Dev webpage is the one that’s prefixed with https://. So, for sketch 2, given the above, you’d type: https://b0ee8d8d.ngrok.io/ar.html. We’ll be working through any issues that these instructions present in the computer labs over the next few days.

A (more) complete description of the software layer-cake

For iOS we have some JavaScript code that incorporates and uses three.js — an open source browser library for drawing 3d objects — running inside a version of Apple’s Safari that has been wrapped and extended by Field_AR_1 to connect a preliminary version of WebXR to the functionality offered by Apple’s ARKit. This app is based on a fixed and revised version of work initiated by Mozilla here. For Android there’s a similar story only Google’s latest web-browser contains Google’s latest version of WebXR which in turn is connected to Google’s ARCore. Slightly different original JavaScript code is required to connect all of these things together.