{"id":1495,"date":"2020-06-27T13:06:14","date_gmt":"2020-06-27T13:06:14","guid":{"rendered":"https:\/\/sp2hari.com\/?p=1495"},"modified":"2020-06-27T13:06:16","modified_gmt":"2020-06-27T13:06:16","slug":"webassembly-101","status":"publish","type":"post","link":"https:\/\/sp2hari.com\/index.php\/2020\/06\/27\/webassembly-101\/","title":{"rendered":"WebAssembly 101"},"content":{"rendered":"\n

WebAssembly has been there for quite some time. While I understand the overall idea, I never had a chance to build anything production-ready so far. I had a chance to play around with WebAssembly during our company hackathon and one of the engineers explained in detail how WebAssembly works.<\/p>\n\n\n\n

I wanted to build something with WebAssembly and wanted that to be a real-world program instead of a simple hello world. While doing something with image processing might have been useful, I wanted something small to start with. Two-player games with computer AI seemed like a good idea and tic tac toe is felt easier to build.<\/p>\n\n\n\n

A quick search in Github for tic tac toe gave this result – https:\/\/github.com\/ryancesiel\/tictactoe-minimax\/<\/a>. While the code wasn’t the best (especially the way char board[3][3] is handled across all the functions), it was short, easy to understand & modify and didn’t give me any nightmares about compiling the code. As you can see, I have had nightmares<\/a> with simple code compilation.<\/p>\n\n\n\n

In the first version, I thought I had to export Game::minimax function and I had no clue how to expose a function under a class. So, ended up creating a simple function which called this function and had a simple name – get_next_move()<\/p>\n\n\n\n

The whole thing works like a charm. You can try to play it here https:\/\/sp2hari.com\/work\/tic-tac-toe\/<\/a>. As always, the entire code is published in my Github here at https:\/\/github.com\/sp2hari\/tic-tac-toe<\/a><\/p>\n\n\n\n

Useful Links<\/h4>\n\n\n\n

https:\/\/webassembly.org\/<\/a>
https:\/\/marcoselvatici.github.io\/WASM_tutorial\/<\/a>
https:\/\/programmer.ink\/think\/webassembly-array-passing-input.html<\/a>
<\/p>\n\n\n\n

Hacks\/Pending issues with the script<\/h4>\n\n\n\n

Issue #1 – Passing the integer array and using it in C++<\/strong> <\/p>\n\n\n\n

For some reason, the code to send the data from javascript and reading in C++ is ugly. For example, I’m passing values in the array like 88 (ASCII value of ‘X’) and 79(ASCII value of ‘O’), but in the C++ code, I’m receiving these values as 1118830592 and 1117650944. I’m guessing it is something to do with this line <\/p>\n\n\n\n

Module.HEAPF32.set(typed_gameboard, buffer >> 2)<\/pre>\n\n\n\n
But for some reason, I wasn’t able to get it right for no value. With most of the example on the internet for float arrays, I didn’t have too much time to mess with this. <\/p>\n\n\n\n
Issue #2 – Passing a 2D array of N rows and M columns, instead of a 1D array of N*M size<\/strong><\/p>\n\n\n\n
Again, I didn’t want to fight with this. So many examples from the internet were built mainly to see pass 1d array and 1 didn’t have too much time to figure this out. Especially, copy pasting a working code is more enticing instead of wrestling with unknown C++ and Javascript code. <\/p>\n\n\n\n
Issue #3 – Calling functions from a class. <\/strong><\/p>\n\n\n\n
Again, for the lack of documentation, I didn’t know how to call the functions of a class directly from Javascript. For example, if we have a function called “get_move”, we can use that in the EXPORTED_FUNCTIONS=[“_get_move”] and things worked. But if I have a function inside a class like “Game::get_move”, I had no clue how to use this function in the exported functions. <\/p>\n\n\n\n
If you have any solutions for any one of the above issues, please respond in the comments below. I’ll be forever thankful!<\/p>\n","protected":false},"excerpt":{"rendered":"
WebAssembly has been there for quite some time. While I understand the overall idea, I never had a chance to build anything production-ready so far. I had a chance to play around with WebAssembly during our company hackathon and one of the engineers explained in detail how WebAssembly works. I …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-1495","post","type-post","status-publish","format-standard","hentry","category-code"],"_links":{"self":[{"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/posts\/1495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/comments?post=1495"}],"version-history":[{"count":17,"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/posts\/1495\/revisions"}],"predecessor-version":[{"id":1520,"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/posts\/1495\/revisions\/1520"}],"wp:attachment":[{"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/media?parent=1495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/categories?post=1495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sp2hari.com\/index.php\/wp-json\/wp\/v2\/tags?post=1495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}