WebAssembly in Action

Author of the book "WebAssembly in Action"
Save 40% with the code: ggallantbl
The book's original source code can be downloaded from the Manning website and GitHub. The GitHub repository includes an updated-code branch that has been adjusted to work with the latest version of Emscripten (currently version 3.1.44).

Wednesday, March 29, 2023

Safari 16.4 and WebAssembly Fixed-Width SIMD from C#

This week, Safari 16.4 was released and with it came support for WebAssembly's fixed-width SIMD feature! With this update, all modern browsers now support this feature.

As shown in the following image, WebAssembly fixed-width SIMD allows code to take advantage of hardware instructions on the device to speed up certain computations by running them in parallel.

A visual representation comparing data being processed
one element at a time with normal arithmetic (Single
Instruction, Single Data)
versus four at a time, in
this case, with SIMD


The Uno Platform allows you to write an application that works on multiple systems including in the browser thanks to WebAssembly. The Uno Platform uses .NET and the ability to target WebAssembly fixed-width SIMD was added in .NET 7.0.

I wrote the following article that walks you through creating an Uno Platform application and how to work with vectors to leverage SIMD. The article also explains how to compile your application ahead-of-time (AOT) with SIMD support: https://platform.uno/blog/safari-16-4-support-for-webassembly-fixed-width-simd-how-to-use-it-with-c/


Leveraging WebAssembly fixed-width SIMD in Blazor WebAssembly

Because the Uno Platform is using .NET, with a few slight modifications the same code can also be used in Blazor WebAssembly as well.

With both platforms, to take advantage of WebAssembly's fixed-width SIMD support, you need to AOT compile the application but there are a couple differences between how it's done with the Uno Platform versus Blazor.

For Blazor, you'll need to edit your project file and include the following tags in a PropertyGroup tag:
  • <RunAOTCompilation>true</RunAOTCompilation>
  • <WasmEnableSIMD>true</WasmEnableSIMD>

With the Uno Platform, simply adding Uno's version of the previous tags is enough to trigger the AOT process depending on if your build configuration matches that of the PropertyGroup you added them to (Release mode for example). However, with Blazor, AOT is only triggered when you publish the project.

Also with Blazor, the AOT option on the Publish dialog is on and you can't uncheck it. With Uno you need to make sure you don't check it by accident because doing so will cause an error to be thrown that can only be fixed by deleting a tag from the publish profile file.

A Blazor WebAssembly version of the code can be found here: https://github.com/cggallant/blog_post_code/tree/master/2023-March-BlazorSIMD


Demos

If you'd like to see it in action, the following links are demos built form the code in the article. Note that because these are AOT compiled, they are bigger so they may take a few seconds to download and display especially if you're on an older device or on a slower network.