Last active
September 10, 2023 07:42
-
-
Save dio/ae79cf546e808a9bc46515bf9400ad5d to your computer and use it in GitHub Desktop.
This is a simpe example on embedding wasm inside an offline single html page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// this code is from a simple add function in c: | |
// | |
// // hello.c | |
// int add(int a, int b) { | |
// return a + b; | |
// } | |
// | |
// compiles it with emcc (http://webassembly.org/getting-started/developers-guide/) | |
// $ git clone https://github.com/juj/emsdk.git | |
// $ cd emsdk | |
// $ ./emsdk install latest | |
// $ ./emsdk activate latest | |
// $ source ./emsdk_env.sh --build=Release | |
// | |
// once installed: | |
// | |
// $ emcc hello.c -s ONLY_MY_CODE=1 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" -o hello.js | |
// | |
// yes, not sure why we have to add '_' in front of the exported function. | |
// take the hello.wasm and serialize it to base64, e.g. using node | |
// const code = fs.readFileSync('./hello.wasm') | |
// code.toString('base64') | |
// AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws= | |
// https://www.npmjs.com/package/base64-arraybuffer | |
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; | |
// Use a lookup table to find the index. | |
const lookup = new Uint8Array(256); | |
for (let i = 0; i < chars.length; i++) { | |
lookup[chars.charCodeAt(i)] = i; | |
} | |
function decode(base64) { | |
var bufferLength = base64.length * 0.75, | |
len = base64.length, i, p = 0, | |
encoded1, encoded2, encoded3, encoded4; | |
if (base64[base64.length - 1] === "=") { | |
bufferLength--; | |
if (base64[base64.length - 2] === "=") { | |
bufferLength--; | |
} | |
} | |
var arraybuffer = new ArrayBuffer(bufferLength), | |
bytes = new Uint8Array(arraybuffer); | |
for (i = 0; i < len; i+=4) { | |
encoded1 = lookup[base64.charCodeAt(i)]; | |
encoded2 = lookup[base64.charCodeAt(i+1)]; | |
encoded3 = lookup[base64.charCodeAt(i+2)]; | |
encoded4 = lookup[base64.charCodeAt(i+3)]; | |
bytes[p++] = (encoded1 << 2) | (encoded2 >> 4); | |
bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2); | |
bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63); | |
} | |
return arraybuffer; | |
} | |
// this is the serialized code. | |
const code = 'AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws=' | |
const buffer = decode(code) | |
// bootstrap the env. | |
const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 }) | |
const importObj = { | |
env: { | |
abortStackOverflow: () => { throw new Error('overflow'); }, | |
table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }), | |
tableBase: 0, | |
memory: memory, | |
memoryBase: 1024, | |
STACKTOP: 0, | |
STACK_MAX: memory.buffer.byteLength, | |
} | |
} | |
// instantiate | |
WebAssembly.instantiate(buffer, importObj) | |
// take a look at that _add. | |
.then(({module, instance}) => { console.log(instance.exports._add(1, 2)) }) | |
.catch((err) => { console.log(err.message) }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment