Augmented Reality (AR) is an exciting technology that allows you to overlay digital content onto the real world. Moreover, you can run augmented reality without glasses right on your phone or tablet. There are a few things you need to know about compatibility and hardware requirements if you're interested in experiencing AR in the browser.
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 the power of Augmented Reality using the iOS QuickLook feature. 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.
Watch our video to see how Augmented Reality can enhance your content and bring it to life in a whole new way.
This video was recorded with iPhone XS on iOS 16:
Augmented Reality demo - check for yourself!
Open this website on your mobile device, you can scan the QR code:
When your device supports AR, you should see additional button View in your space. Press that button to download the model and start the AR experience.
When you're using a device without AR support such as laptop, you're only 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?
The hardware requirements for running AR in a browser can vary depending on the specific AR experience you want to have. Generally, you will need a device with a camera and sensors, such as a smartphone or tablet.
Some AR experiences may also require additional hardware, such as a headset or smart glasses.
It is important to check the specific requirements for the AR experience you want to have before attempting to run it in your browser. Additionally, make sure your device has enough processing power and memory to handle the AR content without lag or glitches.
Which browsers support AR and how to enable it?
Currently, only a the most popular browsers support AR experiences, including Google Chrome, Mozilla Firefox, iOS Safari and Microsoft Edge.
To launch AR in your browser, you will need to make sure you have the latest version of the browser installed and that your device meets the hardware requirements. Certain browsers may also require you to enable specific settings or extensions to run AR content.
It's important to note that not all AR experiences are compatible with all browsers, so be sure to check the specific requirements before attempting to run an AR experience in your browser.
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.