A Web-Based Augmented Reality System

Web-based augmented reality (AR) systems have many use cases and opportunities in Product Visualisation, Education and Training, Advertising and Marketing, Navigation and Wayfinding, Virtual Try-On, Interactive Storey Telling, Museums and Cultural Heritage, Training and Simulation, Gamification and more. As such, this research paper, A Web-Based Augmented Reality System, will explore these technologies and their use cases in the form of a literature review and several examples utilising the likes of Vectary, Blippar, Model Viewer and World Cast AR. The purpose of which, is to demonstrate a level of understanding of these virtual technologies, to develop them and to develop their future with practical use cases.


Introduction
Through Product Visualisation, web-based AR enables consumers to view products in their entirety on a website.Consumers can do this to view how a product will appear in their own space before deciding to acquire a product.Therefore, it is beneficial for online stores that sell clothing, accessories, art, furniture, and other household goods [1,2].
By superimposing digital content into a real-world space, web-based AR can improve Education and Training during educational experiences [3,4].Students can access AR content on their smartphones or tablets for interactive learning experiences, investigating challenging ideas, or performing virtual experiments [5,6].
Web-based AR can be used by advertising and marketing to develop interactive and compelling commercials [7,8].Users can have enhanced AR experiences with 3D animations, films, or interactive games by scanning image targets such as print advertisements or posters with their mobile devices [9].
Web-based AR can help users navigate strange places [2,10,11].Web AR overlays can offer visual directions, highlight points of interest, or display more information about the surroundings by utilising a mobile device's camera and GPS capabilities [1,12].
Users of AR technology can virtually try on apparel, accessories, or cosmetics [1,13].In addition, customers can see how an item fits, looks, or matches their preferences via web-based AR, which improves the online purchasing experience [14,15].
By superimposing digital characters, objects, or environments onto real-world books, comics, or storytelling platforms, interactive storytelling in web-based AR can bring stories to life [9].Users can engage in more significant immersive interactions with the augmented features, including a narrative experience [9].
Adding more information, interactive exhibits, or digital reconstructions of historical artefacts, Museums and Cultural Heritage in web-based AR can improve museum visits [8,9].Furthermore, these experiences can now be delivered straight to a user's smart device via web-based AR without downloading any particular AR-based application.
Web-based AR can be utilised for training and simulation in various industries, such as staff training [4][5][6].In addition, web-based AR might be used to imitate realworld situations like training for dangerous locations or operating equipment virtually [16].
Additionally, interactive games or gamification and experiences can be made with web-based AR.For example, users can participate in location-based gaming, scavenger hunts, or multiplayer activities by superimposing virtual features onto the actual world, blurring the lines between the physical and digital worlds [17].
This research paper, A Web-Based Augmented Reality System, will continue to explore these technologies as mentioned above and their use cases.Section 2, Background, explores the variety of Web-Based AR platforms and makes deductions into who and what they are with practical examples.Section 3 describes our methodology of the overall features and resources with demonstrable examples for implementation using Vectary as an example.Section 4 concludes the work, which presents a direction for future developments.

Background
This section discusses the web-based AR platforms mentioned, their characteristics, features, and use cases.

A. Vectary -3D detection and use cases
Vectary is a web-based platform that allows users to create web-based AR applications.These web-based AR applications can be made for free on the Vectary web-based platform.Once completed, to export the new web-based AR application, the developer will be required to pay a monthly subscription, and then the web-based AR application can be sold or submitted to any particular website.The final result is a code snippet given to the developer to integrate into their website.When A developer completes an application in the Vectary dashboard, selects the viewer tab button, and generates an HTML iframe code fragment.This fragment can then be used within a website.For example, the following steps break down this code fragment into manageable pieces to better understand it.
Once the code snippet is successfully inserted into a website, it is possible to view it.However, some developers may find this strategy cumbersome and a time-consuming process.
Therefore, Vectary provides additional resources offered only as a premium subscription that will allow developers to build and distribute designs to strengthen this embedded approach, such as a file via WhatsApp or Email.Then, without installing additional software, the embedded code allows consumers to participate in an AR-sharing experience; see Figure 1, ARDesign, with additional steps outlining the process below is the body text with indent.Other web-based services like Augment provide similar AR experiences.For example, the Augment platform enables businesses to have design teams upload products and services in a simple 5-step procedure.However, it might be viewed as a repeated strategy for a shared web-based AR experience.The steps in Augment's plan, for instance, are as follows:

