The Virtual Car Showroom)

MASTER DEGREE IN COMMUNICATION DESIGN

MyAMG Showroom (The Virtual Car Showroom)

Thesis of SAMI LAAJILI 850443

Tutor MARIO COVARRUBIAS RODRIGUEZ

Academic year 2017/2018 Acknowledgements

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 spotor 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.

2 ACKNOWLEDGEMENTS Abstract

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 3 Table of contents

Acknowledgements P. 2 Abstract P. 3 List of figures P. 6 List of tables P. 6

CHAPTER 1 : INTRODUCTION P. 8 General Introduction P.10 1. General context of the project P.10 2. Presentation of the Project P.10 3. The objectives P.11 4. The targets P.11 5. Structure of the report P.11 Conclusion P.12

CHAPTER 2 : STATE OF THE ART P.14 I. Study of the website « Carvrtour.com » P.16 1. The website P.16 1.1. Analyzing the logo P.16 1.2. Analyzing the website P.18 1.3. Technical study Of the web Site P.21 1.3.1 Features P.21 1.3.2 Technologies Used P.21 2. Study of the virtual visit of the site CarVRtour P.21 2.1 Technical analysis P.21 2.2 Navigation and buttons P.22 2.3 Pros and cons P.24 II. Video game Analysis Silent Hill: Home Coming P.24 1. Game details P.24 2. Overview P.25 3. Synopsis P.25 4. Graphics P.25 5. Gameplay P.26 6. Soundtrack P.26 7. General opinion P.27 III. 3D virtual tour of «Tisindia» company P.27 1. Analysing the sequences and the shots P.27 2. Pros and cons P.29 IV. Other existing showrooms P.29 Pros and cons P.30 Conclusion P.30

4 TABLE OF CONTENTS CHAPTER 3 : THE DESIGN P.32 1. Graphical research P.34 1.1 Search for the accessories to be modelled P.34 1.2 mock-up scenario of the Showroom P.34 2. Modelling P.35 2.1 Modelling the Showroom P.35 2.2 Modeling of The Environment P.36 3. Texturing P. 37 4. Exporting the scene into FBX format P. 37 Conclusion P.38

CHAPTER 4 : THE REALIZATION P.40 I. Software and hardware environment P.42 1. Software Used P.42 2. Hardware Used P.43 II. Realization of the Virtual tour P.43 1. Why did we choose Unity3D to develop the P.43 project 2. Integrating 3d Objects P.44 3. Texturing P.44 4. Light-Mapping (lighting) P. 45 5. Setting up the camera P.47 6. Scripting in Unity P.49 7. Final render P.49 Conclusion P.50

CHAPTER 5 : USER’S TEST P.52 1. SUS-The System Usability Scale P.54 2. Analysing and calculating the results P.55 Conclusion P.57

CHAPTER 6 : CONCLUSION AND PERSPECTIVES P.59

CHAPTER 7 : REFERENCES P.63

TABLE OF CONTENTS 5 List of figures

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

Table 1: Study of the «carVRtour» logo P.16 Table 2: The study of the w ebsite Www.CarVRtour. com P.18 Table 3: Analysing the video shots P.18

6 LIST OF FIGURES

1 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

10 INTRODUCTION 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 project Chapter 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.

INTRODUCTION 11 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.

12 INTRODUCTION

2 STATE OF THE 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

16 STATE OF HE ART In this table, we present the denotative and connotative study of the logo [3] [7]. :

Denotative study Connotative study

- 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 Choice of colors 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 A modern and strict «CarVRtour» With a typography that very light gradient indicates that the from light blue to company is high level navy blue. and rigorous.

Table 1 : Study of the «carVRtour» logo

STATE OF THE ART 17 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.

Figure 2: Home page of the website «carVRtour»

Figure 3: car VR tour examples

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.

18 STATE OF HE ART In this table, we present the denotative and connotative study of the website [5] :

Denotative study Connotative study

- 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 Choice of colors typography indicates the mystery, elegance and Simplicity.

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

The font used is this font represent Typography (Montserrat) responsibility.

the shapes found The shapes used are in this page are the rectangles: symbol Graphic forms rectangular And of stability, something Linear. that rests well (the agency).

STATE OF THE ART 19 These pages are - It is a «one page divided horizon- site» where you can tally In three Main find all the necessa- parts, the Part In ry information in a High is devoted to single page. Logo and the links of other Pages With - The static composi- a short GIF tutorial. tion «parallax» used in this site gives a In the middle is good organization the content of the and helps us unders- Page structure pages, contains the tand the navigation necessary informa- scheme. tion Of the Platform « CarVRtour » As Pri- - The position of the cing, offers, utilities, images allows the informatios.... user to properly study the services pro- The bottom part is vided by the site, this dedicated to the technique can inter- Examples and user vene on the desire of reviews the latter.

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

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.

Strengths + 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

Weaknesses pages.

20 STATE OF HE 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.

Figure 4: Technologies used to build the website

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

