MASTER DEGREE IN COMMUNICATION DESIGN

Thesis ofSAMI LAAJILI

850443

MyAMG Showroom (The Virtual Car Showroom)

TutorMARIO COVARRUBIAS RODRIGUEZ

Academic year2017/2018

2

I would first like to thank my thesis supervisor Prof. Mario Covarrubias for his guidance, patience and kindness throughout the whole duration of my research. The door of Prof. Covarrubias office was always open whenever I ran into a trouble spot or had a question about my research or writing. Finally, I must express my very deeply gratitude to my parents and to all my friends for providing me with unfailing support and continuous encouragement throughout my years of study and through the process of researching and writing this thesis. This accomplishment would not have been possible without them. Thank you.

Acknowledgements

ACKNOWLEDGEMENTS

3

Web and multimedia businesses become nowadays not only a new opportunity, but also a necessity for the progress of the sector of communication and information in the world. The operation of these tools requires great professionalism, a good know-how, and a good entry opportunity. The key to the success of a multimedia project is the good management of the project while considering the financial constraints, deadlines, and resources available to implement the project. In order to focus on this concept. This project will allow us to achieve the knowledge and skills acquired. The main idea is the creation of a virtual showroom to give information and presenting high end cars so the creation of the project is accompanied by a 3-dimensional interactive tour of the exhibition hall modeled with 3Ds max and developed with Unity3D.

Gli affari Web e multimediali diventano oggi non solo una nuova opportunità, ma anche una necessità per il progresso del settore della comunicazione e dell’informazione nel mondo. Il funzionamento di questi strumenti richiede una grande professionalità, un buon know-how e una buona opportunità di ingresso. La chiave del successo di un progetto multimediale è la buona gestione del progetto, considerando i vincoli finanziari, le scadenze e le risorse disponibili per implementare il progetto. Al fine di concentrarsi su questo concetto. Questo progetto ci consentirà di raggiungere le conoscenze e le competenze acquisite. L’idea principale è la creazione di uno showroom virtuale per dare informazioni e presentare vetture di alto livello in modo che la creazione del progetto sia accompagnata da un tour interattivo tridimensionale della sala espositiva modellata con 3Ds max e sviluppata con Unity3D

Abstract

ABSTRACT

4

Table of contents

TABLE OF CONTENTS

Acknowledgements AbstractList of figures List of tables

CHAPTER 1 : INTRODUCTIONGeneral Introduction

1. General context of the project2. Presentation of the Project3. The objectives4. The targets5. Structure of the report

Conclusion

CHAPTER 2 : STATE OF THE ART I. Study of the website « Carvrtour.com »

1. The website1.1. Analyzing the logo1.2. Analyzing the website 1.3. Technical study Of the web Site

1.3.1 Features 1.3.2 Technologies Used

2. Study of the virtual visit of the site CarVRtour2.1 Technical analysis2.2 Navigation and buttons2.3 Pros and cons

II. Video game Analysis Silent Hill: Home Coming1. Game details 2. Overview 3. Synopsis 4. Graphics 5. Gameplay 6. Soundtrack 7. General opinion

III. 3D virtual tour of «Tisindia» company1. Analysing the sequences and the shots2. Pros and cons

IV. Other existing showroomsPros and cons

Conclusion

P.2P.3P.6P.6

P.8P.10P.10P.10P.11P.11P.11P.12

P.14P.16P.16P.16P.18P.21P.21P.21P.21P.21P.22P.24P.24P.24P.25P.25P.25P.26P.26P.27P.27P.27P.29P.29P.30P.30

5TABLE OF CONTENTS

P.32P.34P.34P.34P.35P.35P.36P.37P.37P.38

P.40P.42P.42P.43P.43P.43

P.44P.44P.45P.47P.49P.49P.50

P.52P.54P.55P.57

P.59

P.63

CHAPTER 3 : THE DESIGN1. Graphical research

1.1 Search for the accessories to be modelled1.2 mock-up scenario of the Showroom

2. Modelling2.1 Modelling the Showroom2.2 Modeling of The Environment

3. Texturing4. Exporting the scene into FBX format

Conclusion

CHAPTER 4 : THE REALIZATIONI. Software and hardware environment

1. Software Used2. Hardware Used

II. Realization of the Virtual tour1. Why did we choose Unity3D to develop the project2. Integrating 3d Objects3. Texturing4. Light-Mapping (lighting)5. Setting up the camera6. Scripting in Unity7. Final render

Conclusion

CHAPTER 5 : USER’S TEST1. SUS-The System Usability Scale2. Analysing and calculating the results

Conclusion

CHAPTER 6 : CONCLUSION AND PERSPECTIVES

CHAPTER 7 : REFERENCES

6

List of figures

List of tables

LIST OF FIGURES

