Recreating a Unity Game Project in a 3D HTML5 Webgl Environment. Research and Comparison of 3D Capable HTML5 Webgl Game Engines

Total Page:16

File Type:pdf, Size:1020Kb

Recreating a Unity Game Project in a 3D HTML5 Webgl Environment. Research and Comparison of 3D Capable HTML5 Webgl Game Engines 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
Recommended publications
  • Travail De Bachelor 2018 Outil De Sensibilisation Ludique
    Travail de Bachelor 2018 Outil de sensibilisation ludique Serious game – AcquOie Game Etudiant-e : Taylan Caloz-Üregen Professeur : David Wannier HES-SO Valais-Wallis • rue de la Plaine 2 • 3960 Sierre +41 27 606 89 11 • [email protected] • www.hevs.ch Source de l’iMage d’illustration en page de tire : Donnée personnelle Résumé Ce docuMent traite des serious games, ou jeux sérieux en français. Nous commencerons par définir ce type de jeux qui Mélange pour la plupart l’aspect ludique des jeux vidéo et un côté pédagogique. Nous nous intéresserons aux réels objectifs d’un serious game afin de savoir si le développeMent et la conception d’une telle application sont pertinents. Ensuite, nous nous attarderons sur l’analyse des différents besoins nécessaires à l’élaboration de ce type de jeux. Nous définirons les besoins de notre client, ressortis lors de notre entretien, que nous veillerons à satisfaire avec le développeMent de notre application. Nous établirons un état de l’art afin de faire ressortir les éléMents intéressants qui ont déjà été conçus dans le Milieu des jeux sérieux : le développeMent durable et l’eau en particulier. Nous nous pencherons enfin sur les différentes plateforMes et technologies sur lesquelles nous pouvons concevoir ce type de jeu. Une fois la plateforMe choisie, nous analyserons les différentes technologies perMettant de concevoir au Mieux un serious game. Nous étudierons différentes librairies JavaScript, ainsi que des Moteurs de jeu transpilé (développé selon un langage, puis traduit et coMpilé en JavaScript). Puis nous passerons à la partie conception de notre jeu sérieux. Nous dresserons une liste des Métiers du jeu vidéo, et nous développerons dans le détail les différentes étapes de sa conception : scénario, graphisMe, architecture de notre projet, les Modes de jeux et les différentes Manières de sauvegarder les données du jeu.
    [Show full text]
  • The Web. Webgl, Webvr and Gltf GDC, February 2017
    Reaching the Largest Gaming Platform of All: The Web. WebGL, WebVR and glTF GDC, February 2017 Neil Trevett Vice President Developer Ecosystem, NVIDIA | President, Khronos | glTF Chair [email protected] | @neilt3d © Copyright Khronos Group 2017 - Page 1 Khronos News Here at GDC 2017 • WebGL™ 2.0 Specification Finalized and Shipping - https://www.khronos.org/blog/webgl-2.0-arrives • Developer preview on glTF™ 2.0 - https://www.khronos.org/blog/call-for-feedback-on-gltf-2.0 • Announcing OpenXR™ for Portable Virtual Reality - https://www.khronos.org/blog/the-openxr-working-group-is-here • Call for Participation in the 3D Portability Exploratory Group - A native API for rendering code that can run efficiently over Vulkan, DX12 and Metal khronos.org/3dportability • Adoption Grows for Vulkan®; New Features Released - Details here © Copyright Khronos Group 2017 - Page 2 OpenXR – Portable Virtual Reality © Copyright Khronos Group 2017 - Page 3 OpenXR Details OpenXR Working Group Members Design work has started in December Estimate 12-18 months to release WebVR would use WebGL and OpenXR © Copyright Khronos Group 2017 - Page 4 3D Portability API – Call For Participation ‘WebGL Next’ - Lifts ‘Portability API’ to A Portability Solution JavaScript and WebAssembly needs to address APIs and - Provides foundational graphics shading languages and GPU compute for the Web ‘Portability Solution’ Portability API Spec + Shading Language open source tools API MIR MSL Overlap ‘Portability API’ DX IL Specification Analysis HLSL GLSL Open source compilers/translators for shading and intermediate languages © Copyright Khronos Group 2017 - Page 5 Speakers and Topics for This Session Google WebGL 2.0 Zhenyao Mo, Kai Ninomiya, Ken Russell Three.js Three.js Ricardo Cabello (Mr.doob) Google WebVR Brandon Jones NVIDIA - Neil Trevett glTF Microsoft - Saurabh Bhatia All Q&A © Copyright Khronos Group 2017 - Page 6 WebGL 2.0 Zhenyao Mo, Kai Ninomiya, Ken Russell Google, Inc.
    [Show full text]
  • Webgl™ Optimizations for Mobile
    WebGL™ Optimizations for Mobile Lorenzo Dal Col Senior Software Engineer, ARM 1 Agenda 1. Introduction to WebGL™ on mobile . Rendering Pipeline . Locate the bottleneck 2. Performance analysis and debugging tools for WebGL . Generic optimization tips 3. PlayCanvas experience . WebGL Inspector 4. Use case: PlayCanvas Swooop . ARM® DS-5 Streamline . ARM Mali™ Graphics Debugger 5. Q & A 2 Bring the Power of OpenGL® ES to Mobile Browsers What is WebGL™? Why WebGL? . A cross-platform, royalty free web . It brings plug-in free 3D to the web, standard implemented right into the browser. Low-level 3D graphics API . Major browser vendors are members of . Based on OpenGL® ES 2.0 the WebGL Working Group: . A shader based API using GLSL . Apple (Safari® browser) . Mozilla (Firefox® browser) (OpenGL Shading Language) . Google (Chrome™ browser) . Opera (Opera™ browser) . Some concessions made to JavaScript™ (memory management) 3 Introduction to WebGL™ . How does it fit in a web browser? . You use JavaScript™ to control it. Your JavaScript is embedded in HTML5 and uses its Canvas element to draw on. What do you need to start creating graphics? . Obtain WebGLrenderingContext object for a given HTMLCanvasElement. It creates a drawing buffer into which the API calls are rendered. For example: var canvas = document.getElementById('canvas1'); var gl = canvas.getContext('webgl'); canvas.width = newWidth; canvas.height = newHeight; gl.viewport(0, 0, canvas.width, canvas.height); 4 WebGL™ Stack What is happening when a WebGL page is loaded . User enters URL . HTTP stack requests the HTML page Browser . Additional requests will be necessary to get Space User JavaScript™ code and other resources WebKit JavaScript Engine .
    [Show full text]
  • SRJC CS42 5363 Sp 2021 Syllabus Final V2
    CS42: Introduction to Game Coding Section 5363, Spring 2021 Course Syllabus Instructor: Ethan Wilde (he/him/his), [email protected] Course Description This course introduces students to the design, development, and coding of simple graphical computer-based games. During the course, students will be introduced to various game engines and development environments. Students will gain experience working individually and in a team environment. Emphasis is placed on engaging players through compelling application of game mechanics, dynamics, and aesthetics, as well as on playtesting and iterative development to ensure user-centered design goals are met. Recommended Preparation: Course completion of CS 110A and/or programming experience Prerequisites: None Whether you want to become a member of a professional AAA game development team, or just want to try your hand as an independent game developer, mastery of the game development process, including coding, is essential to those goals. We will work with the ECMA-compliant JavaScript language and real-world tools to develop proficiency in the creation of browser- based, mobile and console games. This course will follow the Transformational Process in development of final game projects. Student Learning Outcomes Students will be able to: 1. Understand and apply systems-level thinking and game development methodology best practices to the design and development of simple graphical computer-based games. 2. Develop team-based game creation skills that cover game logic sequencing; storyboarding; artistic and technical coordination; and understanding of technical requirements and limitations. Upon completion of the course, students will be able to: 1. Explain factors that motivate game players and apply those to the design of games that satisfy the needs of players.
    [Show full text]
  • Faculteit Bedrijf En Organisatie Unity 5 Versus
    Faculteit Bedrijf en Organisatie Unity 5 versus Unreal Engine 4: Artificiële intelligentie van 3D vijanden voor een HTML5 project Matthias Caryn Scriptie voorgedragen tot het bekomen van de graad van Bachelor in de toegepaste informatica Promotor: Joeri Van Herreweghe Co-promotor: Steven Delrue Academiejaar: 2015-2016 Derde examenperiode Faculteit Bedrijf en Organisatie Unity 5 versus Unreal Engine 4: Artificiële intelligentie van 3D vijanden voor een HTML5 project Matthias Caryn Scriptie voorgedragen tot het bekomen van de graad van Bachelor in de toegepaste informatica Promotor: Joeri Van Herreweghe Co-promotor: Steven Delrue Academiejaar: 2015-2016 Derde examenperiode Samenvatting Rusty Bolt is een Belgische indie studio. Deze studio wilt een nieuw project starten voor een 3D spel in een HyperText Markup Language 5 (HTML5) browser die intensief gebruik zal maken van artificiële intelligentie (AI) en Web Graphics Library (WebGL). Na onderzoek via een requirements-analyse van verschillende mogelijkheden van game engines komen we terecht bij twee opties namelijk Unity 5, die Rusty Bolt al reeds gebruikt, of de Unreal Engine 4, wat voor hen onbekend terrein is. Qua features zijn ze enorm verschillend, maar ze voldoen elk niet aan één voorwaarde die Rusty Bolt verwacht van een game engine. Zo biedt Unity Technologies wel een mogelijkheid om software te bouwen in de cloud. De broncode van Unity wordt niet openbaar gesteld, tenzij men er extra voor betaalt. Deze game engine is dus niet volledig open source in tegenstelling tot Unreal Engine 4. We vergelijken dan verder ook deze twee engines, namelijk Unity 5 en Unreal Engine 4. We tonen aan dat deze engines visueel verschillen van features, maar ook een andere implementatie van de AI hanteren.
    [Show full text]
  • Progressive Rendering of Massive Point Clouds in Webgl 2.0 Compute
    Progressive Rendering of Massive Point Clouds in WebGL 2.0 Compute BACHELORARBEIT zur Erlangung des akademischen Grades Bachelor of Science im Rahmen des Studiums Software & Information Engineering eingereicht von Wolfgang Rumpler Matrikelnummer 01526299 an der Fakultät für Informatik der Technischen Universität Wien Betreuung: Associate Prof. Dipl.-Ing. Dipl.-Ing. Dr.techn. Michael Wimmer Mitwirkung: Dipl.-Ing. Markus Schütz Wien, 10. Oktober 2019 Wolfgang Rumpler Michael Wimmer Technische Universität Wien A-1040 Wien Karlsplatz 13 Tel. +43-1-58801-0 www.tuwien.ac.at Progressive Rendering of Massive Point Clouds in WebGL 2.0 Compute BACHELOR’S THESIS submitted in partial fulfillment of the requirements for the degree of Bachelor of Science in Software & Information Engineering by Wolfgang Rumpler Registration Number 01526299 to the Faculty of Informatics at the TU Wien Advisor: Associate Prof. Dipl.-Ing. Dipl.-Ing. Dr.techn. Michael Wimmer Assistance: Dipl.-Ing. Markus Schütz Vienna, 10th October, 2019 Wolfgang Rumpler Michael Wimmer Technische Universität Wien A-1040 Wien Karlsplatz 13 Tel. +43-1-58801-0 www.tuwien.ac.at Erklärung zur Verfassung der Arbeit Wolfgang Rumpler Hiermit erkläre ich, dass ich diese Arbeit selbständig verfasst habe, dass ich die verwen- deten Quellen und Hilfsmittel vollständig angegeben habe und dass ich die Stellen der Arbeit – einschließlich Tabellen, Karten und Abbildungen –, die anderen Werken oder dem Internet im Wortlaut oder dem Sinn nach entnommen sind, auf jeden Fall unter Angabe der Quelle als Entlehnung kenntlich gemacht habe. Wien, 10. Oktober 2019 Wolfgang Rumpler v Danksagung An dieser Stelle möchte ich allen Personen danken die mich bei dem Abschluss dieses Studienabschnitts unterstützt haben.
    [Show full text]
  • An Authoring Tool for Educators to Make Virtual Labs
    An authoring tool for educators to make virtual labs Dimitrios Ververidis1, Giannis Chantas1, Panagiotis Migkotzidis1, Eleftherios Anastasovitis1, Anastasios Papazoglou-Chalikias1, Efstathios Nikolaidis1, Spiros Nikolopoulos1, Ioannis Kompatsiaris1, Georgios Mavromanolakis2, Line Ebdrup Thomsen3, Antonios Liapis4, Georgios Yannakakis4, Marc Müller5, and Fabian Hadiji5 1 Centre of Research and Technology, Hellas, Greece ? 2 Ellinogermaniki Agogi 3 Aalborg University 4 University of Malta 5 goedle.io Gmbh Abstract. This paper focuses on the design and implementation of a tool that allows educators to author 3D virtual labs. The methodology followed is based on web 3D frameworks such as three.js and WordPress that allowed us to develop simplified interfaces for modifying Unity3D templates. Two types of templates namely one for Chemistry and one for Wind Energy labs were developed that allow to test the generalization, user-friendliness and usefulness of such an approach. Results have shown that educators are much interested on the general concept, but several improvements should be made towards the user-friendliness and the in- tuitiveness of the interfaces in order to allow the inexperienced educators in 3D gaming to make such an attempt. 1 Introduction Educational organizations often use electronic games in order to facilitate learn- ing. These games simulate real-life situations, and allow the learner to be trained in a controlled environment. 3D games have been significantly improved in the last years with the advent of Virtual Reality (VR) technologies. Their matu- rity has raised the interest of several organizations in order to be exploited in education and training [9],[12]. However, several barriers such as the high cost and the luck of proper design prevent their expansion.
    [Show full text]
  • Adaptivity of 3D Web Content in Web-Based Virtual Museums a Quality of Service and Quality of Experience Perspective
    ADAPTIVITY OF 3D WEB CONTENT IN WEB-BASED VIRTUAL MUSEUMS A QUALITY OF SERVICE AND QUALITY OF EXPERIENCE PERSPECTIVE Hussein Bakri A Thesis Submitted for the Degree of PhD at the University of St Andrews 2019 Full metadata for this item is available in St Andrews Research Repository at: http://research-repository.st-andrews.ac.uk/ Please use this identifier to cite or link to this item: http://hdl.handle.net/10023/18453 This item is protected by original copyright Adaptivity of 3D Web Content in Web-Based Virtual Museums A Quality of Service and Quality of Experience Perspective Hussein Bakri This thesis is submitted in partial fulfilment for the degree of Doctor of Philosophy (PhD) at the University of St Andrews December 2018 Abstract The 3D Web emerged as an agglomeration of technologies that brought the third dimension to the World Wide Web. Its forms spanned from being systems with limited 3D capabilities to complete and complex Web-Based Virtual Worlds. The advent of the 3D Web provided great opportunities to museums by giving them an innovative medium to disseminate collections’ information and associated interpretations in the form of digital artefacts, and virtual reconstructions thus leading to a new revolutionary way in cultural heritage curation, preservation and dissemination thereby reaching a wider audience. This audience consumes 3D Web material on a myriad of devices (mobile devices, tablets and personal computers) and network regimes (WiFi, 4G, 3G, etc.). Choreographing and presenting 3D Web components across all these heterogeneous platforms and network regimes present a significant challenge yet to overcome. The challenge is to achieve a good user Quality of Experience (QoE) across all these platforms.
    [Show full text]
  • Inclusive XR Roadmap Possible Next Steps
    Inclusive XR Roadmap Possible next steps ● Research ○ Where? Industry? Acadameia? EU project? RQTF? ● Prototyping & experimentation ○ Collaboration / open source opportunities ● (Pre-) standardization PRIORITIES? Immersive Web Architecture Hooks Immersive Web Application (Best Practices) Engine / Framework (Best Practices, prototypes, patches) Web browser (APIs, Best Practices) XR Platform Operating System Towards standardizing solutions in W3C ● W3C standardizes technologies through its Recommendation process ● Working Groups are responsible for standardization - for W3C Member organizations and Invited Experts ● Before starting standardization efforts, the preference is to incubate the ideas ● W3C has an incubation program open for free to any one - Community Groups Existing Standardization Landscape (W3C) ● Immersive Web Working Group ○ WebXR: Core, Gamepad, Augmented Reality modules ● ARIA Working Group ○ ARIA ● Accessible Platforms Architecture Working Group ○ RQTF ○ XR Accessibility User Requirements (Note) ○ Personalization Task Force ● Timed Text Working Group ○ TTML, IMSC ○ WebVTT ● Audio Working Group ○ Web Audio API ● Accessibility Guidelines Working Group ○ WCAG 2.x, Silver Existing Incubation Landscape (W3C) ● Immersive Web Community Group ○ Potential host for any new proposals related to Immersive Web ○ Ongoing discussion on Define and query properties of "things" #54 ● Immersive Captions Community Group ○ best practices for captions in Immersive Media ● Web Platform Incubator Community Group (WICG) ○ Accessibility Object
    [Show full text]
  • Webgl and Why You Should Target It
    WebGL and Why You Should Target It Khronos Developer Day, GDC 2018 THREE.js Demos ● The most commonly used WebGL library ● http://demos.littleworkshop.fr/infinitown ● http://www.hellorun.helloenjoy.com/ ● http://www.playmapscube.com/ ● https://stinkmoji.cool/ ● http://devx.ddd.it/en/experiments/ WebGL Fundamentals ● Built-in 3D graphics API in browsers ● Based on industry-standard OpenGL ES APIs ● Implement on one device, runs everywhere ● No installation step – completely frictionless ○ Get lots of eyeballs on your games ● Many options for deployment ○ Web pages ○ PWAs ○ Electron/Cordova ○ Native apps using WebView WebGL Fundamentals (continued) ● High API quality ○ Conformance suite: 2.0.0 contains 340,000 test cases ○ Workarounds for numerous driver bugs ● WebGL 1.0 implements OpenGL ES 2.0 APIs ○ Supported on Firefox, Chrome, Edge, Safari ○ Support rate: 98% [*] ● WebGL 2.0 implements OpenGL ES 3.0 APIs ○ Currently supported on Firefox, Chrome ○ Edge and Safari intend to implement it ○ Support rate: 41% [*] and increasing [*] Data from https://webglstats.com/ WebGL 2.0 Features 3D textures Compressed textures Texture storage Seamless cubemaps NPOT textures Float textures Integer textures sRGB textures Instanced rendering Transform feedback Multiple render targets Query objects Sync objects Sampler objects Uniform blocks Vertex array objects Integer vertex attributes GLSL ES 3.0 shaders WebGL + glTF ● glTF: a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications ○ https://www.khronos.org/gltf/ ● WebGL + glTF: streamlines authoring workflows and enables interoperable use of content across the industry ● Two of the major WebGL libs, Three.js and Babylon.js (among others) support glTF 2.0 WebGL + WebAssembly + Emscripten 1.
    [Show full text]
  • Rethinking the Usage and Experience of Clustering Markers in Web Mapping
    Rethinking the Usage and Experience of Clustering Markers in Web Mapping Lo¨ıcF ¨urhoff1 1University of Applied Sciences Western Switzerland (HES-SO), School of Management and Engineering Vaud (HEIG-VD), Media Engineering Institute (MEI), Yverdon-les-Bains, Switzerland Corresponding author: Lo¨ıc Furhoff¨ 1 Email address: [email protected] ABSTRACT Although the notion of ‘too many markers’ have been mentioned in several research, in practice, displaying hundreds of Points of Interests (POI) on a web map in two dimensions with an acceptable usability remains a real challenge. Web practitioners often make an excessive use of clustering aggregation to overcome performance bottlenecks without successfully resolving issues of perceived performance. This paper tries to bring a broad awareness by identifying sample issues which describe a general reality of clustering, and provide a pragmatic survey of potential technologies optimisations. At the end, we discuss the usage of technologies and the lack of documented client-server workflows, along with the need to enlarge our vision of the various clutter reduction methods. INTRODUCTION Assuredly, Big Data is the key word for the 21st century. Few people realise that a substantial part of these massive quantities of data are categorised as geospatial (Lee & Kang, 2015). Nowadays, satellite- based radionavigation systems (GPS, GLONASS, Galileo, etc.) are omnipresent on all types of new digital devices. Trends like GPS Drawing, location-based game (e.g. Pokemon´ Go and Harry Potter Wizard Unite), Recreational Drone, or Snapchat ‘GeoFilter’ Feature have appeared in the last five years – highlighting each time a new way to consume location. Moreover, scientists and companies have built outstanding web frameworks and tools like KeplerGL to exploit geospatial data.
    [Show full text]
  • 2017-18, We Extended Our Ambit of Inclusion to Encompass Various Disabilities
    St. Xavier's College (Autonomous) Magazine 2017-2018 5, Mahapalika Marg, Mumbai - 400 001, Maharashtra Website : www.xaviers.edu Email : [email protected] Dr Hoshang Master discussing his stamp collection Dr. Aditi Sawant with cotton workers Dr. Agnelo Menezes pledging his entire body Fr. Stan on Refugees Harnidh Kaur at Ithaka Events Hindi Play at Antas Kanchan Daniel performing at Saumvedna 2018 Kavita Krishnan at Conclave EDITORIAL The Story of Inclusion The Government of India’s recent policy on education has made “inclusive education” a right for students with varying learning-challenges. Therefore, significant alterations have been incorporated in the teaching, ACKNOWLEDGEMENTS learning and assessment dynamics. The voyage of Dr. Agnelo Menezes inclusion in St. Xavier’s since 1869 has evolved in stages and can figuratively be called a rhizomatic journey. Principal The terms “rhizome” and “rhizomatic” were employed by philosophers Gilles Deleuze and Félix Guattari to MAGAZINE COMMITTEE challenge notions of dualisms and binary oppositions Dr. Rashmi Lee George (Convenor) in the conception of knowledge. They posit a non- hierarchical and multitudinous approach to knowledge. Ms. S.P. Periyanayagi In India, where education was the prerogative of Dr. Pearl Pastakia a select few, St. Xavier’s embraced all. The Jesuit Dr. Shiney Peter philosophy of education has been to tenaciously share its wisdom with people from all walks including the Ms. Medha Taskar margins and peripheries. Dr. Bhagwati P. Upadhyay Although the spirit of inclusion is embedded in the Ms. Alpana Palkhiwale values of St. Xavier’s, an official support system called Dr. Aparna Talekar the Xavier’s Resource Centre for the Visually Challenged (XRCVC) was started for the first time in 2003.
    [Show full text]