School of Computer Science & Engineering: Final Report

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
1
COMPUTER GRAPHICS
ACKNOWLEDGEMENT
2
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.
3
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.
4
COMPUTER GRAPHICS
TABLE OF CONTENT
ACKNOWLEDGEMENT................................................2
1. INTRODUCTION........................................................8
1.1 Background...........................................................................8
1.2 Problem Statement................................................................9
1.3 Scope and Objectives............................................................9
1.3.1. Scope:..............................................................................................9
1.3.2. Objective:........................................................................................9
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
2. LITERATURE REVIEW..........................................12
2.1 Similar Applications/Systems.............................................12
2.2 Platform and Tools Review................................................13
3. METHODOLOGY.....................................................14
3.1 User requirement analysis...................................................14
3.2 System design.....................................................................15
3.2.1 Database design..........................................................................15
4. 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
5
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
5. DISCUSSION AND EVALUATION........................25
5.1 Discussion...........................................................................26
5.2 Comparison.........................................................................26
5.3 Evaluation...........................................................................27
6. CONCLUSION AND FUTURE WORK..................28
6.1 Conclusion..........................................................................28
6.2 Future work.........................................................................28
REFERENCES................................................................29
6
COMPUTER GRAPHICS
1. 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
7
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.
8
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.
9
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 1. Chapter 2 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 3. 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 4. Discussion and evaluation of our project will be stated in
Chapter 5. Ultimately, the final chapter – Chapter 6 will sum up our
achievement in building a 3D fashion virtualization platform and share our
future plan development.
10
COMPUTER GRAPHICS
2. LITERATURE REVIEW
2.1 Similar Applications/Systems
Application Advantages Disadvantages
MixDress –  Help to choose outfit of the  Not a good layout webpage which
Combine day by asking some make user confuse.
Clothes App question  Old website style, unfriendly user
 Distinguish between interface.
favorite outfit and dislike  Do not provide various category,
outfit pattern, color and material. Only
 Nice experience with divide into 4 types: Bottom, top, solo
welcome survey and extra.
 Cannot mix a layer outfit: not allow
outfit with 2 tops: T-shirt and jacket.
 Recommended outfit based on hashtag
of product from upload, not an ideal
suggestion.
Virtuality  Professional 3D website  Doesn’t popular in Vietnam.

Fashion with detail simulation.  Doesn’t allow to discover other item,
 Convert automatically by collection of other’s user, or mix and
asking user to provide match clothes to create a collection
relevant data such as:  Doesn’t have new feed for finding
pictures, sketches, 2D files inspirable collection, not a sharing
and choosing stitches. platform.
 Support multiple
languages.
11
COMPUTER GRAPHICS
2.2 Platform and Tools Review

- Main framework: ReactJS
- Template Engine: MaterialUI, Boostrap
- Database management system: JSON Server
- Integrated development environment (IDE): Visual Studio Code
(VSCode)
- Supported library for Image processing and 3D Object: Three.js, Drei,

Fiber, Valtio, Html2Canvas, React - Colorful.
o Three.js: used to create and display animated 3D computer
graphics in a web browser using WebGL
o Drei: a growing collection of useful helpers and abstractions
which support project by implement Camera: Perspective and
Orthographic camera, Controls: orbit controls, Loaders: use
GLTF
o Html2Canvas: manage, rearrange position of each product’s
image and capture the final image of a collection.
o React Colorful: use to Changing Color of Product by
HexColorPicker
- Programming language: JavaScript, CSS, SCSS

o JavaScript: give web page interactive elements that engage users,
add behavior and effects to web page, build Front-end based on
React, call API, handle data from Back-end, solve logical problems
o CSS (Cascading Style Sheet) and advanced version SCSS
(Syntactically Awesome Style Sheet): give style of appearance to
web page
- Managing and sharing code community: Github, Discord
- Task management tools: Trello
12
COMPUTER GRAPHICS
3. METHODOLOGY
3.1 User requirement analysis
Capturing the expectations about the features integrated into a product that
users have is an endless task to be done from the very first stages of product
development to the improvement phase of the published product. Bearing in
mind that the user target of this website is the youngsters who are fascinated
by fashion, user requirement analysis was carried out. Similar to taking notes
of invaluable information granted by the professor in a lecture, fashion
enthusiasts demand to save outfits worn by trendsetters and other users that
catch their eyes. Additionally, what differs this website from other social
media sites available market lies in its capability of enabling users to mix
and match a set of outfits by combining separate items and its function
allows user to view their or other’s products in 3D for a more close-up view.
As the user requirement analysis was carried out, this website which has
been developed for this course project has been proven to be a promising
social media site that should be put into consideration of publishing online to
satisfy the passion in fashion.
13
COMPUTER GRAPHICS
3.2 System design

3.2.1 Database design
3.3
14
COMPUTER GRAPHICS
4. 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
15
COMPUTER GRAPHICS
4.2 Result
4.2.1 Sign in/Sign up screen
There are 2 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.
16
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.
17
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.
18
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 3 supplementary images for each post.
After uploading supplementary image from their computer, user can re-
choose 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
COMPUTER GRAPHICS
20
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 3 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.
21
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.
22
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
23
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.
24
COMPUTER GRAPHICS
5. 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):
25
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.
26
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
27
COMPUTER GRAPHICS
6. 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.
28
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 1
October 2021. Retrieved from:
https://www.section.io/engineering-education/how-to-insert-3d-
objects-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-in-
browser-drawing-a-box-with-threejs/
[9] Javascript 3D Library. Retrieved from: https://threejs.org/
[10] 3D Model. Retrieved from: https://sketchfab.com/
29

School of Computer Science & Engineering: Final Report

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

School of Computer Science & Engineering: Final Report

Uploaded by

Copyright:

Available Formats

INTERNATION UNIVERSITY

School of Computer Science & Engineering

First and foremost, we sincerely express our deep gratitude to our

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

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

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.

4.2.5 Product Detail Screen.................................................................22

1.2 Problem Statement

Nguyễn Giang Ngọc Trâm 40%

Together we analyse topic requirements, discuss ERD, implement some

1.4 Assumption and Solution

Virtuality  Professional 3D website  Doesn’t popular in Vietnam.

2.2 Platform and Tools Review

- Supported library for Image processing and 3D Object: Three.js, Drei,

- Programming language: JavaScript, CSS, SCSS

3.2 System design

4. IMPLEMENTATIONS AND RESULTS

4.2.2 Homepage screen

Homepage screeen contains:

4.2.3 Profile screen

If user views their profile, they are allowed to

4.2.4 Edit Product Screen

4.2.5 Product Detail Screen

4.2.6 Create an Outfit Screen

4.2.7 Virtual Look Detail Screen

4.2.8 View Product in 3D Screen

5. 5. DISCUSSION AND EVALUATION

6. CONCLUSION AND FUTURE WORK

You might also like