CS/COE 1520 pitt.edu/~ach54/cs1520 WebAssembly WebAssembly - PowerPoint PPT Presentation

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 <emscripten/emscripten.h> to the top of our file ■ Add EMSCRIPTEN_KEEPALIVE to any function we want to export to JavaScript. Place it between the function’s return type and name ● Compile with the added flags -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall'] 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 <script src="hello.js"></script> 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