With the recent availability of Visual Studio 2015 RTM came the free Visual Studio Emulator for Android. Let’s see how to test your WebGL experiences on these very fast Android emulators.

As a reminder, I’ve already explained you how to remotely debug and profile the performance of your HTML5 websites & apps on Windows Phone Next week, you’ll be able to use the same approach to debug Windows Mobile 10 and Mobile Edge with the release of the Win10 SDK Tools.

First, download Visual Studio 2015 RTM (such as the free community edition) or install the Android emulators directly without Visual Studio. Then please read this first introduction documentation: Introducing Visual Studio’s Emulator for Android which explains how this cool emulator works and what are the features supported.

WebGL testing

Once installed, you can launch the tool:

And choose the image you’re interested in:

Let’s choose “5’’ Lollipop (5.0) XXHDPI Phone – Similar to Samsung Galaxy S4” and press play. If it’s the first time you’re launching the emulator, it will configure the Hyper-V network settings for you.

Once started, launch the default installed browser and try for instance to navigate on http://www.babylonjs.com, the best available WebGL framework to date . If you try to launch one of our scenes, you’ll see that error raised:

Indeed, the default browser shipped with this Lollipop image doesn’t support WebGL. We need to install Chrome on it.

Search for a x86 version of the Chrome APK such as this one: Chrome 43.0.2357.93 (x86) and drag’n’drop the APK directly into the emulator. It should install it:

But if you’re navigating again to the same URL with Chrome, you will still have the same error. This time, this is because Chrome hasn’t enabled WebGL as the emulator is not part of his whitelist. To force it, navigate to “about:flags” and enable this option: “Override software rendering list”

You should now be able to launch one of our scenes such our famous Espilit scene: http://www.babylonjs.com/index.html?ESPILIT

25 fps on my first gen Lenovo X1 using a simple HD4000 GPU on Windows 10! Not that bad for an emulator! Obviously, you still need a real device to benchmark performances of your WebGL code.

Even better, as the emulator is perfectly supporting touch, you can also test & debug multi-touch inside your WebGL experiences. For instance, switch the camera to “Virtual joysticks camera”:

You can now move into the 3D scene using 2 of your fingers if by simply touching your PC screen:

Note: for that, we’re using Pointer Events and our HandJS polyfill to propagate those events to Touch Events as Chrome is not supporting Pointer Events yet.

On Windows Phone/Mobile, WebGL is enabled by default in IE11 and Edge. So simply launch the Windows Phone emulator and navigate to your WebGL content.

Note: Even Web Audio is supported by Chrome inside the Visual Studio emulator!. For instance, this demo works in it: http://www.babylonjs-playground.com/index.html?22

Going further with Vorlon.js

We’ve made Vorlon.js initially to simplify the life of mobile web developers. If you haven’t heard of it yet, feel free to have a look to the video on our website: http://www.vorlonjs.io and check this article: Why we made vorlon.js and how to use it to debug your JavaScript remotely

Let’s first review how to debug your layer on Android & Windows Phone emulators. For instance, I’m currently playing with Flexbox during my spare time to improve the Babylon.js website. Thanks to the Modernizr plug-in, you can see that Flexbox is supported by the emulator and you can even review the layout size via the DOM Explorer:

For instance, you see in the Android emulator (on the left) the “Mansion” flexbox item highlighted, its size is currently “172px x 112px”.

Let’s review the same site on the Windows Phone emulator (on the right):

Of course, Flexbox is also supported by IE11 Mobile and this time, the same flexbox item is currently “140px x 91px”.

Another interesting feature is the interactive console. Sometime, using WebGL, it’s hard to know why your code failed on a mobile device. This is often because the mobile’s GPU is not supporting a specific feature or because a shader doesn’t compile. This is for instance the case of our “Depth of field / end” demo. The shader is too complex for Windows Phone and you can simply verify it with our tool:

We’ve got plenty other plugins that could help you and we’re currently working in adding new one to even go further. And who knows, we will maybe have one for babylon.js in a near future.

David