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

CS/COE 1520

pitt.edu/~ach54/cs1520

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

WebAssembly

2

• Be fast, efficient, and portable
• Be readable and debuggable
• Keep secure
• Don't break the web

Goals

3

• 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)

WebAssembly & JavaScript

4

• 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
• therwise 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.

Key Concepts

5

• There are two ways to use WebAssembly

○ As a compilation target. Several languages are currently supported ■ C/C++ ■ Rust ■ AssemblyScript ○ Writing WebAssembly directly

Using

6

• 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

Compiling C to WebAssembly

7

• 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

Emscripten outputs for hello.c

8

• 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

• ur 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']

So everything has to go in main, right?

9

• 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]);

Module.ccall()

10

• We do not need to use the output HTML file as a starter for
• ur 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

Writing out own HTML to use Emscripten JS

11

• 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));

Writing your own JavaScript “glue” file

12

• 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))

Handwritten WebAssembly

13

• Outside the scope of this course

Text Format’s functions, data types, etc

14