So nutzt Edge die neuen Web-Plattform-Features WebGL, Web Audio und das GamePad-API

Flight Arcade für Microsoft Edge – Flugsimulatoren re-imagined
Kommentare

Schon 1980 wurde die erste Version eines Flugsimulators veröffentlicht – und das sogar in 3D! Schon damals hatten Flugsimulatoren einen großen Einfluss auf das PC-Hardware-Ecosystem. Umso naheliegender ist die Entscheidung des Microsoft-Edge-Teams, die Plattform-Features im neuen Microsoft-Browser mithilfe einer Flug-Demo zu präsentieren.

Um die Fortschritte der Microsoft-Edge-Plattform-Features zu demonstrieren, setzt Microsoft auf eine neue Demo von Pixel Labs namens „Flight Arcade“. In einem Blogpost zeigt Jason McConnell, welche Web-Technologien dabei eingesetzt wurden und wie die Demo zustande gekommen ist.

Flight Arcade nutzt WebGL für visuelle Darstellung

Als das Entwickler-Team mit der Arbeit an Flight Arcade begann, hatte man ursprünglich gehofft, so viel von der Flight-Simulator-Experience wie möglich zu re-kreieren. Dabei musste man jedoch schnell einsehen, dass dieses Ziel ein wenig zu ehrgeizig für die zur Verfügung stehende Zeit und Ressourcen war. Letztendlich landete der Fokus also darauf, drei der neuen Plattform-Features hervorzuheben – und die können sich sehen lassen.

Flight Arcade besteht aus zahlreichen verschiedenen visuellen Komponenten. Während bei den ersten Flugsimulatoren die 3D-Visuals von Hand erstellt wurden, hat man sich für den neu erdachten Flugsimulator auf WebGL verlassen. Zum Einsatz kam dabei das 3D-Framework Babylon.JS, mit dem sich das Team auf einige High-Level-Probleme konzentrieren konnte. Dazu gehörte etwa die Gestaltung des Terrains, das Erstellen von Heightmaps und das Einbinden von verschiedenen Texturen über den einzelnen Terrain-Maps, um dem ganzen einen möglichst realistischen Look zu verpassen. Wie man dabei im Einzelnen vorgegangen ist, erklärt ein umfangreiches Tutorial zur Nutzung von WebGL in Flight Arcade.

Mehr Detailtreue bei Sound und Steuerung

Die Visuals sind allerdings nicht der einzige wichtige Aspekt des Flugsimulators, auch der Sound spielt eine große Rolle für die User Experience. Zum Einsatz kam dabei das neue WebAudio-API, das bereits im März in einer Windows-Insider-Preview für Microsoft Edge vorgestellt wurde und einige Vorteil gegenüber früheren HTML5-Lösung zur Implementierung von Audio bietet. Dazu erklärt das Entwickler-Team von Flight Arcade in einem Tutorial:

Web Audio gives you access to the raw waveform data of a sound and lets you manipulate, analyze, distort or otherwise modify it.

Was also früher nur als Playback über HTML-Audio-Tags eingebunden werden konnte, erhält mit dem WebAudio-API ein neues Level beim Sound-Erlebnis und sorgt so ebenfalls für eine deutlich realere Experience bei der Nutzung des Flugsimulators im Browser.

Um noch ein weiteres Web-Plattform-Feature zu präsentieren, hat das Team das GamePad-API genutzt und eine Helper-Klasse für andere Entwickler geschrieben, die die Button- und Achsen-Indizes ähnlich wie auf den Xbox-Controllern abbildet. Auch hierfür zeigt ein umfangreiches Tutorial, wie das GamePad-API in Flight Arcade genutzt wurde und so mehr Detailtreue bei der Steuerung des Flugsimulators hinzufügt. Mehr Behind the Scenes der Gestaltung von Flight Arcade bietet auch das folgende Video:

Eines zeigt der Flugsimulator für den Browser deutlich: Microsoft Edge muss sich dank der Implementierung dieser neuen Web-Technologien nicht hinter der Konkurrenz verstecken. Und auch dass in den nächsten Monaten noch weitere Web-Plattform-Features ihren Weg in Edge finden sollen, dürfte Microsofts Wunsch, mit seinem neuen Browser zu einem interoperableren Web beizutragen, nur unterstreichen.

Aufmacherbild: airplane cockpit von Shutterstock / Urheberrecht: oneinchpunch

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -