In Chrome 67, we announced the WebXR Device API for both augmented reality (AR) and virtual reality (VR), though only the VR features were enabled. VR is an experience based purely on what's in a computing device. AR on the other hand allows you to render virtual objects in the real world. To allow placement and tracking of those objects, we just added the WebXR Hit Test API to Chrome Canary, a new method that helps immersive web code place objects in the real world.
Note: If you want to be notified of spec updates as they land in Chrome, the [Immersive Web Early Adopters Guide](Immersive Web Early Adopters Guide) is kept in a GitHub repo and updated whenever spec changes land in Chrome. To be notified of those updates watch its repo on GitHub.
# Where can I get it?
This API is intended to stay in Canary for the immediate future. We want a protracted testing period because this is a very new API proposal and we want to make sure it's both robust and right for developers.
Aside from Chrome Canary, you'll also need:
- A compatible smartphone running Android O or later.
- To install ARCore.
- Two Chrome flags (chrome://flags): WebXRDevice API (#webxr) and WebXR Hit Test (#webxr-hit-test)
With these, you can dive into the demos or try out our codelab.
Note: Some of the Immersive Web Community Group's existing demos, specifically the ones using magic windows, do not work with the WebXR Hit Test turned on. Please excuse our construction debris.
- Chacmool
- Immersive Web Sample
- Codelab
# It's just the web
At Google IO this year, we demonstrated augmented reality with an early build of Chrome. I said something repeatedly to developers and non-developers alike during those three days that I wish I had known to put in my immersive web article: "It's just the web."
"What Chrome extension do I need to install?" "There's no extension. It's just the web."
"Do I need a special browser?" "It's just the web."
"What app do I need to install?" "There is no special app. It's just the web."
This may be obvious to you since you're reading this on a website devoted to the web. If you build demonstrations with this new API, prepare for this question. You'll get it a lot.
Speaking of IO, if you want to hear more about the immersive web in general, where it is, where it's going check out this video.
# What's it useful for?
Augmented reality will be a valuable addition to a lot of existing web pages. For example, it can help people learn on education sites, and allow potential buyers to visualize objects in their home while shopping.
Our demos illustrates this. They allow users to place a life-size representation of an object as if in reality. Once placed, the image stays on the selected surface, appears the size it would be if the actual item were on that surface, and allows the user to move around it as well as closer to it or farther from it. This gives viewers a deeper understanding of the object than is possible with a two dimensional image.
If you're not sure what I mean by all of that, it will become clear when you use the demos. If you don't have a device that can run the demo, check out the video link at the top of this article.
One thing that demo and video doesn't show is how AR can convey the size of a real object. The video here shows an educational demo that we built called Chacmool. A companion article describes this demo in detail. The important thing for this discussion is that when you place the Chacmool statue in augmented reality, you're seeing its size as though it were actually in the room with you.
The Chacmool example is educational but it could just as easily be commercial. Imagine a furniture shopping site that lets you place a couch in your living room. The AR application tells you whether the couch fits your space and how it will look next to your other furniture.
# Ray casts, hit tests, and reticles
A key problem to solve when implementing augmented reality is how to place objects in a real-world view. The method for doing this is called ray casting. Ray casting means calculating the intersection between the pointer ray and a surface in the real world. That intersection is called a hit and determining whether a hit has occurred is a hit test.
This is a good time to try out the new code sample in Chrome Canary. Before doing anything, double-check that you have the correct flags enabled. Now load the sample and click "Start AR".
Notice a few things. First, the speed meter which you may recognize from the other immersive samples shows 30 frame per second instead of 60. This is the rate at which the web page receives images from the camera.
The AR Hit Test demo
The other thing you should notice is the sunflower image. It moves as you move and snaps to surfaces such as floors and table tops. If you tap the screen, a sunflower will be placed on a surface and a new sunflower will move with your device.
The image that moves with your device, and that attempts to lock to surfaces is called a reticle. A reticle is a temporary image that aids in placing an object in augmented reality. In this demo, the reticle is a copy of the image to be placed. But it doesn't need to be. In the Chacmool demo, for example, it's a rectangular box roughly the same shape as the base of the object being placed.
# Down to the code
The Chacmool demo shows what AR might look like in a production app. Fortunately, there is a much simpler demo in the WebXR samples repo. My sample code comes from the AR Hit Test demo in that repository. FYI, I like to simplify code examples for the sake of helping you understand what's going on.
The basics of entering an AR session and running a render loop are the same for AR as they are for VR. You can read my previous article if you're unfamiliar. To be more specific, entering and running an AR session looks almost exactly like entering a VR magic window session. As with a magic window, the session type must be non-immersive and the frame of reference type must be 'eye-level'.
# The new API
Now I'll show you how to use the new API. Recall that in AR, the reticle attempts to find a surface before an item is placed. This is done with a hit test. To do a hit test, call XRSession.requestHitTest(). It looks like this:
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
});The three arguments to this method represent a ray cast. The ray cast is defined by two points on the ray (origin and direction) and where those points are calculated from (frameOfReference). The origin and direction are both 3D vectors. Regardless of what value you submit, they will be normalized (converted) to a length of 1.
# Moving the reticle
As you move your device the reticle needs to move with it as it tries to find a location where an object can be placed. This means that the reticle must be redrawn in every frame.
Start with the requestAnimationFrame() callback. As with VR, you need a session and a pose.
function onXRFrame(t, frame) {
let xrSession = frame.session;
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
}
}Once you have the session and the pose, determine where the ray is casting. The sample code uses the gl-matrix math library. But gl-matrix is not a requirement. The important thing is knowing what you're calculating with it and that it is based on the position of the device. Retrieve the device position from XRPose.poseModalMatrix. With your ray cast in hand, call requestHitTest().
function onXRFrame(t, frame) {
let xrSession = frame.session;
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
.then((results) => {
if (results.length) {
}
});
}
session.requestAnimationFrame(onXRFrame);
}Though not as obvious in the hit test sample, you still need to loop through the views to draw the scene. Drawing is done using WebGL APIs. You can do that if you're really ambitious. Though, we recommend using a framework. The immersive web samples use one created just for the demos called Cottontail, and Three.js has supported WebXR since May.
# Placing an object
An object is placed in AR when the user taps the screen. For that you use the select event. The important thing in this step is knowing where to place it. Since the moving reticle gives you a constant source of hit tests, the simplest way to place an object is to draw it at the location of the reticle at the last hit test. If you need to, say you have a legitimate reason not to show a reticle, you can call requestHitTest() in the select event as shown in the sample.
# Conclusion
The best way to get a handle on this is to step through the sample code or try out the codelab. I hope I've given you enough background to make sense of both.
We're not done building immersive web APIs, not by a long shot. We'll publish new articles here as we make progress.
FAQs
What is augmented reality in Chrome? ›
Augmented Reality
It lets you search things visually, simply by pointing your camera at them. It can put answers right where your questions are by overlaying visual, immersive content on top of your real world. Your browser does not support the video tag.
- On this page.
- Configure your app to be AR Required or AR Optional. Make your app AR Required. Make your app AR Optional.
- Perform runtime checks.
- Configure your app to be Depth Required or Depth Optional (Android only) Make your app Depth Required. Make your app Depth Optional.
- Privacy requirements.
- Next steps.
- 4.1 1. Create a 3D model.
- 4.2 2. Convert your 3D model to USDZ.
- 4.3 3. Build your website.
- 4.4 4. Embed the AR USDZ files to the website.
- 4.5 Examples of AR use.
AR websites are sites powered by augmented reality to drive user engagement, increase sessions, and boost sales. Whether you want to implement a virtual try-on feature or add an interactive experience for your e-commerce business, AR makes it real. - 4 steps to add AR experience to your website.
How do I start augmented reality development? ›Augmented Reality for Everyone - Full Course - YouTube
How do I become an AR developer? ›You must be able to work with video game engines like Unity or Unreal to become an AR/VR developer. Both of these systems allow you to construct 3D settings. Furthermore, AR/VR engineers must be familiar with programming languages such as C++, C#, JavaScript , and Swift .
Is Google ARCore free? ›And that's why Google has released an in-depth introduction into the creation of ARCore applications, completely free of charge. Available now via Coursera, Introduction to Augmented Reality and ARCore is a 15-hour class diving deep into the specifics of AR development on Google's increasingly powerful ARCore platform.
Is web AR free? ›WebAR Frameworks
js project allows for open-source AR, free of charge, cross-platform and without installation on any modern device. Based on the open source ARToolKit tracking library, JSARToolKit uses WebGL & Three.
An Augmented Reality QR code is a type of QR code that you can use to trigger a digital augmentation of reality. When scanned by a device, an AR QR code can be used to display digital content on top of the real-world environment. It can include 3D models, video, and other types of digital content.
How much does an AR website cost? ›| Type | Development Time | Approx. Development Cost |
|---|---|---|
| Marker-Based AR | 80–200 hours | $2000-$3000 |
| Marker-Based AR with Animation | 110–250 hours | $2600-$3500 |
| Marker-less AR | 400–510 hours | $10,000-$11,500 |
| Projection-Based AR | 240–360 hours | $6000-$8000 |
How do I install Google AR? ›
- On your Android device, open the Google Play Store app .
- Find the Google Play Services for AR app.
- Tap Download.
js - Augmented Reality on the Web. AR. js is a lightweight library for Augmented Reality on the Web, which includes features like Image Tracking, Location based AR and Marker tracking.
What is AR in HTML? ›Don't Worry It's Less Than 10 Lines of HTML
AR. js is an efficient Augmented Reality solution on the Web. It runs 100% in your web browser, this means no app to install! There is no need for a specific device either e.g. Tango or iphone. It runs on all mobile platforms: Android, iOS11 and Windows mobile.
Lowering the bar for AR development will lead to a breakthrough for enterprise AR adoption.
Can AR work without an app? ›Users simply have to point their phone or tablet's camera at the QR code, and the experience will automatically activate. Talk about a true, app-less augmented reality! Web AR works on any iOS or Android smartphone or tablet camera, as long as it's AR capable.
Is AR difficult to learn? ›Building good AR & VR applications is incredibly difficult right now, though not because the development is hard. Game engines like Unity are surprisingly good for making AR & VR applications and they're relatively easy for developers to learn.
Is AR easy to learn? ›It is very easy to get started with AR. You can start today! There are many available frameworks to use. Depends on the specific requirements of your use case, you can choose what's the best for you.
Is it hard to create AR? ›As you can see, there is nothing incomprehensible about AR. The complexity of the task depends on your imagination, and getting started is not as hard as you might think. AR is actively developing, there are many libraries and frameworks that make life easier for developers.
What skills are needed for AR? ›- Programming Skills. ...
- Experience with building solutions. ...
- A basic understanding of extended reality. ...
- 3D Animations and Modelling Skills. ...
- An understanding of good user experience design.
Augmented Reality gameplay engineers earn $107,000 across America, over $126,000 in Palo Alto, and top earners take over $230,000 home. Meanwhile, the average top salary of Augmented Reality Tools Engineer jobs is over $248,000.
How much does AR programmer make? ›
As of Sep 10, 2022, the average annual pay for an Augmented Reality Developer in the United States is $105,400 a year. Just in case you need a simple salary calculator, that works out to be approximately $50.67 an hour. This is the equivalent of $2,026/week or $8,783/month.
What programming language does ARCore use? ›ARCore works with Unity3D and Unreal Engine as well as native to Android devices using the Java programming language. Google's ARCore is a steady part of the corresponding operating system Android and is to be used on approx. 100 million smart devices by the end of 2017.
How can I get a free AR? ›- Go to mywebar.com and select “Sign Up” to set up an account.
- Select “Add New Project.”
- Give the project a name and select the type of AR experience you want (QR code is free), then select “Create.”
- Upload or use the content available in the library to layer on the QR code.
- Adobe Aero.
- Tvori.
- Masterpiece Studio Pro.
- Vuforia Engine.
- Unity 3D.
- Oculus Medium.
- Gravity Sketch.
- ROAR Editor.
...
How To Create an AR App With No Code Platform
- Step 1: Find Your Idea. ...
- Step 2: Design Your App. ...
- Step 3: Validate Your Idea. ...
- Step 4: Create Your AR App Using Your Preferred No-code Tool. ...
- Step 5: Launch Your AR App.
KeyShot 10 Quick Tip - How to Deliver AR with QR Codes - YouTube
What code is used for augmented reality? ›C#, C/C++, and Java are the most popular programming languages among AR developers, according to SlashData.
Can all phones use AR? ›First of all, basically any smartphone today is capable delivering simple marker based augmented reality experience. The system requirements for such task are iOS 8.0+ or Android 4.0. 3+. Even the laggard in updates Android were running fresher OS version on 99.8% of the devices (source) in mid-2020.
What type of codes are being used in augmented reality? ›An Augmented Reality QR code is a QR code with a marker for AR. js that redirects the user to the AR web app or mobile app. AR codes lets you add an extra dimension to the product by creating interactive content to the real world around you.
How long does it take to develop AR? ›The cost of such augmented reality apps can start from US$200,000. Their development takes around six months.
What are the disadvantages of augmented reality? ›
The disadvantages of augmented reality include bulky and expensive headsets with a limited field of view (FoV), security concerns when AR data is manipulated to influence worker decisions, a high and expensive learning curve to use, and a lack of truly precise spatial location systems for AR objects.
Why is augmented reality so expensive? ›In addition to digital complexity and reality rendering, the overall AR app development cost is impacted by the degree of software and hardware integration that's required for an application. If your mobile app will leverage lots of device software and hardware, you'll see a fairly complicated integration process.
What hardware is required for augmented reality? ›Augmented Reality (AR) is known to be one of the most promising technologies at the momentAfter the smartphone revolution, everybody carries a mobile device, and all these mobile devices typically contain a processor, GPS, a display, camera, microphone etc, which is all the hardware required for AR.
How does web based AR work? ›How Does WebAR Work? Web-based AR uses a mobile phone's sensors to enable digital content to be be placed and tracked within the physical environment. Using these sensors and computer vision, AR technology can delivering animated 3D experiences, videos, target detection, and interactivity.
What technologies are used in AR? ›Modern mobile augmented-reality systems use one or more of the following motion tracking technologies: digital cameras and/or other optical sensors, accelerometers, GPS, gyroscopes, solid state compasses, radio-frequency identification (RFID). These technologies offer varying levels of accuracy and precision.
What is augmented reality browser? ›A "AR(Augmented Reality) browser(user agent)" is a software application for retrieving, presenting, and traversing information resources via Augmented Reality Interface. Mobile AR browser(user agent) have these features : Pulling in and managing data from both in-app sources and third party data sets.
What is augmented reality used for? ›Key Takeaways. Augmented reality (AR) involves overlaying visual, auditory, or other sensory information onto the world in order to enhance one's experience. Retailers and other companies can use augmented reality to promote products or services, launch novel marketing campaigns, and collect unique user data.
What is augmented reality on a computer? ›Augmented reality (AR) is the integration of digital information with the user's environment in real time. Unlike virtual reality (VR), which creates a totally artificial environment, AR users experience a real-world environment with generated perceptual information overlaid on top of it.
What is Google Play Services for AR and do I need it? ›Google Play Services for AR, previously recognised as ARCore, is the engine that powers most games and applications on Android which uses Augmented Reality (AR) effects. However, the framework has to be tuned for each device, Google has to periodically update Play Services to support new phones and tablets.
What are the 3 elements of augmented reality? ›AR incorporates three features: a combination of digital and physical worlds, interactions made in real time, and accurate 3D identification of virtual and real objects.
Is web AR free? ›
WebAR Frameworks
js project allows for open-source AR, free of charge, cross-platform and without installation on any modern device. Based on the open source ARToolKit tracking library, JSARToolKit uses WebGL & Three.
And support for AR is built directly into iOS and iPadOS, so you can experience AR not only from an app, but also within Safari, Mail, Messages, Files, and more using AR Quick Look.
What software is used for augmented reality? ›Vuforia Engine is at the top of the list of most popular SDKs to develop Augmented Reality applications, and with good reason. First introduced by Qualcomm, Vuforia Engine is a comprehensive software that enables you to create engaging 3D product demonstrations and applications.
What are the four major applications of augmented reality? ›- Medical Training. Medical Training – AR technology has a major application in Medical Studies. ...
- Interior Design and Modeling. ...
- Classrooms for Education. ...
- 4. Entertainment. ...
- Retail Industry.
- Oculus Quest 2.
- Lenovo Star Wars.
- Merge AR/VR Headset.
- Microsoft HoloLens 2.
- Magic Leap One.
- Epson Moverio BT-300.
- Google Glass Enterprise Edition 2.
- Raptor AR headset.
Augmented Reality (AR) is known to be one of the most promising technologies at the momentAfter the smartphone revolution, everybody carries a mobile device, and all these mobile devices typically contain a processor, GPS, a display, camera, microphone etc, which is all the hardware required for AR.
Who is leading augmented reality? ›| Companies | Our Ratings | Revenue (annual) |
|---|---|---|
| Apple | 4.5/5 | $274.5 Billion |
| Microsoft | 4.5/5 | $143 Billion |
| VironIT | 4.5/5 | $17.60 Million |
| VR Vision Inc. | 4.3/5 | $12 Million |
AR software works in conjunction with devices such as tablets, phones, headsets, and more. These integrating devices contain sensors, digital projectors, and hence require: appropriate software that enables computer-generated objects to be projected into the real world.
How do I install Google AR services? ›To make an app AR Required, follow these steps. Open Edit > Project Settings. Select Google ARCore and verify that ARCore Required is checked. Set the appropriate Minimum API Level by clicking Edit > Project Settings > Player, and selecting the tab with the Android icon.
Is Google ARCore free? ›And that's why Google has released an in-depth introduction into the creation of ARCore applications, completely free of charge. Available now via Coursera, Introduction to Augmented Reality and ARCore is a 15-hour class diving deep into the specifics of AR development on Google's increasingly powerful ARCore platform.