AR Compatibility Test for Any Phone

This documentation serves as an exhaustive technical reference for the Universal WebAR Emulation and Testing Suite. Designed for software engineers, QA specialists, and 3D technical artists, this guide details the underlying architecture, fallback algorithms, and testing protocols required to deploy Augmented Reality (AR) experiences across a highly fragmented mobile hardware landscape. The primary focus of this document is the emulation of AR environments on legacy and unsupported devices that lack native WebXR or ARCore capabilities.

The Fragmentation of the Mobile AR Ecosystem

The current mobile landscape is divided into two distinct tiers of Augmented Reality capabilities. High-end and modern mid-range devices utilize dedicated hardware (such as LiDAR scanners, Time-of-Flight sensors, and highly calibrated IMUs) paired with native software frameworks like Google’s ARCore and Apple’s ARKit. These devices support the WebXR Device API, allowing browsers to access point clouds, light estimation, and absolute scale tracking directly.

👉 However, a significant percentage of global web traffic originates from legacy devices, budget smartphones, or devices operating in restricted browser environments where WebXR is unavailable or blocked by security policies. Deploying a commercial AR solution requires a robust fallback mechanism—an emulation layer that can simulate a 6-Degrees-of-Freedom (6DoF) or 3-Degrees-of-Freedom (3DoF) experience using nothing but a standard HTML5 video feed and basic JavaScript mathematics.

Core Architecture of the ARLite Emulation Engine

When the application detects that `navigator.xr.isSessionSupported(‘immersive-ar’)` returns false, it immediately routes the user to the ARLite Emulation Engine. This engine bypasses native AR libraries and constructs a synthetic tracking environment using the following technology stack:

• WebRTC (getUserMedia): Captures the raw video stream from the device’s rear-facing camera.
• HTML5 Canvas 2D API: Acts as a hidden processing layer where video frames are drawn and analyzed pixel by pixel at a high frame rate.
• Device Orientation API: Captures gyroscope and accelerometer data to estimate the device’s tilt and rotation relative to the Earth’s magnetic field and gravity.
• Three.js / WebGL: Renders the 3D assets on a transparent canvas layered perfectly over the camera feed.

Optical Flow and Luminance Tracking Algorithm

The cornerstone of the emulation engine is its ability to find an anchor point on a physical surface without utilizing depth sensors. The algorithm processes the video feed to identify areas of high contrast, which typically represent the edges of tables, floor patterns, or physical objects.

Instead of relying on heavy machine learning models that would cause thermal throttling on low-end CPUs, the engine uses a highly optimized linear search algorithm based on luminance diffing. The calculation relies on the standard perceived luminance formula:

Luminance = 0.299 * Red + 0.587 * Green + 0.114 * Blue

The algorithm scans specific rows of pixels in the lower half of the camera feed (typically from 18% to 98% of the viewport height, where the ground or a table is expected to be). It compares the luminance of a pixel with the pixel directly above it. If the difference (diff) exceeds a hardcoded threshold, the algorithm registers a “hit”.

By calculating the weighted average of these hits across a horizontal row, the engine identifies the most stable visual anchor in the frame. A continuity multiplier is applied to prevent the anchor from jumping erratically if a new, sharper edge suddenly appears in the camera’s view. This ensures the 3D model remains relatively stable on the screen, simulating physical adherence to a surface.

Perspective and Z-Depth Emulation

Because legacy cameras lack depth perception, the engine must “fake” the Z-axis (depth). This is achieved through a combination of UI interaction and screen-space coordinate mapping.

When a user scales an object using the slider or mouse wheel, the engine adjusts the `fakeZ` variable. Furthermore, when mapping the 2D pixel coordinates from the video feed to the 3D WebGL scene, the engine uses Raycasting. A ray is projected from the virtual camera through the 2D screen coordinates into the 3D space, intersecting an invisible mathematical plane representing the ground (Plane Y=0). The 3D model’s coordinates are then updated to match this intersection point.

Testing Methodologies for Unsupported Devices

Quality Assurance (QA) for emulated AR requires rigorous real-world testing. Emulators on desktop computers cannot accurately replicate the noisy sensor data, rolling shutter effects of cheap camera modules, or the thermal constraints of a budget smartphone. Testers must adhere to the following protocols.

Environmental Lighting Tests

Optical tracking is entirely dependent on visible light. Testing must be conducted across three specific lighting scenarios:

• Optimal Lighting (500 – 1000 Lux): Standard office or bright living room environments. The tracking algorithm should lock onto surfaces within 0.5 seconds.
• Low Light (Below 50 Lux): Dimly lit rooms. The camera feed will introduce grain and ISO noise. Testers must verify that the noise filtering in the smoothing algorithm prevents the 3D model from vibrating violently.
• Direct Glare / Overexposure: Outdoor sunlight or directly under a harsh spotlight. White surfaces will clip to maximum luminance (255, 255, 255), destroying contrast edges. Testers should verify that the application does not crash when the algorithm returns zero hits, but instead gracefully holds the last known good position.

Surface Texture Variance

The ARLite engine struggles with featureless surfaces. Test the application against the following physical materials:

• High Contrast (Ideal): Printed carpets, wood grain, tiled floors, or magazines on a desk.
• Low Contrast (Challenging): Matte white tables, seamless concrete floors, or clean bedsheets. Testers must simulate user behavior by tossing a physical object (like a pen or a piece of paper) onto the blank surface to provide the tracking algorithm with an anchor point.
• Reflective Surfaces (Failure State): Mirrors, highly polished glass, or wet floors. Reflections cause optical tracking to fail as the algorithms lock onto reflected elements moving in reverse perspective. The UI must remain responsive even if tracking fails.

Asset Optimization Pipeline

The performance of the AR emulation is intrinsically linked to the optimization of the loaded assets. A legacy device must simultaneously process a live video feed, run pixel-diffing algorithms, and render a 3D scene. If the 3D model is too heavy, the browser will crash due to Out-Of-Memory (OOM) errors.

Geometric Complexity and Polygon Budgets

Strict polygon limits must be enforced. For WebAR on legacy devices, a single object should not exceed 50,000 triangles. If the application requires visualizing complex engineering models, the geometry must be simplified using decimation tools prior to upload. Beveled edges should be baked into normal maps rather than modeled geometrically.

Material and Texture Guidelines

Material calls are highly expensive on mobile GPUs. The following standards must be applied to all models (GLB/GLTF, OBJ, FBX):

• Texture Resolution: Textures should never exceed 2048×2048 pixels. For minor details, 1024×1024 is strongly recommended.
• PBR Workflow: Use standard Physically Based Rendering channels (Base Color, Normal, Roughness/Metallic). Combine Roughness, Metallic, and Ambient Occlusion into a single RGB texture to reduce memory bandwidth.
• Draw Calls: Merge meshes that share the same material. A 3D model consisting of 100 separate mechanical parts but using the same steel material should be combined into a single mesh to reduce WebGL draw calls to a minimum.

Supported Formats Explained

The testing suite supports several formats, each with specific behaviors in the WebGL renderer:

• GLTF / GLB: The absolute standard for WebAR. It packages geometry, materials, and animations into an efficient, web-ready format. Always prioritize GLB.
• OBJ: A legacy format. It is loaded sequentially and does not support modern PBR materials natively. Use only for basic geometric testing without advanced texturing.
• FBX: Extremely versatile but highly complex. The FBX loader in JavaScript is heavy and can cause long load times on mobile devices. Ensure FBX files are baked properly without proprietary plugin nodes.
• STL: Commonly used in 3D printing and CAD. STL contains no material or UV data—only raw geometry. The engine automatically assigns a default grey matte material to STL files for structural review.

2D Image Overlay Mechanics

Beyond 3D models, the suite supports placing 2D images (JPG, PNG) into the AR space. This is critical for testing UI overlays, posters, or flat architectural markers. The 2D overlay circumvents the WebGL engine entirely, utilizing CSS Transforms to simulate depth.

The image is injected into an absolutely positioned `div` layered over the video. As the user moves the device, the `deviceorientation` event fires, providing Alpha, Beta, and Gamma Euler angles. The application maps the Beta (front-to-back tilt) and Gamma (left-to-right tilt) to CSS `rotateX` and `rotateY` properties. This creates a highly performant illusion of perspective, making the flat image appear as though it is pasted onto a physical wall or floor, using zero GPU 3D rendering overhead.

Troubleshooting and Performance Profiling

When deploying this technology, developers will encounter specific hardware bottlenecks. Here is a guide to identifying and resolving common emulation failures.

Frame Rate Degradation

If the application drops below 30 Frames Per Second (FPS), the emulation will feel sluggish and induce nausea. The primary culprit is usually the video processing loop. Ensure that the `grabFrame()` function is not executing faster than the CPU can process it. The `setTimeout` for the `detectLoop` should be clamped at roughly 100-120 milliseconds on low-end devices, effectively sampling the video feed at 8-10 FPS while allowing the 3D renderer to run independently at 60 FPS.

The “Drifting” Anomaly

Model drift occurs when the 3D object slowly slides across the screen even when the camera is perfectly still. In ARLite mode, this is caused by low-frequency noise in the camera sensor altering the luminance values of the anchor pixels. To mitigate this, ensure the `smoothPoint` algorithm contains a strict deadzone threshold. If the computed delta of movement is below 1.5 pixels, the system must ignore the input entirely, locking the coordinate in place.

Z-Fighting on Flat Surfaces

When placing an object flush against the synthetic floor, parts of the model may flicker rapidly (Z-fighting). This happens due to the limited precision of the WebGL depth buffer on mobile GPUs. To fix this, always ensure that the pivot point of the 3D model is slightly offset, floating roughly 0.001 units above the lowest geometric boundary.

Conclusion

Developing a universal AR experience demands a pragmatic approach. By combining native WebXR for premium devices with a highly optimized, mathematically sound optical emulation layer for legacy hardware, developers can ensure 100% market reach. Strict adherence to polygon budgets, intelligent lighting testing, and an understanding of browser limitations are the keys to maintaining a stable, cross-platform Augmented Reality application.

Brands (A-M)	Samsung / Pixel	Xiaomi / BBK / Others
Asus ROG Phone 3, 5, 5s, 6, 7, 8, 9	Google Pixel 3, 3 XL, 4, 4 XL, 4a	Xiaomi Mi 10, 10 Pro, 10 Ultra, 10T
Asus Zenfone 7, 8, 9, 10, 11 Ultra	Google Pixel 5, 5a, 6, 6 Pro, 6a	Xiaomi Mi 11, 11 Pro, 11 Ultra, 11i
Honor Magic 3, 4, 5, 6 Pro, Ultimate	Google Pixel 7, 7 Pro, 7a, 8, 8 Pro	Xiaomi 12, 12 Pro, 12X, 12S Ultra
Honor 50, 60, 70, 80, 90, 100, 200	Google Pixel 8a, 9, 9 Pro, 9 Pro XL	Xiaomi 13, 13 Pro, 13 Ultra, 13T Pro
Honor V40, View 40, Magic V, V2, V3	Google Pixel Fold, Fold 2, 9 Pro Fold	Xiaomi 14, 14 Pro, 14 Ultra, 15, 15 Pro
Huawei P40, P40 Pro, P50, P50 Pro	Samsung Galaxy S10, S10+, S10e, S10 Lite	Xiaomi Redmi Note 10 Pro, 11 Pro, 12 Pro
Huawei P60, P60 Pro, P70, P70 Ultra	Samsung Galaxy S20, S20+, S20 Ultra, FE	Xiaomi Redmi Note 13 Pro, 14 Pro, 15 Pro
Huawei Mate 30, 40, 50, 60 Pro, RS	Samsung Galaxy S21, S21+, S21 Ultra, FE	Xiaomi Poco F2 Pro, F3, F4, F5, F6 Pro
Huawei Nova 8, 9, 10, 11, 12 Pro	Samsung Galaxy S22, S22+, S22 Ultra	Xiaomi Poco X3 Pro, X4 Pro, X5, X6 Pro
Motorola Edge, Edge+, Edge 20, 30, 40, 50	Samsung Galaxy S23, S23+, S23 Ultra, FE	Oppo Find X2, X3, X5, X6, X7, X8 Ultra
Motorola Moto G51, G71, G82, G84, G85	Samsung Galaxy S24, S24+, S24 Ultra, FE	Oppo Reno 6, 7, 8, 9, 10, 11, 12 Pro
Motorola Razr, Razr 5G, 40, 50 Ultra	Samsung Galaxy S25, S25+, S25 Ultra	Vivo X60, X70, X80, X90, X100, X110 Pro
Nothing Phone (1), (2), (2a), (3)	Samsung Galaxy S26, S26+, S26 Ultra	Vivo V21, V23, V25, V27, V29, V30 Pro
OnePlus 7, 7 Pro, 7T, 8, 8 Pro, 8T	Samsung Galaxy Note 10, Note 10+, Lite	Vivo iQOO 9, 10, 11, 12, 13 Pro
OnePlus 9, 9 Pro, 9RT, 10 Pro, 10T	Samsung Galaxy Note 20, Note 20 Ultra	Realme GT, GT2, GT3, GT5, GT6 Pro
OnePlus 11, 12, 12R, 13, 13R	Samsung Galaxy Z Fold 2, 3, 4, 5, 6	Realme 8 Pro, 9 Pro, 10 Pro, 11, 12, 13
OnePlus Nord, Nord 2, 3, 4, CE 3, 4	Samsung Galaxy Z Flip, 3, 4, 5, 6	Sony Xperia 1 II, III, IV, V, VI
Sony Xperia 5 II, III, IV, V, VI	Samsung Galaxy A51 5G, A52, A52s, A53	Sony Xperia 10 III, IV, V, VI
LG V60 ThinQ, Wing, Velvet	Samsung Galaxy A54, A55, A56 5G	ZTE Axon 30, 40, 50, 60 Ultra
Nokia 8.3 5G, XR20, G42, G60	Samsung Galaxy A71, A72, A73 5G	Nubia Red Magic 6, 7, 8, 9, 10 Pro
TCL 20 Pro 5G, 30 V 5G	Samsung Galaxy A33, A34, A35, A36 5G	Tecno Phantom X2, V Fold, V Flip
Sharp Aquos R5G, R6, R7, R8	Samsung Galaxy XCover 5, 6 Pro, 7	Infinix Zero Ultra, Zero 30, GT 10 Pro
Kyocera DuraForce Ultra 5G	Samsung Galaxy Tab S7, S8, S9, S10 Ultra	Lenovo Legion Phone Duel 1, 2