Recreating a Unity game project in a 3D HTML5 WebGL environment. Research and comparison of 3D capable HTML5 WebGL game engines. Mikko Järvilä Bachelor’s thesis April 2021 Information and Communications Technology Degree Programme in Information and Communications Technology Description Author(s) Type of publication Date Järvilä, Mikko Bachelor’s thesis April 2021 Sivumäärä Language of publica- 110 tion: Number of pages PermissionEnglish for web 110 publication: x Title of publication Recreating a Unity game project in a 3D HTML5 WebGL environment. Research and comparison of 3D capable HTML5 WebGL game engines. Degree programme Information and communications technology Supervisor(s) Paavo Nelimarkka, Pasi Manninen Assigned by Zaibatsu Interactive Oy Abstract The objective stemmed from the assigner’s desire to find an alternative for Unity game en- gine -based projects in a 3D HTML5 environment. The goal was to find an engine candidate that provides the necessary functionalities, tools and performance required to recreate ex- isting Unity-based hyper-casual productions within the HTML5 environment in 3D. This was done by firstly selecting a larger group of candidates based on a set of criteria provided by the assigner, for example restrictions regarding the scripting language, availa- bility of the source code and the general LTS (long-term support) expectable from the cho- sen candidate, and then by comparing and weighing the aspects of each candidate, as well as comparing them with each other, and then selecting the most promising engine solution from among them. With the chosen engine solution, a demo project was then created. The goal of the demo project was to recreate an existing Unity-based hyper-casual game devel- oped by the assigner with the chosen engine. The point of this was to gauge the practical capabilities, as well as differences, of the chosen engine compared to Unity. As could be expected, some discrepancies between the advertised and researched capabil- ities of the chosen engine solution and its practical usage could be found in the process of recreating the chosen hyper-casual game. Certain development hampering key differences also arose during the re-creation portion, which impacted the performance and visual fi- delity of the remade game compared to the original hyper-casual Unity production. While capable in its own terms and environment, certain aspects of the chosen engine left open to discussion and consideration whether it truly should be used in the fast-paced de- velopment cycles of hyper-casual games. Keywords/tags (subjects) Babylon.js, Game Engine, Comparison Hyper-Casual, JavaScript, TypeScipt, Unity, Multiplatform. Miscellaneous (Confidential information) Kuvailulehti Tekijä(t) Julkaisun laji Päivämäärä Järvilä, Mikko Opinnäytetyö, AMK Huhtikuu 2021 Sivumäärä Julkaisun kieli 110 Englanti Verkkojulkaisulupa myön- netty: x Työn nimi Recreating a Unity game project in a 3D HTML5 WebGL environment. Research and comparison of 3D capable HTML5 WebGL game engines. Tutkinto-ohjelma Tieto- ja viestintätekniikka Työn ohjaaja(t) Paavo Nelimarkka, Pasi Manninen Toimeksiantaja(t) Zaibatsu Interactive Oy Tiivistelmä Työn lähtökohdat perustuivat toimeksiantajan toiveeseen ja tarpeeseen löytää vaihtoehto Unity -pelimoottorille 3D HTML5 -kohdeympäristöön toteutettaville projekteille. Päämää- ränä oli löytää pelimoottoriehdokas kyseiseen ympäristöön toiminnallisuuksilla, työkaluilla sekä suorituskyvyllä jotka vaaditaan uudelleentuottamaan olemassa olevia hyperkasuaali- tuotantoja kyseissä HTML5 -ympäristössä. Työn ensiaskel oli kerätä valikoima toimeksiantajan kandidaatille antaman kriteeristön täyttäviä moottoriehdoikkaita näihin kriteereihin lukeutuessa mm. kandidaatin käyttämä ohjelmointikieli, tämän lähdekoodin saatavuus ja uudelleenkäytettävyys, sekä kandidaa- tilta odotettava pitkäaikaistuki. Tämän jälkeen kandidaatteja kriteeristön valossa tutkien, punniten sekä toisiinsa vertaillen, näistä valittiin yksi kriteerit parhaiten täyttävä pelimoot- tori. Tämä jälkeen kyseistä moottoria käyttäen luotiin tämän käytännön kyvykkyyksiä ha- vainnollistava peliprojekti, jonka tarkoituksena oli uudelleen luoda toimeksiantajan ole- massa oleva, Unity-pohjainen hyperkasuaalipeliprojekti. Uudelleenluomisprojektin tarkoi- tuksena oli myös peilata valikoituneen kandidaatin eroja Unity-pelimoottoriin nähden. Kuten odottaa saattoi, esitutkimuksesta ja -testauksesta huolimatta eriäväisyyksiä valikoi- tuneen pelimoottorin käytännön ja tämän mainostettujen ominaisuuksien välillä löytyi pro- jektin tekovaiheiden aikana, kuten myös erinäisiä uudelleenkehittämistyötä haittaavia avaineroja valitun moottorin sekä Unityn välillä. Vaikkakin kykeneväinen omassa ympäristössään ja omilla ehdoillaan, tietyt ominaisuudet valitussa moottorissa jättivät avoimeksi kysymyksen siitä, tulisiko kyseistä moottoria kui- tenkaan hyödyntää lähtökohtaisesti nopeatempoisessa hyperkasuaalipelikehityksessä. Avainsanat (asiasanat) Babylon.js, Pelimoottori, Vertailu, Hyper-Casual, JavaScript, TypeScipt, Unity, Monialustainen. Muut tiedot (salassa pidettävät liitteet) 4 Contents 1 Introduction ............................................................................................................ 8 2 Engine Candidates and Criteria for Selection ....................................................... 10 2.1 Babylon.js .................................................................................................. 12 2.2 Three.js ...................................................................................................... 16 2.3 PlayCanvas ................................................................................................. 18 2.4 Turbulenz ................................................................................................... 19 2.5 Candidate Selection ................................................................................... 22 3 From Unity to Babylon.js ...................................................................................... 23 3.1 Highway Chase .......................................................................................... 23 3.2 A brief summary of relevant Unity Engine components ........................... 29 3.2.1 GameObjects .................................................................................. 29 3.2.2 Components ................................................................................... 32 3.2.3 Meshes, Materials, Textures and Shaders ..................................... 32 3.2.4 Prefabs ............................................................................................ 34 3.2.5 Scenes ............................................................................................. 34 3.3 Babylon.js .................................................................................................. 35 3.3.1 Nodes .............................................................................................. 35 3.3.2 Node Properties .............................................................................. 36 3.3.3 Scenes ............................................................................................. 37 3.3.4 Editor .............................................................................................. 38 3.3.5 Playground ...................................................................................... 39 4 Recreating Highway Chase with Babylon.js ......................................................... 40 4.1 Tools Used in the Project........................................................................... 40 4.2 Starting the Project ................................................................................... 42 4.3 Loading and Using Assets – Asset Manager and Meshes ......................... 46 4.4 Loading and Using Assets - Materials and Textures .................................. 50 4.5 Loading and Using Assets – Setting Up the Game World ......................... 52 4.6 Physics and Movement ............................................................................. 58 4.7 Collisions .................................................................................................... 66 5 4.8 The Police .................................................................................................. 68 4.9 GUI ............................................................................................................. 71 4.10 Particle Effects ........................................................................................... 79 4.11 Winning and Losing ................................................................................... 87 4.12 Shadows and Lighting ................................................................................ 92 4.13 Optimizations ............................................................................................ 95 4.13.1 Rendering Pipeline .......................................................................... 98 5 Results and Comparison ..................................................................................... 100 5.1 Development Process .............................................................................. 100 5.2 Handling of Assets and Meshes............................................................... 101 5.3 Handling of Gameplay Elements ............................................................. 103 5.4 Visual Elements ....................................................................................... 103 5.5 Project