Web-based augmented reality is a growing trend in website design that allows users to interact with realistic experiences from desktops or phones in-browser with no additional app required. This technology takes a little bit of everything and often includes HTML5, Web Audio, WebGL, and WebRTC to develop.
The result can be pretty impressive and leads to a level of engagement and interaction that keeps users wanting more.
WebAR is short for Web-based Augmented Reality, and it’s a relatively new technology that does not require a mobile application to function. Users can access AR experiences directly from their smartphones using the native camera and mobile web browser. This seamless user experience is one of the main reasons WebAR is rapidly growing in popularity.
Here’s a look at some examples of websites using Web AR to inspire your projects.
1. McLaren Technology Center on Google Maps
This might be the most interactive map you’ve ever seen. Earlier this year, Google launched a partnership with McLaren Racing that allows you to go into their facility using Web AR from pretty much anywhere.
Here’s how Google describes the project:
“Racing fans can get an up-close look under McLaren’s hood thanks to an all-new Street View collection. Since Google became an official partner of the Formula 1 team last year, we’ve worked to create an exclusive Street View experience that takes fans behind the scenes at the McLaren Technology Center, the headquarters of McLaren Racing and the home of the McLaren Formula 1 Team in Surrey, England.”
2. Michelob ULTRA Yosemite Portal
This Web AR experience lets you take your beer from your backyard to somewhere a little more scenic. You enter a portal that takes you on a tour of Yosemite right from your phone.
3. Warba World
Warba World is the first – and maybe only – AR adventure game in financial literacy. Players select an avatar and are transported to a 3D map representing well-known landmarks in Kuwait City using AR technology. Hidden within this virtual Kuwait City are multiple different points of interest, each unlocking a new trivia task.
4. Saatchi Art View in My Room
Web AR works for e-commerce, too. The View in My Room feature from Saatchi Art allows you to use your phone camera to see what a painting from their website would look like in your home. Just select any piece of art and then View in My Room to see if it will work for you.
5. The Silly Bunny
The Silly Bunny, a child’s board book, has a phone-based Web AR journey that you can play with to go with your book. It allows you to activate a Silly Bunny of your own and take him on adventures.
6. Zenni Optical
Zenni Optical uses Web AR to make buying glasses online more practical. You can use your webcam to help measure your pupillary distance to get a pair of glasses that fit just right and then “try them on” online.
7. 1 Place
Much like being able to see the artwork in your home before you buy, 1 Place takes the same model and applies it to furniture. Additionally, you can spin and move pieces to see them from every angle with a flick of the mouse.
8. Brett Williams
If you are a designer/developer playing with AR, you could use it for your resume like Brett Williams does here. This is a fun way to show skills and what you can do in an immersive experience. He provides a LinkedIn resume as well if you want to see it in a more traditional format.
9. Pha5e
Create a virtual garden with an experience that starts with three-dimensional animation on your desktop and when you finish, if you are happy with what you’ve done so far, you can move to your phone for more augmented reality.
10. Shrink Ray Instagram Filter
Web AR plays well inside other apps. Shrink Ray is in augmented reality where users can interact directly with consumer goods and see how inflation has affected buying power.
Conclusion
What’s cool about Web AR is that you don’t have to design and develop an app for it to work. This is all web-based, browser technology. While there aren’t a ton of those sites out there right now, we only expect usage to grow.
Could you see yourself using Web AR in an upcoming project? Want to know more? What is Web AR? is a great resource with plenty of info on this tech.
0 Commentaires