Cloud and Mobile

Boost your Web Application with C++! Emscripten, ASM.js, Web Assembly ...

By Philippe Leefsma (@F3lipek)

    I meant to take a look at the topic since a while but finally got time during a rainy weekend: asm.js, "an extraordinarily optimizable, low-level subset of JavaScript" and Web Assembly, "an experimental efficient low-level programming language for in-browser client-side scripting" ! 

    You can easily find lots of articles on that topic over the web, so I'm not planning to explain in details the theory... Rather than summing up again the same information from different sources, this blogpost is a deep dive from my own experience into digging how to compile a non-trivial piece of C++ into asm.js and Web Assembly (wasm). Then running them inside the browser from a custom test in order to benchmark the performances. Results are satisfying, to say the least.

    If you are ready for a sneak peek at the future of web development, keep reading!

I - Setting up the Emscripten tool chain

    The first step in the process is to setup the required tools that enable you to compile a piece of C++ into something that can be loaded into a browser. That project is called Emscripten, so the first thing you would do when opening the link, is to go to the Getting Started section and follow the instructions right? 

    Yes, but there is a trick... the standard install instructions are suitable to compile C++ into asm.js, but if you plan to compile into Web Assembly - I know you do - there is just a little difference: instead of installing the latest SDK, you need to install the incoming branch, which has BINARYEN compile option available out of the box.

    1/ Go to Emscripten SDK download page and make sure you have the prerequisite tools on your machine. The SDK runs on OSX, Windows and Linux

    2/ You will then build the SDK from source as per those instructions. You just need to instal the sdk-incoming-64bit as described in the tutorial, you do NOT need to install the master branch (no wasm support there yet - at the time of this writing)

    3/ Perform a check to see if emcc (the Emscripten compiler) is installed properly, I have it in my system path, so I can simply type emcc -v in a terminal:

    If you see something like this, then you are ready for the next thrill!

II - Back to the 90's, let's write some C++ 

    It's been a while since I hadn't written more than few lines of C++. Emscripten documentation is pretty good and the SDK comes which a bunch of samples, ranging from very basic to pretty advanced, so you probably want to go at least through the basic hello world tutorial.

    It's quite detailed, so I assume this goes smoothly on your side as well and you are now able to compile a single C++ file into asm.js, then load it into the demo web page that is produced when using the -o output.html:

./emcc tests/hello_world.c -o hello.html

 

    Almost the same emotion than the first C++ program I wrote on my PC!

    My goal here however is to write a slightly more advanced piece of code in order to compare its execution speed with plain JavaScript or we could say "human written JavaScript". A good candidate for that task that came naturally to my mind is the particle system I wrote few months ago, I already have the JavaScript ES6 version, so I just needed to write an equivalent C++ version.   

    Below is how the console test of my C++ particle system looks like. Note: it is just used to test and debug the particle system while writing it, this is not the actual test this blog is about.

    I wrote and compiled the project initially in Visual Studio 2010 (for compatibility reason with the tools), then used a tool called make-it-so that will parse the Visual Studio .sln solution and generate a make file out of it.

III - Exposing C++ classes to JavaScript

     Alright, at this step we have a C++ particle system that compiles and can run in console mode as a pure C++ application. We can compile it using the make file produced by MakeItSo - or created by hand if you fancy this kind of thing. However what we want is to be able to instantiate the ParticleSystem from our JavaScript code, so we can really leverage the speed gain from a web application mostly written in js. 

     In order to achieve that, Emscripten offers two different approaches:

1/ Embind: basically you declare the bindings between the C++ class methods and properties and the generated JavaScript objects using the EMSCRIPTEN_BINDINGS macro

2/ WebIDL Binder: you create an extra .idl file that describes the bindings, generate a .js and .cpp files by running a python script from the SDK against the idl and finally compile the project including that cpp file.

    The second option may look like like a lot of extra steps, however this is the one I chose. I felt that the main advantage is that you don't have to modify your initial C++ code by adding macro to each file and link the project to the correct emscripten C libraries, so you can keep your C++ code base intact and keep developing and testing as is. Note that this is also the approach chosen by two major Emscripten C++ ports: box2d.js and ammo.js (Bullet Physics)

     Here are the bindings definition for my project so far:

    Once the bindings are correct, you will generate the glue files by invoking a python script as follow - path will depends on your emsdk location:

