M
Michael Bebenita
mbebenita.github.io · Personal blog · on HN since 2013
Michael Bebenita is a compiler and browser engineer who built WebAssembly Explorer, LLJS, and other web tools.
What HN saysCommenters recommend WasmExplorer for seeing how C/C++ compiles to WebAssembly text and x86 assembly, and use it to check compiler output.
22HN people shared it
12linked it in comments
10stories submitted
88story points
7 months agolast shared
2013people per year2026
Most-shared posts
- 1WASM Explorer: Write and Compile WebAssembly Code in the Browser14 people · 11 points · first shared 2016 · discussion on HN
- 2LLJS : Low-Level JavaScript3 people · 73 points · first shared 2013 · 53 comments on HN
- 3FoxDemo2 people · first shared 2016
- 4WebAssembly Explorer1 people · 2 points · first shared 2017 · 1 comments on HN
- 5Terminal.js1 people · 2 points · first shared 2015 · discussion on HN
- 6WasmExplorer1 people · first shared 2019
What HN people wrote when they linked it
johndough · 2022-02-24
Seems to be true. https://mbebenita.github.io/WasmExplorer/ emits i64.mul which is compiled to imul rax, rdi by firefox for the following code snippet:
#include <stdint.h>
uint64_t multiply(uint64_t a, uint64_t b)
{
return a * b;
}
pjmlp · 2017-12-13
You can already play with WASM directly in the browser.
https://wasdk.github.io/WasmFiddle/
https://mbebenita.github.io/WasmExplorer/
I prefer the explorer one.
The s-exp representation is great for doing compiler development, hence why it was chosen.
feistyio · 2013-10-23
I wish you all the best with your ambitious project ^w^
You should seriously consider employing techniques such as LLJS[1] to avoid thrashing the GC.
At the very least use typed arrays à la glMatrix[2] rather than a Vector prototype.
Typed arrays have the added benefit of interoperability with WebGL and Canvas2D via Function::apply.
---
[1] http://mbebenita.github.io/LLJS
[2] http://glmatrix.net
geofft · 2018-04-28
From playing around with https://mbebenita.github.io/WasmExplorer/ : it seems like any function you ever take the address of gets stored in the table, and wasm just passes the index in that table around. And if you do things like cast an integer to a function pointer, you actually just cast it to an index in the table.
C is high-level enough that IIRC it doesn't guarantee that arbitrary addresses can successfully be used as function pointers; the only valid function pointers are results of addresses of functions, or (possibly) values that have been cast from and then to them. Which is enough for wasm.
Try compiling this (to wat, which is an S-expression format that otherwise resembles the assembly in this article): https://wasdk.github.io/WasmFiddle/?5zbjb
callahad · 2018-01-17
There's a simple-but-useful WebAssembly Explorer at https://mbebenita.github.io/WasmExplorer/ that interactively shows the C/C++ -> WASM Text -> x86 ASM path that WebAssembly takes.
I wrote up a short article and video demonstrating it last year at https://hacks.mozilla.org/2017/03/previewing-the-webassembly-explorer/
PyComfy · 2017-12-04
https://mbebenita.github.io/WasmExplorer/
The popcnt example is nice.
lj3 · 2017-11-26
Do you mean something like this? https://mbebenita.github.io/WasmExplorer/
readittwice · 2017-06-01
AFAIK you cannot access the DOM from WebAssembly right now, although it probably will come in future versions.
But you can use the WebAssemblyExplorer https://mbebenita.github.io/WasmExplorer/: There is also a nice video about using WebAssemblyExplorer and even uses a simple WebAssembly-Module: https://www.youtube.com/watch?v=3XrGjSnPHGY&t=310s
chadnickbok · 2017-02-02
This is really cool! But the compression quality of MPEG1 is really nowhere close to h264.
If you're interested in this sorta thing, try taking a look at Broadway JS: https://github.com/mbebenita/Broadway
Here's a simple demo page they have setup: http://mbebenita.github.io/Broadway/foxDemo.html
Its entirely possible to use WebSockets to stream H264 to a browser and decode using broadway, and the performance is pretty good, even on mobile.
cpeterso · 2016-11-03
Broadway.js is Android's H.264 decoder compiled with Emscripten to JavaScript:
https://github.com/mbebenita/Broadway
http://mbebenita.github.io/Broadway/foxDemo.html
tyingq · 2021-12-17
If you're coming from web dev, I would think of it as a "foreign function interface" from javascript. You're calling a function defined in some other language. Here's a function, in WAT format (Web Assembly Text), that returns the number 42:
(module
(func (result i32)
(i32.const 42)
)
(export "testfunction" (func 0))
)
Go to https://mbebenita.github.io/WasmExplorer/ and paste that in the middle box, then click assemble, then download, and you'll have a local file called "test.wasm".
Then, since you already do web dev, get that test.wasm file and a new page accessible from a local web server. The new page should have this in it:
<script>
// should log 42 to the console
WebAssembly.instantiateStreaming(fetch('https://path/to/test.wasm')).then(prog =>
{
console.log(prog.instance.exports.testfunction());
});
</script>
Everything else is facades, layers, and tools on top of that. But that should help clear up what's at the bottom from a web-dev/js perspective. And also what the "2 halves" are. One half being, in your case, that the Rust compiles down eventually to WASM that you host somewhere. The other half being that you need to be able to call into that generated code from your JS.
icebraining · 2019-08-21
If you're distributing an executable (not a library), you can just AOT compile the generated wasm to machine code.
For example, the WasmExplorer already lets you compile C++ -> wasm -> x86 assembly: https://mbebenita.github.io/WasmExplorer/?state=%7B%22options%22%3A%7B…