This is how Microsoft went about building Flight Arcade to showcase Edge capabilities

Kareem Anderson

Image Credit: Pixel Labs
The origins of flight simulator games can be traced back some 30 plus years ago, to the Apple II and Commodore 64 days. Back then the simulators were used to lure tepid PC users into purchasing a PC for more than crunching numbers and spitting out office spreadsheets. Flight simulators were among the handful of attention-grabbing applications that helped usher in a wave of casual use cases for the early computing market.

This year, Microsoft took out time from its Build 2015 conference to showcase the company’s new browser platform features with a demo from Pixel Lab called Flight Arcade. As a flight demo, Microsoft saw Flight Arcade as a natural showcase for an impressive combined execution of 3D graphics, audio modulation and 3rd party controller input for the Edge browser. However, getting Flight Arcade on the Edge browser at Build 2015 wasn’t quite as seamless as it appeared on stage.

“When our team began development on Flight Arcade, they originally hoped to recreate as much of the Flight Simulator experience as possible, even going to the effort of accessing the original code and 3D assets. It’s fair to say that ambition far outstripped the time and resources we had to bring the demo together in time, as we realized the complexity of the original simulator code base. The original goal of the complete simulation included modelling complex factors like wind simulation, voltage drop across onboard circuits, weight and many other aspects that impact real-world flight.”

Rather than get bogged down in technicalities, the Edge team decided to zero in on three new core features that would best highlight Edges new capabilities.

WebGL

WebGL was used in the Edge browser to build out visual components for the demo. The Edge team used the web popular 3D framework to recreate varying terrain for the simulator. Bablyon.JS proved useful in building height maps and layering photo-realistic textures on top of terrain maps while maintaining stability in the Edge browser. “Babylon.js makes it easy to create a custom shader-based material. Our Blend material is relatively simple, but it really made a big difference in the appearance of the island when the plane flew low over the ground. Shaders bring the power of the GPU to the browser, expanding the types of creative effects you can apply to your 3D scenes,” according to Pixel Labs.

Image Credit: Pixel Labs

WebAudio API

Rather than using embedded HTML audio tags that offered limited audio controls, the Edge team opted to implement new HTML5 WebAudio APIs. The new APIs offer broader web audio manipulation techniques. According to the Flight Arcade team, “Web Audio gives you access to the raw waveform data of a sound and lets you manipulate, analyze, distort or otherwise modify it. It is to audio what the canvas API is to pixels. You have deep and mostly unfettered access to the sound data. It’s really powerful!”

GamePad API

The Edge team also wanted to showcase the web platform feature of GamePad API. The new API is a proposed standard of the W3C that provides a consistent API across browsers. The API also happens to add more fidelity to the flying experience. The team wrote a helper class for other interested developers that maps the button and axis indices similar to a Xbox controller. “More useful is a “mapping” property which describes the general type of gamepad. Currently, the only supported mapping is “standard” which corresponds to the controller layout used by many popular game consoles like the Xbox,” according to Pixel Labs.

While the Edge browser is a bare bones experience for many, the underlying platform appears to be solid. With a handful of iterations, additions and developer engagement, the Edge browser should offer a very competitive future for Microsoft in way that Internet Explorer couldn’t.