python ~/emsdk/emscripten/incoming/tools/webidl_binder.py bindings.idl glue

    This produces glue.cpp and glue.js, you can then create an extra file glue_wrapper.cpp which includes the required headers and glue.cpp, you then add glue_wrapper.cpp to your makefile. This is suggested this way so if you modify your bindings in the future, you can simply re-run the python script without editing any other file in your project. Refer to WebIDL section on the official documentation for more details.

    If everything is done correctly, you should now be able to replace g++ compiler by emcc in the makefile and by running make, it will produce the byte code: ParticleSystem.bc. You can take a look at my custom makefile there. 

IV - Generating asm.js

    We are just one step away from generating asm.js: just run the following command by specifying the glue.js as post-js step, the ParticleSystem.bc from the compilation and also NO_EXIT_RUNTIME=1 option to indicate that even after main has returned, we keep the runtime alive because our JavaScript code will be running the particles. I also comment out all the test code inside the C++ main as it is irrelevant.

emcc -s NO_EXIT_RUNTIME=1 -s release/ParticleSystem.bc --post-js ParticleSystem/glue.js -o dist/asmjs/ParticleSystem.asm.js

    In my project I created the emcc-asmjs.sh script for not having to type the command every time. The output file is valid ES5 JavaScript file ParticleSystem.asm.js that can simply be included in your html using a classic <script> tag. You can take a look at the asm.js test, which is invoking the exported C++ classes, it's pretty close to the C++ code we had originally in main.cpp.

V - Generating Web Assembly

    That's the cherry on the top, by simply adding the BINARYEN=1 option - that's where using the incoming branch of Emscripten matters - you can generate wasm files!

emcc -s NO_EXIT_RUNTIME=1 -s BINARYEN=1 release/ParticleSystem.bc --post-js ParticleSystem/glue.js -o dist/wasm/ParticleSystem.js

In that case it produces several files and loading the script in your html requires a bit more trickery:

 1 <script>
 2   
 3   var Module = Module || {
 4     wasmBinaryFile: '../Emscripten/dist/wasm/ParticleSystem.wasm'
 5   }
 6 
 7   var xhr = new XMLHttpRequest()
 8   xhr.open('GET', '../Emscripten/dist/wasm/ParticleSystem.wasm', true)
 9   xhr.responseType = 'arraybuffer'
10 
11   xhr.onload = function() {
12 
13     Module.wasmBinary = xhr.response
14 
15     var script = document.createElement('script')
16     script.src = "../Emscripten/dist/wasm/ParticleSystem.js"
17     document.body.appendChild(script)
18   }
19 
20   xhr.send(null)
21 </script>

    Testing the wasm can be achieved with the exact same code than for asm.js, I only added a check on Module to see if ParticleSystem object is available as the laoding is asynchronous. It might not be the best approach but reliable enough for now...

VI - Benchmarking the code

    Finally the fun part is to compare how well asm.js and wasm perform against the plain JavaScript code, well my JavaScript code was written in ES6, so it still has to go through a build step to transpile it.

    Asm.js is plain JavaScript so any current browser should be able to load it, wasm is experimental so it has support only in Chrome Canary and Firefox Nightly at this time, with Microsoft Edge coming pretty soon. 

    I created a simple interface using jsoneditor which allows to modify the test configuration. You can tweak the time step, number of particles, number of steps, add some emitters and fields. There is no validation so if you provide invalid or missing parameters, you will probably crash the test. You can also output the particles position to the browser console with dumpParticles set to true, so don't output 10,000 particles over 10,000 steps, you may sit there for a while...

    Loading the wasm on a browser that doesn't support will use a fallback, so the code still runs but ends up being very very slow. You can give it a try but be warned. 

    That's what you can see in your browser console if it can successfully load the wasm file. In Canary it worked straight ot of the install, in Firefox Nightly I had to activate in the config flags javascript.options.wasm: true 

    I created two tests, here are the live versions: ES6 vs ASM.js and ES6 vs WASM and here is a plot of the results I gathered across several browsers, they were using the same default config 1000 particles over 5000 steps:

    Safari comes the very last as far as ES6 is concerned with a huge difference, however the asm.js executes almost the fastest on it with a 42x speed factor increase!

    Firefox Nightly is the one that executes the asm.js code the fastest with an elapsed time of 122 ms. Oddly it doesn't seem to handle wasm very well with a total time of 521 ms, so much higher in comparison

    Canary is the absolute winner of the contest with an execution speed of 121 ms for the wasm version, 12x faster than it runs ES6! However it doesn't handle asm.js as well as Firefox or Safari ...

    That's it for now! I hope you enjoyed, that was a pretty interesting experiment for me so far. The next step will be integrate my particle system asm.js and wasm versions into a Forge Viewer sample and see how much they can increase the FPS of the simulation, so I will definitely blog some more of that in the future.

    The full git project is available at https://github.com/leefsmp/Particle-System with instructions on how to build it. 

 

