Best Practices for Designing and Developing AR Projects

Games and mobile applications have been using Augmented Reality (AR) for quite some time now. However, this immersive technology has been gaining traction not only in games or Android and iOS apps but also in web browsers. Web-based AR projects are becoming increasingly popular in the market because they offer the same immersive experience without the need for an app. WebAR (Web-based Augmented Reality) provides users with a seamless and immersive experience directly through smartphone, tablet, or desktop browsers.

The development of WebAR applications has evolved significantly in recent years. Still, there are challenges and limitations that must be considered when creating a new project. We’ll explore some of them and show how to overcome these obstacles through practical and effective solutions. Some of these challenges include:

• Costs involved in the development process

• Platform limitations and quirks that directly impact the final product

• Different ways to trigger augmented reality rendering

• How to create marker-based AR experiences

Costs

Be mindful of costs when planning your application. It’s essential to assess what your team can do internally and what needs to be outsourced. Another key factor is the choice of development platform. Before selecting a platform, ensure it meets your project requirements and, in the case of paid platforms, that the costs are sustainable. The main cost components of a WebAR application include:

2D and 3D Design

WebAR experiences can be 2D, 3D, or mixed. Graphic designers either create the interactive content or build it based on a concept designed by the creative team. The internet is full of WebAR demos and case studies. In all of them, the 3D objects are ready and functional, but creating those assets often takes longer than expected—especially animated ones. There are websites where 3D artists sell pre-made models, which are useful for prototyping, but they’re unlikely to fully meet the needs of a highly customized project.

Today, it’s even possible to emulate games in WebAR, and there are already successful cases on the market, such as Pac-Man on Pizza Hut boxes. For highly interactive projects, in addition to 2D/3D design, game development expertise will also be required.

Examples of Challenges of using Augmented Reality 

WebAR Application Development

Web developers and game developers are the specialists equipped to carry out this phase of the project. The platform used may vary depending on the complexity of the application. It’s important to be familiar with the development platforms available and their specific features to choose the best one for your project. For a successful outcome, all technical specifications and requirements should be clearly defined in advance.

Proprietary Platforms

There are many platforms available, some free, but most are paid. Some allow free prototyping but require a subscription to publish. Others let you publish for free but with limited views and watermarks. Prices typically range from $10 per 1,000 views to $4,500 for 1.5 million views.

Examples of Platforms and Their Pricing:

• Zappar (ZapWorks): Starts at $68/month with 12,000 views/year. Can exceed $1,500/month for high traffic or if hosting on a custom domain.

• MyWebAR: Pro plan at $25/month with 2GB storage and 1 domain; Ultimate plan at $250/month with 5GB storage, 1 domain, and optional extras. Enterprise plan has custom pricing with unlimited resources.

• 8th Wall: Starter plan at $9/month, no custom domains or self-hosting, limited to 3 team members. Plus, Pro, and Enterprise plans offer additional features and pricing.

• Blippar: Pricing by volume. Starts at $10 per 1,000 views and goes up to $4,500 for 1.5 million views.

Free Platforms

In addition to the platforms listed, you can use the Unity game engine for WebAR development. Several libraries extend Unity’s capabilities for WebAR. Unity itself is free to download from the official website. Here are some helpful free libraries:

• Vuforia: While Vuforia does not support WebAR, it remains one of the most popular AR SDKs for Android, iOS, and UWP.

• ARJs-Unity: An open-source library that bridges Unity with WebXR and ARjs. Available on GitHub.

• ARWT: Similar to ARJs-Unity and also free on GitHub. One of the best results among free tools was achieved by combining Unity with ARWT.

Hosting and Domain

Most paid platforms include hosting, but their prices can be prohibitive. Hosting a WebAR experience is relatively simple—it’s essentially a static website. However, your server must support HTTPS; otherwise, the browser won’t consider it secure and won’t allow camera access. Free hosting typically provides a temporary URL without HTTPS, making the application unusable. In that case, you’ll need to register a domain or use a subdirectory on an HTTPS-enabled site.

Limitations and Specific Features

Each platform has unique limitations. Before selecting one, check whether it meets your project’s requirements.

• For instance, some platforms allow video content (e.g., Unity + ARJs-Unity), while others don’t. The maximum distance for marker recognition also varies—for example, Zappar limits it to double the marker’s size, whereas Unity + ARWT can reliably recognize a 25 cm marker from 1.5 meters away.

• Mobile browsers also present challenges. They don’t integrate with the OS like native apps, which limits access to certain hardware and features.

• You can’t enter fullscreen automatically—JavaScript interaction is required, and some browsers (like Safari on iOS) don’t support the Fullscreen API at all.

Marker-Based WebAR
Markers (or targets/triggers) are used to start the AR experience. Each platform has its own requirements and best practices. However, some common points include:

• 2D vs 3D Markers: Most platforms support only 2D markers. These are placed on flat or curved surfaces of real-world objects.

Challenges of using Augmented Reality - Target Images

• Marker Design: Markers should be asymmetrical to avoid repeating patterns like checkered or tiled images.

• Recognition Points: Cameras use corners, curves, and contrasts to recognize markers. The more unique details, the better.

• Image Shape: Ideally, use square or slightly rectangular images. Very wide or tall images often fail to be recognized.

• Print Quality: Use high-quality prints, preferably on photo paper. Using a monitor image as a marker is not ideal due to screen glare and reflection.

Challenges of using Augmented Reality - Image Detection Points

• Size vs Reading Distance
  The larger the marker, the greater the distance from which it can be recognized. At 1.5 meters, some platforms need an 80 cm marker to ensure proper recognition. Others, like Unity + ARWT, can work with 25 cm markers. If your experience takes place in a large space, evaluate whether marker-based WebAR is the best choice.

• 3D Object Shaking
  If the marker isn’t consistently recognized, the 3D objects may appear to shake. While it's not yet possible to eliminate this entirely, following best practices can significantly reduce the issue.

• Camera and Lighting Quality
  Both the device’s camera and real-world lighting conditions directly impact marker recognition and rendering quality.

All of the factors mentioned above are essential when planning a WebAR application. Having the support of a specialized and experienced team is crucial to achieving and exceeding your project’s goals.

If you’re facing challenges with Augmented Reality, 10i9 can help.

Our team is highly qualified and prepared to solve problems through innovative technological solutions. We create competitive products that stand out in the market.

We specialize in Augmented Reality, Mobile Applications, Custom Systems, Big Data, Cloud Computing, and professional hosting services.

Want to learn more? Visit 10i9.