Best Library/Framework for Viewing Products in WebAR?

General
1

Hello everyone…

I’m currently using the model-viewer for displaying products in webAR, but I’m interested in exploring other options. What are some of the best libraries or frameworks for this purpose?

Additionally, I’m curious about the factors that affect the loading size of a model in webAR. Is it primarily the server capabilities, the size of the model itself, or are there other parameters we should consider? :wink:

2

Hi there!

It’s great that you’re exploring different options for displaying products in webAR.

Here are some of the best libraries and frameworks you can consider:

  1. Three.js: A powerful library for creating 3D content on the web. It has a WebXR module that supports AR experiences.

  2. AR.js: A lightweight library for creating AR experiences on the web. It supports marker-based, location-based, and image tracking AR.

  3. A-Frame: A web framework for building virtual reality experiences, which can also be used for AR when combined with AR.js.

  4. 8th Wall: A comprehensive platform for building AR experiences that run on both web and mobile.

  5. Blippar: Offers a WebAR SDK that is compatible with popular frameworks like Unity, PlayCanvas, A-Frame, and Babylon.js.

Regarding the factors that affect the loading size of a model in webAR, several parameters come into play:

  1. Model Size: The complexity and detail of the 3D model itself, including the number of polygons and textures, significantly impact the loading size.

  2. Textures and Materials: High-resolution textures and complex materials can increase the file size.

  3. Compression: Using formats like glTF with compression can help reduce the file size without compromising quality.

  4. Server Capabilities: While server capabilities affect the speed of delivery, they don’t directly impact the model’s loading size.

However, a faster server can improve the overall loading experience.

  1. Network Conditions: The user’s internet speed and latency can affect how quickly the model loads.

  2. Optimization Techniques: Techniques like level of detail (LOD), where different versions of the model are loaded based on the user’s distance from it, can help manage loading sizes effectively.

3

Hi!
It’s great that you’re exploring different options for displaying products in webAR.

Here are some of the best libraries and frameworks you can consider:

Three.js: A powerful library for creating 3D content on the web. It has a WebXR module that supports AR experiences.

AR.js: A lightweight library for creating AR experiences on the web. It supports marker-based, location-based, and image tracking AR.

A-Frame: A web framework for building virtual reality experiences, which can also be used for AR when combined with AR.js.

8th Wall: A comprehensive platform for building AR experiences that run on both web and mobile.

Blippar: Offers a WebAR SDK that is compatible with popular frameworks like Unity, PlayCanvas, A-Frame, and Babylon.js.

Regarding the factors that affect the loading size of a model in webAR, several parameters come into play:

  • Model Size: The complexity and detail of the 3D model itself, including the number of polygons and textures, significantly impact the loading size.
  • Textures and Materials: High-resolution textures and complex materials can increase the file size.
  • Compression: Using formats like glTF with compression can help reduce the file size without compromising quality.
  • Server Capabilities: While server capabilities affect the speed of delivery, they don’t directly impact the model’s loading size. However, a faster server can improve the overall loading experience.
  • Network Conditions: The user’s internet speed and latency can affect how quickly the model loads.
  • Optimization Techniques: Techniques like level of detail (LOD), where different versions of the model are loaded based on the user’s distance from it, can help manage loading sizes effectively.
4

When I started using model-viewer for webAR, I found it very straightforward but wanted to explore more options. Libraries like Three.js and Babylon.js offer robust alternatives with extensive customization for AR. As for model loading sizes, it’s a mix of factors: the model’s complexity and file size play a big role, but server capabilities and how efficiently the model is optimized also matter. In my experience, optimizing the model for web use and leveraging efficient hosting solutions can make a significant difference in performance.