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.
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.
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.
