WEB-BASED ONLINE EXHIBITION BY IMPLEMENTING VIRTUAL AND AUGMENTED REALITY TO VISUALIZE ARCHITECTURE BUILDING DESIGN

Web-based online exhibition using immersive technology, namely Virtual Reality & Augmented Reality, has a major effect on the efficiency of time, place, and cost in providing visitors with an understanding of building architecture. Interaction in understanding architectural modeling is also assisted by a technology called Avatar Mediated Communication (AMC) which is the scope of interaction with other visitors in a Virtual Environment created by Virtual Reality technology. Technology that is able to support all website-based reality activities is made with the Laravel & Express Js framework (Website), Spoke Mozilla Hubs (Virtual Reality Environment), and Library AR Js (Augmented Reality Marker Based). The technology is selected, built, and combined in the stages of the Research & Development (R&D) method, the Multimedia Development Life Cycle (MDLC) model in examining the development stages and user responses to web-based Virtual & Augmented Reality development products. The results of the responses obtained are based on 6 categories in the UEQ (User Experience Questionnaire) instrument. The result showed that the three largest categories that give a positive response are stimulation, attractiveness, and novelty. Meanwhile, the three categories below are efficiency, perspicuity, and dependability. This indicates that the online exhibition in the support of immersive visualization is able to increase user curiosity in trying to enter the virtual reality room presented in web-based Virtual & Augmented Reality.


INTRODUCTION
In the current technological development, there is an increasing need for more immersive media in displaying visual content [1].Immersive means that technology is able to represent cross-dimensional content into a space so that it can be quickly and easily understood and reached by users [2].One way to represent the content is to present it online.Presenting content in an online modality is one of the fastest solutions to reach actual or potential users [3].The works in the online content can be collected and organized by function, type, and target audience into a unit of exhibition scope, the concept is often named an online exhibition [4].
An online exhibition is a multidisciplinary media between the technology used and several different fields of knowledge based on the content displayed, then combined into a complete work [3].Exhibiting work in an online modality to visitors is very important to appreciate and understand works of art [5].However, a challenge in creating an online exhibition environment is the availability of resources to be able to design and develop online exhibitions.The multidisciplinary nature of online exhibitions requires many resources, such as media experts (Website/Application mobiledesktop Programmer, 3D Artist, Photographer, Visual Communication Design & Immersive Technology Technician) and content experts (experts in the field of content displayed in the exhibition) [6].This cross-disciplinary engagement and interdependence should not leave any gaps in analyzing the characteristics and needs in designing online exhibition content.This needs to be emphasized because online exhibition visitors are often unable to communicate their cross-dimensional experience with other visitors if compared to offline exhibitions [7].
An example of cross-connectivity created in this research is experts in the field of technology (Programmer, 3D Artist) together with content experts in the world of building architecture.The problem that occurs today is that technology experts try to facilitate the work owned by the creator (architect) but the creator does not have access to be able to communicate directly with visitors in the online cast [7].Technology experts only display a visual object without paying attention to how important the visitor interacts with the owner of the work in explaining the work on display.This greatly affects the psychology of visitors in understanding the visual, aural, and haptic properties of the displayed works.
To create harmony between visual, aural, and haptic in communicating the work, one of the immersive technologies is needed that makes the boundaries between the real world and the digital world connected and mixed in order to give the effect of communicating similar to the real world in digital simulations [8].The exhibition is actually very close to the trade and service sector.The world of architectural services needs to adopt this technology in improving its service sector by conducting publications in order to convince the market that the services offered can meet the needs and interests of the community [9].Publication is the process of providing information to the public either by written or oral means [4].
Therefore, this research is aimed at facilitating the publication needs for marketing through online exhibition media.Researchers developed a virtual environment by applying Virtual & Augmented Reality to reduce the psychological distance between online visitors and help increase user engagement [7].Users can visit the exhibition anywhere, anytime, and on any device such as smartphones, computers, or VR glasses.
Virtual Reality (VR) is a technology that allows users to feel the digital world as it is felt in the real world and allows them to be able to communicate with humans in a virtual world that combines space, time, interactivity, and interuser experiences [10].Users can explore media or content which is involved in dynamic media interactivity and get an experience from a virtual interface that allows users to communicate through AMC (Avatar Mediated Communication), Video Mediated Communication (VMC) & Computer-Mediated Communication (CMC) technologies [11], [12].Augmented Reality (AR) is a digital technology that blends 2D and 3D virtual objects into a concrete environment and projects them in realtime [13].
The combination of these two technologies is a solution to increasing the allure of product and service publications in the field of architectural consulting.The application of Virtual & Augmented Reality technology is not only a development design but also a strategy in an effort to accelerate business development in the field of architect consulting [14].Virtual Reality and Augmented Reality are solutions to provide strategic value in digital-based marketing.These two technologies can provide a visual image experience that gives effect to the sense of sight, auditive images that give effect to the sense of hearing, and tactile images that cause a person to feel an environment that they live in [15].

