WASM Starting Point

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|699\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> WASM Starting Point
Fri, 24 Sep 2021, 05:19
Jayenkai	WASM Starting Point Gawd, it's taken me AGES to get this far.. Finding tutorials that don't just go "Now let's install Emscripten!", is insanely difficult. WASMExplorer is an online compiler, and hopefully it stays there, otherwise I'm buggered. In the leftmost settings column be sure the compiler is set to "C++ 11". Of course, you could use any of the available languages, but for now I'm not pushing any buttons in case it all fucks up!! In the second column, put your C++ code. int MultiplyBy32(int x) { return x32; } --v If you hit "Compile", you'll see it get compiled into the next column, where you can scan through to figure out what the resulting function's name is. export "_Z12MultiplyBy32i"* You can add multiple functions into the C code, but will need to keep track of their resulting names. Click the Download button, and it downloads test.wasm, which you can rename as you'd like. Then you need to load the wasm into your page. Create a test.html <!doctype html> <html> <head> <title>WASM Test</title> <script type="text/javascript"> var MyFunction; function init() { fetch("test.wasm") // Load the file // Do some converting gubbins .then(bytes => bytes.arrayBuffer()) .then(mod => WebAssembly.compile(mod)) .then(module => {return new WebAssembly.Instance(module) }) .then(instance => { // Then make simpler references to each of the exported functions MyFunction = instance.exports._Z12MultiplyBy32i; // After that, you can use the reference as if it's an actual function. el=document.getElementById("TestOutput"); out=MyFunction(1)+"</br>"; out+=MyFunction(2)+"</br>"; out+=MyFunction(3)+"</br>"; out+=MyFunction(4)+"</br>"; out+=MyFunction(5)+"</br>"; el.innerHTML=out; }); } </script> </head> <body onload="init()"> <div id="TestOutput"></div> </body> </html> --v To run it, you'll either need to upload it to a server, run it using a localhost service, or if you're like me, you can have a second version of Firefox running with the local-host security settings disabled.. Bit risky, there, though! But, yeah, it works.. And that should probably be a good enough starting point. Like I said, I've had to read through loads of tutorials to get that far. The problem isn't so much "how do I compile WASM", it's "What the hell do I do with it, after that?" and finding GOOD examples has been a right pain in the arse. -=-=- ''Load, Next List!''