VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY UNIVERSITY OF INFORMATION TECHNOLOGY FACULTY OF INFORMATION SYSTEM TRUONG VAN SY- 18521698 GRADUATION THESIS INFORMATION SYSTEMS ENGINEERING SUPERVISOR Ph. NGUYEN THANH BINH HO CHI MINH CITY, 2023 INFORMATION ON THE THESIS DEFENSE COMMITTEE The thesis defense committee is established according to Decision No ¬¬. DY the Rector of the University of — - Chairman P. - Secretary ẤT iiccccccccecscscssssssssssssssssseeseesseseseeess - Member ACKNOWLEDGEMENTS I would like to express my sincere gratitude to the individuals and organizations who have assisted and supported me throughout the process of completing my thesis.
It is my continuous effort, coupled with the support from the professors, staff and the collective efforts of the Ho Chi Minh City University of Information Technology (UIT). Furthermore, I deeply appreciate Ph. Nguyen Thanh Binh, my instructor, for his dedicated guidance and mentoring since my entrance into university. Particularly, he provided me with support and encouragement during challenging times in the research process.
Finally, I want to extend my gratitude to the faculty of the Information System Department for dedicating their time and invaluable knowledge to impart to me throughout my learning and research journey. Despite my efforts in completing this thesis, my knowledge and experience are limited. I welcome constructive feedback from my esteemed instructors to improve and perfect my work. Truong Van Sy UNIVERSITY OF INFORMATION TECHNOLOGY Advanced ADVANCED PROGRAM Evisainn IN INFORMATION SYSTEMS Program THESIS PROPOSAL THESIS TITLE: Design and Implementation of a cloud-based Metaverse system Advisor: PhD.
Nguyen Thanh Binh Duration: 09/2023 - 12/2023 Students: Truong Van Sy - 18521698 Contents: In recent years, the metaverse has emerged as a groundbreaking concept that has captivated the imagination of both tech enthusiasts and mainstream society. Defined as a collective virtual shared space, the metaverse represents a new frontier where individuals can interact, create, and explore digital realms that blur the lines between the real and virtual world. While the metaverse has predominantly been associated with gaming and social experiences, its applications extend far beyond leisure activities. One such a compelling application lies in exhibition environments, where the metaverse can revolutionize how we engage with art, culture and history.
The concept of creating a web app for the metaverse in exhibition environments is an immensely significant topic. This research explores the convergence of cutting-edge technology and the world of exhibitions, aiming to The choice to delve into this topic stems from the recognition that the metaverse has enough capacity to democratize access to exhibitions, transcend physical boundaries, make cultural treasures and educational resources accessible to a global audience. By creating a web app that leverages the metaverse, we can unlock a multitude of possibilities, from immersivity virtual tours of museums to collaborative learning experiences that transcend geographical limitations. This research seeks to explore the methodologies, challenges, and opportunities involved in developing web applications for the metaverse within exhibition environments, ultimately paving the way for a new era of cultural and educational exchange.
Work to be done: Learn about Mozilla's Hubs and Reticulum. Conduct systematic analysis and design. Create a Web UI and RESTful API for managing a virtual communication and exhibition system. Utilize third-party services such as AWS for hosting and Ready Player Me for creating avatar.
Scope: Learning and Research: Learn about technologies such as Mozilla's Hubs and Reticulum, conduct systematic analysis and design, explore best practices in creating a virtual communicative learning and exhibition environments. Development: Create a comprehensive Web UI and a RESTful API to manage, build the virtual communication and exhibition environments. These include frontend and backend development. Integration: Integrate third-party services, such as AWS for cloud hosting and Ready Player Me for avatar creation, to enhance the user experience.
Objectives: Enhanced User Experience: Enable users to enjoy various activities, including communication, content viewing, and material sharing, by accessing virtual rooms. Cross-Platform Accessibility: Ensure that users can access the system from various devices, including mobile devices (Android, i0S), PCs, and VR devices (Meta Quest 2). Avatar Customization: Allow users to create and personalize avatars through the Ready Player Me service, enhancing their presence in the virtual environment. Room Scheduling: Implement the ability for users to set open and close times for virtual rooms, providing flexibility for different user cases.
Content Creation and Sharing: Enable users to create, share, collaborate and quiz within the system for presentations, training, and educational purposes. Methodologies: Agile Development: We will adopt an Agile development approach to ensure flexibility, collaboration, and iterative improvements throughout the project's lifecycle. User-Centered Design: The user experience will be at the front of our design process, with user feedback and usability testing that will inform our decisions. Cloud Integration: We will leverage cloud services, specifically AWS, to ensure scalability, reliability, and security in our systematic architecture.
Third-Party Integration: The integration of third-party services like Ready Player Me will be carried out following the industry best practices and security guidelines. AWS Lambda is used for image resizing, video transcoding, and website thumbnailing. Uploaded assets are stored in EFS, static assets (JS/CSS/images) are stored in S3. Technologies: Frontend: ReactJS Backend: ExpressJS, Erlang Elixir Database: MySQL AWS: E2C, S3, Lambda, EFS 6.
Expected results: A fully functional virtual communication system accessible across devices. Improved user engagement in virtual rooms. Efficient room scheduling capabilities. Seamless content creation, sharing, and collaboration features.
Research timelines: Week 1: Project Initiation and Planning: Establish project objectives, team roles, and initial planning. Week 2-4: Research and Learning: Study Mozilla's Hubs and Reticulum technologies, explore system analysis and design, and research best practices in virtual communication and exhibition environments. Week 5-7: Development Kickoff: Begin developing the Web UI and setting up the RESTful API, focusing on front-end components and backend infrastructure. Week 8: Third-Party Service Integration: Integrate third-party services, including avatar creation, for compatibility with the core system.
Week 9-11: User-Centered Design: Prioritize user experience through iterative design and user feedback. Week 12-15: Agile Development: Build core features of the virtual system, emphasizing room management and scheduling functionalities. Week 16: Content Creation and Sharing: Develop features for document and quiz creation and sharing. Week 17: Finalization and Deployment: Finalize the project, prepare for deployment, complete thesis report.
Approved by the advisor(s) Ho Chi Minh city, .- 5 ng HH ng nưệt 2 1. eee eee ceecseecseceeceeessseessseassseecsesessesaesseeessesaeeeaes 7 1. Contributions of the Thesis .- G1 ng ng ng 9 1. Ghi HH Hi Hư 10 CHAPTER 2: LITERATURE REVIENW.- LH HH HH HH key 11 2.
Related apDpÏICAf{IOTIS.- 5 G6 1E nh ng TH ng tr 11 2. cọ HH ng 12 2. Unity 3D and Unreal EngIne. s5 + + + Esesseesskssersree 14 'VÑ VI Bố ĐH cv a -.3 WebVR and WebXR frameWOTK.
PlatfOrms nh dđODŨDŨDŨDỮẦầẫŸẢ. The Metaverse framework in culture and education.-------«-s« 17 CHAPTER 3: LARCHIVEUM - OUR METAVERSE SYSTEM FOR CULTURE AND EDUCATION. - G0 SH ng HH nh 19 3. Functional reQUIT€IT€TIES.
Non-functional requirements. Analysis and IDeSIT. --- -- «1 vn HH ng TH TH HH Hàng Hư 25 3. System ATCHIf€CfUT€.
Use-case Diagram .- - -- ng TH HH Hit 26 3. Use-case specification and activity điagTaTm. - << << << E1 EEEEEE1111 111111111119 1983555555511 1k kkkkkrer 30 EE VAÀ/. HT TH TH TH HH Hệ 32 E09 7a.
Join VITfUaÏ TOOTT.- c1 HH HH nh 37 3. 7G SH HH gi, 42 Ko To. Manage (OCUTm€TIẨ.- - - - 2c E1 E221 11910 18 1119 1 11 ng ng ng 47 3. Insert dOCUMENE Da.
Delete OCUIN€TIE. - G5 + 1119 99v ng ng ngư. Manage SC€NG.- Q0 101 HH TH HH HH HH giết 52 3. SG HT TH TH HH 52 3.
Update SC€TG. Delete SCONC UtẦậùỌẦầâầậầâầẳđdaa. Sequence diagram and class đ1aðTa1m.- Gv HH HH nề 59 3. Sequence điaØTAIN.
vn ng nh nưệt 59 3. Class uc na na. View Zcooi na. Join in VITfUAÏ TOOIT.- 4 s1 1190 9v nh ng nến 61 3.
DO QUIZ eee .- -- - c 3192112911911 111 1 1 1 nh ng Hy 63 3. Manage OCUIT€TI.- -- 6 5 +3 31919191 1n TH ng ng ng tưệt 71 3. Class in ah na.-- --- -- c1 11991993119 1119 11H vn ng ngư 76 3. Class ro nn .- - -G c0 HH nh rry 80 3.
Ghi g nH H g ghHnrờ 86 3. HH HH ng ng HT HH Hiện 86 CHAPTER 4: IMPLEMENTATION AND RESULT. Implementation enVITOnIN€III.2 Final product T€SUÏ(. Main features for all S€TS.
Ăn SH TH HH TH HH kg rry 90 “hp i0 7. Change avatar in virtual TOOIT. Interaction in virtual TOOIN. Main features for managers and adm1ns .-- --- «5 =<s++s<+sx++ 95 CHAPTER 5: CONCLUSION AND FUTURE WORK.
ĐC Ề233030303013031010 11 vn ng 1 51 và 101 5. - 203030303010101010 1K SĐT 5 vu 102 CHAPTER 6: CASE STUDY - THE RESTORATION OF JEUNGPYEONG CATHOLIC CHURCH AND JEUNGPYEONG HOSPITAL [10]. SH HH HH HH HH 110 LIST OF FIGURES Figure 1. Second life application 5 Figure 1.
Facebook's Horizon Workrooms virtual reality working application 5 Figure 2. Unity to create scene 12 Figure 2. Rec Room tools 13 Figure 3. Functional requirements 21 Figure 3.
System Architecture 25 Figure 3. Use-case Diagram for user 26 Figure 3. Use-case Diagram for Manager/Admin 27 Figure 3. Extend use-case 28 Figure 3.
Activity diagram — Room reservation 31 Figure 3. Activity diagram — View document 32 Figure 3. Activity diagram — View statistics 33 Figure 3. Activity diagram — Do quiz 35 Figure 3.
Activity diagram — Join virtual room 37 Figure 3. Activity diagram —Insert room 39 Figure 3. Activity diagram —Update room 40 Figure 3. Activity diagram —Delete room 41 Figure 3.
Activity diagram —Insert quiz 43 Figure 3. Activity diagram —Update quiz 45 Figure 3. Activity diagram Delete quiz 46 Figure 3. Activity diagram —Insert document 48 Figure 3.
Activity diagram —Update document 50 Figure 3. Activity diagram —Delete document 52 Figure 3. Activity diagram —Insert scene 54 Figure 3. Activity diagram —Update scene 56 Figure 3.
Activity diagram —Delete scene 58 Figure 3. Sequence diagram — Reservation 59 Figure 3. Class diagram — View reservation 60 Figure 3.Sequence diagram — View document 60 Figure 3. Sequence diagram — Join in virtual room 61 Figure 3.
Sequence diagram — Do quiz 62 Figure 3. Sequence diagram —Manage user 63 Figure 3. Sequence diagram —Update user 64 Figure 3. Sequence diagram —Delete user 65 Figure 3.
Sequence diagram —Search user 66 Figure 3. Class diagram —Manage user 66 Figure 3. Sequence diagram —Manage quiz 67 Figure 3. Sequence diagram —Insert quiz 68 Figure 3.
Sequence diagram —Update quiz 69 Figure 3. Sequence diagram —Delete quiz 69 Figure 3. Sequence diagram —Search quiz 70 Figure 3. Class diagram —Manage quiz 70 Figure 3.
Sequence diagram —Manage document 71 Figure 3. Sequence diagram —Update document 72 Figure 3. Sequence diagram —Insert document 73 Figure 3. Sequence diagram —Delete document 74 Figure 3.
Sequence diagram —Search document 75 Figure 3. Class diagram —Manage document 75 Figure 3. Sequence diagram —Manage scene 76 Figure 3. Sequence diagram —Insert scene 77 Figure 3.
Sequence diagram —Update scene 78 Figure 3. Sequence diagram —Delete scene 79 Figure 3. Sequence diagram —Search scene 79 Figure 3. Class diagram —Manage scene 80 Figure 3.
Sequence diagram —Manage room 81 Figure 3. Sequence diagram —Insert room 82 Figure 3. Sequence diagram —Update room 83 Figure 3. Sequence diagram —Delete room 84 Figure 3.
Sequence diagram — Search room 85 Figure 3. Class diagram — Manage room 85 Figure 3. Sequence diagram — View statistics 86 Figure 3. Home page UI 89 Figure 4.
Sign up UI 89 Figure 4. Sign in UI 90 Figure 4. Forgot password UI 90 Figure 4. Manage profile UI 91 Figure 4.
Virtual space for education 91 Figure 4. Change avatar in virtual room UI 92 Figure 4. Open video in virtual room 92 Figure 4. Share screen in virtual room 93 Figure 4.
Drawing in virtual room 93 Figure 4. Drag and drop 3D model in virtual room 94 Figure 4.