FINAL REPORT 3d FASHION VIRTUALIZATION PLATFORM COMPUTER GRAPHIC

INTERNATION UNIVERSITY COMPUTER GRAPHICS INTERNATIONAL UNIVERSITY VIETNAM NATIONAL UNIVERSITY, HCM CITY School of Computer Science & Engineering FINAL REPORT 3D FASHION VIRTUALIZATION PLATFORM COMPUTER GRAPHIC Course: IT024IU_G01 Advisor: Le Duy Tan GROUP MEMBERS: Lê Hồng Đức ITITIU18223 Nguyễn Lãm ITITIU18255 Nguyễn Giang Ngọc Trâm ITITIU18158 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS ACKNOWLEDGEMENT 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS First and foremost, we sincerely express our deep gratitude to our professor Dr Nguyen Van Sinh for imparting valuable knowledge about the Computer Graphic course and giving us unwavering guidance on how to create and render a 3D object on a webpage, references about WebGL, Web 360, and Javascript make massive support for us in our project We would love to express my sincerest thanks Dr Le Duy , who has taught us many valuable lessons and experiences through the ab section and always supports, cares for, and guides us mentally and technically Dr Tan Drays encouraged us to explore our fullest potential to complete the work in the most efficient way while working on this project We want to show my best regards to the International University teachers, especially the Computer Science and Engineering Department teachers, who gave us a great background of technical knowledge and practical skills to apply in the project In this project, we have involved the knowledge that we gain from the Principle of Database management of Assoc Prof Thuy Loan, Information System Management of MSc Hoang Chau and solid foundation knowledge of the Web Application Development course which is taught by Dr Sinh 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS Finally, we would like to show appreciation to our teammates, all of our friends, who have facilitated me to make efforts as much as possible to complete the project successfully and on time 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS TABLE OF CONTENT ACKNOWLEDGEMENT INTRODUCTION 1.1 Background 1.2 Problem Statement 1.3 Scope and Objectives 1.3.1 Scope: 1.3.2 Objective: 1.4 Assumption and Solution 11 1.4.1 Assumption 11 1.4.2 Solution of this problem 11 1.5 Structure of Report 11 LITERATURE REVIEW 12 2.1 Similar Applications/Systems 12 2.2 Platform and Tools Review 13 METHODOLOGY 14 3.1 User requirement analysis 14 3.2 System design 15 3.2.1 Database design 15 IMPLEMENTATIONS AND RESULTS .16 4.1 Implementation: 16 4.2 Result 17 4.2.1 Sign in/Sign up screen 17 4.2.2 Homepage screen .18 4.2.3 Profile screen 19 4.2.4 Edit Product Screen 20 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.5 Product Detail Screen .22 4.2.6 Create an Outfit Screen 23 4.2.7 Virtual Look Detail Screen .24 4.2.8 View Product in 3D Screen 25 DISCUSSION AND EVALUATION 25 5.1 Discussion 26 5.2 Comparison .26 5.3 Evaluation 27 CONCLUSION AND FUTURE WORK 28 6.1 Conclusion 28 6.2 Future work .28 REFERENCES 29 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS INTRODUCTION The project is built based on the knowledge that we have obtained in the Web Application Development course – 3D Virtualization Platform named “FinnTA” is a short term for Fashion in technology application Our project was implemented form on ReactJS, Three, Drei, JSON Server, some other JavaScript libraries and especially hinge on the knowledge we gain in the Web Application Development course and Computer Graphics on applying basic web design, MVC architecture, essential skills in design and develop web-based applications, create a 3D object with many different views, render 3D on the webpage, to utilize critical and analytic thinking to the planning and apply to both execution and evaluation of the software development process 1.1 Background Until now, the world's fashion demand has always had an unpredictable development, from styles to diverse clothing designs Have you ever wondered that how can we try on all the clothes in the closet or the store? How to find the style that suits you best Can you take advantage of the available fashion accessories? With the thought of helping to change your fashion style more quickly, make the most of the products and clothes you currently have or can use in the future We have developed a website that can help you solve with these above problems Initially, we came up with the idea to make it online like Shopee- is one of the e-commerce to see and buy the product from one user to another user After many discussions and opinions, we want it to be different, it can still be used to share one's fashion style, but the entity for everyone to share is a 2D image or 3D model of the product We want it to become a social network for a person or customers to communicate with the shop We name it is FinnTA 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS 1.2 Problem Statement With the rapid development of the fashion industry, fast fashion has become an alarming global phenomenon when fashion waste is one of the causes of environmental pollution The cost of this increased consumption of uncontrolled, discarded clothing after only a few uses or even never being used is waste, pollution, and the greenhouse effect Furthermore, users spend too much time both in online shopping and direct store deciding what products or accessories to buy that match their wardrobe, wondering which color is best suited with, how other people dress with this item; they can't visualize the products they intend to buy and products they own when mixing will look like They even cannot imagine how a product on a website will be in real life Therefore, to solve this problem we bring a solution - a website platform to search for product, style and collection, and connect fashion shopaholics to create a community to help each other in sharing and exchanging their style, their tips on how to mix and match, to dress up well every day Our website is not aimed to be an e-commerce platform, we are not supported the shipping or make an order We focus on building up a social network to share idea to mix and match outfit of the day, to view clothes in the set, to determine which item is best suited in different occasion, to discuss about upcoming trending style, as well as hot-sale product for each season 1.3 Scope and Objectives 1.3.1 Scope: The main objective of this application is to facilitate the review of products and services between the online shops and consumers on the basis of the items or products that the business/users supplies 1.3.2 Objective: The main goal of FinnTA is to reach the maximum customers at the right time to develop more fashions and styles The functions of FinnTA include viewing and trying mix and match products, transferring fashion style or data over the internet 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS a) Contribution Name of member Contribution Lê Hồng Đức 30% - Construct Sign up, Sign in, Homepage screen - Researcher in team: introduce and suggest some helpful tools: Blender, library, other techniques for project - Looking for references for project’s implementation - Register, assign new users to database Nguyễn Lãm 30% - Build Profile screen for web page: Saved Items, Product, Collection section - Build Profile view both owner and visitors, manage and reuse component for other screens - Take responsible for front-end side, manage style of components using scss, MaterialUI, Bootstrap, Font awesome, etc Nguyễn Giang Ngọc Trâm 40% - Create wireframe, and prototype using Figma - Make workflow, project plan, timetable, task management - Create, arrange components in screen layout, and implement the Upload Item, Create a collection in the Virtual Look section - Take main responsible for back-end side by using JSON Server: make a connection to the database, implement query to read, use the database to display on the website - Predefined data for Category, Pattern, Occasion, Material, Color for product - Display 3D object to the website, assign Lights, Orbit Control to the object and implement color changing, view object in different view and version Together we analyse topic requirements, discuss ERD, implement some features on a web page Working on Product Requirement Document: system overview map, the specific requirement includes functional requirement and non-functional requirement, system features, predefined data Testing website functionality, fixing a bug, working on a report, and preparing for a presentation 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS 1.4 Assumption and Solution 1.4.1 Assumption From users’ view: Assuming that new applications are often difficult to reach by users, or that the rate of change in the number of users grows very slowly from the early days, that is also one of the difficulties in spreading out our application From us - platform developers view: We have to create innovation and differentiate from other apps with similar features FinnTA's functionality should also be as easy to understand and use as possible 1.4.2 Solution of this problem We have designed the interface to maximize possible functionality and look catchy, in keeping with current trends Provide a friendly and easy-to-use experience to users Thereby the application can increase its accessibility to users and stores to suit its purposes 1.5 Structure of Report The introduction will be chapter Chapter take a review of the report From then, we are going to introduce the methodologies behind some features, some algorithms to handle logical problems in detail is presented in Chapter After that, we discuss the fundamental design that we have been working on for the web application and demonstrate the flow of the website in Chapter Discussion and evaluation of our project will be stated in Chapter Ultimately, the final chapter – Chapter will sum up our achievement in building a 3D fashion virtualization platform and share our future plan development 3D FASHION VIRTUALIZATION PLATFORM 10 INTERNATION UNIVERSITY COMPUTER GRAPHICS IMPLEMENTATIONS AND RESULTS 4.1 Implementation: As a user of our website: Registering a new account, sign in to the website Uploading new product Creating a collection Collecting other’s user products, editing own products Editing profile and viewing other user’s profile Display 3D object to simulate fashion product Changing color of 3D object 3D FASHION VIRTUALIZATION PLATFORM 15 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2 Result 4.2.1 Sign in/Sign up screen There are roles in our website: Business such as: shopping store, amatuer seller and User To ensure the security of website, we have implemented the Hide/Show password by clicking the eye icon 3D FASHION VIRTUALIZATION PLATFORM 16 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.2 Homepage screen Homepage screeen contains: - Navigtion bar: About – introduce about us, about our team and mission, Home, Virual Look – specific point about web application Virtual Look for mix and match clothes to create outfit of the day or a new collection - Carousel – to advertise our news, event and subscription package - Trending item list recommendation – display product to buy or to save for later mix and match - Collection list recommendation – inspire user fashionable outfit everyday, how to mix clothes tips - Footer – contains our contact info, support and customer service team via social media such as: Facebook, Twitter and Instagram These can be viewed as a visitor – who does not have an account to log in to our website By doing this, we can create a first impression, first experience to attact more user to our website When new user click some button to register course, the system will lead them to the sign up screen 3D FASHION VIRTUALIZATION PLATFORM 17 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.3 Profile screen The profile screen contains dashbody: Saved – saved product for later mix and match, Product – upload item of that user and Log out Profile displays general information: username, number of post, followers, following account, and their contact information: email address, phone number and social media link In the Profile window, user can edit profile, create post to upload their product If user views their profile, they are allowed to edit their product’s posts Otherwise, they can select, save product of others for later mix and match by clicking “Collect” button which help to determine whether they should buy that product or not 3D FASHION VIRTUALIZATION PLATFORM 18 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.4 Edit Product Screen In Edit product screen, owner has authority to edit their product post’s detail includes: color, category, pattern, material, occasion and add maximum supplementary images for each post After uploading supplementary image from their computer, user can rechoose the image by clicking the cross button (‘X’) to delete image In the case that the product is sold through chat, through another social media, or out of stock, user can click “Mark as sold” button to hide the product from available product in the profile and homepage 3D FASHION VIRTUALIZATION PLATFORM 19 INTERNATION UNIVERSITY COMPUTER GRAPHICS 3D FASHION VIRTUALIZATION PLATFORM 20 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.5 Product Detail Screen Product Detail Screen display information about the product including the product’s name, price, description, owner, and additional information There are functional buttons: View 3D, Chat, Save item View 3D: to display product in 3D However, there is no 3D generated object for all the product, some product is supported, some is not Chat: to support the chatting between users in the community, they can negotiate with each other about the price, the location to view the product, or shipping price, delivery address Save item: to collect the item which is owned by another user for later mix and match to generate a new collection 3D FASHION VIRTUALIZATION PLATFORM 21 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.6 Create an Outfit Screen Virtual Look Screen is used for mixing and matching items, arranging the position for an item in the set Clothes in this virtual wardrobe include users’ products – is posted by themselves and saved product – is posted by another user and is collected, saved for later try on in the set 3D FASHION VIRTUALIZATION PLATFORM 22 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.7 Virtual Look Detail Screen Detail Screen of collection display the number of item in set, the information contains: product’s name, description and price of all the item build up a collection 3D FASHION VIRTUALIZATION PLATFORM 23 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.8 View Product in 3D Screen By clicking the View 3D in Product detail screen, it comes to the 3D view of that product 3D objects can be manipulated by zooming in, zooming out, rotating 360 degrees, and applying different colors with the support of color picker 3D object is applied lights includes: ambient light, directional light, spot light, and contact shadow 3D FASHION VIRTUALIZATION PLATFORM 24 INTERNATION UNIVERSITY COMPUTER GRAPHICS 5 DISCUSSION AND EVALUATION 5.1 Discussion This section may lead to several evaluations This discussion is related to the problem to be worked on Therefore, it is necessary to discuss with the member early in the process what problems we have encountered, what we need to develop further That is important in both planning and reporting Discuss both resources and development (people and apps): 3D FASHION VIRTUALIZATION PLATFORM 25 INTERNATION UNIVERSITY COMPUTER GRAPHICS How long does app development take?, What problems are the members facing when programming? How can the app reach more users? Thereby, we can solve with a specific plan for the above problems as quickly as possible, from there, all activities and processes are carried out more smoothly In the final assessment report, we may include the resources and app programming such as the roles and responsibilities of members when coding, UI/UX, Backend, or Frontend 5.2 Comparison Compare to the Mix Dress website, we have implemented a clearer layout and user interface more friendly and easy to use for the users We have a virtual look feature, a profile page to store their product and collect other users’ products for mix and match Compare to Virtuality Fashion, we have not finished implementing to generate 3D objects automatically and we can only adjust the colour while they can change the pattern of the products 3D FASHION VIRTUALIZATION PLATFORM 26 INTERNATION UNIVERSITY COMPUTER GRAPHICS 5.3 Evaluation Advantages of this 3D Fashion Virtualization Platform: Availability Another great benefit of Finnta is running an online "store" or "customer wardrobe" that is open 24/7 For a store or boutique, it's a significant way to increase their chances of selling; For customers, it's a convenient and immediately available option Unlimited working hours, day/night, Finnta also can serve customers Inventory Management Users can automate their inventory management It saves billions in inventory costs(for stores that use the app) or time (for customer) Most Accurately Target Marketing With access to rich customer data and the opportunity to track customer habits and emerging industry trends Shops can quickly define and redirect their marketing strategies for items, products, and services to match the user experience Disadvantages of this app: Technical There may be a shortcoming from the security system The software development industry is still evolving and changing rapidly The software development industry is still evolving and changing rapidly Non-technical Internet access can be inconvenient for many potential customers FinnTA must be evolving and changing constantly by user trending 3D FASHION VIRTUALIZATION PLATFORM 27 INTERNATION UNIVERSITY COMPUTER GRAPHICS CONCLUSION AND FUTURE WORK 6.1 Conclusion The project goal indicated at the beginning of this report has been met because this Fashion Virtualize Social Media website was developed successfully and visually appealingly The team members received a lot of practical expertise throughout the stages of coming up with ideas to realizing them, such as managing databases with JSON and JavaScript, developing websites with ReactJS and virtualizing fashion products in 3D on the website The surprising insights we gained from this project assignment were how different development phases of a project fit together and the life cycle of development itself 6.2 Future work There are many more intriguing features that may be included in this system, such as allowing users to connect and communicate with each other as a real messaging platform, or a financial-supporting function, such as allowing stakeholders to display their marketing banners on the website In addition, we would like to implement the changing texture or pattern for 3D object to illustrate the product more concisely and generate automatically the 3D object for product after user provide relevant images or data such as: pictures, sketches 3D FASHION VIRTUALIZATION PLATFORM 28 INTERNATION UNIVERSITY COMPUTER GRAPHICS REFERENCES [1] “JavaScript – Web technology for developers” documents [Online] Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript [2] Nicholas C.Zakas, Professional JavaScript for Web Developers, Third Edition [3] “HTML Tutorial” documents [Online] Available: https://www.w3schools.com/html/ [4] “CSS Tutorial” documents [Online] Available: https://www.w3schools.com/css/default.asp [5] Material UI (n.d.) Retrieved from https://material-ui.com/ [6] MongoDB (n.d.) Retrieved from https://www.mongodb.com/ [7] How to create and render a 3D object on a webpage?, accessed October 2021 Retrieved from: https://www.section.io/engineering-education/how-to-insert-3dobjects-into-a-webpage-using-html-and-css/ [8] How to Render 3D Objects in the Browser Retrieved from: https://www.freecodecamp.org/news/render-3d-objects-inbrowser-drawing-a-box-with-threejs/ [9] Javascript 3D Library Retrieved from: https://threejs.org/ [10] 3D Model Retrieved from: https://sketchfab.com/ 3D FASHION VIRTUALIZATION PLATFORM 29 ... profile and homepage 3D FASHION VIRTUALIZATION PLATFORM 19 INTERNATION UNIVERSITY COMPUTER GRAPHICS 3D FASHION VIRTUALIZATION PLATFORM 20 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2.5 Product... satisfy the passion in fashion 3D FASHION VIRTUALIZATION PLATFORM 13 INTERNATION UNIVERSITY COMPUTER GRAPHICS 3.2 System design 3.2.1 Database design 3.3 3D FASHION VIRTUALIZATION PLATFORM 14 INTERNATION... other user’s profile Display 3D object to simulate fashion product Changing color of 3D object 3D FASHION VIRTUALIZATION PLATFORM 15 INTERNATION UNIVERSITY COMPUTER GRAPHICS 4.2 Result 4.2.1 Sign