Liberate Your Apps! Presentation and demo recording

By Philippe Leefsma

Here are links to the cloud content the ADN team was presenting during our DevDays conferences around the world in November-December 2012.

This recording will take you through the basics steps of creating and deploying a concrete WCF web service to Microsoft Azure. This is intended to people with no or little knowledge about cloud technologies who are looking for getting started with web services.

If you are looking for more advanced and detailed material, you can also take a look at my post series “Creating a Cloud based Viewer” I to X, on that same blog.

Power Point Presentation

Code Samples

Recording

Creating a cloud based viewer – Part IX

By Philippe Leefsma

Hello Everybody! This week in adition of hosting our service on the Azure cloud, we take a closer look at the Azure API itself.

We are going to look closer at two functionalities we need to migrate our Amazon code to Azure:

- Azure Tables

- And Azure blobs

The first one allows us to store information in a database-like way, the second one is to store content.

Before starting, I strongly recommend you take a look at the Azure documentation concerning those topics:

Azure Table Services

Azure blob

And also this one as the naming for table and blobs has some restrictions that are good to keep in mind in order to avoid some unnecessary troubles…

Finally, I wanted to point out that blog article from where I extracted most of the Azure code I ‘m going to present here. I found that utility code was quite well and smartly written, I didn’t feel the need to rewrite from scratch an Azure toolkit on my own…so I have little credit for this one.

I – Using Azure Table Service

Using Azure tables is rather straightforward. Here an example on how to create a table client. I created a function able to work in both environments: local and cloud.

Oh yes, one cool thing about Azure over Amazon is that you can entirely simulate the cloud environment locally, so technically you can test your app, pretty much 100% offline before deploying on the cloud, something that isn’t doable with Amazon. I find it pretty handy:

public AzureTableHelper(string accountKeyName, bool useLocalStorage)

{

    if(useLocalStorage)

    {

        _account = CloudStorageAccount.DevelopmentStorageAccount;

    }

    else

    {

        // Retrieve storage account from connection-string

        string accountkey = CloudConfigurationManager.GetSetting(

            accountKeyName);

 

        _account = CloudStorageAccount.Parse(accountkey);

    }

 

    // Create the table client

    _tableClient = _account.CreateCloudTableClient();

 

    _tableClient.RetryPolicy = RetryPolicies.Retry(4, TimeSpan.Zero);

}

In order to insert a custom entity inside a table, it needs to derives from TableServiceEntity. An abstract class with a constructor taking two arguments: a partition key and a row key. Those properties allow to uniquely identify the entity inside our table, kind of intuitive…

Here is how to insert an entity inside a table:

public bool InsertEntity(string tableName, TableServiceEntity entity)

{

    try

    {

        TableServiceContext tableServiceContext =

            _tableClient.GetDataServiceContext();

 

        tableServiceContext.AddObject(tableName, entity);

        tableServiceContext.SaveChanges();

 

        return true;

    }

    catch (DataServiceRequestException ex)

    {

        return false;

    }

    catch (StorageClientException ex)

    {

        if (ex.StatusCode == System.Net.HttpStatusCode.NotFound)

            return false;

 

        throw;

    }

}

 

Another nice feature of the Azure API, is the ability to use LINQ to perform queries to retrieve entities from our table for example.

Below is the Azure version of my “GetDbModelInfo” server method, pretty slick:

 

public ModelInfo[] GetDbModelInfo()

{

    try

    {

        List<ModelInfo> dataList = new List<ModelInfo>();

 

        IEnumerable<TableModelInfo> infos =

            _azureTableHelper.QueryEntities<TableModelInfo>

            (_tableName).Where(e => e.PartitionKey ==

                TableModelInfo.InfoPartitionKey).

                   AsTableServiceQuery<TableModelInfo>();

 

        if (infos != null)

        {

            foreach (TableModelInfo info in infos)

            {

                dataList.Add(info.ToModelInfo());

            }

        }

 

        return dataList.ToArray();

    }

    catch(Exception ex)

    {

        return null;

    }

}

-

II – Using Azure Blob Service

-

Let’s now take a look at the blob service, this will be the equivalent of Amazon S3.

-

The client creation code is pretty much the same than the one I have for tables:

-

public AzureBlobHelper(string accountKeyName, bool useLocalStorage)

{

    if(useLocalStorage)

    {

        _account = CloudStorageAccount.DevelopmentStorageAccount;

    }

    else

    {

        // Retrieve storage account from connection-string

        string accountkey = CloudConfigurationManager.GetSetting(accountKeyName);

 

        _account = CloudStorageAccount.Parse(accountkey);

    }

 

    // Create the blob client

    _blobClient = _account.CreateCloudBlobClient();

 

    _blobClient.Timeout = new TimeSpan(0, 5, 0);

 

    _blobClient.RetryPolicy = RetryPolicies.Retry(4, TimeSpan.Zero);

}

-

The next thing we want to achieve with blobs is obviously uploading content. A blob has a limitation of 4MB, so if we want to upload bigger content, it is the responsibility of the programmer to split the data into 4MB (or less) chunks in order to perform the upload.

-

I borrowed code, (again!) from that blog in order to achieve this, and slightly enhanced it:

-

internal class BlobBlock

{

    public static readonly int BlobBlockSize = 1 * 1024 * 1024; // 4 MB

 

    public BlobBlock(string id, byte[] content)

    {

        Id = id;

        Content = content;

    }

                

    public string Id

    {

        get;

        set;

    }

 

    public byte[] Content

    {

        get;

        set;

    }

}

 

private IEnumerable<BlobBlock> GeDataBlocks(byte[] data)

{

    HashSet<BlobBlock> hashSet = new HashSet<BlobBlock>();

 

    if (data.Length == 0)

        return hashSet;

 

    int blockId = 0;

    int startIdx = 0;

    int chunkSize = BlobBlock.BlobBlockSize;

 

    while (chunkSize == BlobBlock.BlobBlockSize)

    {

        // check if it is the last loop

        if ((startIdx + chunkSize) > data.Length)

            chunkSize = data.Length - startIdx;

 

        byte[] chunk = new byte[chunkSize];

 

        Array.Copy(data, startIdx, chunk, 0, chunkSize);

 

        BlobBlock block = new BlobBlock(

            Convert.ToBase64String(System.BitConverter.GetBytes(blockId)),

            chunk);

 

        hashSet.Add(block);

 

        startIdx += chunkSize;

 

        blockId++;

    }

 

    return hashSet;

}

 

// Put (create or update) a block blob.

// Return true on success, false if unable to create, throw exception on error.

 

public bool PutBlockBlob(string containerName, string blobName, byte[] data)

{

    try

    {

        CloudBlobContainer container =

            _blobClient.GetContainerReference(containerName);

        CloudBlockBlob blob = container.GetBlockBlobReference(blobName);

 

        HashSet<string> blocklist = new HashSet<string>();

 

        foreach (BlobBlock block in GeDataBlocks(data))

        {

            using(MemoryStream ms = new MemoryStream(block.Content, true))

            {

                blob.PutBlock(block.Id, ms, null);

 

                blocklist.Add(block.Id);

            }

        }

                   

        blob.PutBlockList(blocklist);

 

        return true;

    }

    catch (StorageClientException ex)

    {

        if (ex.StatusCode == System.Net.HttpStatusCode.NotFound)

            return false;

 

        throw;

    }

}

-

Concretely my service code using those helper functions is pretty slick:

-

public byte[] GetDbModel(string modelId)

{

    try

    {

        Stream stream = null;

 

        _azureBlobHelper.GetBlob(_containerName, modelId, out stream);

 

        byte[] result = StreamToByteArray(stream);

 

        stream.Close();

        stream.Dispose();

 

        return result;

    }

    catch (Exception ex)

    {

        return null;

    }

}

-

public bool AddDbModel(RemoteModelData modelData)

{

    try

    {

        string blobName = modelData.ModelInfo.ModelId;

 

        _azureBlobHelper.PutBlockBlob(

            _containerName,

            blobName,

            modelData.Data);

 

        bool res = _azureTableHelper.InsertEntity(

            _tableName,

            new TableModelInfo(modelData.ModelInfo));

 

        //Notify callback

        //DbModelAddedNotifySubscribers(modelData.ModelInfo);

 

        return true;

    }

    catch (Exception ex)

    {

        return false;

    }

}

-

III – Handling timeouts

-

That’s it, we are done with the porting to Azure. The last thing I was facing are timeouts: by default timeouts are set to 1 minute, which in the case of large upload/download was insufficient with my connection.

-

