- Joined
- Jun 27, 2006
- Location
- Chicago, IL
Today is a play and learn day. Last month at Build 2015, Microsoft Edge was introduced using a new web app/game that reimagined the age old Flight Simulator in a web world.
Flight Arcade
What's great is that not only can you play the game, but you can learn how it was built...
Creating Realistic Terrain with WebGL
Then and Now
The first version of Flight Simulator shipped in 1980 for the Apple II and, amazingly, it was in 3D! That was a remarkable achievement. It’s even more amazing when you consider that all of the 3D was done by hand, the result of meticulous calculations and low-level pixel commands. When Bruce Atwick tackled the early versions of Flight Simulator, not only were there no 3D frameworks, but there were no frameworks at all! Those versions of the game were mostly written in assembly, just a single step away from ones and zeroes that flow through a CPU.
When we set out to reimagine Flight Simulator for the web, we couldn’t help but think about the contrast of creating 3D then and now. Modern coding seems almost luxurious as we sculpt 3D worlds in WebGL with great frameworks like Babylon.js. It lets us focus on very high level problems. In this article, we’ll share our approach to one of these fun challenges: a simple way to create realistic looking large scale terrain.
Modeling and 3D Terrain
Most 3D objects are created with modeling tools and for good reason. Creating complex objects (like an airplane or even a building) is hard to do in code. Modeling tools almost always make sense, but there are exceptions! One of those might be cases like the rolling hills of the Flight Arcade island. We ended up using a technique that we found to be simpler and possibly even more intuitive: a heightmap.
A heightmap is a way to use a regular two-dimensional image to describe the elevation relief of a surface like an island or other terrain. It’s a pretty common way to work with elevation data, not only in games but also in geographic information systems (GIS) used by cartographers and geologists.
To help you get an idea for how this works, check out the interactive heightmap below. Try drawing in the image editor and then check out the resulting terrain.
...
[Click through to read it all]
Dynamic sound with the Web Audio API
So how was this done?
VorlonJS, ManifoldJS, a new Flight Sim Arcade, asm.js from Microsoft
Today at //BUILD Day 2, Microsoft made a number of announcements regarding some tools and games they are working on for the web. Microsoft also announced that new name for our latest browser, Edge, after the new rendering engine, EdgeHTML. I liked that Spartan logo, too.
I have a video on how to set it up right here:
...
Build 2015 and ManifoldJS
I just walked offstage after another amazing build keynote. There is so much new technology that can help you build great next-generation applications. But there’s just too much to drill into in one blog post. So we take a look at each major coding demo in a series of posts – starting with this one.
Today developers who want to reach a lot of customers are faced with supporting many different devices, with different size screens, input modes and so on. Developers try to tackle these challenges using a lot of different techniques – and the choice really depends on what code you already have and what kind of app you have created. In the past couple of years at build, Guggs and I have shown using Unity, Xamarin and of course there are a number of solutions that leverage the web including Cordova, React, and the new hosted web apps we just introduced with Windows 10.
As you know, we’ve been talking about the value of Hosted Web Apps for some time now. Hosted Web Apps allow you to use your web content as the base of your Windows Store app, allowing you to keep the same workflow, content and deployment model that you use today. We’ve heard from a lot of developers that use Hosted Apps that, like the web, makes more sense when they are cross platform.
To help developers really accelerate the delivery of apps using web technologies, today I announced ManifoldJS - a new open source framework that that can take a website and create an application for Windows, iOS, Android, Chrome, and Firefox – that really simplifies creating hosted apps across platforms.
...
Build 2015 and Vorlon.js
As promised, here is the second in the series of technical articles following the Build 2015 conference. This post is dedicated to Vorlon.js. So what is Vorlon? It is a new, open source, extensible, browser-agnostic tool for remotely debugging your JavaScript all powered by node.JS and socket.io.
Yep - imagine being able to easily use any browser to debug your web site or web app running anywhere.
What we demonstrated at Build went a little further. In the keynote, I used manifold.js (see my last post for more on that) to turn a responsive web site into mobile applications. In less than a minute, I converted the web site into mobile apps for iOS, Android, Chrome, Firefox, Windows 8, and Windows 10. And on Windows 10 it is a universal Windows app that runs across Windows phone, desktop, tablet and Xbox. Doing that is very easy – and a pretty cool way to quickly create both a web site and all of the mobile apps for the most widely used platforms.
Now with Vorlon, you can debug the web site and any of these mobile apps – all remotely.
There are of course other great tools out there that offer full-featured remote web debugging. Google offers such tools for Android and Chrome. Apple and Microsoft offers tools for their browsers and apps as well. We built Vorlon.JS with node.js and socket.io so it can work anywhere – it works from any browser to any JavaScript execution environment. Right now this also means that Vorlon.js has some significant limitations compared to these other tools – for example, you can’t set breakpoints and step through code – but members of the open source team are working to add these features in the future.
...
Build 2015 and Audio Effects
We’re keeping the coding going with this third post in the series of technical articles following the Build 2015 conference. This post shows you how it is so much easier now to develop apps that have fantastic, responsive audio. The next one will focus on video.
Having great audio and video is a big deal to many developers who focus on have a cool, highly interactive user experience for their apps.
A great example of this is Muzik Official Bluetooth-connected drum sticks. This is a super cool app where you do some air drumming… those Bluetooth drum sticks, and the related C#/XAML app, were only possible because of the new Bluetooth and new low-latency audio APIs that were introduced in Windows 10.
The Build Drummer sample app that I showed uses this new AudioGraph API and its low-latency audio capabilities to show how a simple C#/XAML app can have great audio performance on Windows 10. It is available on Github here – and we know it works with Win 10 build 10074 and Visual Studio 2015 RC. Go grab it.
...
Introducing Vorlon.js: How to Use It to Debug Your Javascript Remotely
Recently at //BUILD/ 2015 we announced vorlon.js – an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. I had the opportunity to create vorlon.js with the help of some talented engineers and tech evangelists at Microsoft (the same guys that brought you http://www.babylonjs.com/).
Vorlon.js is powered by Node.js, Socket.IO, and late-night coffee. I would like to share with you why we made it, how to incorporate it into your own testing workflow, and also share some more details into the art of building a JavaScript library like it.
Why Vorlon.js?
Vorlon.js helps you remotely load, inspect, test and debug JavaScript code running on any device with a web browser. Whether it is a game console, mobile device, or even an IoT-connected refrigerator, you can remotely connect up to 50 devices and execute JavaScript on each or all of them. The idea here is that dev teams can also debug together – each person can write code and the results are visible to all. We had a simple motto in this project: No native code, no dependency on a specific browser, only JavaScript, HTML and CSS running on the devices of your choice.
Vorlon.js itself is a small web server you can run from your local machine, or install on a server for your team to access, that serves the Vorlon.js dashboard (your command center) and communicates with the remote devices. Installing the Vorlon.js client in your web site or app is as easy as adding a single script tag. It’s also extensible where devs can write plug-ins that add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.
So why the name? There are actually two reasons. The first one is because I am just crazy about Babylon 5 (the TV show). Based on this, the second reason is because the Vorlons are one of the wisest and most ancient races in the universe and thus, they are helpful as diplomats between younger races. Their helpfulness is what inspired us. For web devs, it’s still just too hard to write JavaScript that works reliably on the various devices and browsers. Vorlon.js seeks to make it just a little easier.
...
What’s Next?
Vorlon.js is built on the idea of extensibility. We encourage you to contribute! And we’re already about how we might integrate vorlon.js into browser dev tools as well as Web Audio debugging.
If you want to try it, you are just one click away: vorlonjs.com
And the more technical docs are here on our GitHub.
[Click through for the entire post]
Follow @CH9
Follow @coding4fun
Follow @gduncan411
Continue reading...
Flight Arcade
What's great is that not only can you play the game, but you can learn how it was built...
Creating Realistic Terrain with WebGL
Then and Now
The first version of Flight Simulator shipped in 1980 for the Apple II and, amazingly, it was in 3D! That was a remarkable achievement. It’s even more amazing when you consider that all of the 3D was done by hand, the result of meticulous calculations and low-level pixel commands. When Bruce Atwick tackled the early versions of Flight Simulator, not only were there no 3D frameworks, but there were no frameworks at all! Those versions of the game were mostly written in assembly, just a single step away from ones and zeroes that flow through a CPU.
When we set out to reimagine Flight Simulator for the web, we couldn’t help but think about the contrast of creating 3D then and now. Modern coding seems almost luxurious as we sculpt 3D worlds in WebGL with great frameworks like Babylon.js. It lets us focus on very high level problems. In this article, we’ll share our approach to one of these fun challenges: a simple way to create realistic looking large scale terrain.
Modeling and 3D Terrain
Most 3D objects are created with modeling tools and for good reason. Creating complex objects (like an airplane or even a building) is hard to do in code. Modeling tools almost always make sense, but there are exceptions! One of those might be cases like the rolling hills of the Flight Arcade island. We ended up using a technique that we found to be simpler and possibly even more intuitive: a heightmap.
A heightmap is a way to use a regular two-dimensional image to describe the elevation relief of a surface like an island or other terrain. It’s a pretty common way to work with elevation data, not only in games but also in geographic information systems (GIS) used by cartographers and geologists.
To help you get an idea for how this works, check out the interactive heightmap below. Try drawing in the image editor and then check out the resulting terrain.
...
[Click through to read it all]
Audio vs. Audio
Before there was the Web Audio API, HTML5 gave us the <audio> element. It might seem hard to remember now, but prior to the <audio> element, our best option for sound in a browser was a plugin! The <audio> element was, indeed, exciting but it had a pretty singular focus. It was essentially a video player without the video, good for long audio like music or a podcast, but ill-suited for the demands of gaming. We put up with (or found work arounds for): looping issues, concurrent sound limits, glitches and total lack of access to the sound data itself.
Fortunately, our patience has paid off. Where the <audio> element may have been lacking, the Web Audio API delivers. It's gives us unprecedented control over sound and it's perfect for everything from gaming to sophisticated sound editing. All this with a tidy API that's really fun to use and well supported.
Let's be a little more specific: Web Audio gives you access to the raw waveform data of a sound and lets you manipulate, anaylyze, 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!
Flight Sounds
Even the earliest versions of Flight Simulator made efforts to recreate the feeling of flight using sound and one of the most important sounds is the dynamic pitch of the engine which changes pitch with the throttle. We knew that, as we reimagined the game for the web, a static engine noise would really seem flat, so the dynamic pitch of the engine noise was an obvious candidate for Web Audio.
Try it out here:...
...
[Click through to see the entire post]
Before there was the Web Audio API, HTML5 gave us the <audio> element. It might seem hard to remember now, but prior to the <audio> element, our best option for sound in a browser was a plugin! The <audio> element was, indeed, exciting but it had a pretty singular focus. It was essentially a video player without the video, good for long audio like music or a podcast, but ill-suited for the demands of gaming. We put up with (or found work arounds for): looping issues, concurrent sound limits, glitches and total lack of access to the sound data itself.
Fortunately, our patience has paid off. Where the <audio> element may have been lacking, the Web Audio API delivers. It's gives us unprecedented control over sound and it's perfect for everything from gaming to sophisticated sound editing. All this with a tidy API that's really fun to use and well supported.
Let's be a little more specific: Web Audio gives you access to the raw waveform data of a sound and lets you manipulate, anaylyze, 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!
Flight Sounds
Even the earliest versions of Flight Simulator made efforts to recreate the feeling of flight using sound and one of the most important sounds is the dynamic pitch of the engine which changes pitch with the throttle. We knew that, as we reimagined the game for the web, a static engine noise would really seem flat, so the dynamic pitch of the engine noise was an obvious candidate for Web Audio.
Try it out here:...
...
[Click through to see the entire post]
So how was this done?
VorlonJS, ManifoldJS, a new Flight Sim Arcade, asm.js from Microsoft
Today at //BUILD Day 2, Microsoft made a number of announcements regarding some tools and games they are working on for the web. Microsoft also announced that new name for our latest browser, Edge, after the new rendering engine, EdgeHTML. I liked that Spartan logo, too.
- Flight Simulator Arcade (http://flightarcade.com) – Inspired by the original Microsoft Flight Simulator, Flight Arcade is a new web experience that will have you flying in seconds. With the latest web standard technologies – WebGL, WebAudio, GamePad API and more – it shows what’s possible on the new Microsoft Edge, the browser for doing. Yet all the code works great across browsers and devices. Learn how we made Flight Arcade at http://www.flightarcade.com/learn/. Here is a technical tear-down and video on Flight Arcade: http://flightarcade.com/learn
- ManifoldJS (http://manifoldjs.com) – The simplest way to create hosted apps across platforms and devices. manifoldJS helps you reach more users than ever by packaging your web experience as native apps across Android, iOS, and Windows. Jeff Burtoft, one of the authors behind Manifold, has a far more detailed blog post here. I also put together an in-depth tutorial on creating a Famo.us web app and converting it to mobile with ManifoldJS.
- VorlonJS (http://vorlonjs.com) – An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io. Remotely connect up to 50 devices simultaneously. Run your code on each or all of them with a single click. David Catuhe, one of the authors behind Vorlon, has a very detailed blog post on how it works.
I have a video on how to set it up right here:
...
Build 2015 and ManifoldJS
I just walked offstage after another amazing build keynote. There is so much new technology that can help you build great next-generation applications. But there’s just too much to drill into in one blog post. So we take a look at each major coding demo in a series of posts – starting with this one.
Today developers who want to reach a lot of customers are faced with supporting many different devices, with different size screens, input modes and so on. Developers try to tackle these challenges using a lot of different techniques – and the choice really depends on what code you already have and what kind of app you have created. In the past couple of years at build, Guggs and I have shown using Unity, Xamarin and of course there are a number of solutions that leverage the web including Cordova, React, and the new hosted web apps we just introduced with Windows 10.
As you know, we’ve been talking about the value of Hosted Web Apps for some time now. Hosted Web Apps allow you to use your web content as the base of your Windows Store app, allowing you to keep the same workflow, content and deployment model that you use today. We’ve heard from a lot of developers that use Hosted Apps that, like the web, makes more sense when they are cross platform.
To help developers really accelerate the delivery of apps using web technologies, today I announced ManifoldJS - a new open source framework that that can take a website and create an application for Windows, iOS, Android, Chrome, and Firefox – that really simplifies creating hosted apps across platforms.
...
As promised, here is the second in the series of technical articles following the Build 2015 conference. This post is dedicated to Vorlon.js. So what is Vorlon? It is a new, open source, extensible, browser-agnostic tool for remotely debugging your JavaScript all powered by node.JS and socket.io.
Yep - imagine being able to easily use any browser to debug your web site or web app running anywhere.
What we demonstrated at Build went a little further. In the keynote, I used manifold.js (see my last post for more on that) to turn a responsive web site into mobile applications. In less than a minute, I converted the web site into mobile apps for iOS, Android, Chrome, Firefox, Windows 8, and Windows 10. And on Windows 10 it is a universal Windows app that runs across Windows phone, desktop, tablet and Xbox. Doing that is very easy – and a pretty cool way to quickly create both a web site and all of the mobile apps for the most widely used platforms.
Now with Vorlon, you can debug the web site and any of these mobile apps – all remotely.
There are of course other great tools out there that offer full-featured remote web debugging. Google offers such tools for Android and Chrome. Apple and Microsoft offers tools for their browsers and apps as well. We built Vorlon.JS with node.js and socket.io so it can work anywhere – it works from any browser to any JavaScript execution environment. Right now this also means that Vorlon.js has some significant limitations compared to these other tools – for example, you can’t set breakpoints and step through code – but members of the open source team are working to add these features in the future.
...
We’re keeping the coding going with this third post in the series of technical articles following the Build 2015 conference. This post shows you how it is so much easier now to develop apps that have fantastic, responsive audio. The next one will focus on video.
Having great audio and video is a big deal to many developers who focus on have a cool, highly interactive user experience for their apps.
A great example of this is Muzik Official Bluetooth-connected drum sticks. This is a super cool app where you do some air drumming… those Bluetooth drum sticks, and the related C#/XAML app, were only possible because of the new Bluetooth and new low-latency audio APIs that were introduced in Windows 10.
The Build Drummer sample app that I showed uses this new AudioGraph API and its low-latency audio capabilities to show how a simple C#/XAML app can have great audio performance on Windows 10. It is available on Github here – and we know it works with Win 10 build 10074 and Visual Studio 2015 RC. Go grab it.
...
Recently at //BUILD/ 2015 we announced vorlon.js – an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. I had the opportunity to create vorlon.js with the help of some talented engineers and tech evangelists at Microsoft (the same guys that brought you http://www.babylonjs.com/).
Vorlon.js is powered by Node.js, Socket.IO, and late-night coffee. I would like to share with you why we made it, how to incorporate it into your own testing workflow, and also share some more details into the art of building a JavaScript library like it.
Why Vorlon.js?
Vorlon.js helps you remotely load, inspect, test and debug JavaScript code running on any device with a web browser. Whether it is a game console, mobile device, or even an IoT-connected refrigerator, you can remotely connect up to 50 devices and execute JavaScript on each or all of them. The idea here is that dev teams can also debug together – each person can write code and the results are visible to all. We had a simple motto in this project: No native code, no dependency on a specific browser, only JavaScript, HTML and CSS running on the devices of your choice.
Vorlon.js itself is a small web server you can run from your local machine, or install on a server for your team to access, that serves the Vorlon.js dashboard (your command center) and communicates with the remote devices. Installing the Vorlon.js client in your web site or app is as easy as adding a single script tag. It’s also extensible where devs can write plug-ins that add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.
So why the name? There are actually two reasons. The first one is because I am just crazy about Babylon 5 (the TV show). Based on this, the second reason is because the Vorlons are one of the wisest and most ancient races in the universe and thus, they are helpful as diplomats between younger races. Their helpfulness is what inspired us. For web devs, it’s still just too hard to write JavaScript that works reliably on the various devices and browsers. Vorlon.js seeks to make it just a little easier.
...
What’s Next?
Vorlon.js is built on the idea of extensibility. We encourage you to contribute! And we’re already about how we might integrate vorlon.js into browser dev tools as well as Web Audio debugging.
If you want to try it, you are just one click away: vorlonjs.com
And the more technical docs are here on our GitHub.
[Click through for the entire post]
Follow @CH9
Follow @coding4fun
Follow @gduncan411
Continue reading...
