Developer

JavaScript and SIMD: How together they could bring a new class of apps to the browser

Moves are afoot to bring a swathe of new applications to the browser, from 3D game engines to computer vision software, by introducing support for Single Instruction, Multiple Data operations to JavaScript.

Google chairman Eric Schmidt once proclaimed almost all applications would be built using HTML5 - and now it seems the web browser is about to take a step closer to that ideal.

Historically, the browser has struggled to transcend its humble origins serving documents and make the move to handling the advanced graphics processing used in tasks such as games, photo-editing suites and computer vision.

Now work is taking place to bring these sophisticated graphics and signal-processing capabilities to JavaScript, the de facto scripting language for the browser.

The effort is focused on introducing support for Single Instruction, Multiple Data (SIMD) operations to JavaScript.

SIMD operations allow the same instruction to be carried out on multiple data simultaneously, which is faster than applying the same instruction to each piece of data individually.

That sort of parallelism is particularly useful when manipulating images - for instance, when adjusting the contrast of a picture, multiple pixels in the image need the same operation applied to them.

simd-example.jpg
How SIMD executes instructions against data in parallel.
Image: Intel

While programming languages such as C++ can be compiled to take advantage of SIMD-capable instruction sets in processors, JavaScript engines in popular browsers don't provide native support for SIMD processing.

However, that support appears to be headed to the browser. JavaScript is based on an official specification known as ECMAscript, a language ratified by Ecma International. The technical committee of Ecma International has backed a proposal to include a native SIMD API in a future version of ECMAscript, possibly version 7, paving the way for its support in the major browsers.

The proposed SIMD API for JavaScript was put together by Intel, Google and Mozilla, and has been shown to deliver orders of magnitude faster performance when executing certain tasks.

For instance, a Mandelbrot set generated using the SIMD API in Firefox Nightly, an experimental build of the browser, was rendered at three times the frame rate achieved when not using SIMD. The speed increase the SIMD API enables in JavaScript code is about the same as the speed-up that SIMD allows in C++, according to Intel benchmarks.

simd-speedup.jpg
The speed-up when rendering a Mandelbrot set using SIMD.
Image: Intel

simd-speedup2.jpg
Benchmarks showing the speed-up when using SIMD.
Image: Intel
A wide range of game engines, as well as image- and audio-processing and cryptographic software libraries capable of supporting sophisticated applications, could run acceptably in the browser once SIMD support becomes a reality, Intel senior principal engineer Moh Haghighat said.

"Our expectation is that it's going to have a huge impact on the web domain and bring all these classes of application into the web platform," he said.

"We look forward to libraries that are really useful in such domains as games, image processing, signal processing, video processing and what Intel calls perceptual computing, such as computer vision among others. They typically are compute-intensive. They are operating on large arrays of data, and SIMD capability is going to help those applications."

These apps and software libraries don't have to be written from scratch in JavaScript, thanks to the ability of the Emscripten compiler to port applications built using C++ to run in the browser.

Emscripten is able to take LLVM bytecode generated by compiling C++ and output it as JavaScript. It is capable of generating an optimised form of JavaScript known as ASM.js.

ASM.js is a subset of JavaScript that eschews several dynamic features of the language and in doing so allows JavaScript engines in the browser to make performance optimisations that JavaScript's dynamic nature would render impossible. ASM.js has been demonstrated running a variety of benchmarks in Firefox only 1.5 times slower than native code.

Emscripten already supports the SIMD API, generating SIMD.js code from C++ code that exploits the SIMD instruction set.

Haghighat said Emscripten had been used to port game engines with "one million lines of code" to the browser, with Unreal 3 already ported and Unreal 4 in the process of being converted.

According to Mozilla research engineer Dan Gohman, it is not just a question of porting an application to JavaScript.

"What we've found is that it's pretty easy to get that initial version with C++, to get the very first thing running but what developers typically want to do is to optimise the experience," he said.

One optimisation is disguising the large amounts of data that needs to be downloaded before some applications can run. Gohman gives the example of a browser game using the Unity engine loading in hundred of megabytes of textures. To address this issue, some developers opt to stream in assets on the fly, loading in only as much as is needed for someone to start playing.

The SIMD JavaScript API can be tested using Firefox Nightly and a custom version of the Chromium browser produced by Intel.

While SIMD support is likely to be implemented in the major browsers, it may take some time. The ECMAscript 6 specification is due for completion later this year, although some features are already supported by JavaScript engines in major browsers. However the SIMD API is targeted for inclusion in a later ECMAscript specification, possibly version 7.

The SIMD API

The proposed API introduces three new data types, each representing a vector holding multiple numbers. There is float32x4, which can store four 32-bit single-precision floating-point values, int32x4, which holds four 32-bit signed integer values, and float64x2, which holds two 64-bit floating-point values. It also creates new arrays for each of these new data types.

To create an instance of these data types, the developer calls the constructor, passing it the arguments to set each of the values.

var a = SIMD.float32x4(1.0, 2.0, 3.0, 4.0);

var b = SIMD.float32x4(5.0, 6.0, 7.0, 8.0);

The developer can then carry out a range of mathematical functions on these new data types by calling the desired method. Here the variables a and b, defined above as vectors each holding four floating-point values, are added together.

var c = SIMD.float32x4.add(a,b);

The range of functions that can be carried out on these vectors include: abs, neg, add, sub, mul, div, clamp, min, max, reciprocal, reciprocalSqrt, scale, sqrt, shuffle, lessThan, lessThanOrEqual, equal, notEqual, greaterThanOrEqual, greaterThan.

Work on the SIMD API spec is ongoing and not yet finalised.

About Nick Heath

Nick Heath is chief reporter for TechRepublic. He writes about the technology that IT decision makers need to know about, and the latest happenings in the European tech scene.

Editor's Picks

Free Newsletters, In your Inbox