Overview

The metaverse platform developed by the metaverse development team aims to enhance user experience by allowing users to create customized avatars with physical features that match the data that each user provides and virtual clothes fitting on the avatars to see the overall fit.

In addition, shop owners can design their own shops and fitting rooms in the metaverse environment by adding various furniture and virtual clothing of various types. The metaverse platform will be integrated into the META application via React Native. The deliverables introduced below are prototypes with only conceptual assets included. The client will add other assets and components according to their needs later on.

Below is a brief introduction to the Metaverse Platform.

• For shop owners: Aims to assist owners in rearranging the shop interiors virtually to roughly try out different designs for their stores
• For online customers
  • Clothes fitting for different body shapes and styles: When shopping online, it is hard to tell if a certain shirt/dress/trousers/etc will perfectly fit their body. The metaverse platform will help online customers by creating a virtual avatar that will have a similar body shape defined by the customer. Additionally, the avatar will then put on the clothes and generate an estimated “fit” value

Platform

Navigation in the scene

asset_move_new.mp4

Since the built metaverse platform is for mobile devices, navigation utilizes touch gestures as the following:

• Single touch drag
  • When no object is selected: rotate the camera rendering the scene
  • When there is an object selected: to move the object
• Stretching and pinching with two fingers to zoom in and out
• Tapping and holding on objects (e.g. clothes rack, chair, etc) to select that object
  • When an object is selected, it will be highlighted by outlining the object
• Simple tap
  • Outside the selected object: deselect that object
  • Inside the selected object: switch state between translation and rotation of the object

Button UIs

button_ui_new.mp4

There is a set of buttons that the user can use to spawn objects in the scene. Buttons are sorted into the following categories:

• Clothes store-related (clothes rack, mannequin, etc.) furniture
• Other furniture (chair, table, etc)

When the user navigates to a certain type of object, there will be several buttons:

• Buttons that render the thumbnails of objects that will be created once pressed
• Buttons that are put into Scroll Rect so that if a certain type of an object has too many variants, these buttons will be scroll-able horizontally

Avatar

Avatar Customization and Clothes Fit Percentage

size chagne.mp4

On the metaverse platform embedded in the META shopping mall app, the user will be provided with specific options to customize their virtual avatar. After the data is provided, the user will have a virtual avatar that looks like them.

Then, the user can choose clothing they would like to try on and see if the clothing fits their virtual avatar. The user can choose the style and size of the specific clothing they would like to try on and can change the size of the clothing as they are fitting them.

Avatar Animation

anim.mp4

After choosing an outfit, the avatar can demonstrate various actions, such as waving their hands, by playing some animation. The following are some of the actions that the avatar can do within the metaverse environment:

• Basic T-Pose: avatar standing in a position with their arms held up high like a ‘T’ shape
• Idling pose: avatar standing in a pause, slightly idling sideways
• Walking pose: avatar walking within the metaverse environment