Display AR content from a web browser

MLBoy
3 min readDec 7, 2021
ARPreview from link

You can view AR content from a web browser such as Safari.
No need to download the app.
The thumbnails below are actually tagged with AR, so tap them on your iOS device to see the AR preview.
Please try it if you like.
(Note) If you click on a device other than iOS such as a PC, the reality file will be downloaded from the link.

Spheres and Fish ARPreview on iOS

Prevent users from dropping out

Downloading an app can be a hassle for consumers.
If you have the step “Go to the App Store, download and launch the app”, you may give up displaying it if you are not very interested in the content.
I think that ARQuickLook, which can be displayed quickly only with a browser, will be a valid option so as not to lose the opportunity.

procedure

1. Create an AR scene with Reality Composer

Create a scene to be displayed with Reality Composer, which allows you to easily create AR content.
You can use all anchors for horizontal planes, vertical planes, faces, images, and objects.
By default, rendering such as People Occlusion and motion blur is also enabled.

For details on how to use

The Reference Book of RealityKit (Create a scene with Reality Composer and read it from the code section)

After creating
the scene, select “File”-> “Export”-> “Current scene” to export it as a .reality file.

2. Put the Reality file on the web

Place the Reality file in a suitable location as an asset on the web.
This time, I put it in Storage of Firebase.

3. Write in HTML.

By writing in HTML as shown below, the AR preview will be displayed when you open the page in safari or WebView on your iOS device and tap the thumbnail.

a rel: link type
href: reality file URL (or relative path from the page)
img src: thumbnail image URL

Display example: Tap on an iOS device to jump to the AR preview.

Rain and Koala

ARPreview Thumbnail

By the way, even if you tap the link of the reality file without thumbnail as below, the AR preview will be displayed.

https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/horizontal.reality?alt=media&token=087c6705-4b47-4615-a0f4-4955bd9f20af

Preview screen function

On the preview screen, you can
pinch or swipe to zoom in / out or move the content, and
press the button to shoot an image (long press to shoot a video).

🐣

I’m a freelance engineer.
Please contact us for work consultation.
Please tell us the function you want to create or the content of the app.
rockyshikoku@gmail.com

I am making an app that uses Core ML and ARKit.
We send machine learning / AR related information.

Twitter
Medium

--

--