METHOD A. Research Design
This research applied the R&D (Research and Development) method which involved a series of steps in developing new products or improving existing products and can be accounted for [16].The model used was MDLC (Multimedia Development Live Cycle) which is a multimedia software development consisting of 6 stages namely conceptualizing, designing, collecting materials, making, testing, and distributing so that a concrete media was formed on target and effective.Figure 1 shows the multimedia development life cycle [17], [18].

Figure 1 Multimedia Development Life Cycle
Specifically, the MDLC model used was Luther's MDLC model.The term "authoring" used by Luther is defined as multimedia software development in which each stage cannot be done sequentially and allows it to be done in parallel, but the concept and design stages are still carried out at the beginning and must not be skipped [17].Explicit work steps in accordance with the MDLC workflow are as follows: All processes and stages of this development were documented in a development model step that can be seen in Figure 2, namely concept, design, material collecting assembly, testing, and distribution.
(1) Concept in this development is the use of online-based media that runs on a web browser (browser), so users can enjoy using this development product without installing it and it is only enough to use the browser that is already available on the user's device.To build a VR environment, the Spoke Mozilla Hubs platform was needed, and using the AR Library was needed in building AR.

B. Mozilla Hubs Platform for VR
Mozilla Hubs is a low-cost, multidevice, virtual reality-based environment development platform.Mozilla Hubs has an innovative approach that brings participants into a 3D shared virtual environment in a system based on Avatar Mediated Communication (AMC), Video Mediated Communication (VMC), and Computer-Mediated Communication (CMC) [12].AMC is one of the special features in Mozilla Hubs, an example of an avatar model that can be selected can be seen in Figure 3. AMC in virtual worlds can be useful for social interaction, and overcome the problem of nonverbal cues.AMCs in socializing in VR have potential as communication tools, and have the ability to act like humans [11].AMC users can gather in a virtual environment to chat, exchange virtual props, play games, move their avatars using the cursor keys, and navigate using the keyboard and communicate with other users [12].
Mozilla Hubs has an editor to create virtual rooms that can be customized by the creator.Creators can do modeling in any application but on condition, the file extension that can be included in the Spoke Mozilla Hubs editor platform must have a GL Transmission Format Binary file (.glb) format containing information about 3D models, scenes, models, lighting, materials, node hierarchies, and animations can be seen in Figure 4. develop mobile applications or applications that are installed on the device to be used.In addition, users also do not need to set aside space to download AR applications and do not need to update them because there is no need for installation.In the AR.js library there are 3 types of Augmented Reality, including Image Tracking, Location Based, and Marker Based [19].The development of this online exhibition using one of the features of AR.js is Marker Based.
Markers are defined as patterned markers with contrasting colors.The AR supporting application program is able to recognize the orientation and position of the marker in order to create a 3D virtual world at the point (0,0,0) 3dimensional cartesian coordinates namely x, y, and z.Markers are made based on matrix calculations and it is recommended that marker patterns are simple and high contrast so that they can be easily processed by smartphones, as can be seen in Figure 5  The development of this web-based online exhibition was very complex because it connected multimedia and also various kinds of technology in it.The following is a chart of the process, flow, and role of each technology used and supporting equipment in running a webbased online exhibition development product, which can be seen in Figure 6.
In Figure 6, the website that is built as a whole uses the Laravel Framework.This web design has 2 segments, namely virtual reality using the Mozilla Hubs platform and Augmented Reality using the express js framework (runtime node js).The Express js framework wraps all 3D assets and AR.js libraries which are then hosted so that they can be run on all devices such as computers or smartphones.The participants consisted of 40 people using a purposive sampling technique within the scope of respondents who understood the concept of architecture, customer loyalty, and the general public who might want to use architectural consulting services.UEQ is used as a field test that can manage respondent survey data regarding the user experience that can be easily applied, reliable, and valid in complementing or supporting other subjective research methods in assessing the quality of a product or service.UEQ concerns 6 areas, namely the areas of attractiveness, perspicuity, efficiency, dependability, stimulation, and novelty, which in total have 26 questions [20].In accordance with the design that has been designed as described in the method section, the Virtual & Augmented Reality-based online exhibition work consisted of 5 development parts, namely website creation, VR & AR modeling, AR markers, and AR e-books.The 5 parts were carried out in parallel following the development needs.The thing that needed to be prepared at the beginning was preparing a container to be used as an exhibition.In this context, the container was in the form of a website.

