HTML-демонстрация WebAssembly с одним файлом - PullRequest
Новая
       9

HTML-демонстрация WebAssembly с одним файлом

0 голосов
/ 01 октября 2018

Где найти простейшую демонстрацию из одного файла, показывающую использование WebAssembly в html?

Пример JavaScript прост: 

<script>
function hw() { console.log("Hello, world."); }
</script>
<button onclick="hw()">HW</button>

Есть ли аналог WebAssembly?

Я ожидаю, что он будет иметь что-то вроде жестко закодированного байтового буфера с двоичным файлом wasm, который загружается и выполняет некоторую тривиальную функцию.Вот схема того, что я ожидаю: 

<script>
function hw() { 
    var wasm_code = [255, 0, 128, ..., whatever, ...];
    var magic = give_me_wasm(wasm_code);
    var x = magic.my_add(2,2);
    console.log("2 + 2 = ", x); 
}
</script>
<button onclick="hw()">HW</button>

Можно ли сделать такую ​​демонстрацию, это простая форма, которую можно вставить в Developer Console и попробовать без установки каких-либо платформ и инструментов?

1 Ответ

0 голосов
/ 01 октября 2018

Сделано сам: 

<script>
var wasm_base64;
var wasm_buffer;
var wasm;
var wasm_instance;
function hw() {
    wasm_base64 = "AGFzbQEAAAABBwFgAnx8AXwDAgEABwoBBm15X2FkZAAACgkBBwAgACABoAs=";
    wasm_buffer = Uint8Array.from(atob(wasm_base64), c => c.charCodeAt(0)).buffer;
    WebAssembly.compile(wasm_buffer).then(x => {
        wasm = x;
        wasm_instance = new WebAssembly.Instance(wasm);
        var x = wasm_instance.exports.my_add(2,2);
        console.log("2+2 = ",x);
    });
}
</script>
<button onclick="hw()">HW</button>

Вот встроенная текстовая форма WebAssembly (q.wat): 

(module
  (type (;0;) (func (param f64 f64) (result f64)))
  (func $myadd (type 0) (param f64 f64) (result f64)
    get_local 0
    get_local 1
    f64.add)
  (export "my_add" (func $myadd))
)

Вот командные строки для создания этого буфера base64:

*Объекты 1009 *

wasm и wasm_instance можно исследовать с помощью консоли разработчика.

Проверено в Firefox 63.0b9.

...