What's the optimal format for viewing on a mobile web browser?

We’re developing a WebAR app and are determining the best file format for displaying 3D models in AR. We’ve experimented with GLB and USDZ, but encountered compatibility issues—GLB works on Android but not on iOS, while USDZ functions on iOS. Now, we’re using Polycam to capture our models and need to export them to a specific format. Does anyone here have experience with WebAR and can provide guidance in this scenario?

3 Likes

For optimal viewing on a mobile web browser, use responsive design, a mobile friendly layout, fast loading speed, touch friendly navigation, minimal pop ups and ads, readable font sizes, and optimized multimedia content.

2 Likes

For WebAR, GLB (glTF 2.0 Binary) is preferred due to its short file size and performance. To ensure iOS compatibility, utilise a converter to convert GLB files to USDZ. Options include:

Filestar, CartMagician, Aspose, ViewAR.

These should help you display your 3D models in AR on various platforms.

1 Like

File Format Selection:

GLB (preferred): While GLB files don’t directly function on iOS due to Apple’s use of ARKit, there’s a workaround. Utilize libraries like Babylon.js or Three.js in your WebAR application to dynamically convert GLB files to USDZ format on iOS devices. This ensures broader compatibility across various devices.
Development Libraries:

Babylon.js or Three.js: These JavaScript libraries are popular for WebAR development. They provide functionalities such as GLB to USDZ conversion, simplifying your development workflow.
Polycam Exports:

GLB Export: When using Polycam, export your models in GLB format. This format is highly versatile for integration into your WebAR application.
Alternative Export Options: While Polycam may not directly export to USDZ, consider exporting to OBJ format and then converting to GLB using online tools or software. However, the recommended approach generally involves GLB with real-time conversion using libraries.
Additional Recommendations:

Community Resources: Both Babylon.js and Three.js offer robust communities and comprehensive documentation. Explore tutorials and examples to guide you through file format conversions within your WebAR project.
Thorough Testing: Ensure thorough testing of your WebAR application on Android and iOS devices to verify proper model rendering and functionality.

In developing a WebAR app, managing compatibility between GLB and USDZ file formats is crucial, as GLB works on Android while USDZ is needed for iOS. To address this, you can implement a device detection script on your web app to serve the appropriate file format based on whether the user is on an Android or iOS device. With Polycam, you can capture your 3D models and export them in both GLB and USDZ formats, ensuring you have the necessary files for both platforms. This approach allows you to provide a seamless AR experience for users across different devices by maintaining a repository of models in both formats and dynamically serving the correct one.