XRPractices
Published in

XRPractices

“Try anything in your space” — WebXR

Today’s websites are designed for first for mobile and then for other, and it is getting important to bring mobile XR functionality into your website. Google’s scene viewer is bringing WebXR for mass adoption. Theoretically any 3D model can be tried in your space, and you can easily built AR experience for your website.

Google Scene Viewer

Google Model Editor

<model-viewer bounds="tight" src="Astronaut.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls environment-image="neutral" poster="poster.webp" shadow-intensity="1">
<
div class="progress-bar hide" slot="progress-bar">
<
div class="update-bar"></div>
</
div>
<
button slot="ar-button" id="ar-button">
View in your space
</button>
<
div id="ar-prompt">
<
img src="ar_hand_prompt.png">
</
div>
</
model-viewer>

Launching Scene Viewer with a URL

Building Customer Model Viewer

Intercept the URL

...
myWebView = new WebView(this);
myWebView.setWebViewClient(new WebViewClient() {
public boolean
shouldOverrideUrlLoading(WebView view, String url) {
Uri uri = Uri.parse(url);
if (url.startsWith("intent://arvr.google.com/scene-viewer")) {
String filePath = uri.getQueryParameter("file");
responseCallback.OnSuccess(filePath);
return true;
}
view.loadUrl(url);
return true;
}
})
;
...

Download the model

private IEnumerator GetFileRequest(string url, Action<UnityWebRequest> callback)
{
filePath = Path.Combine(streamingAssetsPath, GetFileNameFromUrl(url));
using UnityWebRequest request = UnityWebRequest.Get(url);
request.downloadHandler = new DownloadHandlerFile(filePath);
var operation = request.SendWebRequest();
while (!operation.isDone)
{
yield return null;
}

callback(request);
}

Show the downloaded model

private void DownloadModel(string url)
{
StartCoroutine(GetFileRequest(url, request =>
{
if (request.isNetworkError || request.isHttpError)
{
Debug.Log($"{request.error} :{request.downloadHandler.text}");
}
else
{
model = Importer.LoadFromFile(filePath); model.transform.SetParent(parent); //set the parent
}
}));
}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kuldeep Singh

Principal Consultant, Engineering and Head of ARVR Practice @ ThoughtWorks India.