B. How can we use Vectary?
Users can create and alter 3D models and scenes using the web-based platform and tool Vectary.It offers an intuitive user interface and a selection of tools for creating 3D objects or various uses, including product design, visual effects, augmented reality (AR), virtual reality (VR), and more.
Vectary users can start from scratch or a collection of pre-made 3D models and templates.In addition, the platform provides simple modelling capabilities for altering and transforming shapes, textures and materials for natural surface characteristics.Vectary stands out for its innovative, collaborative features that let users collaborate in real time on the same project.This is very helpful for group projects or when several designers must work together on a design.
The platform is compatible with well-known 3D programs, gaming engines, and AR/VR platforms thanks to its support for 3D model export in several formats.In addition, Vectary offers alternatives for interfacing with various programs and platforms, enabling users to quickly add their designs to websites.
Blippar -is an online AR platform that allows users to create AR applications and export them to multiple devices [18,19].To build a professional-looking AR application, Blippar provides a practical and functional guide for professionals and non-professionals [19].
As a provider of AR technology, Blippar provides tools for developing and utilising interactive AR content [20].Some of the tools can be considered components or components that can be added to an object in the inspector pane, similar to the Unity graphics engine [19,20,21,22].For example, positioning, scaling, and rotation components are widely used within Blippar, with additional components freely used during development [3,23].
The Blippbuilder AR creation and publishing platform is Blippar's flagship item [4].Users of Blippbuilder can create AR experiences without having a deep understanding of coding [19,20,21,22,23].In addition, a wide range of users, including marketers, advertisers, and content creators, can utilise it thanks to its drag-and-drop capability and userfriendly interface [24].
Blippar also provides artificial intelligence and deep learning algorithms that allow more advanced developers to connect their AR experiences to real-world scenarios [25].Blippar delivers a complete set of controls for AR developers that puts production in the hands of professionals and novices [4].

A. How can we use Blippar?
The Blippar application is downloadable to any smart device from the Apple or Google Play store.Once the application is downloaded and installed, users can open the application and hover a smart device over an image or piece of text within a magazine [26].The application is meant to augment the image or text [19].Users can then click on the digital objects that take them to a particular topic's host address.However, this is not without its limitations; there have been known issues with the editor of Blippbuilder [18].
Instead of creating a user-friendly editor for all, Blippabuilder has been seen as a complicated and challenging system for users to create their dynamic content [18].
Continually, developers are offered a seven-day free user trial which requires developers to purchase a service package and licence key to continue Blippar services at the end of the free trial.
Users can create AR content using Blippbuilder by incorporating interactive components like 3D models, animations, movies, and audio, that are augmentable into real-world scene views.In addition, the platform offers functions including object tracking, image recognition, and geolocation-based augmented reality, enabling users to start AR experiences based on particular markers or locations.
Blippar enables users to find and interact with AR content made by others.In addition, users can access interactive AR experiences on their mobile devices by using the app to scan specific photographs or objects.
Model Viewer -Google created a web-based tool, Model Viewer, that empowers developers and enables users to interact with 3D models directly in a browser [38].Model Viewer uses WebGL, a JavaScript API for rendering dynamic 2D and 3D visuals, to deliver a seamless experience without calling for additional plugins or program installations [10,29].
3D models can be uploaded into the Model Viewer editor.It supports several 3D model file formats, including the widely used GL Transmission Format (glTF) and USDZ (Universal Scene Description) formats.

B. How can we use Model Viewer?
The 3D model can be rotated, zoomed in on, and panned using Model Viewer's functionality, allowing viewers to view it from various perspectives [27].Additionally, you can alter the model's appearance by altering its textures, materials, or lighting [28].In addition, Model Viewer offers animations, enabling you to show off the 3D model's dynamic movements or changes.
Overall, Model Viewer makes it easier for people to explore and visualise 3D material without needing specialised software or hardware by streamlining the process of displaying and interacting with 3D models on the web; see Figure 1, Virtual 3D Models.
The process for uploading a 3D model is relatively straightforward [20].For instance, you may click the GLB upload button or drag a 3D model into the Model Viewer Editor.The outcome is the same as long as the 3D model is still uploaded.

Figure 1. Virtual 3D Models
To this further, see section 2 Methodology, A. Web-based AR application using Model Viewer.The process illustrates an astronaut 3D model uploaded into the Model Viewer editor, resulting in a Model Viewer code snippet.This code snippet can then be copied and pasted into an HTML file, which will then be uploaded to Github.
World Cast AR -A software platform, World Cast allows for the production and delivery of augmented reality (AR) content.Without coding knowledge, users can quickly develop and share AR experiences [10,20,29,30].
Use the drag-and-drop interface of World Cast to build interactive AR content.The platform has several capabilities, including the ability to import 3D models, animation tools, picture recognition, and spatial mapping [27,31,32].In addition, the AR authoring tools from World Cast allow users to place virtual objects, films, photos, and other digital content in the physical world [33,34].

