End Of Study Project

Metaverse Solution

Ayman Bouchareb
National School of Applied Sciences

Graduation Project

For acquiring An Engineering Diploma

Computer Sciences
Implementation of a Cross-User shared experience

CompanyLogo

SchoolLogo

…

Presented On : 25th June 2022

Jury Members :

  • Mr. MESMOUDI Yasser
  • Mr. CHKOURI Mohamed Yassin

Prepared By :

  • BOUCHAREB Ayman

supervisors :

  • Professional Supervisor :

    Mr. Borys Tam

  • Academic supervisor:

    Mr. EL YOUNOUSSI Yacine

Academic Year : 2021-2022

Content

Introduction

Metaverse

Metaverse technologies are :

  • Immersement-based
  • Gamified in nature
  • Blockchain-based?

VRPerson

Blockchain

Our main Target is :

  • Ethereum

EthereumLogo

Ethereum

Context

Company presentation

Nethermind is a software development Company that is focused on the development of blockchain applications. Logo Its principale activities include :

  • DeFI/Finance: providing solutions in the space of decentrelized finance.
  • Tooling: providing tooling for the development of blockchain applications.
  • Research: actively researching new technologies and providing them to the community.

Atlantis team

The metaverse team is called : Atlantis Atlantis

Project presentation

The project is called : Netherverse

Netherverse's main Aspects :

  • Communication: Voice, Chat, etc.
  • Interaction: Emotes, reacts etc.
  • Exploration: 3D spaces, etc.
  • Decentrelization: Transactions, etc.

Netherverse

Methodology of work

Customized Method based on Agile :

Task States :

  • No Status.
  • Not Started | On-Hold.
  • In Progress.
  • Obsolete | Completed.
  • Archived.

Taskology

Requirements

Actors

The actors involved are :

  • Hosts
  • Visitors
  • Nethermind

Actors

Functional requirements

On the Client side we have use cases Contexts :

  • Host : Create spaces, Modify spaces, etc

  • Vistors : Join spaces, Leave spaces, etc

Usecases

Example : Authenticate Process

Overview of the login Process :

  • Database based authentication :

Web2Login
  • Blockchain based authentication :

Web3Login

Non-Functional Requirements

The Non-Functional Requirements are :

  • Maintainability
  • Scalability
  • Security
  • Performance

Design

Logical architecture

Entity Component System

  • Entity
  • Component
  • System

SystemsMap

Physical architecture

The project mixes between :

  • HTTP Server
  • P2P Connections
  • RPC Server

Machines

In depth Look

LogicalFlow

Client architecture

Client Side (Browser) has 2 Parts :

  • WebGL System
  • WebRTC System

ClientSide

WebGL System

The webgl build is the main Interactive part, it has :

  • Rendering capabilities
  • Networking capabilities

Systems

WebRTC System

The WebRTC build is the main communication part, it has :

  • Voice chat capabilities
  • Data channel capabilities

Communication

Server architecture

Server Side (Network) has 2 Parts :

  • HTTP Services
  • RPC Services

ServerSide

RPC Server

  • Networking Service
  • Signaling Service

EmotesProcess

Http Server

  • Authentication Service
  • Storage Service

FileManipulation

Example :

File Upload in details (Interop + networked interaction) :

FileStorage

Programming

Code

Code snippets :

  • C# Code snippet : 
    if(!photonView.IsMine) return;
string url = PhotonNetwork.LocalPlayer
  .CustomProperties["Avatar"] as string
  ?? "DefaultAvatar";
if(IsValidRPMUrl(url.ToLower())
  && PhotonNetwork.IsConnected) {
  avatarNameHolder.transform
      .parent.gameObject
      .SetActive(false);
  photonView.RPC(
      "SetupAvatar",
      RpcTarget.AllBuffered,
      photonView.Owner.ActorNumber,
      photonView.Owner.NickName, url);
}
  • Javascript Code snippet : 
    var data = JSON.parse(message);
switch (data.Action) {
  case Handshake  :
      handleJoin(data.Src, data.Room);
      break;
  case Offer      :
      handleOffer(data.Src, data.Body); 
      break;
  case Answer     :
      handleAnswer(data.Src, data.Body);
      break;
  case Disconnect :
      handleLeave(data.Src, data.Room);
      break; 
}

Tooling

Set Tools Used :

  • Visual Studio Code :
      customizable Code Editor



  • Unity 3D engine :
      use ready Game Engine

Editor Engine

Vistual Studio Code

Vscode

Unity 3D engine

Unity

SDKs

Software development Kits used :

Moralis
(a) Moralis : Blockchain SDK
Photon
(b) Photon : Networking SDK
ReadyPlayerMe
(c) Ready Player Me : Avatar SDK
Figure 1. 

Bundling

WebGlBuild

Figure 2. Ready Player Me : Compilation phase of WebGL targeted Build

Test

AllHands
(a) AllHands Event test
Figure 3. 

Test

Benchmark

Figure 4. Benchmark results
 
a room has N players.
a player sends F messages per second
average message size is X 
an average player spends H hours
per month on your game
Cost(ccu) = X * F * N * H * 60 * 60

Demo

Netherverse

AllHands

Thank you