Augmented Reality Web Platform for Real-time Configuration of Brownie Products by Physics Student of FPMIPA UPI

INTRODUCTION

Augmented Reality (AR) has transformed into one of the most exponentially growing technologies in the modern era. This technology offers a unique interactive experience by superimposing computer-generated digital objects into the user's physical environment in real-time. In other words, AR bridges the gap between the real world and the virtual world, enriching users' perception of reality with relevant digital information and content (Pavlik & Bridges, 2013).

The development of web-based Augmented Reality (web-based AR) represents a disruptive innovation in the AR technology landscape, changing the paradigm of accessibility and efficiency in the delivery of interactive experiences. This approach utilises the capabilities of the browser as the main platform for presenting AR content directly to the user, eliminating the need for specialised application installations. This strategy has significant implications for several crucial aspects (Qiao et al., 2019).

Firstly, web-based AR fundamentally reduces the barrier of entry for users. The elimination of the app download and installation process minimises friction and enables wider adoption, especially for users who are reluctant or do not have enough storage capacity for additional apps. Secondly, this web-based architecture inherently supports cross-platform compatibility. Unlike native applications that are tied to a specific operating system, web-based AR has the potential to run on a wide range of devices and operating systems (e.g., Android, iOS, Windows) provided that the device is equipped with a web browser that meets relevant standards, such as WebGL support for 3D graphics rendering. Third, the content distribution model is undergoing a significant transformation. Instead of relying on app distribution mechanisms through complex app stores, developers can distribute their AR experiences through simple URL links. This simplifies content deployment, accelerates development iteration cycles, and reduces logistical complexity. Fourth, web-based AR leverages a mature and established ecosystem of web technologies, including HTML5, JavaScript, and WebGL (Qiao et al., 2019).

This facilitates the integration of AR functionality into existing web applications and allows web developers to utilise the expertise they already have (Wu et al., 2013). As such, web-based AR opens up new opportunities for the application of AR in various domains, ranging from interactive marketing and advertising, product visualisation in e-commerce, immersive learning experiences in education, to simulation and training in industry, with a more efficient and accessible delivery model.

In this project, a web-based AR application is developed as a supporting instrument for the marketing strategy of a brownie company. The integration of AR technology into the marketing domain is intended to facilitate the creation of a more immersive and engaging interactive experience for potential customers. The use of AR enables direct virtual interaction with products (Lyrid, 2022), where customers can dynamically visualise and modify product attributes, such as size, toppings, or brownie variants, in a near-reality representation. This technology provides proportional visualisation of brownie size and shape, providing a more concrete and informative experience than conventional marketing methods, thus bridging the gap between digital representation and physical perception of the product.

The application of AR in marketing is not limited to increasing convenience for customers, but also plays a role in projecting an innovative and modern corporate image. Future prospects show that the integration of AR into marketing strategies has the potential to become an industry standard, given its capability to increase customer engagement and accelerate the consumer decision-making cycle. Empirical studies even indicate that AR has the potential to boost purchase intentions and provide a more positive user experience (Carmigniani & Furht, 2011; Javornik, 2016).

This article will elaborate on the development of a web-based AR application for marketing brownie products, including the formulation of development objectives, the stages of the development process implemented, and the analysis of its potential impact on marketing innovation in the context of the food industry. Through the implementation of this technology, it is expected to achieve significant progress and make a substantial contribution to digital transformation in modern marketing practices.

METHOD

This research adopts a development research methodology with a focus on designing, implementing, and evaluating a web-based Augmented Reality (AR) application as an interactive marketing instrument for brownie companies. This methodology was chosen because it is relevant to the research objectives to produce a product, in this case a web-based AR application, and test its effectiveness. The stages of this research include:

Systematic Literature Study

The first step was to conduct a literature study to identify user needs and relevant technologies. This literature study included a review of web-based AR frameworks such as A-Frame and AR.js, which enable the integration of AR in the browser without the need for additional applications (Carmigniani & Furht, 2011). In addition, previous research addressing the effectiveness of AR in the shopping experience was also utilised to understand the potential impact of this technology on marketing (Huang & Liao, 2017; Javornik, 2016). The initial stage of this research involved a systematic literature study aimed at:

• Identify User Needs: Analyse the needs and preferences of the target users regarding the shopping experience and interaction with brownie products. This can be done through literature searches related to consumer behaviour, digital marketing trends, and consumers' visual preferences for food products.
• Review of Relevant Technology: Conduct an in-depth review of web-based AR technologies, including frameworks such as A-Frame and AR.js, which enable the integration of AR functionality directly within the web browser without requiring the installation of additional applications (Carmigniani & Furht, 2011). This review includes an analysis of the capabilities, limitations, and potential applications of each framework in the context of brownie marketing.
• Analysis of AR Effectiveness in Shopping Experiences: Review previous studies that address the effectiveness of AR in the context of shopping and marketing experiences, to understand the potential impact of this technology on consumer behaviour, purchase intentions, and overall user experience (Huang & Liao, 2017; Javornik, 2016). This analysis will be used as a theoretical and empirical foundation in the design and evaluation of AR applications.

Design and Implementation of Web-based AR Applications

The second stage is project implementation, which involves the technical development and testing process. The project was developed by utilising web-based AR technology, equipped with a 3D visualisation feature that allows customers to virtually customise the size, toppings or type of brownies. Technical testing was conducted to ensure the web works optimally across different devices and browsers. Web development standards as recommended by the World Wide Web Consortium (Initiative, 2021) were applied to ensure system accessibility and compatibility. The process was also supported by the principles of interactive user interface development based on Nielsen Norman Group (Nielsen, 2024) guidelines. Based on the results of the literature study, the architecture and user interface (UI) design of the AR web-based application is carried out. This stage includes:

• Making Mockups and Prototypes: Designing interactive mockups and prototypes to visualise the appearance and functionality of the application.
• Application Development: Implementing AR web-based applications using the reviewed technology, with attention to user experience (UX) and application performance aspects.

Application Evaluation

The third stage is the internal evaluation of the project, which is conducted by the development team to ensure the quality and stability of the system. This evaluation includes performance tests on various usage scenarios, such as cross-device compatibility and graphics rendering efficiency. This process uses a software-based technical testing approach to ensure rendering accuracy and feature stability (Sharma Goyal, & Rai, 2019). The evaluation results provide an overview of the successful implementation of AR technology and its suitability to the set marketing objectives (Carmigniani & Furht, 2011; Huang & Liao, 2017). The evaluation stage aims to measure the effectiveness and impact of web-based AR applications on target users. Evaluation methods that can be used include:

• Usability Testing: Involving a group of users to test the application and provide feedback on ease of use, functionality, and interaction experience.
• Surveys: Collecting quantitative data through surveys to measure user perception of the app, purchase intent, and impact on brand image.
• Usage Data Analysis: Analysing app usage data, such as number of visitors, duration of interactions, and most used features, to understand user behaviour and the effectiveness of app features.

RESULTS AND DISCUSSION

This project integrates the use of Blender software for 3D modelling with Web Augmented Reality (Web AR) technology in order to promote brownie products from 3B Bakery. After the design and implementation of features in the Blender environment, the next crucial step is the deployment of the application so that it can be accessed by a wide audience. This process involves uploading and configuring the application files to a server or web hosting platform.

The result of this effort is an AR website that can be accessed through the following link: https://courageous-cobbler-08df57.netlify.app/. This web address leverages the use of the Netlify platform, a web hosting and deployment service popular for its ease of use and integration with modern development workflows.

When users access the website, they are greeted by a main page designed with structure and essential elements. Firstly, there is the 3B Bakery store logo that serves as a visual identity and branding, giving a professional and memorable impression. Next, a menu image is displayed which aims to provide a clear and attractive picture of the variety of brownie products offered. This visual aspect is very important in marketing because it can arouse consumer interest. The core element of the Web AR functionality is the ‘Ayo Pesan’ button. This interactive button initiates the menu scanning process through a mobile device camera or webcam on a computer. After scanning, the 3D brownie model that has been created in Blender will be displayed in real-time and overlaid on top of the camera view, providing an immersive augmented reality experience. Finally, there is an ‘About Us’ section that provides information about the creators of the 3B Bakery web AR store, aiming to establish credibility and an emotional connection with site visitors.

This Web AR implementation utilises technologies such as WebGL for rendering 3D graphics in web browsers, and AR.js for tracking and overlaying virtual objects in the real world. The choice of Netlify as a hosting platform provides several significant advantages. Firstly, Netlify offers ease of deployment through an automated process integrated with code repositories such as GitHub, which makes it easier for developers to update and deploy applications. Secondly, Netlify's use of CDN (Content Delivery Network) distributes website content to various servers around the world, effectively increasing access speed for users from different geographical locations. Thirdly, Netlify provides SSL certificates by default and free of charge, which guarantees a secure connection between users and websites via the HTTPS protocol.

