FINAL REPORT 3d FASHION VIRTUALIZATION PLATFORM COMPUTER GRAPHIC

N UNIVERSITY UTER GRAPHICS VIETNAM NATIONAL UNIVERSITY, HCM CITY INTERNATIONAL UNIVERSITY 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 Nguyễn Lãm ITITIU18223 Nguyễn Giang Ngọc Trâm ITITIU18158 I I I Ă r\ r SHIOI PLATFORM ITITIU18255 N VIRTUALIZATION INTERNATION UNIVERSITY COMPUTER GRAPHICS ACKNOWLEDGEMENT 3D FASHION VIRTUALIZATION PLATFORM 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 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 INTERNATION UNIVERSITY COMPUTER GRAPHICS TABLE OF CONTENT 3D FASHION VIRTUALIZATION PLATFORM 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 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 time to develop goal ofmore FinnTA is tomatch reach andproducts, styles the maximum The functions customers of FinnTA at the include right data viewing over and thetrying internet mixfashions and transferring fashion style or 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS W 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 30 Nguyễn Lãm - 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 topic requirements, discuss ERD,features, implement some features system overview on aanalyse web map, page the Working specific onrequirement Product Requirement includes functional Document: requirement data Testing and website non-functional functionality, requirement, fixing a bug, system working on a report, predefined 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 From introduction then, we will going be chapter to introduce 1.the Chapter the methodologies 2problems take review behind ofup the some report features, some After algorithms that, we discuss to handle logical fundamental design in detail that we isour presented have beenin working in Chapter on forDiscussion the web application and evaluation and demonstrate our project the will flow be stated of the website in our Chapter achievement Ultimately, inare building the a 3D final fashion chapter virtualization -of Chapter 6a platform will sum and share future plan development 10 3D FASHION VIRTUALIZATION PLATFORM 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 4.2.2 Homepage screen Trending Items 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 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 Skirt Gothic Red Checked Gothic skirt best suits with gĩrls who in love with Gothic, Rock style r Edh $250 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 19 INTERNATION UNIVERSITY COMPUTER GRAPHICS 22 3D FASHION VIRTUALIZATION PLATFORM 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 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 FĩnnTA Search for Shop/ltems Q ubyll Create an Outíit Pants You not have any Saved Item or Product in Pants category 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 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 X\v' _ INTERNATION UNIVERSITY COMPUTER GRAPHICS FĩnnTA Searchfor Shop/ltems H^ỊIỊ Q, About Home Virtual Look ubyĩi Vievving Product in 3D By using mouse to control view perspective 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): 27 3D FASHION VIRTUALIZATION PLATFORM 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 tocan Virtuality Fashion, we have not finished implementing generate objects to automatically and we can only adjust the while colour they3D change the pattern of the products 28 3D FASHION VIRTUALIZATION PLATFORM 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 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 REFERENCES [1]“JavaScript - Web technology for developers” documents [Online] Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript [2]Nicholas C.Zakas, Professional JavaScriptfor 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/ ... Ultimately, inare building the a 3D final fashion chapter virtualization -of Chapter 6a platform will sum and share future plan development 10 3D FASHION VIRTUALIZATION PLATFORM LITERATURE REVIEW Similar... data viewing over and thetrying internet mixfashions and transferring fashion style or 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS W a) Contribution ... requirement, fixing a bug, system working on a report, predefined and preparing for a presentation 3D FASHION VIRTUALIZATION PLATFORM INTERNATION UNIVERSITY COMPUTER GRAPHICS 1.4 Assumption and Solution