RESULT AND DISCUSSION
Figure 7 Website www.bellodesainstudio.comWeb development requires a design related to web layout design, website content, and also other utilities related to the company profile.The developed website was designed to follow the rules and needs of the exhibition procurement, namely the objects on display and the description of each project exhibited in the publication.The main web development used the Laravel framework because the website developed was based on a content management system.In supporting AR technology, a new domain server was needed to manage AR content, the framework used was Express.js.The two domains were connected to get a complete website.The website layout display can be seen in Figure 5.

Figure 8 Layout Virtual Exhibition
The creation of a VR-based virtual environment began with modeling using the Sketchup application.The layout of the virtual room developed was adjusted to the scope of the exhibition needs, namely the lobby, and the exhibition booth as shown in Figure 6.In addition to the virtual exhibition, there were also 5 home project visualizations that had implemented VR technology using Mozilla Hubs, but there were adjustments that must be made in making this virtual environment.The adjustments made were designing the ground area but with edges, faces & textures that had been minified, which can be seen in Figure 7.

Figure 9 Preparation of AR and VR Needs Environment
After doing (1) minification in the first step, then (2) texture improvement and converting the file into .glbformat using the 3D blender application to adjust the needs of the Mozilla Hubs Platform.(3) In Mozilla Hubs, there was a Mozilla Spoke editor that can be used by users in designing and reusing every feature provided in Mozilla Hubs.(4) The next step was publishing and documenting the minimum requirements of each scene created.The entire main part of VR development can be seen in Figure 8.In the Mozilla Hubs performance check (4), there were 5 things that must be considered as a determinant that affects the running of the virtual environment created, namely polygon count, materials, textures, lights, and file size.Mozilla hubs recommend that each virtual environment be created with the following conditions; polygon count ≤ 50,000 triangles, unique material ≤ 25, maximum texture 2048x2048px for 246mb RAM on mobile devices, lights ≤ 3, and maximum file size 128 Mb.Virtual reality displays using Mozilla Hubs can be seen in Figure 9.  Same as what had been done in Figure 7, the Augmented Reality material collecting was done but there were differences in the next step which can be seen in Figure 11.(1) At this stage, environmental adjustments were made using sketchup, (2) then texture and shape improvements were made in blender, (3) then adjusting the code syntax on the node js server that had been prepared with all the css layouts that had been made.In this step (3) AR can be used, but to make it easier for users to enjoy the exhibition, the gallery layout on the website was re-made and the Poster version was re-made in the AR e-book layout.It can be seen in Figure 12.Each poster made has a barcode that directly leads to the AR.js running server on the Express.jsframework.In enjoying this online exhibition, users must pay attention to the specifications of the system requirements, both the use of browsers and desktop or smartphone devices.The data on the results of using online exhibitions can be seen in Table 1.So, there are browsers that were not compatible with the running of Mozilla Hubs Virtual Reality and Augmented Reality with AR.js.This can be seen in Table 2.

Table 2. VR & AR in Browser
Overall, both AR and VR projects are loaded in the domain address www.bellodesainstudio.com/VE on VR technology and www.bellodesainstudio.com/AR on AR technology to wrap up the online exhibition of architectural and construction consulting services providers.