The main interactive feature of the website is the ability to display 3D models of cakes through code scanning. This process is initiated when the user presses the ‘Let's Order’ button found on the main page. This action redirects the user to a special interface within the website designed for scanning codes. The code in question is the visual code printed on the physical and digital menus.

Image 2. The 3B Bakery menu, which shows three types of cakes and three codes in each menu.

Once users are directed to the scanning interface, they can use their mobile device's camera to scan the code found on the menu. The Web AR technology then processes the information contained in the code and triggers the display of the 3D model of the cake in real-time on the device screen. An important feature of this implementation is the ability to view the 3D model from multiple viewpoints. Users can rotate, zoom in and out of the 3D model view, providing an immersive interactive experience and a comprehensive visual representation of the product.

The website offers a more immersive interactive experience by providing 3D models of several popular cake variants. These 3D models are designed to display rich visual details, providing an accurate and attractive digital representation of the products. As in the case of the Marble Cake 3D model, which not only displays the general shape of the cake, but also reproduces the details of its distinctive marble texture, with the blend of colours and layers of batter clearly visible. This allows users to observe the pattern and texture of the cake as if they were seeing it in person. Furthermore, the Birthday Cake 3D model provides the flexibility to display a wide variety of decorations and embellishments. Users can see how the cake might look with different options of toppings, candles, or other embellishments, helping them visualise the ideal cake for their celebration. Finally, the 3D model of Kue Nastar showcases the signature round shape of the pastry, complete with details of the crispy outer crust texture and pineapple jam filling inside. As such, the provision of 3D models for these cake variants not only serves as an attractive marketing tool, but also provides detailed visual information and increases consumer confidence in the quality and appearance of the products on offer.

Image 3. 3B Bakery’s website AR (a) the entire menu; (b) marble cake; (c) birthday cake; (d) nastar.

This interactive 3D display feature offers a series of significant benefits in the context of marketing and user experience. Firstly, it substantially increases consumer confidence. For those who are still hesitant to purchase products online without physically seeing them, the 3D display provides stronger visual reassurance. The ability to examine product details from multiple angles before making a purchase decision reduces hesitation and increases consumer confidence in the quality and appearance of the product on offer. Secondly, interactive 3D displays create a more engaging and memorable experience, significantly increasing user engagement with websites and products. The possible interactions, such as virtually rotating, zooming and examining product details, provide a more immersive and personalised experience compared to viewing static photos. Thirdly, this implementation of Web AR technology provides an important competitive differentiation for 3B Bakery. By offering an innovative interactive experience, 3B Bakery can differentiate itself from competitors who may not have adopted similar technology. This creates a modern and innovative perception of the brand, providing a valuable competitive advantage in the market. Fourthly, better product visualisation is another key benefit. Compared to static 2D photos that only show one point of view, 3D models provide a much more accurate and informative representation of the product's shape, size, proportions and details. This helps consumers gain a more comprehensive understanding of the product before making a purchase, reducing potential disappointment due to discrepancies between expectations and reality.

From a technical point of view, the implementation of this feature utilises a combination of several key technologies to achieve augmented reality functionality in web browsers. Firstly, Web AR Frameworks, such as AR.js, play an important role in enabling AR functionality. AR.js is a lightweight JavaScript library that enables the development of web-based AR experiences without the need for plugins or additional applications. Secondly, WebGL (Web Graphics Library) is used for real-time rendering of 3D graphics within a web browser. WebGL allows the utilisation of the graphics hardware (GPU) acceleration of the user's device, resulting in a smooth 3D display and optimised performance. Thirdly, the 3D model of the cake is stored in efficient and web-compatible formats, such as glTF (GL Transmission Format) or glb (binary glTF). These formats are specifically designed for the transmission and rendering of 3D models on the web with relatively small file sizes and good performance, minimising loading time and ensuring a smooth user experience. Finally, Marker-based Tracking may be used to trigger the display of 3D models when a special code is scanned. This method works by recognising predefined visual markers by the device's camera. When the marker is detected, the system tracks its position and places the 3D model precisely over the marker, creating the illusion of a virtual object interacting with the real world. In this context, the code on the menu serves as a marker that triggers and positions the 3D model of the cake on the user's device screen. This combination of technologies enables immersive and interactive AR experiences directly in the web browser without the need to download a dedicated app.

 

