Augmented Reality (AR) is an exciting technology that allows you to overlay digital content onto the real world. Moreover, you can run it without special glasses or VR headset right on your phone. There are a few things you need to know about compatibility and hardware requirements if you're interested in experiencing Web AR.
This page lets you know whether Web AR is available on yours and your customer's devices. Test whether your mobile device is capable of running AR in your browser and what you need to get started.
Augmented Reality video demonstration using iOS QuickLook
In this video, we showcase a gorgeous virtual lamp with realistic glass materials placed on the lobby desk. This is possible thanks to the AR Quick Look available on Apple devices. With QuickLook, users can easily view and interact with 3D models, animations, and other AR content right from their device's camera app or photo library.
This video was recorded with iPhone XS on iOS 16:
Augmented Reality demo - try it yourself!
You're on a mobile device - skip the QR code and use the 3D viewer below directly. On AR-capable devices you'll see a View in your space button.
Scan this QR code with your phone to open the page on your mobile device and test AR:
When your device supports AR, you should see an additional View in your space button. Press it to launch the AR experience.
When you're using a device without AR support such as a laptop, you will only be able to preview a 3D model.
- Stained Glass Lamp from the Khronos GLTF Sample models repository
- HDRI map is sourced from the Polyhaven by Sergej Majboroda
If you can see the gorgeous lamp in your space - congratulations! WebGL and AR are available for your device and the current browser.
Note for the iOS QuickLook: Apple recommends to limit the number of geometry polygons to 100k. The optimal texture size is 1024x1024 and maximum size is 2048x2048 pixels.
What is AR and how does it work?
Augmented Reality (AR) is a technology that allows you to overlay digital content onto the real world. It works by using a camera and sensors on your device to track your surroundings and then adding digital elements to the view.
This can include anything from virtual objects to information overlays. AR can be experienced through a variety of devices, including smartphones, tablets, and smart glasses.
What are the hardware requirements for running AR in a browser?
Requirements vary by AR experience, but generally you need:
- A camera and sensors - smartphone or tablet
- Sufficient processing power and memory - to handle 3D content without lag
- Optional additional hardware - headset or smart glasses for some experiences
Check specific requirements for the AR experience you want before attempting it in the browser.
Which browsers support AR and how to enable it?
Currently supported browsers include:
- Google Chrome
- Mozilla Firefox
- Safari (iOS)
- Microsoft Edge
Make sure you have the latest browser version installed and that your device meets hardware requirements. Not all AR experiences are compatible with all browsers - check specific requirements before testing.
Can AR be used on websites with JavaScript?
One of the key elements WEB AR is the GLTF2.0 format, which is a file format for 3D scenes and models that can be easily viewed in a web browser.
Thanks to its compression properties, the GLTF2.0 format can significantly reduce the file size of 3D models and scenes, making them faster to load on websites.
Moreover, this universal format can be easily shared across all major platforms: Windows, Mac and Linux.
Additionally, PBR (Physically Based Rendering) materials bring a higher level of realism to 3D models, further enhancing the AR experience. PBR materials have revolutionized the way 3D models are rendered, bringing a higher level of realism to the table in real-time on consumer devices.
These materials are created using real-world physical properties, such as reflectivity, roughness, and metallic appearances. PBR materials also react differently to specific types of light sources, making it easier to achieve a natural-looking scene.
With the help of JavaScript libraries like AR.js and Three.js, web developers can easily create AR content for websites.
What is WebGL? What is WebGPU?
WebGL stands for Web Graphics Library, and it is a JavaScript API that allows developers to create and render 3D graphics within web browsers without the need for additional software. It is based on OpenGL, a widely used graphics library for creating 3D applications.
With WebGL, developers can create immersive experiences that run smoothly in most modern web browsers, making it a popular tool for creating cutting-edge web applications.
There is another player that will be available soon: WebGPU. WebGPU is a newer and more advanced API, designed to take full advantage of modern GPU hardware. It provides low-level access to the device's GPU, allowing developers to write more efficient code.
WebGL operates by allowing the web browser to access the computer's graphics hardware directly, which can potentially expose the user to security risks. In order to prevent these risks, modern web browsers implement strict security protocols that can slow down the performance of WebGL applications.
Therefore, WebGPU is considered a next step in bringing 3D to the browsers, as it holds the potential to revolutionize the way we interact with the web.