B. User Testing and The Analysis
After completing the development of a webbased online exhibition with all its functionality needs, several tests were carried out, namely: (a) Blackbox testing to test feasibility about attractiveness, ease of understanding, analyzing and explaining the space and shape of buildings on web-based online exhibition media.In the process correctness assesses the functionality of the direction and purpose of the interaction carried out by the user.This process correctness test relates to navigation buttons on the website, user actions and responses in virtual reality, direct links on the QR Code, and the suitability of marker scanning.Overall, this Blackbox Testing gets results that are in accordance with the concept stages.
The devices used in testing this product can be seen in Table 3 below.(2) 3D Design in Augmented Reality (completeness of content display, ease of marker scanning, flexibility of using handle content, layout of short description in the scanner camera).Before entering the UEQ results, the data obtained must be selected and tested again through the following stages: 1. Inconsistency Test In the results obtained, there was no data that had a problematic pattern of more than 3 categories.Then none of the respondent data was eliminated in meeting the needs of the next stage, namely the reliability coefficient test.

Reliability Coefficient Test
In the reliability test results, Cronbach's Alpha results on all 6 UEQ criteria have an alpha value> 0.60, so the question items in the questionnaire were reliable [20].The comparison of the results of the 6 categories with the UEQ Benchmark got an average value of "excellent" based on the Comparison to the benchmark in terms of attractiveness, perspicuity, efficiency, dependability, stimulation, and novelty.The highest to the lowest average values in order were stimulation, attractiveness, novelty, efficiency, perspicuity, and finally dependability.
In the result of the development of Virtual & Augmented Reality, users got an impression of feeling cross-segmentation which gave a strong sense of being present in a virtual environment.Users can optimize visual understanding based on the atmosphere of the environment and 3D objects so that users can feel like they are in the real world.The tangible evidence can be seen from the results of the user experience test, especially those that had a huge impact on the stimulation, attractiveness, and novelty provided in the online exhibition.This can be achieved because the online exhibition was loaded in various modalities, namely aural, visual and haptic, which can be felt by users through the senses of sight, hearing, and touch.
The success of the achievement of these modalities was certainly in accordance with the theory of the influence of Virtual & Augmented Reality, namely virtual presence and interactivity which greatly affected the stimulation and attraction of audiences in using Virtual & Augmented Reality products [21].Virtual presence, namely the user's feeling of the virtual environment for this online exhibition can strive for an increase in feelings and experiences of digital space exploration [22].In supporting these user feelings, the online exhibition presents Avatar Mediated Communication (AMC) which is a synthetic stimulus that is artificially created and presented to users without the need to involve the entire human body [12].The effect obtained by the presence of AMC is the feedback loop as shown in Figure 13.The response is very important in Virtual Reality systems that can influence or stimulate user psychology to interact with other audiences [15].In interactivity, the process of interaction of participants in controlling roles as shown in Figure 14, their interaction is supported through the user interface, virtual world elements, and user experience of web-based VAR, these three things are part of the reciprocal effect or things that influence each other in virtual reality experiences.

Figure 16 Virtual Reality Experience
In terms of attractiveness through the results of UEQ testing, it obtained the 3rd highest because the things that raise the development of Virtual & Augmented Reality are very interesting to users in trying various enjoyment of the benefits of visual, aural, and haptic modalities of users.However, the application of media in the form of web-based can be enjoyed by users who never tried the media.

CONCLUSION
Based on the data collected, the development process, and the analysis of responses that have been carried out, it can be concluded that the web-based online exhibition by applying Virtual & Augmented Reality greatly affects the user experience, especially in terms of stimulation, attractiveness, and novelty.This is because immersive visualization assistance is able to increase user curiosity to try to enter the virtual environment and can easily enjoy all kinds of features embedded in online exhibition products.The presence of AMC also greatly affects users in terms of intuition in interacting with visitors.
On the side of architectural consulting service providers, the existence of this technology can support them in conducting publications and marketing, because web-based online exhibition in the architectural industry comes as a solution and a complementary role in exhibiting products that are effective and efficient regarding time, place and cost to be able to provide information, understanding and a more immersive visitor experience of 3D architectural modeling on display by presenting additional resources in the form of utilizing virtual & augmented reality technology.

