Augmenting The Web Page

Bringing augmenting reality to normal web pages

Jerome Etienne
ARjs
3 min readApr 17, 2017

--

Recently we did the AR-Code, it was mostly intended for print. But i realised the marker could be on a screen too… We could add AR-Code in normal web pages and thus obtains augmented reality content directly in page. See below an “augmented tweet” 😜

Augmenting the web page with AR-Code

AR Directly on top of your Webpage!

Anybody could includes augmented reality content to its own website! The AR content he likes related to his website! Augmented reality will add a new dimension to websites.

AR Directly on top of your webpage

Markers on Screens Makes AR.js even Easier

AR.js is marker-based. Unfortunately, it usually goes with printing the marker, it is a mandatory first step. Only then, you can point your phone at the marker and see the augmented reality. But now we can avoid it!

If the marker is on screen, we skip this step and goes directly to augmented reality. It makes the user experience a lot smoother. It has almost zero-friction. From the web page to augmented reality experience in just a few seconds.

AR-Code : 5 seconds from qr-code to augmented reality content!

Screens may be a Poor Surface for Markers

Usually marker are printed on paper. To use screen as a surface may come with some issues. Screens comes in 2 majors style: matte or glossy. Glossy is designed to reflect lights. Those reflects will temper significantly with the marker detection. Try to avoid those.

On the left, a matter scree. On the right, a glossy screen

Possible Usages

I feels it may be big but it is still unclear how to use it. So here are a bunch of ideas i got. If you got more, please add it in comments.

Holographic Emails

You record yourself on the webcam, we remove the background (either by subtraction or by green-screen). You put this video on a server and it get played when the user see the marker in his phone.

On Your Home Page

You build an augmented reality experience, create the AR-Code linking to it and then on your home page. Thus people visiting your page will be able to easily experience your augmented reality.

Showing 3D Models

When your site is about showing 3d models on the web, augmenting the web page seems a natural fit. You can be a 3d model search engine such as Yobi3D, a service to publish 3d model on the web such as SketchFab or a jeweler selling rings on the internet such as Transpacific Software.

Publishing the model in Augmented Reality directly in the page seems definitive plus for people showing 3d models on the web.

Conclusion

I think augmenting the web page is a very strong concept. I am a bit disappointed not to find more examples to show it off tho. But i wanted to publish the idea early.

Maybe people will come up with awesome usages. If you do, please share, i would love to hear about it :)

--

--

Jerome Etienne
ARjs
Editor for

Making WebAR a reality! 8th most active user on github - Write @learningthreejs - Ex @daqri