Figure 1 : carVRtour logo Figure 2: Home page of the website «carVRtour» Figure 3: car VR tour examples Figure 4: Technologies used to build the website Figure 5: Example of Virtual Tour (Outside) Figure 6: Example of Virtual Tour (Inside) Figure 7: Pop-up Video Figure 8: Clues of navigation Figure 9: Indices of Icons Figure 10: The poster of the game Figure 11: The main character in action Figure 12: Details of an object in the game Figure 13: Different shows room found on the net Figure 14: Prototype of a car carrier Figure 15: Sketch of the left view of the showroom plan Figure 16: Sketch view from the top of the showroom plan and car stands Figure 17: Modelling the interior of the showroom Figure 18: Modelling the exterior facade of the showroom Figure 19: Texture 360 ° of the sky Figure 20: A half-sphere that represents the sky Figure 21: Table of V-Ray materials Figure 22: FBX export panel Figure 23: Oculus Wireless VR headset Figure 24: The scene imported in Unity3D Figure 25: Scene after putting the textures Figure 26: Point light settings Figure 27: Directional light settings Figure 28: Spot light settings Figure 29: Wireframed lights Figure 30: « Generate Colliders » Checked Figure 31: Settings of the « Character Controller » Figure 32: Setting up the camera Figure 33: Scripts folder Figure 34: Build settings panel Figure 35: MyAMG VR test ready Figure 36: MyAMG SUS form Figure 37: MyAMG SUS forms filled Figure 38: MyAMG SUS result

Table 1: Study of the «carVRtour» logoTable 2: The study of the w ebsite Www.CarVRtour. comTable 3: Analysing the video shots

P.16P.18P.18P.21P.22P.22P.23P.23P.23P.24P.25P.26P.29P.34P.35P.35

P.36P.36P.36P.37P.37P.38P.43P.44P.45P.45P.46P.46P.47P.47

P.48P.48P.49P.50P.54P.55P.56P.57

P.16P.18P.18

INTRODUCTION

1

10 INTRODUCTION

General Introduction

In a society that is increasingly concerned with research and the publication of information, the new communication and information technologies have invaded several economic and cultural sectors. Several national institutions and centres have adopted this new technological trend to make themselves known more easily by a large public.In fact, modeling, interactivity in 3d and the development of dynamic websites have greatly contributed to an exchange of information between Internet users and the institutions concerned.With a varied and precise information each user can not only have a clear idea about the association of 3d interactivity but also manipulates and uses the application that is made available to him.

1. General context of the project:

The professions of the web and multimedia become nowadays not only a new opportunity to seize but also a necessity for the progress of the sector of communication and information in the world. The exploitation of these trades requires a great professionalism, a good Know-how, and a good grasp of the opportunities. The key to the success of a multimedia project is the good management of the project while taking into account the financial constraints, the delays, and the resources available to set up the project. In order to emphasize this concept. We are oriented to carry out a professional project in the framework of Master of science in communication design Within the Politecnico Di Milano.

2. Presentation of the Project:

In this project we will allow the realization of the theoretical and practical knowledge acquired. The main activity of my project is the creation of a showroom MyAMG Specialized in the Presentation of cars MERCEDES AMG E63 2018. The creation

11INTRODUCTION

of a virtual environment is accompanied A three-dimentional interactive tour of the showroom.

3. The objectives:

The main objectives of our project are:• Build a consistent and attractive Virtual Reality Platform: A simple, intuitive and concise interface, ergonomics facilitating easy and fast navigation, assisting the user, to accomplish his Spot and directly reach its goal (Have information, Change color...).• Promote And Communicate The Tour Of Products de The company MyAMAG :Do Know the different Options and Colors Exposed cars.

4. The targets:

The project exposes two aspects of communication and sales:• Rich and business people: The Project Aims The rich and business people in the first place since the cars destined to sell are high Ranges.• Young drivers and fans: Since in a second place the products intended for sale are. The car of large cylindrical power, The main targets Are young drivers and The Fans of The Mercedes.

5. Structure of the report:

Our work will be structured as follows:Chapter Introduction: In This part we present the general framework and the presentation of the projectChapter 2 State of the Art: Gives an overall idea about the study of the existing nameally the presentation of some sites and showrooms.Chapter 3 We are interested in presenting the showroom.Chapter 4 System Architecture. Includes the implementation part of the project.Chapter 5. User’s test (with at least 10 students)And finally we finish our work with a general conclusion and perspectives and Future improvements.

12 INTRODUCTION

Conclusion:

After the representation of the framework of the project we will begin a study of the existing (State of the art) in order to extract a good final solution, and this in the second chapter.

STATE OF THE ART

2

16 STATE OF HE ART

To design our project, we chose to carry out an eye on virtual tours and 3d applications made by professionals. The purpose of this step is to:

• Identify the comprehensive set of Objectives• Get acquainted with the details of the Field

I. Study of the website « Carvrtour.com »

carVRtour[8] Allow customers to virtually walk & look around showrooms and cars in 360 degree from anywhere, as if they were there in person. It is designed to be a centre of information in which business can be carried out in interaction between visitors and exhibitors.carVRtour is intended to become an information center and directly interact with visitors and exhibitors.

1. The website:

In this part, we talk about the logo and the denotative and connotative study of the site. [2]

1.1. Analyzing the Logo:

We present in Figure 1 the logo of the agency Carvrtour.