Figure 2
Figure 2 Research & Development design steps with MDLC model The MDLC model was chosen because it was necessary to develop new products and test user experience responses based on the results of testing and distribution.The product developed was a web-based online exhibition using Virtual & Augmented Reality technology that can be run flexibly on multidevice browsers.All processes and stages of this development were documented in a development model step that can be seen in Figure2, namely concept, design, material collecting assembly, testing, and distribution.(1)Concept in this development is the use of online-based media that runs on a web browser (browser), so users can enjoy using this development product without installing it and it is only enough to use the browser that is already available on the user's device.To build a VR environment, the Spoke Mozilla Hubs platform was needed, and using the AR Library was needed in building AR.(2) In the Design process, the researcher designed the flow of the website developed such as designing the needs of 3D objects and graphic design in Virtual & Augmented Reality and preparing procedures for using the product.(3) In the Material Collecting process, the researcher collected, and sorted assets both in the form of 3D in the Sketchup application, 2D in AutoCAD, and image

( 2 )
In the Design process, the researcher designed the flow of the website developed such as designing the needs of 3D objects and graphic design in Virtual & Augmented Reality and preparing procedures for using the product.(3) In the Material Collecting process, the researcher collected, and sorted assets both in the form of 3D in the Sketchup application, 2D in AutoCAD, and image files that have been rendered using the Enscape application.(4) In the Assembly process, the development process started from the beginning, namely modeling, coding, and modifying assets in the material collecting process.(5) In the Testing process, 4 kinds of tests were carried out, namely the Blackbox test, Content Expert Test, Media Expert Test, and Field Test using the UEQ (User Experience Questionnaire) which consisted of 6 categories (26 questions) about stimulation, attractiveness, novelty, efficiency, perspicuity, and dependability.(6) In the distribution process, the website page was distributed to the community.

Figure 4
Figure 4 Spoke Mozilla Hubs C. AR.js/Jeromeetienne Library for AR AR.js is a lightweight Javascript-based library for web-based Augmented Reality development.AR.js has features namely AR Image Tracking, Location Based AR, and Marker Based AR.Website-based Augmented Reality development can avoid efforts to

Figure 5
Figure 5 Marker Augmented Reality D. Framework Laravel & Express.js to Create Website Web development is carried out using 2 frameworks, namely Laravel which is used in creating a CMS (Content Management System) on the main website because its simple and elegant syntax provides extraordinary functionality.The use of Express.js is devoted to running the node.jsserver which is a requirement of the AR.js/Jeromeetienne library in running augmented reality-based products.E.Combination Development Framework

Figure 6
Figure 6 Technology Connectivity A. Web-based Online Exhibition VR & ARWeb-based Online exhibition is made to assist in visualizing the shape of architectural buildings.The use of online exhibitions can be used anytime and anywhere and without requiring installation because it has adopted web-based Virtual & Augmented Reality technology.The concept of development was carried out using the Mozilla Hubs platform technology on the development of Virtual reality and using the AR.js/Jerometienne Library on the development of Augmented Reality.The technology was chosen based on the concept stage carried out, namely all uses are online which provides convenience and comfort in enjoying the virtual exhibition developed.With the creation of this web-based online exhibition, users of companies in the field of construction and architecture get a marketing and publication space for works that can present an immersive experience in the use of Virtual & Augmented Reality, and can help users in understanding the visualization of building rang in 3D.

Figure 10 Virtual
Figure 10 Virtual Reality Development Steps

Figure 13 Augmented
Figure 13 Augmented Reality Development Steps

( 3 )
Website (VR & AR gallery navigation display, accuracy of illustration images on the web with objects displayed, website layout and navigation) (4) Graphic Design (editing rendering assets that are converted into 2D posters, editing site plan assets on posters, layouts on AR e-Books, Marker Graphics) In this test, it got a score of 84.21 which is in the range of "very good" (5) The field test using the UEQ instrument to determine the response of users after enjoying and using development media in the form of web-based online exhibitions by applying Virtual & Augmented Reality technology.The number of respondents obtained was 40 people with research subject qualifications such as respondents who understand or understand the concept of residential development, people who have rented services in the field of architectural and construction consulting, and the general public who have an interest in building as well as renting design & development consulting services.

Figure 15 Feedback
Figure 15 Feedback Loop -Virtual Reality System

Table 1 .
Structure of the UEQ

Table 3
Test Device