The Emscripten tool is able to take just about any C/C++ source code and compile it into a .wasm module, plus the necessary JavaScript "glue" code for loading and running the module, and an HTML document to display the results of the code.
-
In a nutshell, the process works as follows:
diff --git a/files/en-us/webassembly/existing_c_to_wasm/error.png b/files/en-us/webassembly/existing_c_to_wasm/error.png new file mode 100644 index 000000000000000..fbd0425b9d3f132 Binary files /dev/null and b/files/en-us/webassembly/existing_c_to_wasm/error.png differ diff --git a/files/en-us/webassembly/existing_c_to_wasm/index.html b/files/en-us/webassembly/existing_c_to_wasm/index.html index e79dca44011c522..c1ddc2b516ce57e 100644 --- a/files/en-us/webassembly/existing_c_to_wasm/index.html +++ b/files/en-us/webassembly/existing_c_to_wasm/index.html @@ -55,7 +55,7 @@And you will see the correct version number in the output:
-
Note: libwebp returns the current version a.b.c as a hexadecimal number 0xabc. For example, v0.6.1 is encoded as 0x000601 = 1537.
@@ -158,7 +158,7 @@Depending on the size of your image, you might run into an error where wasm can't grow the memory enough to accommodate both the input and the output image:
Luckily, the solution to this problem is in the error message. You just need to add -s ALLOW_MEMORY_GROWTH=1 to your compilation command.
This will give you an output in your terminal in the following way:
-
index.html in the same directory as your wasm file (can use our simple template if you haven’t got one easily available).(module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") @@ -83,7 +83,7 @@Viewing wasm in developer tools
In Firefox 54+, the Developer Tool Debugger Panel has functionality to expose the text representation of any wasm code included in a web page. To view it, you can go to the Debugger Panel and click on the “wasm://” entry.
-+
In addition to viewing WebAssembly as text, developers are able to debug (place breakpoints, inspect the callstack, single-step, etc.) WebAssembly using the text format. See WebAssembly debugging with Firefox DevTools for a video preview.
@@ -91,7 +91,7 @@Memory
In the low-level memory model of WebAssembly, memory is represented as a contiguous range of untyped bytes called Linear Memory that are read and written by load and store instructions inside the module. In this memory model, any load or store can access any byte in the entire linear memory, which is necessary to faithfully represent C/C++ concepts like pointers.
-Unlike a native C/C++ program, however, where the available memory range spans the entire process, the memory accessible by a particular WebAssembly Instance is confined to one specific — potentially very small — range contained by a WebAssembly Memory object. This allows a single web app to use multiple independent libraries — each of which are using WebAssembly internally — to have separate memories that are fully isolated from each other. In addition, newer implementations can also create shared memories, which can be transferred between Window and Worker contexts using
+postMessage(), and used in multiple places.Unlike a native C/C++ program, however, where the available memory range spans the entire process, the memory accessible by a particular WebAssembly Instance is confined to one specific — potentially very small — range contained by a WebAssembly Memory object. This allows a single web app to use multiple independent libraries — each of which are using WebAssembly internally — to have separate memories that are fully isolated from each other. In addition, newer implementations can also create shared memories, which can be transferred between Window and Worker contexts using
postMessage(), and used in multiple places.In JavaScript, a Memory instance can be thought of as a resizable
@@ -292,7 +292,7 @@ArrayBuffer(orSharedArrayBuffer, in the case of shared memories) and, just as withArrayBuffers, a single web app can create many independent Memory objects. You can create one using the {{jsxref("WebAssembly.Memory()")}} constructor, which takes as arguments an initial size and (optionally) a maximum size and asharedproperty that states whether it is a shared memory or not.Multiplicity
You can see multiplicity in action in our Understanding text format article — see the Mutating tables and dynamic linking section.
+You can see multiplicity in action in our Understanding text format article — see the Mutating tables and dynamic linking section.