STATE OF THE ART 21 Figure 5: Example of Virtual Tour (Outside)

Figure 6: Example of Virtual Tour (Inside)

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...

22 STATE OF HE ART Figure 7: Pop-up Video

Figure 8: Clues of navigation

Figure 9: Indices of Icons

STATE OF THE ART 23 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 PC/PS3/Xbox 360 Publisher Konami Developer Double Helix Games Type SurvivalHorror Release DATE September 30, 2008 in the United States Classification Not recommended for 18-year-olds

Figure 10: The poster of the game

24 STATE OF HE 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]

Figure 11: The main character in action 4. Graphics :

The Character Design of the bumps is successful, the modelling

STATE OF THE ART 25 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

Figure 12: Details of an object in the game 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.

26 STATE OF HE 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.

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

- 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.

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».

STATE OF THE ART 27 Shots Description Shot Camera size 1 - Outline highlights medium Camera: Mobile the piece Reserved long (traveling front): To the management shot The camera is and the Conference headed for the room office door.

- Light: Natural

2 -Preparation of the medium Camera: Mobile visit To the room of long (panning to Conference. shot the right and then travelling - Light: Natural forward): The camera rotates to the right and then heads to the Conference room. 3 - Plan Reserved To medium Camera: Mobile the description long (Oblique of the conference shot movement and room then Velling Front): The - Light: Natural camera enters the conference room and made the Tour of the Office Before de Out. 4 - Plan Reserved To Long Camera: Mobile the description shot (front travelling): of the conference The camera room. shows the development block - Light: Artificial / room. Soft

5 - Visit to the Deve- medium Camera: Mobile lopment room area. long (a fast forward shot travelling ): the - Light: Artificial / camera located Soft at the end of the room of development blocks, makes a complete turn of 180° in order to explore each block.. 6 - Crossing between medium Camera: Mobile the Blocks. long (a fast forward shot travelling ): The - Light: Artificial / camera passes Soft between the blocks and shows the organization of the offices.

Table 3 : Analysing the video shots

28 STATE OF HE 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

STATE OF THE ART 29 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.

30 STATE OF HE ART

3 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.

Figure 14: Prototype of a car carrier

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

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

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

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.

THE DESIGN 35 Figure 17: Modelling the interior of the showroom

Figure 18: Modelling the exterior facade of the showroom 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 19: Texture 360 ° of the sky

36 THE DESIGN Figure 20: A half-sphere that represents the sky 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].

Figure 21: Table of V-Ray materials 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).

THE DESIGN 37 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.

38 THE DESIGN

4 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-bit Software 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-bit It’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 2018 It’s a vector specialist software for the graphic creation of illustrations [4].

42 THE 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

THE REALIZATION 43 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.

Figure 24: The scene imported in Unity3D

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.

44 THE REALIZATION Figure 25: Scene after putting the textures

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.

Figure 26: Point light settings

THE REALIZATION 45 • 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.

Figure 27: Directional light settings

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

Figure 28: Spot light settings

46 THE REALIZATION Figure 29: Wireframed lights

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.

Figure 30: « Generate Colliders » Checked

THE REALIZATION 47 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. • ...

Figure 31: Settings of the « Character Controller »

Figure 32: Setting up the camera

48 THE 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.

Figure 33: Scripts folder 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.

THE REALIZATION 49 Figure 34: Build settings panel 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.

50 THE REALIZATION

5 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

54 USER’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.

USER’S TEST 55 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]

Figure 37: MyAMG SUS forms filled

3 + 3 + 4 + 3 + 4 Q1 Q2 Q3 Q4 Q5 = 33 + 3 + 4 + 3 + 4 + 3 Q6 Q7 Q8 Q9 Q10 SUS overall score : 33 x 2,5 = 82,5/100

Figure 38: MyAMG SUS result

56 USER’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

USER’S TEST 57

6 CONCLUSION 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.

CONCLUSION AND PERSPECTIVES 61

7 REFERENCES

2. STATE OF THE ART

[ 1 ] Lire une image : Grille-outil élaborée et proposée par Jean-Laurent ARRIGHI https://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 écrite https://semioweb.msh-paris.fr/escom/ressources_enligne/ Enseignement/03_04/03_04_Itaim/cours/cours_site_presse.pdf [ 6 ] Responsive Web Design Introduction - W3Schools https://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 [ 1 4 ] T E C H N I Q U E S STO R Y BOA R D S 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

REFERENCES 65 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-nord web.ac-toulouse.fr/automne_modules_files/standard/public/ p7620_8f297fbbf12dcb579af0fda1c43e546014_Demarche_ possible_de_Recherche_Graphique.pdf [ 2 ] 3DS MAX 2014 TUTORIALS docs.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/

66 REFERENCES [ 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- 1785287596 TUTORIALS: [ 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-fundamentals UNITY 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

REFERENCES 67 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 Brooke www.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, 2011 https://measuringu.com/sus/ [ 9 ] https://en.wikipedia.org/wiki/Likert_scale

68 REFERENCES