CONCLUSIONS AND SUGGESTION

Based on the results and discussion that have been described, several important conclusions can be drawn regarding the implementation of Web AR technology in the promotion and marketing of 3B Bakery. This project successfully integrates 3D modelling using Blender with Web AR technology, creating an effective interactive experience for users and demonstrating the appropriate use of technology in the context of digital marketing. Features such as the display of 3D models of cakes from various angles through code scanning provide a more immersive, informative, and engaging user experience than conventional marketing methods such as 2D photos, potentially increasing customer engagement and satisfaction.

Furthermore, interactive 3D displays significantly increase consumer confidence, especially for those who are hesitant to buy products online. The ability to virtually inspect product details before purchase reduces doubts and builds confidence in product quality. The implementation of Web AR also differentiates 3B Bakery from competitors who have not adopted similar technologies, giving it a competitive advantage and an innovative and modern brand image. From the technical side, the selection of technologies such as WebGL for 3D rendering, glTF/glb format for 3D models, and Marker-based Tracking for code interaction shows a good understanding of relevant and efficient web technologies for AR implementation. The use of Netlify's hosting platform also provides advantages in ease of deployment, speed of access, and website security. Ultimately, by increasing consumer confidence, providing a more engaging experience, and differentiating itself from competitors, this Web AR implementation has great potential to increase sales and expand 3B Bakery's market reach.

Overall, this project demonstrates that the utilisation of Web AR technology in online marketing can have a significant positive impact on businesses, particularly in terms of improving user experience, strengthening consumer trust, and creating competitive differentiation. This implementation can serve as an example for other businesses looking to utilise AR technology to enhance their marketing strategies.

 

REFERENCES

Azuma, R. T. (1997). A survey of augmented reality. Presence: Teleoperators and Virtual Environments, 6(4), 355-385. doi: 10.1162/pres.1997.6.4.355

Carmigniani, J., & Furht, B. (2011). Augmented reality: An overview. In Handbook of augmented reality (pp. 3-46). Springer. doi: 10.1007/978-1-4614-0064-6_1

Huang, T. L., & Liao, S. (2017). Creating e-shopping multisensory flow experience through augmented-reality interactive technology. Internet Research, 27(2), 449-475. doi: 10.1108/IntR-11-2015-0321

Initiative, W. W. A. (2021). Home. Web Accessibility Initiative (WAI). URL: https://www.w3.org/WAI/

Javornik, A. (2016). Augmented reality: Research agenda for studying the impact of its media characteristics on consumer behavior. Journal of Retailing and Consumer Services, 30, 252-261 doi: 10.1016/j.jretconser.2016.02.004

Lyrid.Prima. (2024). Pentingnya Augmented Reality (AR) dalam Pemasaran. Lyrid Prima Indonesia | Konsultan IT & Digital Service Di Jakarta. URL: https://lyrid.co.id/pentingnya-augmented-reality-dalam-pemasaran/

Nielsen, J. (2024). 10 Usability heuristics for user interface design. Nielsen Norman Group. URL: https://www.nngroup.com/articles/ten-usability-heuristics/

Pavlik, J. V., & Bridges, F. (2013). The emergence of augmented reality (AR) as a storytelling medium in journalism. Journalism & communication monographs, 15(1), 4-59. doi: 10.1177/1522637912470819

Qiao, X., Ren, P., Dustdar, S., Liu, L., Ma, H., & Chen, J. (2019). Web AR: A promising future for mobile augmented reality—State of the art, challenges, and insights. Proceedings of the IEEE, 107(4), 651-666. doi: 10.1109/JPROC.2019.2895105

Sharma, R., Goyal, S., & Rai, A. (2019). Enhancing AR-based user interfaces for e-commerce platforms. International Journal of Interactive Mobile Technologies, 13(9), 98-110. doi: 10.1080/0144929X.2023.2287660 

Wu, H. K., Lee, S. W. Y., Chang, H. Y., & Liang, J. C. (2013). Current status, opportunities and challenges of augmented reality in education. Computers & education, 62, 41-49. doi: 10.1016/j.compedu.2012.10.024