A. How can we use World Cast AR?
World Cast AR offers alternatives for sharing AR experiences with others once the applications are developed [35,36].The technology allows users to watch and interact with the AR content through the WorldCast mobile app on mobile devices like smartphones and tablets [37].
The AUREL architect required various Application Programming Interfaces (API) software to manage it as an application.For example, network architects such as AlexNet network, Inception-V3 and MobileNets worked with deep learning detection such as objects.In addition, enhancing STEM Education addressed the delicate balancing between resource constraints on speed and timing.
The architecture's implementation discussed the application using Cloud Vision API and Custom Tensorflow Lite Models.The benefit is to give a student a broad range of learning experiences.
AUREL is a mobile application that requires Android 7 or above due to ARCore.ARCore is the main feature within the application that allows for a digital object to be augmented.
The application data analysis provided use cases for broad and theme learning while utilising Mobile-Nets for Quantisation-aware training.The architecture's implementation discusses the application using Cloud Vision API and Custom Tensorflow Lite Models.The benefit of this is to give a student a broad range of learning.AUREL is a mobile application that requires Android 7 or above due to ARCore.ARCore is the main feature within the application that allows for a digital object to be augmented.
The application data analysis provided use cases for broad and theme learning while utilising Mobile-Nets for Quantisation-aware training.Ang et al. [5] is notable for providing a new communication medium in an AR system for the twenty-first century in STEM fields, with future enhancements planned for fully immersive experiences. .

B. Methodology
Web-Based Augmented Reality Systems is a research study into web-based AR applications.As such, comparative tables are created to draw distinctions between these webbased technologies.
Additionally, Table

