CS/COE 1520 pitt.edu/~ach54/cs1520
WebAssembly WebAssembly
● WebAssembly is a low-level language that runs within the web browser with near-native performance for those tasks that demand that level of performance ○ Eg. Augmented/Virtual Reality, 3D Games, Video Editing
● Provides a compilation target for languages like C/C++
● It is being created as an open standard by the W3C WebAssembly Community Group
2 Goals
● Be fast, efficient, and portable ● Be readable and debuggable ● Keep secure ● Don't break the web
3 WebAssembly & JavaScript
● JavaScript is used to load a WebAssembly file ● JavaScript can call the functions defined in the WebAssembly file ● The WebAssembly file can call functions defined in JavaScript ● Calls between WebAssembly and JavaScript are synchronous ● Note: WebAssembly cannot directly access Web APIs (DOM, WebGL, etc)
4 Key Concepts
● Module: Represents a WebAssembly binary that has been compiled by the browser into executable machine code. ● Memory: A resizable ArrayBuffer that contains the linear array of bytes read and written by WebAssembly’s low-level memory access instructions. ● Table: A resizable typed array of references that could not otherwise be stored as raw bytes in Memory. ● Instance: A Module paired with all the state it uses at runtime including a Memory, Table, and set of imported values.
5 Using
● There are two ways to use WebAssembly ○ As a compilation target. Several languages are currently supported ■ C/C++ ■ Rust ■ AssemblyScript ○ Writing WebAssembly directly
6 Compiling C to WebAssembly
● We can compile C to WebAssembly using Emscripten ● Emscripten compiles LLVM bytecode (which we get from using clang to compile c) into WebAssembly with a JavaScript “glue” file ● The “glue” file compiles and instantiates the WebAssembly module as well as placing in any code needed to convert C libraries into Web APIs ○ Eg. OpenGL translation to WebGL
7 Emscripten outputs for hello.c
● WebAssembly (hello.wasm) and JavaScript (hello.js) ○ emcc -o hello.js hello.c ● WebAssembly (hello.wasm) and JavaScript(hello.js) and HTML (hello.html) ○ emcc -o hello.html hello.c ○ The hello.html file will show a console output as well as a canvas for any WebGL content ○ You can view this content with emrun hello.html
8 So everything has to go in main, right?
● No ● We can call C functions but we must explicitly export them ○ To do that, we need to make two changes to our source file ■ Add #include
9 Module.ccall()
● Module.ccall() will call an exported function from our C source file ● Takes 4 arguments ○ The name of the function ○ The data type of the return value ○ An array of data types representing the C functions arguments ○ An array of values to send ot the C function ● module.ccall('factorial', 'number', ['number'], [5]);
10 Writing out own HTML to use Emscripten JS
● We do not need to use the output HTML file as a starter for our Emscripten JS ● For the compiled hello.js file. Simply add to your html file before any code that will call a C function
11 Writing your own JavaScript “glue” file
● This allows you to customize what happens when the .wasm file is loaded and lets you load handwritten WebAssembly which won’t come with a “glue” file like emscripten creates. let importObjects = { imports: { log: arg => console.log(arg) } } fetch('add.wasm') .then(response => response.arrayBuffer()) .then(buffer => WebAssembly.instantiate(buffer, importObjects)) .then(({module, instance}) => instance.exports.add(x, y));
12 Handwritten WebAssembly
● WebAssembly has a textual representation of the binary that we can edit with a text editor. ● You can easily convert between the text and binary formats ● It is made up of a tree of s-expressions with each s-expression being a node of that tree ○ An s-expression is represented as a pair of parentheses surrounding a space separated list ○ The first item in the list is a label for that node ○ Subsequent items are either function arguments or child nodes
(i32.add (i32.const 3) (i32.const 3))
13 Text Format’s functions, data types, etc
● Outside the scope of this course
14