Figure 1 : carVRtour logo

17STATE OF THE ART

In this table, we present the denotative and connotative study of the logo [3] [7]. :

Denotative study Connotative study

Choice of colors

- For generations, this hue (grey) however has the merit of being gentle, Sober, elegant, it’s a good ally.

- The Blue as the sky that opens the horizons, is a color closely related to dream, wisdom and serenity. It allows to find a certain inner calm linked to the deep things.

- The Navy blue is a color of self-control, balance and Tolerance.

Typography There is the word «CarVRtour» With a very light gradient from light blue to navy blue.

A modern and strict typography that indicates that the company is high level and rigorous.

Table 1 : Study of the «carVRtour» logo

18 STATE OF HE ART

1.2. Analyzing the website :

We present in this part the different pages of the website CarVRtour. Figures 2 and 3 show the presence of guided tours in the website.

According to The figures 2 and 3 We can see that the user can access To the website with the «responsive» [6] web technology that is adaptative to all devices.

Figure 2: Home page of the website «carVRtour»

Figure 3: car VR tour examples

19STATE OF THE ART

In this table, we present the denotative and connotative study of the website [5] :

Denotative study Connotative study

Choice of colors

- We will start with the colors chosen in the interface of the page that are (gradient of grey).

- And so, the white that is used As Background color That means clarity, purity,

- The Black that represents the color of typography indicates the mystery, elegance and Simplicity.

- The Blue means calmness, safety and freshness, when filled de Light, she Symbolizes Infinity. This is The Colorof imagination and to Daydreaming.

TypographyThe font used is (Montserrat)

this font represent responsibility.

Graphic forms

the shapes found in this page are rectangular And Linear.

The shapes used are the rectangles: symbol of stability, something that rests well (the agency).

20 STATE OF HE ART

According to this study we have cleared the strengths and weaknesses of the site Following:

+ The Site is clear to the target Referred.+ The Topics are well Located.+ The Text and content are Clear.+ The Logo is well Placed.+ The Site is Responsive.

- The Structure of the pages is very Standard.- Lack of effort regarding the Graphic design thing.- The contact details of the agency are not available Except the phone number.- The colors used are not well used and exploited in the pages.

Page structure

These pages are divided horizon-tally In three Main parts, the Part In High is devoted to Logo and the links of other Pages With a short GIF tutorial.

In the middle is the content of the pages, contains the necessary informa-tion Of the Platform « CarVRtour » As Pri-cing, offers, utilities, informatios....

The bottom part is dedicated to the Examples and user reviews

- It is a «one page site» where you can find all the necessa-ry information in a single page.

- The static composi-tion «parallax» used in this site gives a good organization and helps us unders-tand the navigation scheme.

- The position of the images allows the user to properly stu-dy the services pro-vided by the site, this technique can inter-vene on the desire of the latter.

Table 2 : The study of the website Www.CarVRtour. com

Stre

ngth

sW

eakn

esse

s

21STATE OF THE ART

1.3. Technical study Of the web Site :1.3.1 Features :

In the home page, the user can view and read the information from the CarVRtour, there are also Nine Clickable images that show the Examples of Virtual tours carried out by CarVRtour. In each image there is a link that leads to a specific page That pops up.

1.3.2 Technologies Used :

According to the wappalyzer.com [8] the CarVRtour website has used these tools above to build their complete page on the web.

2. Study of the virtual visit of the site CarVRtour:2.1 Technical analysis:

The VR experience offer some features inside and outside the car like:

• 3d virtual walk through, Doll house and floor plan views, as well as a virtual realty viewing option.

• EmbeddedEd Pop-up tags to highlight key features of the space with small billboards of text, video and other rich multimedia content for communication and collaboration.

• Individual Car VR Tours Available. Provide customers with an immersive virtual tour of any vehicle

Figure 4: Technologies used to build the website

22 STATE OF HE ART

2.2 Navigation and buttons:

As the figures show (figure 7 And 8), the user can freely move In The room, and even interact with The Objects of the car. As soon as we fly over The screen A Blue Circle Appears For browsing, and if we click we Access to the location Desired and by Clicking on a small white circle A Pop Up Appears to give more information, special offers, Videos...

Figure 5: Example of Virtual Tour (Outside)

Figure 6: Example of Virtual Tour (Inside)

23STATE OF THE ART

Figure 7: Pop-up Video

Figure 8: Clues of navigation

Figure 9: Indices of Icons

24 STATE OF HE ART

Figure 10: The poster of the game

PC/PS3/Xbox 360KonamiDouble Helix GamesSurvivalHorrorSeptember 30, 2008 in the United StatesNot recommended for 18-year-olds

2.3 Pros and cons :

As the figures show (Figures 7, 8 and 9), the surfer can freely and easily move around and in the car and he can have the information he wants with one click. Also the exposed cars are in their real state with the help of 360 degree camera technology but to see the different colors of the brand you have to go to another car and it’s annoying and also you cannot see the engine nor the internal components and we are sometimes limited with the information provided by the seller.

II. Video game Analysis Silent Hill: Home Coming