C. Overall Features and Resources
In particular, a comparison of web-based AR platforms provides vital information on the features and limitations of web-based AR software development.Based on the material provided but not limited to Table 1, Table 2 Platform Support further highlights the benefits of these systems and their potential.
For example, general web-based AR attributes utilised by Vectary, Blippar, Model Viewer and World Cast AR should perform similarly or even identically to one another [4,22,24,38].Interestingly, where things start to diverge is based on several factors that are perhaps out of scope for this research paper.Nevertheless, some of these comparisons start to diverge for the software developer, utilising the correct browser with the right capabilities, as seen in Tables 3, 4, 5 and 6 WebXR.This may become more challenging when knowing or not knowing what type of web browser the end user may use rather than the type of device they are using.
However, web-based AR technology can offer the ability to navigate around hardware or technical issues when building an AR application within a graphics engine such as Unity [27,31,39, As for Unity, the Software Development Kit (SDK) that is loaded into the Unity graphics engine may need an API level 26 if the AR platform is ARFoundation or Vuforia [12,39,41,42].In doing so, API level 26 can render many iOS and Android devices obsolete, making the AR application unattainable [43,44,45].Therefore, web-based AR applications appear to be more suited even with browser limitations, as seen in Tables 3, 4, 5 and 6 WebXR.However, it should be noted that this research paper Web-Based Augmented Reality Systems, is not a paper on the public adoption of web-based AR.
Table 1, comparative web-based AR platforms, demonstrates, generally, the reflective merits of each platform.Each web-based AR platform utilises the same type of components as the other.These components, however, may have slightly different variations in naming convention and layout but appear similar such as positionscale and rotation.Although this is one example, it is relevant to note where things may differ, such as the x, y, and z rotations.Furthermore, like Unity and Blender, correcting the orientation to export from Blender to Unity can be a challenge since Unity views the Y vector as the UP, while Blender views the Z vector as the UP [46].
Continually, Table 2 Platform Support presents findings that must not be confused with .exefiles that are downloadable and installed on personal computers but rather the findings of which platforms can run on a suitable web browser for web-based AR software development.
Web-based AR applications are just that, web-based and developed within a web browser [47,48].Table 2 Platform Support presents specific findings that should not be confused as to thinking that Vectary or Blippar cannot be used on a Windows or Mac machine.Table 2 Platform Support demonstrates that Vectary, Blippar, Model Viewer or World Cast AR cannot be downloaded and installed on a Windows or Mac machine and utilised as a desktop application.
In addition, Table 2 Platform Support was to demonstrate two things: the type of software as a Service (SaaS) and the other technical support, conscribed as an individual, would utilise in a time of need.Interestingly, on viewing Table 2 Platform Support, the results may be interpreted as disquieting to the uninitiated, relative to no support in all fields in Model Viewer.However, this may be due to its simplicity for development and integration into websites.
Continually, findings are presented in Tables 3, 4, 5 and 6 WebXR.These findings conclude the investigation into 7 web browsers and their suitability for each web-based AR platform, such as Vectary, Blippar, Model Viewer and World Cast AR.In addition, each table reflects on the WebXR Devices API, HitTest API, WebXR DOM Overlay API, and domOverlayState Experimental [20,49,50].The purpose of this is to conclude which browsers are the most suitable for development and the exchange between XR and AR compatibility when using the applications.Further evidence of this can be viewed in Figure 2 Astronaut, Figure 3 TBot, and Figure 4 ARSofa.Table 7 WebXR Comparison provides a summary table of Tables 3, 4, 5 and 6 WebXR.Although similar, it was challenging to compare each platform to each web browser until the was consolidated; otherwise, comparing the web-based AR platforms from the beginning would have been simpler or more effective.

Conclusion and Future Work
To provide data and information on concurrent web-based AR, this research paper, a Web-Based Augmented Reality System, facilitates a deeper understanding of web-based AR technologies, the platforms and use cases in the form of comparative review analysis.Section 2, Background, covered the literature review and four types of web-based AR: Vectary, Blippar, Model Viewer and World Cast AR.The purpose of the Background was to understand the specifics of these webbased AR platforms, their capabilities, and use cases presented in the form of a literature review and demonstrable examples.Section 2 illustrated an example in a clear and coherent chronological order, a method for implementing a web-based AR application using Vectary by importing a code snippet, an HTML element, into a web page and launching that web page via GitHub.
Continually, a web-based AR platform Blippar was discussed on its reflected merits and use cases.Blippar allows users to build professional-looking AR applications without a deep understanding of code; in fact, it's not even required.In addition, Blippar prides itself on its interactive sharing capabilities, where users can build web-based AR applications and share them with anyone in the world.Although similar to the other web-based AR platforms, it could be a personal choice as to why someone would choose one web-based AR platform over another.
Model Viewer could be considered Google's solution to web-based AR technology, a user-friendly and simplistic tool to implement at a basic level.Although it seems to have limitations in the documentation for implementation and use cases is hopefully well received within this research paper, a Web-Based Augmented Reality System.
World Cast AR appears to be one of the more unique web-based AR platforms available.A well-designed and graphically pleasing website does not appear overly complicated for a software developer or user in general.With similar components and implementation procedures, the research must speak for itself and simultaneously allow potential software developers to try the technology and review those limitations irrespective of the content found and documented within this research paper, a Web-Based Augmented Reality System.Section 3 described our methodology of the overall features and resources with demonstrable examples.For instance, the implementation of Model Viewer as the primary web-based AR application and, in particular, a comparison of web-based AR platforms is to provide essential information on features and limitations of webbased AR software, including the web browsers that host development.This information is not limited to the tables mentioned within this research paper, a Web-Based Augmented Reality System.Section 4 concludes the work and presents a direction for future developments.Finally, this paper is expected to continue investigating web-based AR systems, their capabilities, and feature support, including the capabilities of the public adoption of webbased AR technology and its use cases.

Algorithm 3 : 1 : 2 : 3 : 4 : 5 :
Augment 5-step procedure Algorithm 1: Vectary iframe Start Step 1: ID < /iframeid > = "351a969a−2e49− 4017−a3be3 e75b9c 4f2 Step 2: Source ="http://www.vectary.com/viewer/v1/?mo del=351a969a-2e49-4017-a3be3e75b9c4f2dc&env= cedarbridge" Step 3: Border ="0" Step 4: Width ="100" Step 5: Height ="480" Step6: Close ⟨< /iframe >⟩ End Start Step Download the app to a suitable device Step Ask development teams to upload their products and services to the Augments application Step Publish models with controlled and secure access to team and customer members Step Create a custom tracker Step View uploaded AR products and services End , Comparative Web-Based AR Platforms, presents information on web-based AR systems.The assessments in the table provide additional context for general data, target tracking, and features.Table 2 Platform Support presents findings on suitable web browsers for software development.Tables 3, 4, 5 and 6 WebXR represents browser features if required to use WebXR in AR modes.Each table represents findings on particular webbased AR platforms, contrasting results in Table 7 WebXR comparison.

Table 2 :
Platform Support

Table 1 :
Comparative Web-Based AR Platforms