Mobile and AR

Mobile Browser Viewing

Any published ShapeBox scene is accessible on iOS and Android via the device's browser. No app installation is needed.

Recommended browsers

Touch controls

Editor on mobile

The editor is accessible on mobile browsers but works best on tablets with a keyboard/stylus. On phones, use the editor for quick reviews and minor adjustments — complex editing is not recommended.

---

Augmented Reality (AR)

ShapeBox supports WebXR AR mode on compatible devices. In AR mode, the scene is rendered on top of the real-world camera feed, letting viewers place and interact with your 3D content in their physical environment.

Device requirements

Check if your Android device supports ARCore at developers.google.com/ar/devices.

Entering AR mode

1. Open a published ShapeBox scene in a compatible mobile browser
2. Tap the AR button in the bottom-right of the viewer (only shown on AR-capable devices)
3. Grant camera permission when prompted
4. Point the camera at a flat surface and wait for the surface to be detected
5. Tap to place the scene on the detected surface
6. Walk around it, pinch to scale, or tap interactive elements

Designing AR-Ready Scenes

• Ground alignment: The scene root is placed on the detected floor/surface. Place key objects near y=0 in your scene.
• Scale: Real-world scale (1 unit = 1 meter) is used in AR. Design at realistic proportions.
• Environment lighting: In AR, scene lighting is replaced by the device's ambient lighting estimate for realistic blending.
• Shadow catcher: Add a transparent shadow-catcher plane at y=0 so objects cast realistic shadows on real surfaces.
• File size: Mobile devices have limited memory. Keep total scene assets under 50 MB for reliable AR performance.

USDZ for iOS AR Quick Look

In addition to WebXR AR, you can share scenes as USDZ files for iOS AR Quick Look. Recipients can open the link in iOS Safari and see the object placed in their room — no browser interaction required.

Export USDZ from File → Export → USDZ (Pro plan required). See the Export guide for details.

AR Interactions via Scripting

You can create AR-specific behaviors using the Scripting API:

onSceneReady(({ device }) => {
  if (device.ar.isActive) {
    // Hide elements that shouldn't show in AR
    getObject('skybox').visible = false
  }

  device.ar.onPlaced(() => {
    // Play a sound when the user places the scene
    getObject('placement-sound').play()
  })
})