1. Game details [11] :

Platform Publisher Developer Type Release DATE Classification

25STATE OF THE ART

2. Overview :

Silent Hill: Homecoming is the sixth installment of Konami’s popular survival horror series. It was officially announced on July 11, 2007 [10] and was released in September 2008 [10]. Homecoming is the second Silent Hill game to be produced by a Western developer for home console; the first being Silent Hill: 0rigins for the Sony PSP. It was developed by Double Helix for the Xbox 360 and PlayStation 3. The PC version of Homecoming was released in November 2008 as a Steam-exclusive title in North America, with a retail version released three months later in Europe.

3. Synopsis :

Players take the role of Alex Shepherd, a Special Forces soldier returning to his hometown of Shepherd’s Glen after a brief tour of duty overseas only to find his father and younger brother Josh missing, and his mother in a coma. Alex begins a search for his brother between his hometown and the fog-covered supernatural town of Silent Hill. [10]

4. Graphics :

The Character Design of the bumps is successful, the modelling

Figure 11: The main character in action

26 STATE OF HE ART

of the monsters oscillates between the good and the medium. However, in its entirety, « Homecoming does not honor the Capacity of The machine. Random Modeling Proves Less successful than «Silent Hill 3» (a peak), The Game Is Often Too much Dark (despite The Setting de The Brightness And The atmosphere Intrinsic to the Title And The All Is Allows Same Sometimes de Row Then That The Title Did Almost Nothing à Display [12].

5. Gameplay :

Far too action oriented, « Homecoming «Still enjoys a more flexible gameplay than in the past.» With a lot of dodges and counter-attacks, the fights are more nervous but often remain imposed, which can pose Problem To many. There are also some graphic bugs, camera problems or blocked enemies at the intersection of parts forming an environment. However, all this does not really hinder the progression

6. Soundtrack :

Akira Yamaoka Resumes service and the result, more erased, still proves to be convincing. The American dubbing is also of high quality and reinforces the immersion.

Figure 12: Details of an object in the game

27STATE OF THE ART

7. General opinion :

Under some melting-pot out of previous episodes, «Silent Hill Homecoming Never manages to supplant his elders. Much too claustrophobic in a combative frenzy, the title is sought without ever To find. In short, it will be difficult for The Amateur Informed Participate Of the chief especially after reaching the end of hell with the first 4 shutters. Without being totally uninteresting, this Segment Operates A Change That Do Befits Not Necessarily à The Saga And Is Loses In Its Direct or indirect influences. Despite this, the truth is at the end of the road, This is Safe but still Should Don’t be wrong about Road.

III. 3D virtual tour of «Tisindia» company

The video [13] is a guided tour that presents the office of the Agency Tis India Made by its team of experts in 3d. A short descriptive film of 43 seconds allows to visualize the agency thanks to the 3D Technology.

1. Analysing the sequences and the shots:

In This Table We Present the study Of Different shots [14] for the agency’s guided tour «Tisindia».

+ Excellent environmental lighting and phantom effects build a fantastic atmosphere.+ Intense fight against Enemy.+ The Logo is well Placed.

- Loss of the psychological horror factor that the Series.- Scenario and History Of Game Are Disappointing By Report to the old « Silent Hill » de The Saga.

Strengths

Weaknesses

28 STATE OF HE ART

Shots Description Shot size

Camera

1 - Outline highlights the piece Reserved To the management and the Conference room

- Light: Natural

medium long shot

Camera: Mobile (traveling front): The camera is headed for the office door.

2 -Preparation of the visit To the room of Conference.

- Light: Natural

medium long shot

Camera: Mobile (panning to the right and then travelling forward): The camera rotates to the right and then heads to the Conference room.

3 - Plan Reserved To the description of the conference room

- Light: Natural

medium long shot

Camera: Mobile (Oblique movement and then Velling Front): The camera enters the conference room and made the Tour of the Office Before de Out.

4 - Plan Reserved To the description of the conference room.

- Light: Artificial / Soft

Long shot

Camera: Mobile (front travelling): The camera shows the deve-lopment block room.

5 - Visit to the Deve-lopment room area.

- Light: Artificial / Soft

medium long shot

Camera: Mobile (a fast forward travelling ): the camera located at the end of the room of deve-lopment blocks, makes a com-plete turn of 180° in order to ex-plore each block..

6 - Crossing between the Blocks.

- Light: Artificial / Soft

medium long shot

Camera: Mobile (a fast forward travelling ): The camera passes between the blocks and shows the organization of the offices.

Table 3 : Analysing the video shots

29STATE OF THE ART

2. Pros and cons:

This video presents the architecture and materials of the company «TIS India ». However, three-dimensional modelling has a simple appearance and the light used for interior lighting is subdued without being dark.It creates an impression of human warmth and conviviality. We notice that there is a set of shadows and light that gives a relief.Despite the good preparation and the good organization of this work, the details are missing, the administrative staff, information and even an intro for the video. Also, the sound gives an ambiance music that will offer more values and credibility.

IV. Other existing showrooms

The state of the art is a crucial step, it is the watch on the market. During this step we looked for different shows room on the net to get inspirations from their stands and to improve our ideas.

Figure 13: Different shows room found on the net

30 STATE OF HE ART

Pros and cons:

This study allowed us to:

• Know the types of lights to use in the Modelling.• Have an idea of the type of support of the technical data sheets of the Cars.• Have an idea on how to locate the Cars• Have an idea about the Décor.

On the other hand We have identified the following drawbacks:

• The ban on taking pictures in the rooms of exposure• Lack of information and technical characteristics in the technical data sheets of the cars.• The presence of dirt and dust in the Stands.

Conclusion:

This study allowed me to prepare the bases for my application, while highlighting the constraints to respect, the different actions that the user needs to be able to do. Studies, got me discover some techniques of approach to do my job well.

THE DESIGN

3

34 THE DESIGN

After having studied the products already existing on the market; We begin the design phase of the virtual tour so in order to do an executable Project containing a virtual tour, There’s a methodology to follow:

• A graphical research• Concepting• 3D Modeling• Texturing• Exporting the 3D file for realization on Unity3D

1. Graphical research:

To make a perfect modeling, it is necessary to make a graphic search of the various elements to be modeled [1].

1.1 Research for the accessories to be modelled:

Since the cars’ stands need presentative elements we have looked for different accessories to model such as curtains and car carriers.

1.2 mock-up scenario of the Showroom:

The mock-up scenario, often called Storybord, is a technique that consists of making sketches of the various visual elements of content. To enlighten our vision on our work, we have drawn

Figure 14: Prototype of a car carrier

35THE DESIGN

some sketches of the showroom and the places of the car stands. (See figures 15 and 16)

2. Modelling:

We present below the showroom modelling and environmental modelling

2.1 Modelling the Showroom:

For the modelling of the showroom, we used a polygonal modelling using simple primitives such as box (box) Chamfer Box (chamfer box) sphere cylinder. (See figure 17 and 18), we added details such as the floor, cars and sky to give a friendly and warm look.

Figure 15: Sketch of the left view of the showroom plan

Figure 16: Sketch view from the top of the showroom plan and car stands

36 THE DESIGN

2.2 Modeling of The Environment:

As for the modeling of the environment we modelled a sphere on which we applied a sky texture 360 degree. (see figure 19). The whole scene takes place inside this sphere. (see Figure 20).

Figure 17: Modelling the interior of the showroom

Figure 18: Modelling the exterior facade of the showroom

Figure 19: Texture 360 ° of the sky

37THE DESIGN

Figure 20: A half-sphere that represents the sky

Figure 21: Table of V-Ray materials

3. Texturing:

The choice of textures and materials is well studied. We used V-RAY [3] materials to give it a real and original look. For this we have applied different metal materials for the different facades and glass materials for the doors. (See Figure 21)We used several texturing techniques such as Mapping UVW [4].

4. Exporting the scene into FBX format:

Since we are going to work on Unity3D program, 3d-modelled objects must be Exported in FBX format [5] to preserve the correct dimensions and textures. (see Figure 22).

38 THE DESIGN

Figure 22: FBX export panel

Conclusion:

In this chapter we were able to develop graphic design and technical design. In the next chapter we will begin the realization and the testing part to implement our design.

THE REALIZATION

4

42 THE REALIZATION

The implementation phase of the project consists in translating the specifications, detailed in the design part, into a compiled code. The realization involves explaining the various hardware and software tools that have contributed to the realization of our project and to implement the needs of the project.

In this chapter we started with a detailed description of the work environment, while starting first by describing the software and languages used during our project. Then we will describe the scripts used during the programming so all the work on the Unity3D program.

I. Software and hardware environment

We describe briefly the softwares and hardwares used for the realization.

1. Software Used:

Unity3D 5.6.4 64-bitSoftware used for the development of the interactive 3d scenes, and for the generation of C# and Java script codes with the help of its script editor « Monodevelop » [1].

Autodesk 3ds Max 2017 64-bitIt’s a 3d modelling and animation software [2].

Adobe Photoshop CC 2018 It’s a software used for the realization of interfaces and buttons. It allows you to do image editing [3]

Adobe Illustrator CC 2018It’s a vector specialist software for the graphic creation of illustrations [4].

43THE REALIZATION

2. Hardware Used:

• 1000 Hard Drive Go• Intel Core i7 (8CPUs)• Frequency 2.4 GHz• RAM of 16 Go• OS: Windows 10 64-bit• 17 ‘ ‘ Screen• Oculus Rift 2018 (Figure 23) [5]

Figure 23: Oculus Wireless VR headset

II. Realization of the Virtual tour

1. Why did we choose Unity3D to develop the project:

Unity3D is a software that contains rich functionality, fully integrated development engine for interactive 3D content creation. It offers an extraordinary feature of assembling high quality, high performance and publishing content across multiple platforms. Unity3D allows developers and independent designers, small studios and large multinational corporations, students and enthusiasts to drastically reduce the time, effort and cost of making video games.

Before choosing Unity3D to design our application, we had to carry out some research of the software and the languages which make it possible to create virtual environments in 3D (fairs , museums, galleries of art, virtual city ...) which can be visited using

44 THE REALIZATION

Figure 24: The scene imported in Unity3D

a computer.

We finally chose Unity3D because it can export the application to several platforms (Android applications, executable applications on PC, applications on XBOX platform or PlayStation and even web platform) and it is also the easiest and there are several tutorials and forums that facilitate the mastery of such software.

These software (Unreal Engine, Game Maker, Mugen, Fighter maker and RPG maker) are much more complex than Unity because they are specialized in creating video games. We also found a problem finding their tutorials on the net.

2. Integrating 3d Objects:

As soon as we finished the modeling on 3ds Max, we started the integration on Unity3D. We started from the outside inside. First, we integrated the showroom. Then we placed the different stands inside the fair. Finally, we arranged the products in the stands.

3. Texturing:

Because of some incompatibilities during integration, some objects lose their textures and appear in gray. For this it was necessary to reapply some textures in Unity3D.

45THE REALIZATION

Figure 25: Scene after putting the textures

Figure 26: Point light settings

4. Light-Mapping (lighting):

The use of lamps is used to illuminate scenes and objects, to create a perfect visual atmosphere. The lamps can be used to simulate the sun, light games, flashlights, shots, explosions, etc ...Unity offers three types of light: Point, Directional or Spot Light [8].

• Point light: diffuses the light in all directions, like a Bulb.

46 THE REALIZATION

Figure 27: Directional light settings

Figure 28: Spot light settings

• Directional light: Are placed at an infinite distance and affected everything in the scene, like the sun, often they are distinctive by their orange color.

• Spot light: Diffuse the light from a point in one direction and only light objects inside a cone like the headlights of a car.

47THE REALIZATION

Figure 29: Wireframed lights

Figure 30: « Generate Colliders » Checked

5. Setting up the camera:

Unity3D gives us the possibility to have an unlimited number of cameras in a scene so they can be placed in any order, anywhere on the screen.For this project, we need a mobile camera that can be driven by the user, in this case we chose to integrate in the scene the «First Person Controller» from the «Standard assets» file that contains:

• The Character Controller: Especially Used to Help the Player or visitor to explore the Scene.• The Camera: Following the controller Character.

Before integrating the «First Person Controller», it is important to check the «Generate colliders» box in the «FBX import» console of the «scene» Prefab, if not the «Character controller» will fall down and it will not be able to explore the scene.

48 THE REALIZATION

Figure 31: Settings of the « Character Controller »

Figure 32: Setting up the camera

Under favorable conditions, we have integrated the «First Person Controller» by placing it in the front door and modifying parameters such as:

• Changing the parameters of the Movement.• The modification of the Gravity.• Changing the shape of the capsule.• Disabling the visibility of the Capsule.• ...

49THE REALIZATION

6. Scripting in Unity:

«Scripting» is an essential element in Unity3D because it defines the behavior of the game or virtual tour.The programming language recommended for Unity are JavaScript, C# and Boo.

We chose to program with the «C#» [10] as it is the most standard, so we created several types of «.cs» files depending on the case and the needs of the project.

7. Final render:

At any time during project creation, we can see what it looks like when we compile it and run it outside the editor as a stand-alone player.

The final compilation of the virtual tour is very simple, it’s just choosing the name, ordering the scenes to compile, choosing the resolution, choosing the platform and the environment, choosing the icon, checking the box «Virtual reality supported» ... after setting all the parameters of the rendering; we just press the «Build» button to compile.

Figure 33: Scripts folder

50 THE REALIZATION

Conclusion:

In this step we managed to transform the scenario into a concrete virtual scene by going through the modeling phase and arriving at the Unity3D integration, which allowed us to have an interactive project with the desired aspects.

Figure 34: Build settings panel

USER’S TEST

5

54 USER’S TEST

We asked ten Politecnico students to test MyAMG VR version at the Polimi Bovisa VPlabs so to evaluate our project then they have to fill a System Usability Scale form (SUS) that is a simple ; ten-item scale giving a global view of subjective assessments of Usability.

1. SUS-The System Usability Scale:

SUS stands for System Usability Scale. SUS was developed by Brooke (1996) as ”the quick and dirty” [1] assessment tool. It was used to quickly and cheaply assess a product or a service as a low cost usability test.

A SUS test is supposed to cover:

Effectiveness (the ability of users to complete tasks). Efficiency (how difficult it was to perform the task). Satisfaction (how the users felt when performing the task).

A SUS assessment is likert [8] scale, constructed of 10 statements that are valued on a 5 point scale, according to how much the user agrees or disagrees with the statement. The result can vary between 0 and 100, where a higher score indicates better usability. Every other question is a positive statement and every other question is a negative statement, so both the user and the person analyzing the result have to stay focused!

Figure 35: MyAMG VR test ready

55USER’S TEST

Figure 36: MyAMG SUS form

2. Analysing and calculating the results:

Every other question is a positive statement; they are the uneven numbered questions 1, 2, 3, 5, 7 and 9. The user will fill out a value between 1 and 5. From that value 1 point is deducted. If the users rate the statement as a 4, you subtract one (4-1) and arrive at the result of 3.

56 USER’S TEST

Figure 37: MyAMG SUS forms filled

Every other statement is a negative statement; they are the even numbered questions 2, 4, 6, 8 and 10. The user will enter a value between 1 and 5. This value is then deducted from the number 5. If the user gives the statement a 4, you will subtract 4 from 5 (5-4) and arrive at the result of 1.

Every question will get a value of between 0 and 4. They are then added together and multiplied by 2.5. The final result will end up somewhere between 0 and 100. [7]

Q13

3

3

4 4

4+

++

+

+

+

+

+=+

4333

3 3Q6

Q2

Q7

Q3

Q8

Q4

Q9

Q5

Q10

SUS overall score : 33 x 2,5 = 82,5/100Figure 38: MyAMG SUS result

57USER’S TEST

Conclusion:

SUS has proven to be a valuable evaluation tool, being robust and reliable. It correlates well with other Subjective Measures of usability so according to the results gathered, MyAMG project received an overall SUS score of 82.5 this corresponds roughly to a letter grade of B+.or a very good mark.

SUS has been made freely available for use in usability Assessment and has been used for a variety of research projects and industrial evaluations; The only prerequisite for its use is that any published report should acknowledge the source of the measure.

Acknowledgements

SUS was developed as part of the usability Engineering programme in integrated Office

systems development at Digital Equipment Co Ltd., reading, United Kingdom

CONCLUSION AND PERSPECTIVES

6

61CONCLUSION AND PERSPECTIVES

The virtual visit brings a new dimension in the Internet communication sector and touches many areas such as real estate, tourism, hotels, businesses, individuals ... Following several studies, it has been defined that most of the Internet users surveyed wish and prefer to make virtual visits than to move and make personal visits to achieve the same result.

The realization of the MyAMG project as well as the virtual visit in 3d helped me to deepen my knowledge, on the technical and graphic level. I had the pleasure of knowing new programming languages, and to take advantage of the multiplicity of software already known and to discover a new software.

In terms of personal contributions, compared to my profile and background as a Graphic Designer, this project allowed me, on the one hand, to enrich my knowledge in programming and programming language, and on the other hand to become accustomed to taking responsibility for large projects.

Finally, the project of graduation in the POLITECNICO DI MILANO laboratories and with the help of Mr Mario Covarrubias Rodriguez, allowed me to apply some of my theoretical and practical knowledge acquired during university studies. , as part of a master of science in communication design.

As perspectives of this work, we can improve the project with more of Mercedes AMG range of models with more informations and especially by relying on creating a more fun and immersive VR experience.

Finally we want our work to be satisfactory as a communication product.

REFERENCES

7

65REFERENCES

2. STATE OF THE ART

[ 1 ] Lire une image : Grille-outil élaborée et proposée par Jean-Laurent ARRIGHIhttps://lewebpedagogique.com/histoiredesartsduhamel/files/2012/03/Lire-une-image1.pdf[ 2 ] La dénotation et la connotation www.pulib.sk/web/kniznica/elpub/dokument/Drengubiak1/subor/2.pdf[ 3 ] Denotation And Connotation — Literal And Implied Meaning https://vanseodesign.com/web-design/denotation-connotation/[ 4 ] Analyse de l’ergonomie d’un site web alichabbouh.unblog.fr/2011/03/03/analyse-de-lergonomie-dun-site-web/[ 5 ] Peter Stockinger (ESCom - MSH), Sémiotique des sites web : Les sites de la presse écritehttps://semioweb.msh-paris.fr/escom/ressources_enligne/Enseignement/03_04/03_04_Itaim/cours/cours_site_presse.pdf[ 6 ] Responsive Web Design Introduction - W3Schoolshttps://www.w3schools.com/css/css_rwd_intro.asp[ 7 ] permitic.friportail.ch/sites/permitic/files/seq/mat/theorie_et_corrige.doc[ 8 ] https://www.wappalyzer.com/[ 9 ] http://carvrtour.com/[ 10 ] https://www.giantbomb.com/silent-hill-homecoming/3030-20636/[ 11 ] www.jeuxvideo.com/jeux/pc/00026275-silent-hill-homecoming.htm[ 12 ] https://www.gamespot.com/reviews/silent-hill-homecoming-review/1900-6199750/[ 13 ] TIS India, 3D Virtual Tour, 3D walkthrough https://www.youtube.com/watch?v=H57W18a1mLo[ 14 ] TECHNIQUES STORYBOARDS T r a d u c t i o n e t a d a p t a t i o n d e B e r t r a n d P e r r o t i n (WENDY TUMMINELLO), Groupe Eyrolles, 2007, pour la traduction française. ISBN(10)2-212-11942-9ISBN(13) 978-2-212-11942-8

66 REFERENCES

https://www.eyrolles.com/Chapitres/9782212119428/Chap3_Tumminello.pdf[ 14 ] technique: storyboard analysis http://www.art3idea.psu.edu/locus/storyboarding.pdf

3. DESIGN

[ 1 ] Démarche possible de Recherche Graphique - Animation pédagogique, CPC Auch-nordweb.ac-toulouse.fr/automne_modules_files/standard/public/p7620_8f297fbbf12dcb579af0fda1c43e546014_Demarche_possible_de_Recherche_Graphique.pdf[ 2 ] 3DS MAX 2014 TUTORIALSdocs.autodesk.com/3DSMAX/16/ENU/3ds-Max-Tutorials/[ 3 ] V-Ray 3.0 for 3ds Max Essential Training https://www.lynda.com/V-Ray-tutorials/V-Ray-3-0-3ds-Max-Essential-Training/161810-2.html[ 4 ] UV unwrapping a dome www.3dbuzz.com/forum/threads/180883-UV-unwrapping-a-dome[ 5 ] Exporting FBX Files for Games https://knowledge.autodesk.com/support/3ds-max/learn-explore/caas/CloudHelp/cloudhelp/2017/ENU/3DSMax/files/GUID-70DBCE92-4D55-4CD6-A2E9-23E48E571068-htm.html[ 6 ] [3DS Max] Texture, UVW Mapping... https://openclassrooms.com/forum/sujet/3ds-max-texture-uvw-mapping-19235

4. REALIZATION

[ 1 ] unity3d.com/fr[ 2 ] autodesk.com/products/3ds-max/overview[ 3 ] adobe.com/fr/products/photoshop[ 4 ] adobe.com/fr/products/illustrator[ 5 ] oculus.com/rift/#oui-csl-rift-games=robo-recall[ 6 ] Top 10 Reasons to Choose Unity 3D for App and Game Development pepwuper.com/top-10-reasons-to-choose-unity-3d-for-app-and-game-development/

67REFERENCES

[ 7 ] Why choose Unity? https://answers.unity.com/questions/373925/why-would-you-choose-unity.html[ 8 ] docs.unity3d.com/Manual/GlobalIllumination.html[ 9 ] docs.unity3d.com/Manual/Lighting.html[ 10 ] Joesph Hocking (2018). Unity in Action: Multiplatform Game Development in C#. Manning Publications, 2018 . ISBN : 1617294969, 9781617294969[ 11 ] Greg Lukosek(2016). Learning C# by Developing Games with Unity 5.x - Second Edition. Packt publishing. ISBN: 978-1785287596TUTORIALS:[ 12 ] Unity 5 Game Development - Gameplay [Video]https://www.packtpub.com/game-development/unity-5-game-development-%E2%80%93-gameplay-video[ 13 ] https://www.pluralsight.com/paths/unity-game-development-core-skills[ 14 ] https://www.pluralsight.com/courses/introduction-game-development-unity[ 15 ] https://www.pluralsight.com/courses/unity-fundamentals[ 16 ] https://www.pluralsight.com/courses/unity-lighting-fundamentals[ 17 ] https://www.pluralsight.com/courses/unity-ui-fundamentals[ 18 ] https://blogs.unity3d.com/2017/11/02/a-new-way-to-learn-unity-game-development-from-a-to-z/[ 19 ] https://www.pluralsight.com/courses/unity-2017-c-sharp-scripting-fundamentalsUNITY BLOG:[ 20 ] https://answers.unity.com/questions/56924/changing-a-materials-color-in-c.html[ 21 ] https://answers.unity.com/questions/1120426/show-and-hide-a-canvas-on-a-button-click.html[ 22 ] dhttp://www.donovankeith.com/2016/05/making-objects-float-up-down-in-unity/[ 23 ] https://stackoverflow.com/questions/37931740/change-icon-of-cursor-when-mouse-hover-at-button

68 REFERENCES

5. USER’S TEST

[ 1 ] Brooke, J. (1996). SUS: A «quick and dirty» usability scale. In P. W. Jordan, B. Thomas, B. A. Weerdmeester, & A. L. McClelland , Usability Evaluation in Industry. London: Taylor and Francis.[ 2 ] SUS - A quick and dirty usability scale -John Brookewww.usabilitynet.org/trump/documents/Suschapt.doc[ 3 ] SUS: A Retrospective www.upassoc.org/upa_publications/jus/2013february/JUS_Brooke_February_2013.pdf[ 4 ] Brooke, John. SUS – A quick and dirty usability scale. Fetched from http://hell.meiert.org/core/pdf/sus.pdf[ 5 ] System Usability Scale (SUS) https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html[ 6 ] The System Usability Scale: A walk through our newest user testing feature https://www.trymyui.com/blog/2014/10/03/the-system-usability-scale-a-walk-through-our-newest-user-testing-feature/[ 7 ] How To Use The System Usability Scale (SUS) To Evaluate The Usability Of Your Website https://usabilitygeek.com/how-to-use-the-system-usability-scale-sus-to-evaluate-the-usability-of-your-website/[ 8 ] Measuring Usability with the System Usability Scale (SUS)by Jeff Sauro | February 2, 2011https://measuringu.com/sus/[ 9 ] https://en.wikipedia.org/wiki/Likert_scale