MetaMask / MetaMask/metamask-mobile

Support for WebXR in browser

Open
#3,531 3 comments 1 reaction 0 assignees View on GitHub
community feature-request
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

**Describe the usability problem**

WebXR is not supported within the metamask browser. This is not necessarily a bug, but rather a potential enhancement.

**Expected behavior**

[WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API) is a 3D rendering API supporting AR/VR in the browser. This is an especially intuitive feature on mobile devices, whose modern models have robust AR/VR support.

The potential use case is for a web3 connected application to be able to render 3D models in AR. Due to the web3 dependency, using the application within a Dapp browser such as metamask is a requirement.

The easiest method of implementing WebXR AR rendering is with Google's [model-viewer module](https://modelviewer.dev/). Implementing this module in an application accessed by the metamask browser will show that the 3D model can be rendered on the page (using webGL), but the associated AR functionality for the viewer does not work in the metamask browser.

The expected functionality can be seen by running the same application in a regular chrome mobile browser (on Android preferably, as iOS also has some issues with WebXR - though model-viewer does support iOS AR as well): the 3D model can be rendered in AR on the mobile device.

In fact, [this example](https://modelviewer.dev/examples/augmentedreality/) from Google's model-viewer docs is a great illustration of the functionality. Using that example in chrome on Android yields the expected result, and in metamask does not.

---

I plan on debugging this functionality, as the model-viewer does detect AR capabilities but is unable to launch WebXR. I've just recent found this repository, so I plan on building and debugging the app at some point in the near future. I figured I'd get this issue in and update it along the way, and see if anyone else may be interested in the same functionality.

------------------------------------------------------------------------------------------------------
_filled out after submission_

**User impact | Usage frequency | Feasibility scores**
_How important is this to the user, what the user wants to accomplish | Daily, weekly, monthly | Small, medium, large_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the model-viewer augmented-reality example in the MetaMask browser and compare it with Chrome on Android, as described in the issue. Investigate how the mobile browser handles WebXR launch and use the linked WebXR and model-viewer documentation as references. Done means the example can launch AR from MetaMask on a supported Android device.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
ar-vr-xr, mobile-dev, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.