The tricky part is that there are several places where you need to set those timeouts. They are all located in the config files: you will need to set obviously the server and client timeouts, in that case I set it to 5 minutes.

-

Here is a portion of the server config file:

-

<system.web>

   <compilation debug="true" targetFramework="4.0" />

   <httpRuntime executionTimeout="300"/>

</system.web>

 

<basicHttpBinding>

  <binding

    name="AdnCloudServicesBinding"

    transferMode="Streamed"

    messageEncoding="Mtom"

    receiveTimeout="00:05:00"

    sendTimeout="00:05:00"

    openTimeout="00:05:00"

    closeTimeout="00:05:00"

    maxBufferSize="2147483647"

    maxBufferPoolSize="2147483647"

    maxReceivedMessageSize="2147483647">

 

    <readerQuotas

      maxDepth="200"

      maxStringContentLength="2147483647"

      maxArrayLength="2147483647"

      maxBytesPerRead="2147483647"

      maxNameTableCharCount="2147483647"/>

 

   </binding>

</basicHttpBinding>

 

And the client side:

 

<?xml version="1.0"?>

<configuration>

 

    <system.serviceModel>

        <bindings>

          <basicHttpBinding>

            <binding

              name="WCFCHttpEndpoint"

              transferMode="Streamed"

              messageEncoding="Mtom"

              receiveTimeout="00:05:00"

              sendTimeout="00:05:00"

              openTimeout="00:05:00"

              closeTimeout="00:05:00"

              maxBufferSize="2147483647"

              maxBufferPoolSize="2147483647"

              maxReceivedMessageSize="2147483647">

 

              <readerQuotas

                maxDepth="200"

                maxStringContentLength="2147483647"

                maxArrayLength="2147483647"

                maxBytesPerRead="2147483647"

                maxNameTableCharCount="2147483647"/>

 

            </binding>

          </basicHttpBinding>

        </bindings>

        <client>

            <endpoint

                address=

                    "http://adncloudviewer.cloudapp.net/AdnCloudViewerSrv.svc"

                binding="basicHttpBinding"

                bindingConfiguration="WCFCHttpEndpoint"

                contract="AdnCloudViewerSrv.IAdnCloudViewerSrv"

                name="WCFCHttpEndpoint" />

 

          <endpoint address="http://127.255.0.0:82/AdnCloudViewerSrv.svc"

                    binding="basicHttpBinding" 

                    bindingConfiguration="WCFCHttpEndpoint"

                    contract="AdnCloudViewerSrv.IAdnCloudViewerSrv" 

                    name="WCFCHttpEndpointLocal" />

        </client>

    </system.serviceModel>

 

    <startup>

      <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>

    </startup>

 

</configuration>

-

We now run on Azure! All in all, I found the Azure API a bit more more complex than the Amazon one, however it appears to me much more flexible and powerful, leveraging many advantages of .Net programming that Amazon doesn’t have.

-

If you look for a detailed comparison between both, you may want to check this out, a very good blog on Azure technologies!

-

As usual, the complete sample is right there for you to have a look.

AdnCloudViewer - Azure2.zip

Interesting Google I/O Announcements

By Gopinath Taget

The Google I/O event is currently underway at San Francisco and I would have loved to be there. However, the event tickets sold out very fast and was not quick enough .

In any case several interesting announcements have been made so far like the availability chrome browser for Apple devices like the iPhone and iPad, the Nexus 7 tablet, the Nexus Q Media Player and the latest and greatest update to the Android OS code named Jelly Bean (Android 4.1). However, the most interesting announcement for me was that of the Google Compute Engine. You can read more about it here. Its not public yet and is still in a preview stage.

Up until the announcement of the compute engine, the only Google based cloud platform that allowed running custom applications on the cloud was the Google App Engine. But the App Engine was a black box. It allowed you to build “business applications”and websites using Java and Python but did not give access to the underlying software or hardware infrastructure that executed these applications. Google promised that you don’t have to worry about issues like scaling or other infrastructure issues you encounter typically for web based or network based applications. If you were OK with this lack of control, the GAE was an ideal platform for development.

With Google Compute Engine, Google tries to please the control freaks among us who pray at the alter of cloud infrastructure providers like Amazon Web Services and Windows Azure. With the compute engine Google promises greater control on scaling, performance and access to large compute clusters on Google’s Infratructure. It mainly offers access to Linux based operating systems. It also offers command-line tool as well as a rich REST based API to manage this compute infrastructure. If you have not done so already, I would suggest that you sign up for access to the limited preview of the Google Compute Engine.