3D augmented reality on the web, for everyone

Google is here to save the day.

Google wants to popularize 3D on the web and on Android devices. The company is building a strong base in VR with Daydream and also the development of tools and devices falls into the realm of Google and Android. The company predicts there will be hundreds of millions of Android and iOS devices that are able to provide augmented reality experiences. Given that, Google wants to ensure there are plenty of apps for AR.

Google is recruiting developers for AR with its introduction of prototypes for AR components. In a recent blog post, Google unveiled Article, a prototype AR viewer for all browsers, which gives developers tools for developing their own applications and user interface tips Google has discovered in its own development.

New 3D AR viewer from Google called Article. (Source: Google)

Article is a 3D model viewer for browsers. If Article is loaded on a desktop browser with a 3D model, it will display it as an interactive image one can drag to rotate. When placed in a webpage, the model can be animated to as a user scrolls to indicate it’s an interactive 3D model.

On a mobile device the experience is more sophisticated due to built-in cameras and sensors. “The unique power of AR is to blend digital content with the real world,” said Reza Ali and Josh Carpenter, who work on user experience on Google’s Daydream WebXR team. “So we can, for example, surf the web, find a model, place it in our room to see just how large it truly is, and physically walk around it.”

You can see how this would work in action here.

On a mobile device users touch and drag to rotate the model, or drag with two fingers to zoom in. The Google team built the model viewer with Three.js, which makes the low-level power of WebGL more accessible to developers, and it has a large community of examples, documentation and Stack Overflow answers to help ease learning curves.

To ensure smooth interactions and animations, they finessed factors that contribute to performance:

  • Using a low polygon-count model;
  • Carefully controlling the number of lights in the scene;
  • Decreasing shadow resolution when on mobile devices;
  • Rendering the emulator UI (discussed below) using shaders that utilize signed distance functions to render their effects at infinite resolution in an efficient manner.

To accelerate iteration times, they created a desktop AR emulator to test user experience (UX) changes on desktop Chrome. Before the emulator, each change—no matter how minor—had to be loaded onto a connected mobile device, taking upwards of 10 seconds for each build-push-reload cycle. With the emulator, developers can instead preview these tweaks on desktop almost instantly, and then push to device only when needed. The emulator is included in the Article project repo.

Google, like many of us, thinks there’s vast potential for AR on the web—it could be used in shopping, education, entertainment, and more. Google says Article is just one in a series of prototypes, and there’s so much left to explore—from using light estimation to more seamlessly blend 3D objects with the real world, to adding diegetic UI annotations to specific positions on the model. Mobile AR on the web is incredibly fun right now because there’s a lot to be discovered. If you’d like to learn more about their experimental browsers and get started creating your own prototypes visit Google’s devsite.