Viewing 3D models in AR from an Android browser

Scene Viewer is an immersive viewer that enables AR experiences from your website. It lets Android mobile device users easily place, view, and interact with web-hosted 3D models in their environment.

To do this, all a user needs is an Android device that has ARCore 1.9 or later. Most Android browsers are supported, and no programmatic integration with a browser is necessary -- only properly-formatted links on a web page.

Using <model-viewer> to launch Scene Viewer

You can enable Scene Viewer from your website by including the <model-viewer> web component with the ar attribute.

<model-viewer ar alt="A 3D model of an astronaut." src="Astronaut.gltf"></model-viewer>

File requirements for models

Scene Viewer has the following support and limitations for models.

File format supportglTF 2.0/glb, using these extensions:
  • KHR_materials_unlit
  • KHR_texture_transform
  • Looping skeletal animation
  • Looping rigid animation
  • Looping transform animation
The animation will be played on loop. If the glTF file contains multiple animations, Scene Viewer plays only the first animation.
Recommended limits The overall performance of assets depends on setting constraints and making tradeoffs between vertices, materials, texture resolution, mesh per material, and other factors. Use the following guidelines to optimize what works best for your assets.
  • Number of triangles: The recommended limit is 100,000 triangles, but targeting the lowest number will maintain high performance in Scene Viewer. 30,000 to 50,000 is an ideal range.
  • Number of materials: The recommended limit is 10 materials, two of which can be alpha. Target the lowest number possible to keep the asset performing well.
  • Mesh per material: 1
  • Max texture resolution: 2048 × 2048
  • Bone (including non-weighted joints): 254 (hard limit)
  • Bone weights per vertex limit: 4 (hard limit)
  • UV: 1 UV per mesh (hard limit)
  • Model size: 10 MB (bigger models may result in poor user experience)
Shadow supportHard shadows are automatically rendered by Scene Viewer when placing an object, so we recommend against baking shadows into your model.
Texture support
  • PNG format: PNG-24, indexed PNG-8. JPGs are preferred when there is no transparency to reduce for size.
  • Color space: sRGB
File loadingHTTPS
  • Axis: right-handed, with these properties:
    • +X is right
    • +Y is up
    • -Z points forward from the origin (in the words, the "front" of an asset should be facing +Z)
  • Scale: 1 unit = 1 meter (as defined by the glTF specification to facilitate excellent user experiences)

How do users experience Scene Viewer?

When viewed an ARCore-supported Android device, a website that includes the <model-viewer> component with the ar attribute looks like this example:

The user would follow these steps to insert and interact with the web-based 3D model in their environment.

  1. The user taps the View in AR button. This opens Scene Viewer, with the model centered on the screen and slowly turning in place.

    The user can drag around the model to rotate it, or pinch and spread it to resize it.

  2. The user taps View in your space. This switches the view to the live camera feed. The UI asks the user to move the device around to detect feature points and planes.

    After determining a horizontal surface in the user's space, ARCore places the model on that surface. The size of the model is determined by the glTF file, and is clamped to a range between 0.25 and 6 meters, inclusive. In other words, if the value falls outside the required range, it will snap to the closest minimum or maximum value within that range.

  3. Just as the user could do in the <model-viewer> and Scene Viewer views, they can rotate, reposition, and resize the model.

    As the user resizes the model, the percentage of its size relative to the actual size is displayed.

  4. If the user wants to exit fullscreen, they can tap the X in the top left of the live camera view.